I want animate the I-Frame Loading its Source Page. I partially achieved my goal by using JavaScript code goes like this
function reloadIt()
{
frm=document.getElementsByName("pagers")[0]; //we get the iframe object
frm.src=frm.src; //or you can set the src to a new src
setTimeout("reloadIt()",100000); //the function will run every 60000 miliseconds, or 60 seconds
}
and my HTMl Body code goes here
<body onload="reloadIt()">
and my IFRAME Code Goes like this
<div id="divLoading">
<div style="width:100%; height:200px; align="center">
<img src="loader.gif" alt="" align="absmiddle"/>
</div>
</div>
<div id="divFrameHolder" style="display:none">
<iframe src="lead.php" height="450px;" width="100%" name="pagers" onload="hideLoading()" > </iframe>`
</div>
and this works fine when this html page loads at first Time ,we can see loading Image in Iframe till Its source page loads. but after time interval when IFrame refreshes there is no loading image and its simply reloads its source page ... Can any body help me?
You might take a look at BlockUi, a jquery plugin. (http://jquery.malsup.com/block/#element). Try something like this:
function reloadIt() {
$("#iframeholder").block({
message: '<img src="css/ajax-loader.gif"/>',
css: { width: "600px;", height: "400px;" }
});
$('#pagers').attr('src', $('#pagers').attr("src"));
$('#iframeholder').unblock()
setTimeout("reloadIt()", 5000);
}
Related
I am running three photos in a js slideshow function, and I'm wondering if it's possible to have the first image in the slideshow display only when the side is FIRST loaded, but not when an user navigates to other pages in the site. If possible, I would like subsequent page loads to begin at the second or third image in the slideshow.
$(document).ready(function(){
$(function () {
setTimeout(playSlideShow, 6400);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 6400);
}
if (!$(currImgContainer).hasClass('secImg')) {
setTimeout(playSlideShow, 4500);
}
}
});
});
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
Storing data in the browser from previous page loads is pretty complicated and time consuming for a task like this.
Another option would be to set the carousel to display a different image based on which page it's being loaded on.
First, you can add a data attribute to a consistent element in each of your pages like this:
<body data-slideNum="2">
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
</body>
The, you can write some javascript to check that attribute on page load and set the carousel image number accordingly. Something like this:
var startingSlide = $('body').attr('data-slideNum');
Which, in this case would set 'startingSlide' equal to '2'.
Maybe you could use jQuery Cookie.
https://github.com/carhartl/jquery-cookie
On page load, check if the cookie is set, if not display the image and set it, if it is set don't do anything (assuming image is hidden by default).
Something like this:
if($.cookie('image') == undefined)
$('#image').show();
$.cookie('image', 'shown');
}
I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.
Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO
You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.
I have seen many ajax loader which shows until an iframe finishes loading.But my question is there anyway I could show an ajax loader each time the content inside the iframe loads?
Example:
If I loaded a webpage in an iframe,it shows the loader.But after it been loaded,I clicked on another link inside the iframe webpage and when the page inside the iframe is loading it should show the loader again.
Is there anyway I could do this?
Dear You can show the loaded by adding a div on parent page and create a javascript function on parent page and then call that function from iframe using parent.methodonpareentpage
Parent Page
<iframe id="iframe" src="url" style="height:600px; width:700px; display:none;"></iframe>
<div id="divIframeLoader" style="height:600px; width:700px;">
<img src="Images/loading_async_big.gif" style="position:relative; top:12%; left:40%;" />
</div>
<script type="text/javascript">
function showIframeLoader(btrue)
{
if (btrue)
{
jQuery("#divIframeLoader").show();
jQuery("#iframe").hide();
}
else {
jQuery("#divIframeLoader").hide();
jQuery("#iframe").show();
}
}
</script>
iframe page
parent.showIframeLoader(true);
Basically, I have a whole lot of these collapsing divs on one page, which have iframes inside the collapsed div. (I used css to make the clickable div look like a button.)
The problem is that it's taking a very long time for the page to load, because basically it's loading every single domain in each iframe every time the page loads.
I want to delay loading any of the iframes unless the div is clicked.
Here is my code currently:
the Javascript
jQuery(document).ready(function() {
jQuery(".cont").hide();
jQuery(".title").click(function()
{
jQuery(this).next(".cont").slideToggle(500);
});
});
the HTML
<div class="layer1">
<p class="title">test</p>
<div class="cont">
<iframe src="http://example.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example2.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example3etc.com" scrolling="no"></iframe>
</div>
still need a solution.
What about only inserting it into the DOM after the button is clicked?
jQuery(document).ready(function() {
$("cont1").click(function()
{
$("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
}
);
$("cont2").click(function()
{
$("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
}
);
});
And so on. And you could use a "remove" button to remove the html afterwards?
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?