Sometimes, when I reblog a post, it appears like this (please see the left picture in grey box with original blog name above).
In order to have the post shown as we have in the right side, I've tried to apply this workaround but it doesn't work.
Tumblr dashboard "Customize" / "Edit HTML" and pasted the following code into the editor, before the {/block:Posts} tag:
<div class="sources"> {block:ContentSource} Source: {SourceTitle} {/block:ContentSource} {block:RebloggedFrom} Via: {ReblogParentName} {/block:RebloggedFrom}</div>
In Advanced tab, Custom CSS section: .sources { filter:alpha(opacity=0); opacity:0; }
No results. Then I've tried this one pasted in HTML code:
{block:ContentSource}
<a class="post_source" href="{SourceURL}" title="Source: {SourceTitle}" target="_blank"> Source </a>
{/block:ContentSource}
In Advanced tab, Custom CSS section: .post_source { display: none }
Also, no results.
The html source code of the blog ( https://beehoowoo.tumblr.com/ ) it's the following:
<!--
Classic Theme brought to you by Atlas Designs
https://atlasdesigns.co/
Do not remove credits unless given permission to do so.
Updted July 2013 -
- new post formatting
- like/reblog buttons
- formatted text posts
- minor design tweaks
-->
<head>
<link href='https://fonts.googleapis.com/css?family=Quicksand|Raleway|PT Sans' rel='stylesheet' type='text/css'>
{block:IndexPage}
<!----- SCROLL TOP/HOME/BOTTOM A1 ---->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function () {
$('#scrlBotm').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
1500);
return false;
});
$('#scrlTop').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
1500);
return false;
});
});
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#content');
$content.masonry({itemSelector: '.entry'}),
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.entry',
loading: {
finishedMsg: '',
img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
},
bufferPx : 600,
debug : false,
},
// call masonry as a callback.
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
{/block:IndexPage}
<meta name="color:background" content="#ffffff" />
<meta name="color:text" content="#000000" />
<meta name="color:title" content="#000000" />
<meta name="color:link" content="#828282" />
<meta name="color:link hover" content="#eee" />
<meta name="color:scrollbar" content="#cccccc" />
<meta name="color:post background" content="#f0f0f0">
<meta name="if:uppercase nav links" content="1">
<meta name="if:show captions" content="0">
<meta name="if:raleway font" content="0">
<meta name="if:quicksand font" content="0">
<meta name="if:pt sans font" content="1">
<meta name="if:post animation" content="0">
<meta name="if:banner" content="0">
<meta name="text:home" content="home">
<meta name="text:archive" content="archive">
<meta name="image:background" content="" />
<meta name="image:banner" content="">
<style type="text/css">
::-webkit-scrollbar {width: 7px; height: 0px; background:{color:background};}
::-webkit-scrollbar-thumb {background: {color:scrollbar}; border-radius:10px;}
iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px; margin: 0 0 0 0; right:4px; -webkit-filter: invert(100%);}
body {
background-color: {color:background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
font-size:12px;
font-family:helvetica neue;
{block:ifptsansfont}
font-family: pt sans;
{/block:ifptsansfont}
{block:ifralewayfont}
font-family: raleway;
{/block:ifralewayfont}
{block:ifquicksandfont}
font-family: quicksand;
{/block:ifquicksandfont}
line-height:14px;
text-transform:none;
color: {color:text};
}
#sidebar{
position:fixed;
top:150px;
width:200px;
left:15px;
text-align:center;}
.blogtitle{
font-size:16px;
color: {color:title};
}
.description{
font-size:13px;
margin-top:20px;
margin-bottom:15px;
}
#nav a{
font-size:12px;
line-height:14px;
letter-spacing:1px;
text-transform:lowercase;
{block:ifuppercasenavlinks}
text-transform:uppercase;
font-size:12px;
{/block:ifuppercasenavlinks}
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.answer{
margin-top: 228px;
width:90%;
padding-top: 1%;
padding-right: 2%;
padding-bottom: 1%;
padding-left: 2%;
background:{color:post background};
}
.answer img {
max-width:250px;
height:auto;
{block:permalinkpage}
width:auto;
height:auto;
{/block:permalinkpage}
}
a {
text-decoration:none;
color:{color:link};
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
a:link, a:active, a:visited{
color: {color:link};
}
a:hover{
color: {color:link hover};
}
div#content {
width: 1064px;
margin-left:220px;
margin-top:20px;
float:left;
position: absolute;
}
.entry{
padding:0.60%;
float:left;
height:auto;
background-color: #trans;
{block:IndexPage}
width:45%;
overflow:hidden;
{/block:IndexPage}
{block:PermalinkPage}
width:650px;
height:auto;
{/block:PermalinkPage}
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
{block:ifpostanimation}
.entry:hover{
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
{/block:ifpostanimation}
.title{
font-size:17px;
line-height:17px;
font-weight:600;
color: {color:title};
}
blockquote{
padding:0px 0px 0px 3px;
margin:0px 0px 0px 2px;
border-left: 2px solid #ddd;
}
.like_and_reblog_buttons {
position:absolute;
top:1%;
left:1%;
margin-top:25px;
margin-left:-15px;
list-style: none;
opacity:0;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.entry:hover .like_and_reblog_buttons{
top:0px;
opacity:1;
-webkit-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.like_and_reblog_buttons li {
float: left;
background-color:rgba(0,0,0,.1);
border-radius:100%;
padding:10px;
height:18px;
width:18px;
}
.like_and_reblog_buttons li:first-child {
margin-right:8px;
}
.play{
position:absolute;
left:50%;
margin-left:-24px;
top:50%;
margin-top:-42px;
border:10px solid white;
height:27px;
width:27px;
border-radius:100%;
overflow:hidden;
}
.notess{
position:absolute;
left:520px;
top:14px;
height:500px;
width:450px;
overflow:scroll;
padding:10px;
background-color:{color:post background};
}
ol.notes {
list-style-type: none;
margin-top:20px;
padding:0px;
line-height:40px;
font-size:13px;
}
.notess img{
border-radius:100%;
}
.textbuttons ul{
list-style:none;
position:relative;
}
.textbuttons li {
list-style:None;
float: right;
}
.textbuttons li:first-child {
margin-left:12px;
}
.textnote{
position:absolute;
left:6%;
bottom:15px;
font-weight:700;
font-size:12px;
}
.textnote a{
font-size:11px;
color:gray;
}
.caption{
width:90%;
padding:5%;
background:#f7f7f7;
margin-top:-3px;
}
.chat li {
list-style-type:none;
margin-left:-40px;
padding:5px;
border-bottom:2px solid #dddddd;
}
.label{
font-weight:700;
font-size:11px;
}
html, body {overflow-x: hidden; }
{CustomCSS}
</style>
<title>{title}</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
</head>
<body>
<div id="sidebar">
{block:ifnotbanner}
<span class="blogtitle">{Title}</span>
{/block:ifnotbanner}
{block:ifbanner}
<img src="https://38.media.tumblr.com/avatar_d7e79ad5642b_128.png" alt="" width=96px style="border: none;"></a>
{/block:ifbanner}
<div class="description">{Description}</div>
<div id="nav">
{text:home} <br>
{text:archive} <br>
{block:HasPages}{block:Pages}{Label} <br>{/block:Pages}{/block:HasPages}
</div>
</div>
<div id="content">
{block:Posts}
<div class="entry">
{block:Text}
<div class="answer">{block:Title}<span class="title">{Title}</span>{/block:Title}{Body}
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
</div>
{/block:Text}
{block:Link}
<div class="answer"><span class="title">{Name}</span>
{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
</div>
{block:Link}
{block:Photo}{block:HighRes}{/block:HighRes}
{block:IndexPage}
<ul class="like_and_reblog_buttons">
<li>{ReblogButton color="white" size=17}</li>
<li>{LikeButton color="white" size=17}</li>
</ul>
{/block:IndexPage}
{block:IndexPage}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=100% style="border: none;" /></div>{LinkCloseTag}
{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px style="border: none;" />{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}
{block:Photoset}
<center>
{block:IndexPage}{Photoset-250}{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
</center>
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
{/block:Photoset}
{block:Quote}
<div class="answer"><div class="title">{Quote}</div>- {Source}
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
</div>
{/block:Quote}
{block:Chat}
<div class="answer">
<div style="margin-left:3px;">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
</div>
{/block:Chat}
{block:Audio}
{block:AlbumArt}
<center><img src="{AlbumArtURL}" width="100%"></center>
{/block:AlbumArt}
<div class="play">{AudioPlayerWhite}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
<ul class="like_and_reblog_buttons">
<li>{ReblogButton color="white" size=17}</li>
<li>{LikeButton color="white" size=17}</li>
</ul>
{/block:IndexPage}
{/block:Audio}
{block:Answer}
<div class="answer"><div style="font-size:11px;line-height:11px;font-style:italic;color:{color:links}"><i>{Asker} asked:</i></div><br><span class="title">{Question}</span><hr color={color:title}>{Answer}
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
</div>
{/block:Answer}
{block:Video}
{block:IndexPage}
<center>
{Video-250}</center>
{block:IndexPage}<div class="textnote">{NoteCountwithLabel}</div>
<ul class="textbuttons">
<li>{ReblogButton color="gray" size=15}</li>
<li>{LikeButton color="gray" size=15}</li>
</ul><br>
{/block:IndexPage}
{/block:IndexPage}
{block:PermalinkPage}
<center>
{Video-500}</center>
{/block:PermalinkPage}
{block:Video}
{block:PermalinkPage}
{block:HasTags} · {block:Tags} #{Tag} {/block:Tags}{/block:hasTags}
{/block:PermalinkPage}
{block:PostNotes}
<div class="notess">{block:Caption}{Caption}{/block:Caption}
{block:NoteCount}<br><span class="title">{NoteCountWithLabel}:</span>{/block:NoteCount}
<br>{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
<!----- SCROLL TOP A2 ---->
<a id="scrlTop" href="#" style="position: fixed; top: 310px; right: 10px; ">BACK</br> TO TOP</a>
</body>
</html>
Related
it's work perfect when slides first index to last but when auto loop go to last index to first index click property is not working.
<ion-slides *ngIf="slides != null" autoplay="3000" loop="true" speed="800" >
<ion-slide *ngFor="let slide of slides" >
<img [src]="slide.BannerImage">
<div class="con-box">
<h2>{{slide.BannerName}}</h2>
<br/>
<button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
</div>
</ion-slide>
</ion-slides>
#jatin devani please try this code..
replace ion-slides in place use swiper
html
<!-- Swiper -->
<swiper class="swiper-container" [config]="config" #usefulSwiper>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</swiper>
index.html
<script src="assets/js/swiper.jquery.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
.ts file
config:any;
this.config = {
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
initialSlide : 0,
slidesPerView: 1,
// paginationType: 'progress',
// pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
};
css file
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
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.
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;
}
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.