Is it possible to update the Facebook iframe height?
Here's the scenario. I have a Facebook app with PHP pages inside, but when I click the menu, it gets the previous iframe height and it doesn't automatically adjust the iframe height of the current content.
<link rel="stylesheet" href="" type="text/css" >
<style>
.nav li {
background-color: #fff;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #7b7b7b;
color:#7c7c7c;
}
li a {
text-decoration: none;
color: inherit;
}
.title {
margin:0px;
}
.navigation ul {
padding:0px;
margin:0px;
}
.logo {
margin-bottom: 10px;
padding-left: 10px;
}
.sidebar {
width:177px;
float:left;
margin-right:10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color: #515151;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #FAB101;
color:#fff;
}
.titlewrapper {
background-color: #FEFEFE;
border: 1px solid #B6CADC;
color: #BFBFBF;
font-size: 28pt;
margin-bottom: 5px;
padding: 5px 10px;
width: 768px;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; // all.js
document.getElementById('fb-root').appendChild(e);
setTimeout(sizeChangeCallback,5000);
}());
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body style="background-color:#e4e4e4;">
<div class="clearfix" style="width:1007px;margin:auto;">
<div id="tabs">
<div class="sidebar">
<div class="logo">
<img src="../images/gotodo_direct_logo.png">
</div>
<div class="navigation">
<ul class="nav">
<li id="tabs"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></li>
<li id="tabs"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></li>
<li id="tabs"><h3 class="title">Instruction</h3><i>how to install this app?</i></li>
<li id="tabs"><h3 class="title">Faq</h3> <i>frequently ask question</i></li>
</ul>
</div>
</div>
<div class="main-content" style="float:left;width:790px;height:1000px;">
<div id="tabs-1">
<div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
<div class="rooms" style="float:left;">
<?php include'../hotel.php';?>
</div>
</div>
</div>
</div>
</div>
</body>
and heres the link of my app.
Related
The task is to insert a simple modal popover as an alert for clients to be notified of a temporary relocation. On page load, a transparent background appears but the image nor the close button appears.
DATA
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
CODE
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
X
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
This seems like a fairly straightforward task but I cannot seem to resolve this issue by multiple attempts. Your help is greatly appreciated.
I have no idea about popover plugin, but i have created fiddle for this using bootstrap plugin, when the page gets opened modal will be appear with some content (You can replace it by your content).
Sample HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And JS
$(document).ready(function(){
$("#myModal").modal('show');
});
JSFIDDLE
Note: I did not included popover.js.
Hello I am using Weebly Pro and I would like to learn how to make an accordion side bar. Now it will currently open the submenus next to the menu and it makes huge mess.
this is my website:
www.exceptyebeconverted.com
I would like something more like this:
www.excatholicsforchrist.com
I need some extreme help. I have searched google and youtube for help and have not been able to understand any of it enough to help me. That is why I am here.
How could I edit this code to get the accordion effect? Do I have to change HTML as well? Does that mean I change the page layout?
<body class="wsite-theme-light short-header-page">
<div id="container">
<div id="sidebar">
{logo}
<div id="avmenu">{menu}</div>
</div>
<div id="main-wrap">
<div id="header">
<table id="header-right">
<tr>
<td>
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
<td class="search">{search}</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
<div id="banner">
<div class="wsite-header"></div>
</div>
<div id="main">
<div id="content">{content}</div>
<div id="footer">{footer}</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
/* side-nav
--------------------------------------------------------------------------------*/
#avmenu {
clear: left;
margin: 70px 0 0;
padding: 0;
}
#avmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#avmenu li {
list-style: none;
}
#avmenu li a {
font-weight: 400;
text-decoration: none;
color: #fff;
font-family: "Lato", Arial, Helvetica, sans-serif;
font-size: 15px;
display: block;
line-height: 1;
margin: 0;
padding: 10px 5px 10px 14px;
border-bottom: 1px solid #903f3f;
}
#avmenu ul > li:last-child a,
#avmenu ul > span:last-child li a {
border-bottom: none;
}
#avmenu li#active a,
#avmenu a:hover {
color: #fff;
background: #903f3f;
}
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
border-top: 1px solid #903f3f;
position: relative;
top: -1px;
}
#wsite-menus .wsite-menu li a {
padding: 8px;
background: #903f3f;
border: none;
border-bottom: 1px solid #bd5353;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #723131;
}
Try following this:
https://www.youtube.com/watch?v=gLy3vaIhyKA
Also, since this is using JQuery, there are other JQuery based accordion widgets you can use, like https://jqueryui.com/accordion/ and http://www.jqueryrain.com/example/jquery-accordion/
I'm struggling with how to click the 'Submit' button on an HTML form using code. I seem to be able to set the variables - Name, Email etc - using the HTTPSocket but when the socket 'Posts' it doesn't trigger the submit.
Any help will be gratefully received
Cheers,
Alan McTavish ...
RB 2008 r1 ... no plugins please.
Hi again,
The code I am using is the example given with the software - HTTP Example.rbp. It reads the website code and asks me to give the values for the input fields in the HTML. However, the form doesn't seem to be submitted.
The HTML on the server is as follows:
<!DOCTYPE html><!-- HTML5 -->
<html lang="en" dir="ltr">
<head>
<title>ActivationNoted - Infosoft</title>
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]-->
<meta name="author" content="Ian Shere" />
<meta name="generator" content="Incomedia WebSite X5 Professional 10.1.0.39 - www.websitex5.com" />
<meta name="viewport" content="width=774" />
<link rel="icon" href="favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="pcss/activationnoted.css" media="screen" />
<script type="text/javascript" src="res/jquery.js?39"></script>
<script type="text/javascript" src="res/x5engine.js?39"></script>
</head>
<body>
<div id="imHeaderBg"></div>
<div id="imFooterBg"></div>
<div id="imPage">
<div id="imHeader">
<h1 class="imHidden">ActivationNoted - Infosoft</h1>
</div>
<a class="imHidden" href="#imGoToCont" title="Skip the main menu">Go to content</a>
<a id="imGoToMenu"></a><p class="imHidden">Main menu:</p>
<div id="imMnMn" class="auto">
<ul class="auto">
<li id="imMnMnNode0">
<a href="index.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Home Page</span>
</span>
</a>
</li><li id="imMnMnNode11">
<a href="features-of-footware.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Features of footware</span>
</span>
</a>
</li><li id="imMnMnNode12">
<a href="download.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Download</span>
</span>
</a>
</li><li id="imMnMnNode14">
<a href="support.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Support</span>
</span>
</a>
</li><li id="imMnMnNode3">
<a href="contact-us.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Contact Us</span>
</span>
</a>
</li>
</ul>
</div>
<div id="imContentGraphics"></div>
<div id="imContent">
<a id="imGoToCont"></a>
<h2 id="imPgTitle">ActivationNoted</h2>
<div style="width: 754px; float: left;">
<div style="float: left; width: 377px;">
<div id="imCell_1" class="imGrid[0, 0]"><div id="imCellStyleGraphics_1"></div><div id="imCellStyle_1"><form id="imObjectForm_1" action="imemail/imEmailForm_160xo79k.php" method="post" enctype="multipart/form-data" style="width: 365px; margin: 0; padding: 0; text-align: left;">
<fieldset class="first">
<div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_1" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Name</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_1" name="imObjectForm_1_1" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_2" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">E-mail</label><br /><input type="text" class="valEmail" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_2" name="imObjectForm_1_2" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_3" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_3" name="imObjectForm_1_3" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_4" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address2</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_4" name="imObjectForm_1_4" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_5" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address3</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_5" name="imObjectForm_1_5" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_6" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address4</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_6" name="imObjectForm_1_6" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_7" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Activation Key issued</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_7" name="imObjectForm_1_7" /></div>
</div>
</fieldset>
<fieldset>
<input type="text" id="imObjectForm_1_prot" name="imSpProt" />
</fieldset>
<div style="width: 365px; text-align: center;">
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</div>
</form>
<script>x5engine.boot.push('x5engine.imForm.initForm(\'#imObjectForm_1\', false, {type: \'tip\', showAll: true, classes: \'validator\', landingPage: \'index.html\', labelColor: \'#000000\', fieldColor: \'#000000\', selectedFieldColor: \'#000000\'})');</script>
</div></div>
</div>
<div style="float: left; width: 377px;">
<div style="height: 435px;"> </div>
</div>
</div>
<div style="width: 754px; float: left;">
<div style="height: 15px;"> </div>
</div>
<div id="imFooPad" style="height: 0px; float: left;"> </div><div id="imBtMn">Home Page | Features of footware | Download | Support | Contact Us | General Site Map</div>
<div class="imClear"></div>
</div>
<div id="imFooter">
<div onclick="x5engine.utils.location('copyright-notice.html'); return false;" style="position: absolute; top: 22px; left: 393px; width: 54px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('terms-and-conditions-of-use.html'); return false;" style="position: absolute; top: 22px; left: 468px; width: 113px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('privacy-policy.html'); return false;" style="position: absolute; top: 22px; left: 597px; width: 76px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('disclaimer.html'); return false;" style="position: absolute; top: 22px; left: 688px; width: 59px; height: 16px; cursor: pointer;"></div>
</div>
</div>
<span class="imHidden">Back to content | Back to main menu</span>
</body>
</html>
I emphasise that this is not my code.
I wonder if I need to get my friend to use a different setup on the website. Perhaps some PHP or whatever.
As always, any help gratefully received.
Alan ...
Sometimes the site you are sending post, do not accept "robots" doing this, like Facebook, for example.
Did you tried to send the post like this:
Dim sock As New HTTPSocket
Dim d As New Dictionary
dim r as string
d.Value("idA") = "xpto"
d.Value("idB") = "xzy"
d.Value("idC") = "abc"
sock.SetFormData(d)
r = sock.Post("imemail/imEmailForm_160xo79k.php", 30)
blog: http://mattdomchristom.tumblr.com
As you can see, when you scroll down, the navigation bar at the top follows and it's annoying. How can I just make it stay at the top of the page?
This is my HTML:
<head>
<!--Default Variables-->
<!--Colors-->
<meta name="color:Background" content="#000"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Post Title" content="#1C1C1C"/>
<meta name="color:Link" content="#8B7D7B"/>
<meta name="color:Link Hover" content="#d8d8d8"/>
<meta name="color:Blog Title" content="#8b0000"/>
<meta name="color:Links Text" content="#e7e7e7"/>
<meta name="color:Links Hover" content="#fff"/>
<meta name="color:Ask Background" content="#838b8b"/>
<!--Images-->
<meta name="image:Background" content""/>
<meta name="image:Sidebar" content=""/>
<!--Options-->
<meta name="if:Infinite Scrolling" content=""/>
<meta name="if:Pagination" content=""/>
<meta name="if:Glitterati Cursor" content=""/>
<meta name="if:Tiny Scrollbar" content=""/>
<meta name="if:Box shadows" content=""/>
<meta name="if:Ask" content=""/>
<meta name="if:Archive" content=""/>
<meta name= "if:Link 1" content="link1"/>
<meta name= "if:Link 2" content="link2"/>
<meta name= "if:Link 3" content="link3"/>
<meta name= "if:Link 4" content="link4"/>
<!--Links-->
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 1 name" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 2 name" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 3 name" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 4 name" content=""/>
{block:Description}
<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>
{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
{block:ifinfinitescrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling}
</style>
<style type="text/css">
{block:ifGlitteraticursor}
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m10gu8MJ7Z1r869vr.gif), progress;}{/block:ifGlitteraticursor}
{block:iftinyscrollbar}
::-webkit-scrollbar {width: 8px; height: 9px; background :#fff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 0ex; border: 0px #D4D8DB;}
{/block:iftinyscrollbar}
body{
background-color: {color:Background};
background-image: url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
font-family: helvetica;
font-size: 14px;
line-height: 14px;
letter -spacing:0px;
color:{color:Text};
text-align:justify;
}
a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
}
a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#container {
margin:auto;
position:right;
width:1200px;
color: {color:Title};
_margin-left:10%;
}
#content {
float:center;
width:508px;
padding: 2px;
margin-top: 25px;
margin-left: 300px;
background: clear;
}
#entry {
margin-top:15px;
padding:3px;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
{block:ifboxborders}
border: 1px solid black;
{/block:ifboxborders}
}
#entry img{
{block:IndexPage}max-width:500px;{/block:IndexPage}
}
#side {
position:fixed !important;
width: 220px;
height: auto;
margin-top: 40px;
margin-left: 500px ;
padding: 2px ;
font-size: 13px;
text-transform: lowercase;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
}
#side2 {
position:fixed !important;
width: 753px;
height: 30px;
text-transform: uppercase;
font-size: 13px;
background-color:black;
opacity: .8;
margin-top: -20px;
margin-left: -30px ;
padding: 2px ;
}
.navigate a{
color: {color:Links Text};
display:block;
width: 85px;
height: 15px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
margin-left: 0px;
margin-top: 2px;
position: relative;
text-align: center;
z-index: 999;
font-family: helvetica;
font-size: 14px;
display: inline-block;
}
.navigate a:hover{
color: {color:Links Hover};
text-decoration: none;
}
.permalink{
display: block;
padding:1px;
margin-top:0px;
margin-bottom:4px;
font-size: 11px;
text-align: center;
text-transform: uppercase;
}
.blogtitle{
text-transform: uppercase;
font-size: 22px;
line-height: 22px;
color: {color:Blog Title};
}
.posttitle{
font-size: 17px;
line-height: 12px;
text-transform: uppercase;
color: {color:Post Title};
letter-spacing: 1;
font-weight: none;
}
blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 1px;
border-left: 1px solid {color:Text};}
blockquote p, ul{margin:0px; padding:0px;
}
.chat .line{
margin: 0 0 0px;
padding: 2px;
}
.chat .line.odd{
}
.label {font-weight:bold; color:{color:text}}
.question {
color:{color:Text};
font-size: 10px;
font-weight: normal;
line-height:95%;
background: {color:Ask Background};
margin: 0 0 10px 0;
padding: 10px 15px;
position: relative;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.questionarrow {
width: 13px;
height: 7px;
font-size:30px;
position: absolute;
color:{color:Ask Background};
bottom: -3.5px;
left: 260px;
}
.asker {width:500px; text-align:left; color:{color:Text};font-family: silkscreen;font-size: 9px;}
.asker a {color:{color:Text};}
.asker img {float:left; margin-left:220px; vertical-align:top; margin-right:3px; max-height:15px;}
a img{border: 0px;}
.p { padding-top: 5px; }
.ol, ul { margin-left: 10px; padding: 5px; }
.ul { list-style-type: square; }
.albumart { margin-bottom: 0px; }
.albumart img, .audio embed { width: 60px; }
.video embed, .post div.video object {width:250px !important; height:187px !important;}
.notes img{width:10px; position:left; top:3px;}
.tags {
width:auto;
solid {color:Links};
font-size: 10px;
text-transform:uppercase;
color:{color:link};
padding:2px;
line-height:1;
margin-left:1px;
}
.tags a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#pages {
float: center;
width: 753px;
height: 22px;
text-transform: uppercase;
font-size: 14px;
color: {color:Link};
background-color: white;
opacity: .6;
margin-top: 10px;
margin-left: 300px ;
padding: 2px;
padding-top: 6px;
}
{font-size: 100%;}
{CustomCSS}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
{block:ifinfinitescrolling}<style>#toTop {display:none;text-decoration:none;position:fixed;bottom:20px;right:20px;overflow:hidden;width:30px;height:40px;border:none;text-indent:-999px;background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;z-index:3000;}#toTopHover {background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px;
width:30px;height:40px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#toTop:active, #toTop:focus {outline:none;}#toTop:active, #toTop:focus {outline:none;}</style>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>{/block:ifinfinitescrolling}
</head>
<body>
<div id="container">
<div id="content">
<div id="side2">
<div class="navigate">
<a href="/" >home</a>
{block:ifAsk}
<a href="/ask" >message</a>
{/block:ifAsk}
{block:iflink1}
{text:Link 1 name}
{/block:iflink1}
{block:iflink2}
{text:Link 2 name}
{/block:iflink2}
{block:iflink3}
{text:Link 3 name}
{/block:iflink3}
{block:iflink4}
{text:Link 4 name}
{/block:iflink4}
<a href="/archive" >archive</a>
<a href="http://sociallyawkwardgiraffe.tumblr.com/" >Theme</a>
</div>
</div>
</center>
<div id="side">
<center>
<div class="blogtitle">{Title}</div>
</center>
<br>
<img src="{image:sidebar}" width=220px>
{Description}
</div>
</div>
</div>
<div id="content">
{block:Posts}
<div id="entry">
<center>
{block:IndexPage}
<div class="permalink" style="letter-spacing:1px;"><l> {Month} {DayOfMonth}, {Year} • {NoteCountWithLabel} • Reblog</l>
</div>
{/block:IndexPage}
</center>
{block:Text}
{block:Title}<span class="posttitle">{Title}</span>
{/block:Title}<span class="entrytext">{Body}</span>
{/block:text}
{block:Link}
{Name}{block:Description}{Description}{/block:Description}
{/block:link}
{block:Photo}
{LinkOpenTag}
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
{block:Quote}
<span class="title">{Quote}</span>
{block:Source}<i> - {Source}</i>{/block:Source}<br>
{block:Caption}{Caption}{/block:Caption}
{/block:Quote}
{block:Chat}
{block:title}<div id="posttitle"><center>{Title}<br></center></div>
{/block:title}<div class="chat">
{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}">
{block:Label}<span class="label"><b>{Label}</b></span>
{/block:Label}{Line}</div>
</div></div>{/block:Lines}</div>{/block:Chat}
{block:Audio}
{block:albumart}<div class="albumart"><img src="{albumarturl}" align="left"></div>
{/block:albumart}<div style="width: 310px; height: 20px;">
{AudioPlayerblack}</div><BR>{block:TrackName}<span><strong>Title</strong>:
{TrackName}</span>{/block:TrackName}<br>
{block:Artist}<span><strong>Artist:</strong>
{Artist}</span>{/block:Artist}<br>
{/block:Audio}
{block:Video}<center>{Video-500}<BR>
</center>{block:Caption}{Caption}{/block:Caption}{/block:Video}
{block:Answer}
<div class="question">
<div class="questionarrow">▼</div>
{Question}
</div>
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
<div class="answer">{Answer}</div>
{/block:answer}
{block:HasTags}<div class="tags"> tags: {block:Tags}#{Tag} {/block:Tags}</div>{/block:HasTags}
</center>
{block:PostNotes}{PostNotes}
{/block:PostNotes}</div>{/block:Posts}
</center>
</div>
<div id="pages">
{block:ifpagination}
<center>
{block:PreviousPage}←{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}→
{/block:NextPage}
{/block:ifpagination}
<center>
</center>
</div>
</div></div>
</div>
</body>
</html>
In the Custom CSS box in your customization screen, enter the following:
#side2 {
position: relative!important;
}
It would be great if someone can help me with this.
I am developing a site(ww.xyz.com) in PHP and have successfully integrated the "Login with Facebook" button on the index page of this site. I have tested it and it is working fine.
This site apart from a "Login with Facebook" button also has it's own login form through which already registered users can login to this site. Once the user logs in through this login form(not login with Facebook option) a session is started and the user is taken to another page where his profile details(like first name, last name, email address etc.) are displayed.
Now with the "Login with Facebook" Button I want to do a similar functionality. Where once a user is authenticated via facebook account following two steps should happen.
Step 1. He or She should be taken to the same page to which users are taken to if they login via the website's own login form by openning an appropriate session. In this page the users data(like picture, firstname, lastname etc.) should be displayed.
Step
Step 2. Collect this data(picture, firstname, lastname etc.) sent by facebook connect and store it in my MYSQL Database.
For your refernce below is the code for the index.html page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XYZ Index</title>
<style type="text/css">
<!--
.ptour_crtbtn { BORDER-BOTTOM: #ccc 1px outset; MIN-WIDTH: 100px; TEXT-
ALIGN: center; BORDER-LEFT: #ccc 1px outset; PADDING-BOTTOM: 4px; PADDING-LEFT:
2px; PADDING-RIGHT: 2px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR:
#fff; BORDER-TOP: #ccc 1px outset; CURSOR: pointer; BORDER-RIGHT: #ccc 1px outset;
PADDING-TOP: 5px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style1 {color: #0000FF}
#content { BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; PADDING-
BOTTOM: 12px; BACKGROUND-COLOR: #fff; MARGIN: 0px auto; PADDING-LEFT: 20px; WIDTH:
350px; PADDING-RIGHT: 20px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid;
PADDING-TOP: 20px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style3 {color: #0000FF; font-weight: bold; }
.style5 {
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style7 {color: #0000FF; font-family: Geneva, Arial, Helvetica, sans-serif; }
.style8 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<p><img src="./images/header.JPG" width="1266" height="127" alt="header" /></p>
<p> </p>
<p> </p>
<div id="content">
<h1 class="style1">Login Form:</h1>
<form method="post" action="Login.php">
<p>
<label style="DISPLAY: block"><span class="style3">Email:</span></label>
<input class="text"
name="username" />
</p>
<p>
<label style="DISPLAY: block"><span class="style3">Password:</span></label>
<input class="text"
type="password" name="password" />
'</p>
<p><a href="http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html#">Forgot
password?</a></p>
<p>
<button class="ptour_crtbtn" name="login" type="submit"><span
class="style1"><strong>Talk</strong></span><strong>i</strong>n</button>
</p>
<pre><span class="style5">OR</span><span class="style8"><script
src="http://connect.facebook.net/en_US/all.js"></script><script>
FB.init({
appId:'XXXXX',
cookie:true,
status:true,
xfbml:true
});
</script></span>
<fb:login-button onlogin="alert('Authenticated!');"><div align="left">Login with
Facebook</div></fb:login-button></p>
</p>
</pre>
</form>
</body>
</html>