I am using the a slider to display some WordPress posts. When I open the page, it hangs for some seconds (time varies) during that time, the layout breaks (for example all posts in slider become visible instead of first post), but as soon the page loads every thing gets back to normal.
I think this is because the jQuery code loads late. Is there anything I can do about that?
I'm currenly using this:
jQuery(document).ready(function() {
jQuery("#foo1").carouFredSel();
});
Also how can I check with the Firebug that what is causing this? (which resource is taking time to load), because it happens so quickly that I don't get time to see on Firebug.
you can hide it and make its display:none . till it loads then show it
<script>
jQuery(document).ready(function() {
jQuery("#foo1").carouFredSel();
jQuery("#foo1").show();
});
</script>
<div id="foo1" style="display:none"></div>
Firebug has a net panel that will allow you to view requests/responses made and received by the browser.
I'm assuming that it is most likely not jQuery. After you visit the site a few times it should be in your cache.
Related
I am having trouble making a tab active when loading the page. This is the page: http://copy.ateo.dk/kollekolle/
The tabs are the ones in the top, called "Billeder" and "Kort". Every so often, when the page loads, it will not make the first tab active, and just show the content of the two tabs on top of each other.
Here is the JS fiddle - however this does not show the error, but the code can be seen here:
http://jsfiddle.net/eromreve/QgD6N/
<?php echo $somecodehere or it wont let me submit jsfiddle ?>
The error only occurs maybe about 50% of the time.
Best Regards,
Patrick
The believe at some cases the JavaScript executes before the document load. The JavaScript that is responsible for activating the Tab it needs to be wrapped with Document Ready.
$(function() {
//Code that is responsible for making the tab active/inactive
});
Let me know how it goes.
How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated
Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.
<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>
This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.
I am using the JS Facebook Graph API and want to load a friends list with profile pictures and this takes a few seconds if there are a lot of friends. I want to display a loading div, and once everything is loaded I want to hide the loading div and show the friendliest. I am using JQuery's $(window).load function, but it does not seem to work, the loading div does not show, but still shows content rendering. I think this may be because I'm making the Facebook request in the middle of my page, so the browser might think at the beginning everything is loaded, but have no idea how to fix this.
Put your whole page in a <div style="display:none;"> or simply set the <body style="display:none;"> then change it to :block (using jQuery.show() will work) once you have received the data you are requesting from Facebook.
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?