I have a problem and it's giving me headaches since I started looking for it yesterday.
I have a couple of jQuery scripts and my page includes .load jQuery ajax (at the bottom of the page).
I use a hover effect for the images and a fixed position of the header that is located in js/tools.js
The problem is that, randomly my browsers won't load the tools.js into the ajax. So sometimes you don't see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.
My first bet was that the scripts I use collide or that there's a problem with the order in which the content or the .js loads.
js:
$(document).ready(function() {
$('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(400, 0);
});
});
});
$(function(){
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
html:
<!-- portfolio -->
<div id="portfoliowrapper">
<div id="portfolioitems"></div>
<script>$("#portfolioitems").load("werk.html #portfolio");</script>
<div class="clear"></div>
<h2 class="btn">Werk</h2>
</div>
Any ideas? Thanks in advance!
You need to show some code, you can't expect us to dig through your site.
It's very likely that you're using
$(function(){
// code that depends on images being loaded here
});
However, that will not wait for the images to load, it only waits until the DOM is ready to be modified. The event that waits for images is the load event of the window.
$(window).load(function(){
// here all images in the HTML are guaranteed to be loaded
});
The second time your page is run, the images are in the cache and they are already loaded when the DOM is ready, that is from your $(document).ready() handler
The issue is here:
$("#portfolio").offset() is null
Line 33
According to Firebug. Looks like you are trying to call a function before the page has been completely rendered, this is causing an error as it cannot calculate the offset and it breaks the rest of the function.
Related
I'm using this jquery function to scroll into a div coming from a link at the index; when I execute the action (clicking on the link to go to the secondary page) and the scroll is executed, it works but not with the right 'scrollTop' measurement.
I realize that it works correctly until I reload the page. I do not know if I'm using the correct function.
var locationString = window.location.hash;
var headerHeight = -70;
$(document).ready(function(){
var divLoc = $(locationString).offset();
console.log(locationString, divLoc.top , divLoc.top + headerHeight);
$('html, body').animate({scrollTop: divLoc.top + headerHeight}, "slow");
});
The most common cause is the miss understanding of two event related to the page load: $(document).ready() (all elements of the DOM are ready to query/modify or whatever) and $(window).load() (all the images and related css are ready and the page will be rendered and will be fully displayed by the browser).
If you use $(document).ready() to apply actions that need all the page to be loaded for correctly display all the sizing, it will fail, because the images are not loaded yet so the vertical offsets (as in your case) may not be correctly computed.
So you need to use $(window).load() instead, so when you scroll to the element you will ensure that the page is fully rendered an all the elements will be placed as they should be.
Hope it helps.
I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!
You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});
You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});
Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})
I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}
My current solution gets some content via AJAX, Inserts it into a DIV then hides it and fade it in.
The issue with that is the content contains images and an iframe, The solutions flickers and the fadeIn doesn't look smooth.
What i'd like to do is to only fadeIn after the iframe and pictures are fully loaded.
How to do that?
This will wait until all child content has finished loading:
$("#wrapperDivID").load(function (){
// do something, e.g.
$(this).fadeIn();
});
See .load().
In your specific case the following should work:
$('#content').load('/echo/html/',data, function() {
alert('fired');
});
I would change the duration for fadeIn so that it will take little long.
$("#content").load("getform.php"), function() {
$(this).fadeIn(1500); // or another bigger number based on your load time
});
If you know what all images are going to be in the page, Preload all those images in the page where you have the div "content", so that you will save some loading time.
If you use $.ajax to get the HTML you can wrap the resulting HTML like below:
$.ajax('some/path/to.html',{
'success':function(html){
var result = $(html).load(function(){
$('#content').fadeIn()
});
$('#content').html(result);
}
});
jsfiddle example
another way you can do this:
$( "#content" ).fadeOut(200, function() {
$(this).load( url, function() {
$(this).fadeIn(200);
});
});
change the fadeIn and Out times to whatever is good for you.
I'm building this hotsite that relies heavily on 'heavy' images and animations.
It has some "Curtains" covering all the site, then i want to open these curtains (animate, already coded it), but only when all my site (specially images) is loaded.
Would also like to create a simple loader (no progress at all, just say "loading");
UPDATE:
$.ready(function() {
$("#loading").fadeOut();
$(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
$(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);
$(".leftback").stop().animate({ width: '60px' }, 6500);
$(".rightback").stop().animate({ width: '60px' }, 6500);
});
Using
window.onload = function() {
// initialize site
};
Will work. It fires once everything embedded into the site (HTML, CSS, images...) has finished loading.
You will then need to hide your website content while it loads. If you place everything within a DIV, you can toggle the visibility of it with "visibility: hidden". You should not use "display: none", as with some browsers (if I can remember correctly, Opera), they won't load content that has no display value.
You should then be able to place a DIV containing your "Loading" content at the top of the page, then simply either toggle off the display of it, or remove it from the DOM once the page is loaded.
As a side note, you should not use the jQuery.ready() function, as pointed out by RobG, as this only waits for the DOM to load, and not the images.
try combining jQuery`s ready and load
$(document).ready(function()
{
var images = $('img');
var loadedImgs = [];
images.each(function()
{
$(this).load(function() //image load callback
{
loadedImgs.push('');
});
// we are interested only if the images is loaded,
// so we need to place something in the loadedImgs array;
});
var interval = setInterval(function()
{
if(loadedImg.length == loadedImgs.length)
{
clearInterval(interval);
//your code here ... images were loaded !!!
}
},10);
});
Put your handlers inside window.load. This is triggered only after the page is fully loaded, including graphics.
$(window).load()
Use Prototype's Event.observe like
Event.observe(window, 'load', function()
{
//add javascript script tags to the document here
}
Function in Event.observe will be called only after all the images in the DOM are loaded.
Just use:
window.onload = function(){
// javascript code will be executed only after the whole dom is loaded
}
With Jquery:
$.ready(function(){
// some code
});