[jQuery] Re: show()ing thousands of divs
OK - So I implemented this and the performance sucked on IE so I made
some more performance improvements. After a few iterations I think I'm
happy with the way it's working.
We can complain (to put it mildly) about IE's javascript performance
all we want but the useful unintended consequence of that is it forces
web developers to optimize their code for performance. Here are the
things that helped improve performance:
1. Michael G's suggestions for using $("#mydiv)[0].innerHTML = abc
instead of $("#mydiv).remove().append(abc), and for using array/join
instead of string concatenation to build long HTML strings.
2. When attaching an event to thousands of checkboxes, $("#mydiv input
[attr^=val]").live(..) is much faster than $("#mydiv :checkbox").live
(..)
On Sep 28, 1:38 pm, Mike McNally wrote:
> On Mon, Sep 28, 2009 at 3:34 PM, Michael Geary wrote:
> > Mike, the requirement here isn't just to show or hide all 3000 entries in
> > one fell swoop. Sid needs to be able to show and hide individual entries
> > depending on a filter. So there's no avoiding looping through all the
> > entries, whether in JavaScript or on the server.
>
> Well in that case the alternative solution I described could be tried.
> Instead of iterating through the entities calling show() and hide(),
> iterate and build (carefully) a CSS block that includes CSS statements
> for each entity, giving it a style of either "{ display: block; }" or
> "{display: hidden; }". When the CSS is built, drop it into a waiting
>
[jQuery] Re: show()ing thousands of divs
@Mike M.
You're still looping through 3000 jQuery objects and invoking the
setClass() method. I haven't tried it but I suspected it will take
roughly the same time as the show() method. It does seem logical that
the actual showing of the div will be faster if the browser does it
natively. The question which part is the bottleneck - looping through
3000 jQuery objects or actually show()ing them one by one? If I can
experiment and find out, I will - and I'll post the results.
@DBJ The page is not live yet. It's still in dev so I can't share the
URL right now.
@Ryan @Raymond @William Yes, the 3000 divs are initially generated
server-side. And yes, no one really cares to see that many. The only
reason I'm doing it is so search engines can crawl everything.
Initially, I had wanted to put them in a 2-column table instead of
using divs. But the show/hide approach with jQuery would mess with the
layout when hiding individual table cells. So I switched to floating
divs instead. Now that I'm regenerating the HTML instead of using show/
hide, I'm wondering whether I should switch back to table layout
instead. It will also mean not needing those "clearing" divs, which is
nice.
Tangentially related question:
When you have an event listener that you tag to 3000 elements, is it
better to use function names? i.e. instead of
$("div.myDivClass a").click(function(){...});
you should say
var myFunc = function(){..};
$("div.myDivClass a").click(myFunc);
My guess is that the 2nd approach conserves memory but I could be over-
analyzing. What do you guys think?
On Sep 28, 9:39 am, William Chang wrote:
> For 3000 divs and a lot more in the future, then I recommend you do an
> AJAX to load the content when the user scrolls down.
>
> Examples:
> Slashdot (slashdot.org)
> Google Reader
>
> I know there are jQuery plugins to help you load on scroll, please
> Google.
>
> Good Luck,
> William Changhttp://www.williamchang.orghttp://www.babybluebox.com
>
> On Sep 28, 10:54 am, Raymond Ho wrote:
>
> > 3000 divs are freaking huge. it would be better to do it in ajax and
> > load them by chunks instead of putting it all in one huge HTML page.
>
> > On Sep 28, 6:17 pm, "ryan.j" wrote:
>
> > > presumably the HTML for these ~3k records are being generated server-
> > > side somewhere - can you not split/group the results before they hit
> > > the browser?
>
> > > On Sep 28, 3:36 am, Sid wrote:
>
> > > > Thanks, guys.
>
> > > > Michael G., your solution worked like a charm. setTimeout seems to
> > > > mess with the context ("this" is not recognized within the function).
> > > > But that was a minor problem. I just assigned "this" to a global
> > > > variable and used that variable inside setTimeout's function. A couple
> > > > of other solutions were discussed
> > > > here:http://stackoverflow.com/questions/1267275/jquery-show-is-delayed-in-...
> > > > I also liked the approach of using show()'s callback function: $
> > > > ('#foo').show( 0, function() { doOtherThings(); } );
>
> > > > Mike M.,
> > > > Interesting suggestions to use CSS. But even with the CSS approach, I
> > > > doubt if performance will be any better. Looping through each of the
> > > > 3000 divs and calling $(this).show() or $(this).addClass('showing')
> > > > will probably take the same amount of time.
>
> > > > What I ended up doing (and it did speed things up) is not use jQuery
> > > > for hide/show. I now store basic info about all 3000 entities in a JS
> > > > object { ent0 : { property1 : 'abc', property2 : 'xyz' }, ent1 :
> > > > { prop1: '123', ..},..}. The HTML for each div is similar, so I just
> > > > generate a whole new HTML with only the entities I want to show. Then
> > > > replace the existing HTML with the new HTML.
>
> > > > On Sep 27, 2:07 pm, Mike McNally wrote:
>
> > > > > If there's a need to selectively show particular elements out of a
> > > > > large number, something to try while experimenting with performance
> > > > > improvements is to construct a CSS block dynamically and then update
> > > > > it. You'd put together the CSS as a stream of "#randomDiv0021 {
> > > > > display: block; }" CSS statements, and then just jam the whole thing
> > > > > into a
[jQuery] Re: show()ing thousands of divs
Thanks, guys.
Michael G., your solution worked like a charm. setTimeout seems to
mess with the context ("this" is not recognized within the function).
But that was a minor problem. I just assigned "this" to a global
variable and used that variable inside setTimeout's function. A couple
of other solutions were discussed here:
http://stackoverflow.com/questions/1267275/jquery-show-is-delayed-in-internet-explorer-chrome
I also liked the approach of using show()'s callback function: $
('#foo').show( 0, function() { doOtherThings(); } );
Mike M.,
Interesting suggestions to use CSS. But even with the CSS approach, I
doubt if performance will be any better. Looping through each of the
3000 divs and calling $(this).show() or $(this).addClass('showing')
will probably take the same amount of time.
What I ended up doing (and it did speed things up) is not use jQuery
for hide/show. I now store basic info about all 3000 entities in a JS
object { ent0 : { property1 : 'abc', property2 : 'xyz' }, ent1 :
{ prop1: '123', ..},..}. The HTML for each div is similar, so I just
generate a whole new HTML with only the entities I want to show. Then
replace the existing HTML with the new HTML.
On Sep 27, 2:07 pm, Mike McNally wrote:
> If there's a need to selectively show particular elements out of a
> large number, something to try while experimenting with performance
> improvements is to construct a CSS block dynamically and then update
> it. You'd put together the CSS as a stream of "#randomDiv0021 {
> display: block; }" CSS statements, and then just jam the whole thing
> into a
[jQuery] show()ing thousands of divs
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
"clear" the float. The problem is that $("div.mydivclass").show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$("body").append(waitingdiv);//Positioned in the center of the screen
with a wait gif and "Please wait" message
if(appliedfilters.length==0) //No filters. Show all divs
$("div.mydivclass").show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$("div#waitingdiv).remove();
You would expect the "waitingdiv" to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
[jQuery] Re: JQuery is really a nice tool
hi Please help me out as i am a new fresher learning HTML how to remove all the html and css bugs from this site http://googlelance Thanks On Dec 13, 1:31 am, "Andy Matthews" wrote: > No jQuery on that page. It's just using a collection of dHTML scripts found > online. > > -Original Message- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > > Behalf Of Sid > Sent: Friday, December 12, 2008 12:31 PM > To: jQuery (English) > Subject: [jQuery] JQuery is really a nice tool > > Just look at this URLhttp://googlelance.com > > You see the login and button click on it then you find that > > a pop up appears in middle of your page for login > > that is done with Jquery > >
[jQuery] Re: JQuery is really a nice tool
hi Please help me out as i am a new fresher learning HTML how to remove all the html and css bugs from this site http://googlelance Thanks On Dec 12, 11:30 pm, Sid wrote: > Just look at this URLhttp://googlelance.com > > You see the login and button click on it then you find that > > a pop up appears in middle of your page for login > > that is done with Jquery
[jQuery] JQuery is really a nice tool
Just look at this URL http://googlelance.com You see the login and button click on it then you find that a pop up appears in middle of your page for login that is done with Jquery
[jQuery] Re: Don't redirect on form submit
Another point, how do I bind it since my form is loaded into the div?
Will this work
$('#myForm').livequery(function() {
$(this).bind('submit', function () {
...
...
});
})
On Jun 29, 8:18 am, "chris thatcher" <[EMAIL PROTECTED]>
wrote:
> Hi Sid,
>
> The really important thing is that you'll need to 'hijax' the form and make
> sure you provent the default behavior of the browser. jQuery makes this
> terribly easy.
>
> jQuery("#myform").bind('submit', function(event){
> //stops browser from submitting the form
> //and redirecting.
> event.preventDefault();
> //use jquery form plugin to submit via ajax here or do it by hand
>
> });
>
> Thatcher
>
>
>
> On Sat, Jun 28, 2008 at 10:59 PM, Bil Corry <[EMAIL PROTECTED]> wrote:
>
> > Sid wrote on 6/28/2008 8:31 PM:
>
> >> What I basically want to achieve is that on clicking the submit
> >> button, the data is posted to the php file without any noticeable
> >> difference happening to my page. The response etc will be taken care
> >> of by my code. Any ideas?
>
> > If you submit the request via XHR, then the page can remain the same (with
> > the div refreshed) while the data is sent to the server. Just note that if
> > your site is entirely driven from a single page using XHR, then I hear you
> > should be careful of memory leaks; not sure how relevant that advice is
> > anymore with the newer browsers.
>
> > - Bil
>
> --
> Christopher Thatcher
[jQuery] Re: Don't redirect on form submit
Bil and Chris,
Thanks to both of you.
Chris's code is exactly what I wanted, and Bil, the XHR memory leaks
still happen. Some old stuff thrown up by Google indicates that only 2
simultaneous XHR sessions can be initiated, and the next one waits
till either of the two closes.
Regards
On Jun 29, 8:18 am, "chris thatcher" <[EMAIL PROTECTED]>
wrote:
> Hi Sid,
>
> The really important thing is that you'll need to 'hijax' the form and make
> sure you provent the default behavior of the browser. jQuery makes this
> terribly easy.
>
> jQuery("#myform").bind('submit', function(event){
> //stops browser from submitting the form
> //and redirecting.
> event.preventDefault();
> //use jquery form plugin to submit via ajax here or do it by hand
>
> });
>
> Thatcher
>
>
>
> On Sat, Jun 28, 2008 at 10:59 PM, Bil Corry <[EMAIL PROTECTED]> wrote:
>
> > Sid wrote on 6/28/2008 8:31 PM:
>
> >> What I basically want to achieve is that on clicking the submit
> >> button, the data is posted to the php file without any noticeable
> >> difference happening to my page. The response etc will be taken care
> >> of by my code. Any ideas?
>
> > If you submit the request via XHR, then the page can remain the same (with
> > the div refreshed) while the data is sent to the server. Just note that if
> > your site is entirely driven from a single page using XHR, then I hear you
> > should be careful of memory leaks; not sure how relevant that advice is
> > anymore with the newer browsers.
>
> > - Bil
>
> --
> Christopher Thatcher
[jQuery] Don't redirect on form submit
Hi, I've got a comments page that I load within a div. On clicking the "Submit" button, my page redirects to the php file that I submit to. Now since my site uses only one page which acts as the front-end with all sub-pages being loaded into a content div, i don't want the redirection happening. What I basically want to achieve is that on clicking the submit button, the data is posted to the php file without any noticeable difference happening to my page. The response etc will be taken care of by my code. Any ideas? Regards
[jQuery] Re: UI sortables problem
Nope, nothing happening on dragging anything On Jun 3, 5:35 pm, Arun Kumar <[EMAIL PROTECTED]> wrote: > Not that, > > Drag that gadget > > DnD is not working... > > View source... > > On Jun 3, 5:24 pm, Sid <[EMAIL PROTECTED]> wrote: > > > Didnt work on my FF 2.0.0.14 WinXP Pro SP2 at 1024x768 > > I clicked and small little windows with a blue minimize and a red > > close button opened. Inside the container, the default "error" page > > opened. > > > On Jun 3, 12:53 pm, Arun Kumar <[EMAIL PROTECTED]> > > wrote: > > > > Please visit the URL below and let me know if there is any problem in > > > using the jQuery UI sortables. > > > >http://tech-test.tutorialsforu.com/-Hide quoted text - > > > - Show quoted text -
[jQuery] Re: UI sortables problem
Didnt work on my FF 2.0.0.14 WinXP Pro SP2 at 1024x768 I clicked and small little windows with a blue minimize and a red close button opened. Inside the container, the default "error" page opened. On Jun 3, 12:53 pm, Arun Kumar <[EMAIL PROTECTED]> wrote: > Please visit the URL below and let me know if there is any problem in > using the jQuery UI sortables. > > http://tech-test.tutorialsforu.com/
[jQuery] Re: How to make webpage to adjust to user display settings.
A little mistake, that http://sid-deswal.110mb.com On Jun 3, 11:36 am, Sid <[EMAIL PROTECTED]> wrote: > One way would be to restrict your display to 800x600, ie on bigger > screens the entire thing just centers itself. > > Another way is what u want to do,resize the entire thing. Thats what > im doing with my webpage athttp://sid-deswa.110mb.com > > I use JS to calculate the appropriate length and width, and jquery > shapes the divs > > On Jun 3, 8:16 am, RobG <[EMAIL PROTECTED]> wrote: > > > On Jun 2, 9:18 am, Aaron <[EMAIL PROTECTED]> wrote: > > > > ok I am currently working on a website and I need to have my website > > > to adjust to the clients display settings so like for an example > > > that if the user has a higher display settings my webpage through > > > javascript would resize all the elements on my webpage to keep the > > > orignial look. > > > Javascript is not the answer - use HTML and CSS. > > > > so I am gussing somthing along the lines of first grabbing the > > > clients display settings and then use that to then scale every element > > > on the html page with the power of 2 or somthing. > > > Don't do that. Consider someone with a desktop across 2 x 61cm > > displays set to 1920 x 1200px, do you think they'll be happy if you > > spread your web page over their entire display? > > > -- > > Rob
[jQuery] Re: How to make webpage to adjust to user display settings.
One way would be to restrict your display to 800x600, ie on bigger screens the entire thing just centers itself. Another way is what u want to do,resize the entire thing. Thats what im doing with my webpage at http://sid-deswa.110mb.com I use JS to calculate the appropriate length and width, and jquery shapes the divs On Jun 3, 8:16 am, RobG <[EMAIL PROTECTED]> wrote: > On Jun 2, 9:18 am, Aaron <[EMAIL PROTECTED]> wrote: > > > ok I am currently working on a website and I need to have my website > > to adjust to the clients display settings so like for an example > > that if the user has a higher display settings my webpage through > > javascript would resize all the elements on my webpage to keep the > > orignial look. > > Javascript is not the answer - use HTML and CSS. > > > so I am gussing somthing along the lines of first grabbing the > > clients display settings and then use that to then scale every element > > on the html page with the power of 2 or somthing. > > Don't do that. Consider someone with a desktop across 2 x 61cm > displays set to 1920 x 1200px, do you think they'll be happy if you > spread your web page over their entire display? > > -- > Rob
[jQuery] Re: Jquery browse dialog
Unlikely, because security doesn't allow scripts to roam free within the client's harddisk. I hear FF 3 is doing something to tackle the Sandbox issue, but can't say how long that will take, if at all. On May 29, 3:05 am, Fred <[EMAIL PROTECTED]> wrote: > Hi guys, I have to open a browse dialog window that allows selection > of multiple files, basically for selection of multiple files to > upload. Any ideas? > Thanks.
[jQuery] Re: mark a td when left mouse button is pressed
Use addEventListener
In IE this is attachEvent
if (td.addEventListener){
td.addEventListener('mouseDown', changeClass, true);
} else if (td.attachEvent){
td.attachEvent('onMouseDown', changeClass);
}
function changeClass() {
$(this).css('asds','asdasdsa');
}
On May 28, 7:50 pm, melwood <[EMAIL PROTECTED]> wrote:
> Hi,
>
> how can i mark/unmark (toggleClass) a td when:
>
> a) I press the left mouse button
> b) Press the left mouse button and move over all tds (fast selection)
>
> a) is not so much of a problem, but how would I realize b) and in a
> way it is not interffering with a)
>
> melwood
[jQuery] Re: Load specific id on click
Load the entire page and then parse it with
$("#div_you_want").html();
This will return everything within div_you_want including HTML tags.
Use .text() if you need only the text stripped of HTML.
Note: Since ur loading the page dynamically, jQuery will not
automatically update the DOM, so use a plugin like liveQuery, in which
case it will be
$("#div_you_want").livequery(function() {
$(this.id).html/text();
});
IschaGast wrote:
> I have a page with an archive of all newsletters:
> http://ischagast.nl/janhekmanschool/nieuwsbrief/archief/
>
> What I want is that when clicking a month the results of that month
> appear under the months just like this site:
> http://loweblog.com/archives/
>
> I thought building that with jquery would be simple, something like
> this:
>
> $('#content_main div.weblog_archive li a').click(function() {
> $('div.article').load(this.href);
> return false
> });
>
> This works good but I only want to load the div.article and thats
> something I could not get to work.
> I thought maybe something like this could work but it does not:
>
> .load(this.href + "div.article");
>
> What works?
[jQuery] Re: attr difference in Firefox and IE7
Karl, Thanks a lot :-) Works perfectly well. But IE still shows an error notification in the status bar. I'm just afraid it might come in between as I add more features. Any ideas? Regards
[jQuery] Re: Sometimes my dynamic content doesn't load - please help!
How do you load your different stylesheets? Basic style elements like background-color etc load pretty fast, its the images that usually take time. So I think you should check by trying different background colors, because I face the same problem while the styles are switching. Also, try the LiveQuery plugin, if you're introducing new elements into the DOM (because they aren't recognised immediately), or check out Karl's 'Events' tutorial on learningjquery.com Hope this helps. Regards
[jQuery] Re: tooltip - highlighting when a formfield is reached by a tab
Yup, there is and it's pretty simple. With the mouseover, bind the tooltip to a 'focus()' event (HTML: onFocus). And you can remove the tooltip with the 'blur()' event (HTML: onBlur) I think that'll work. Regards
[jQuery] attr difference in Firefox and IE7
Hi,
I'm using the .attr() to set attributes of an img tag.
This works in Firefox 2.0.0.14 but not in Internet Explorer 7.
The offending piece of code is
$('#preview').livequery(function() {
$('#preview').attr('src',previewImage);
$('#preview').attr('width','302px');
$('#preview').attr('height','188px');
return false;
});
Works in FF but in IE, only the src is changed. The width and height
remain unaffected.
To see, check http://sid-deswal.110mb.com and click on 'Themes'
And I can't understand the IE error message which says
Line: 5
Char: 1
Error: Object Expected
Code: 0
Regards
[jQuery] Re: Fade out the whole page before loading next page
Hamish,
Does the window.location wait for the fade animation to complete? I
currently use a setTimeout to load data into a div container after the
fade in animation has completed, else while the div is fading in, the
loaded data shows through.
On May 20, 9:26 am, Hamish Campbell <[EMAIL PROTECTED]> wrote:
> You have to intercept clicks on links, store the href while the page
> fades then redirect to that address:
>
> $(document).ready(function(){
> $('a').click(function() {
> var target = $(this).attr('href');
> $('body').fadeOut('slow', function() {
> window.location = target;
> });
> return false
> });
>
> });
>
> Tested IE7, seems to work fine :)
>
> On May 20, 11:57 am, Anabelle <[EMAIL PROTECTED]> wrote:
>
>
>
> > I need to add a simple effect to my website but I've been searching
> > all afternoon with no luck, hope someone can help me.
>
> > I need to add a Fade out effect to the entire page whe the user clicks
> > a link leaving the current page.
>
> > How can I do it?- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: Write to a file?
I basically want to make my own Comments system. So, its server side writing. Writing to the client machine is possible using the FileSystemObject, but I don't think its possible on browsers other than IE. On May 14, 7:26 pm, Gordon <[EMAIL PROTECTED]> wrote: > If ou mean writing to a file on the server, yes it's possible with > AJAX but will require some cleverness. it's a bit mroe complex than > just submitting a form. > > If you mean on the user's machine, javascript is deliberately > prevented from writing anything but cookies. > > On May 14, 10:59 am, Sid <[EMAIL PROTECTED]> wrote: > > > Hi, > > > I want to write data entered by users to a php/html/txt file. > > > Is this possible using jQuery? > > > Regards
[jQuery] Write to a file?
Hi, I want to write data entered by users to a php/html/txt file. Is this possible using jQuery? Regards
[jQuery] Re: jQuery not working after loading content via Ajax .load
I had the same problem, and from the looks of it, almost everyone does atleast once. I use liveQuery and its working perfectly well for me. Just download the js file from the plugins page and check the examples provided. Fairly straightforward.
[jQuery] Re: Whats faster to load?
Yup, its a pre formatted HTML page. And thanks, I didn't know that XML files could be .load() ed :-)
[jQuery] Whats faster to load?
Hi, Been doing all my loading using .load() Is it faster than XMLHTTPRequest? Or should I go the XML way? Regards
[jQuery] Re: .load() problem
Andrea, Thank You. LiveQuery wo
[jQuery] Re: .load() problem
Andrea, Thanks for that :-) LiveQuery works like a charm. Regards Sid
[jQuery] .load() problem
Hi, I've tried searching for a solution to this, but haven't found anything. I load an external html file into a div using .load() The external file contains only a huge tag with the id 'inText' The CSS rules apply to it, but the jQuery doesn't. However, when I put in an alert or a setTimeout between the load and the next jQuery, it works perfectly. 1) The first issue here is that the next jQuery instruction is executed before the external div has loaded. Is there a jQuery way to check whether the load is complete? document.ready doesn't work here. 2) The classes contained within the newly loaded div are not recognised by jQuery. It's as if a snapshot was created of the original DOM, but new additions are not recognised. For example, I have a Downloads link on my mainpage with the class 'downloads'. This works perfectly. Then i have another 'downloads' class link on my 'Thanks To' page (loaded from outside), and this doesn't work. Check this at http://sid-deswal.110mb.com Regards Sid
[jQuery] My jQuery Page
Hi ppl, Came across jQuery recently. What I saw got me very excited. sid-deswal.110mb.com Please check the 'Bugs and Fixes' link on the page. If you know how to resolve them, a post back or an email would be very appreciated. Homepage checked on FF, IE 6, Opera and Safari (Win XP SP2, 1024x768) Regards
[jQuery] Re: Livequery not binding on div after a .load method
I face the same problem. New classes are simply not recognized, making my links disfunctional.
