JQuery :: Loading Before Dom = Ready - Best Practices.
Apr 23, 2009
While virtually every site in existence trumpets using the jQuery DOM- ready shortcut as an absolute must, I've come across situations which I feel frustrate the user, particularly when using jQuery to create a navigational element. I often work on sites which are going to have a lot of external content (ads, feeds, analytics), and if even one of them is sluggish to load, none of my interactive elements are responsive for that time. There seem to be three options:
1] liveQuery (disadvantage: overhead)
2] popping a loading message over the whole page (disadvantage:
ridiculous)
3] nesting an image inside the portion of the DOM we need, and using
an onLoad event (disadvantage: poor semantics). Anyone else come across any novel ways around this seemingly under-
View 9 Replies
ADVERTISEMENT
Oct 19, 2011
I want to create an animated gif that is shown during the content of my page is loading - in order to do so, I created 2 div-containers one with an id of loadingbar (default: display:block and including my img src....) and the other with an id of main_cont(default:display:none and including my content which consists out of some huge images for testing purpose)
so I thought all the magic would be:
$(document).ready(function(){
$('div#loadingbar').css('display', 'none');
$('div#main_cont').css('display', 'block');
});
but unfortunatly nothing works - it is just showing how the images get loaded, but my animated loading-gif is not shown anytime...
how do I get such stuff working - I thought on document ready means that it is executed AFTER all of the content is downloaded??
View 4 Replies
View Related
Apr 23, 2009
I am loading content into a page using the following: $("#someDiv).load("/Some.action",{id: someId}); The document that results from Some.action contains javascript at the top. I want the javascript to be executed when the resulting content is fully ready/loaded. I attempted to use the document ready:
[Code]...
View 2 Replies
View Related
Feb 23, 2010
I have a website which includes stories with multiple chapters. These chapters have a set of clickable arrows at top and bottom to take you forwards and back through the chapters, including a "last chapter" arrow.When a story is in progress, the URL of the last chapter changes with each chapter added. Rather than having to go back into every previous chapter and change the URL of the last chapter by hand, I set them up so that the "last chapter" arrow is actually in an inline frame. That way, I only have to change the URL once, in the file go_end.htm which is the source for the frame. So both the picture of the arrow and its hyperlink are being accessed from outside.
My web pages are also set up to run on all major browsers and to detect the window width and resize all the artwork to fit, regardless of the browser and whether or not it accepts percentage sizes. Go_end.htm is no exception - it contains Javascript code which resizes the arrow so it is the same size as the ones which are actually in the parent page, outside the frame.This setup works perfectly in IE and Netscape, but Google Chrome either fails to display the arrow or makes it huge so it doesn't fit the frame. This seems to be because their superfast new Javascript editor is *too* fast. If I bung an alert command into go_end.htm, asking it to say the value of picWidth (the variable which sets the width of the arrow) as it loadfs, what happens is this.
Google Chrome displays an alert saying that picWidth is zero, then loads the first instance of the inline frame with no got-to-end arrow. Then it displays an alert giving a proper value for picWidth and loads the second inline frame with the arrow correctly displayed and sized. If I take out the alerts, it doesn't load the arrow in *either* frame. It's obvious that inserting the alert command somehow forces it to recognise the value of the variable which it then retains for long enough to load the arrow on the second pass.Any ideas for some command other than alert which would trick it into not loading the image until it's recognised the variable? If I put a time delay on loading the frame I can't see that that would help - the problem is that from the point at which it starts actually loading the frame it needs to wait for the variable to be set.
View 2 Replies
View Related
Oct 21, 2009
I have a site that is very jQuery and image heavy. The main sections of the site link to sections that are built with several Tabs, and as it loads, you briefly see all the content load and then it is hidden by the Tabs code.
The plan is to have a full window DIV that sits above all the content with a loading icon that plays until the entire page loads, and then it fades down.
After some hair pulling and research I have code in place that does exactly as I ask, however it does not seem to work in IE6+7. It works in all other browsers.
The current code is:
CSS for the loading DIV is:
A working link is [url]
View 1 Replies
View Related
Jul 27, 2009
I have this loading.gif image that is 750px, when it should be 32px. The reason it's huge now is because my original solution was displaying two images: one 750px version of the loading.gif image and one 32px version (in the center of the 750px) of the same image. Now I'm at least down to one image, even if it's the wrong version.Click any of the thumbnail images here, and then again on the thumbnail at the top of that popup product gallery to see what I mean: need that huge loading.gif to be 32px like it should be, and then expand to 750px once the image is loaded. I've tried a bunch of solutions, but nothing has solved the problem.This is the code I have at the moment, although I'm working on the issue now so it may change.
$('#inline .thumbGrid img').click(function(){
var strLargeImg = document.getElementById('OBOEsac');
$('.galleryPopup').attr('src','/site/scripts/colorbox/images/loading.gif');
[code]....
View 1 Replies
View Related
Dec 11, 2011
I want to modify a local variable inside the document.ready function set like so:
$(function () {
var getme = 0;
...
});
I cant make it global because of my jQuery code is a greasemonkey userscript. I already tried fetching the events with $().data("events") and such, but the ready event was never listed.
View 4 Replies
View Related
Dec 7, 2011
The code is standard $(document).ready(handler); and it doesn't fire in my script I have alert(document) to test the document object is defined and it is. I put an alert in the ready and it doesn't fire.I put an alert outside of the ready and it fires.
View 3 Replies
View Related
Jun 17, 2010
I understand that ready() will run when DOM is ready:
When will this run?:
View 1 Replies
View Related
Jun 19, 2011
ASP.Net with Vb.Net - i am using lightbox related scripts( prototype.js ,lightbox.js and scriptaculous.js) for images view , Banner refresh purpose referenced jquery.min.js and using this code below....in the same page
[Code]...
View 1 Replies
View Related
Jul 29, 2010
I'm new to jquery. I did some pages in jquery.I'm confuse about the use of $(document).ready. Whether I put my code inside or out of $(document).ready, it works fine. In plain english, how can we describe the use of $(document).ready?
View 3 Replies
View Related
Feb 4, 2010
I am trying to use the Multi Drop Down Menu plugin available at CodeNothing.com. However the problem is occuring even without calling the functions in the plugin. (It occurs when I call the functions in the plugin as well but that doesn't matter)I am experiencing some very strange behaviour. I havesome standard nested unordered lists where the top list is given the id multi-ddm. Now when I run the code below I get 1 alert (which is correct as I only have 1 child li element) saying hello.
<script>
$('#multi-ddm > li').each(function(){
alert('Hello');[code]....
no error appears and the alert appears once, which is correct.So is it the $(document).ready that is causing the problem or the '> li'. I cannot work it out and have been at it chopping and changing for ages.
View 4 Replies
View Related
Nov 15, 2011
I have been writing a script and need a gallery image to have it's width set on page load. My script works fine in safari, ff, chrome..but IE seems to ignore the line that sets the width of the image. It doesn't seem to be ignoring the other widths that are being set on certain divs. So it seems it is an image-only problem.
I thought it best to post a link to the page. To see the problem, you will have to have your browser set smaller than 885px in height. It's line 90 that seems to be ignored by IE
View 16 Replies
View Related
Feb 21, 2011
Im trying to get the 1st image in a carousel to be inserted into a dom element on page load.
Clicking the carousel images in turn, does load each image into the dom element in question. However, need to get the 1s image in the crousel to load without having to click it.
Webpage: [URL]
//Failed Attempt to load image on page load
var $enlargedCover = $('<img/>')
.addClass('enlarged')
//.hide()
[Code]......
View 1 Replies
View Related
Oct 13, 2011
I have something like
jQuery(document).ready(function() {
alert('Carousele loaded')
});
here [URL] but can't get alert pop-up on IE7. m
View 5 Replies
View Related
May 20, 2009
I am hiding a login panel like:
$(document).ready(function() {
$("#login").css({marginTop: "-105px"});
});
But in IE 8 it takes very long to hide? I don't like to set it in CSS because if javascript is turned off people can still login as it is visible... is there anyway to make it faster ?
View 3 Replies
View Related
May 9, 2011
I'm interested in putting on a simple, fade, slideshow. I followed the directions according to this link: [URL].
Here's my code in the <head> </head>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="[URL]"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="[URL]"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
I uploaded the.JS files.
And here's the HTML:
<div class="slideshow">
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
</div>
They are just stacked up, nothing's happening. Check it out: [URL].
View 6 Replies
View Related
May 6, 2010
I originally thought I should always include js which shouldn't be parsed until the html had been written using the following:
$(document).ready(function () {
//My code
});
I later read that I shouldn't do this (JQuery Cookbook, or something similar) but instead should just include my JS at the very end of the page but before the body close tag.
View 4 Replies
View Related
Mar 6, 2011
I currently have this code to make a post to my database:
var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text; $.post("save_edits.php", {image_save_string: $dataString}, function(result) { $("#multiple_images").hide(); $("#result_success").html("
[code]....
View 2 Replies
View Related
Nov 15, 2010
just one question.I want to remove the div within ready function. I'm using $("noJS").remove(); script, but it only hides the div (when I check the site's code, that div is still there).
View 3 Replies
View Related
Aug 9, 2011
I know that to run jQuery when the document is ready, you just use $(function() { ...jquery code... });
but that isn't allways what I want, sometimes I want to one or more jQuery codes when for a example a div (with a class or id) has been created, or when an image has loaded.
Is it possible ? If so, how ?
View 6 Replies
View Related
Sep 16, 2009
i have two pages A & B A shows the intended functionality of the fading images/text on the left, the video image that pops up a jquery tools expose overlay, and the tabs on the bottom left page B is identical in all ways that i think matter. in other words, the javascript and html elements are all the same. the only other difference is that page B is created via a wordpress theme.
View 8 Replies
View Related
Oct 26, 2011
There are pages containing input field where in user enters value. Now I have a requirement to block UI untill the document is ready and every input field is rendered. I have found that I can use blockUI plugin for this : [URL] I have also found few good examples in : [URL]
how do I call $.blockUI() on pre-ready stage and call $.unblockUI(); on .ready(). I would want my UI to be locked untill the doc is ready. I can put call to $.unblockUI(); in .ready() but where do I put $.blockUI().
View 1 Replies
View Related
Jan 18, 2010
I'm quite new to Javascript and jQuery in general, and now stuck with a problem.In my header I added a Javascript file like this:
$().ready(function(){
function hello(){
alert('hello');
[code]....
View 2 Replies
View Related
Jul 18, 2011
I've got identical javascript code that I want to run when either a page loads or inputs to a form change. Right now, I've got two separate statements:
[Code]...
I think the obvious answer is to combine the two with a Javascript IF/OR (||) statement, but I can't seem to get the syntax correct, I think probably due to the open '(' before 'function' in both cases and the fact that it doesn't close until 'some javascript' has executed.
Any suggestions on the correct syntax, or is there a different way of implementing this that I'm not aware of? The two separate statements work fine right now, but I'd rather not have to maintain multiples of the same javascript code.
View 1 Replies
View Related
Feb 21, 2011
I've built a complex web application that loads content into the main page using .load of php pages. Some of those pages are using datepicker and timepicker. I have these working ok to a point, but there is some troubling behaviour. e.g. sometimes when clicking a date field, the calendar doesn't appear. The timepicker seems to work ok most of the time. Clicking around like a loon on various pages sometimes makes the field work with dates, but other times not.
Sometimes I see the calendar display stays on the page even when new content is loaded. Summary is that the datepicker works perfectly, but then it stops working, then starts again.. Now I have a mix of calls to google and local source code .js and ui and tools which is perhaps complicating things. I'm not sure if this is a problem with coding, or the doc ready function being used in 'child' pages.
View 1 Replies
View Related
