[jQuery] Re: show()ing thousands of divs
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 Chang
http://www.williamchang.org
http://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: Wait until animation completed - callback?
I don't know how complex the user interface you're making, but if
you're asking for a callback after completing the "slideToggle()"
animation, then overload the method with a second argument which is
the callback function.
$('#51').slideToggle('fast, function() {
// Do something after element's animation completes.
});
If you're dealing with multiple items with animation and don't want
them to overlap the animation, then try using jQuery to manipulate the
"class" attribute to store the state (e.g. "slide_started",
"slide_ended"). I don't think using the timeout is the best way.
Good Luck,
William Chang
http://www.williamchang.org
http://www.babybluebox.com
On Sep 25, 4:23 pm, Merlin wrote:
> The timeout sounds logical. I would like to try it, but somehow jquery
> does not know that
> function:http://docs.jquery.com/Special:Search?ns0=1&search=setTimeout&go=
>
> I am pretty new to jquery. Could you post some code that fits into
> this one:
> onmouseover="$('#51').slideToggle('fast');$('.subcategories:not
> (#51)').hide(700);"
>
> Thanks!!
>
> On Sep 25, 4:42 pm, "ryan.j" wrote:
>
>
>
> > the problem with jquery animation effects is that you can easily chain
> > effects on a single element, but unless you specify a timer of some
> > description or utilise the callback, effects on different elements
> > will execute simultaneously as you're finding.
>
> > unfortunately you really aren't going to know how far into the
> > animation it is (you can find out by checking the opacity of the el,
> > but that's probably A Very Bad Idea) so whilst it seems like the most
> > obvious method, if you want to just stop the new mouseover func
> > executing until the animation has finished you'd need to make the
> > mouseover function setTimeout("yourActualFunction("+el.attr('id')+")",
> > x) where x is the max length the anim could be.
>
> > you might be able to do something clever with a conditional to
> > determine if there was a menu animation happening on the initial
> > mouseover event, and if there was checking the element now under the
> > cursor in the callback, but since you have limited access to the
> > callback of any existing events in progress you're always going to hit
> > the problem of not being able to fully utilise that.
>
> > i'd be tempted to .stop() anything that's :animated on mouseover
> > before you start the new .fadeTo() ;)
>
> > On Sep 25, 2:12 pm,Merlin wrote:
>
> > > does nobody have an idea? :-(
>
> > > On Sep 23, 5:13 pm,Merlin wrote:
>
> > > > Hi there,
>
> > > > I am building huge list with subcategories in each category that fade
> > > > out once the mouse is placed over the category. It works great, BUT
> > > > the problem is, if your mouse goes down the list vertically and the
> > > > subcategories are fiew, then the obove subcategories fade out and your
> > > > mouse is over the next category which is causing the next menu to fade
> > > > in.
>
> > > > I would need a way to make jquerywaitto fade out the next menüuntil
> > > > the last one has disapeared. An area would be good, if the mouse
> > > > leaves the subcategory area fade out or similar.
>
> > > > Do you believe the callback function might be a solution? I could not
> > > > think about how. Here is the code I am using:
> > > > onmouseover="$('#51').slideToggle('fast');$('.subcategories:not
> > > > (#51)').hide(700);"
>
> > > > Thank you for any help!!
>
> > > >Merlin
[jQuery] Re: How do I reference PHP for an ID value?
Word of advice, you need to make an effort of separation between PHP
and JavaScript. Some good points: easier reading, debugging, and
extending existing code. We don't want spaghetti code.
Sincerely,
Will
On Nov 19, 1:38 am, propstm <[EMAIL PROTECTED]> wrote:
> SOLUTION:
> Because the PHP was in an iterative loop, I needed to have the script tags
> for the jQuery within the loop as well so that PHP ID reference would have a
> value. When the script tag was outside of the loop, no value was being
> returned by the PHP.
>
> -MP
>
>
>
> propstm wrote:
>
> > **My apologies for resending but I botched the formatting horribly.
> > In a simple world the function i'm trying to perform is:
>
> > $(document).ready(function(){
> > $("button").click(function () {
> > $('.cars>#seats').slideToggle("slow");
> > });
> > });
>
> > But I'm working in Wordpress. What I'm trying to do is for each entry be
> > able to toggle the main content of the entry to either a hidden of visible
> > state. When a person clicks a button which is placed within the post next
> > to the title text, the visible state of the main content is toggled.
> > Using the simple example I can easily toggle static content, but I believe
> > my issue to lie in the fact that the post ID is derived from PHP. How do
> > I solve the issue?
> >
> > I've tried:
>
> > $(document).ready(function(){
> > $("#post-\\<\\?php the\\_ID\\(\\)\\; \\?\\>>button").click(function ()
> > {
> > $('#post-\\<\\?php the\\_ID\\(\\)\\;
> > \\?\\>>.content').slideToggle("slow");
> > });
> > });
> > *Which i thought to use after checking the jQuery FAQ
> > and also tried:
> > $(document).ready(function(){
> > $("post->button").click(function () {
> > $('#post->.content').slideToggle("slow");
> > });
> > });
>
> > Neither worked. Please help me out!
> > Thanks in advance
> > -MP
>
> --
> View this message in
> context:http://www.nabble.com/How-do-I-reference-PHP-for-an-ID-value--tp20573...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jquery.com incredibly slow for me
Same here, slowness and unresponsive been going on over a week. I reported on the jQuery Development mailing list: http://groups.google.com/group/jquery-dev/browse_thread/thread/5efcd4be97067ef Sincerely, Will On Sep 18, 8:40 am, Michael <[EMAIL PROTECTED]> wrote: > On Wed, Sep 17, 2008 at 7:05 PM, John Resig <[EMAIL PROTECTED]> wrote: > > > We just acquired four new servers from Media Temple, yesterday. We'll > > be moving the various sub-domains (docs, plugins, dev, ui) to their > > own unique servers this week - this should help with load times > > significantly. > > > But yes, it's mostly due to popularity issues (we're getting the > > equivalent of about 4 Digg/Slashdot-ings worth of traffic, per day, at > > this point). > > U! Thatsalot. Weel i guess that answers my questions perfectly. Hope > you're getting this fixed. Even nicer would be, if you could tell us, > there's a standalone version of the help-system out there. (who's based on > 1.2.6) > :-) > > -- > micha
[jQuery] Re: Jquery .load() can't load style and js in html file on Safari and Chrome??
When I read your message, I got curious too, but I searched and found
the answer without asking a question.
The answer explained here:
http://groups.google.com/group/jquery-en/msg/14925da1b4540acd
I hope the answer is for you, because it worked for me.
Sincerely,
Will
On Sep 8, 10:48�pm, Jove <[EMAIL PROTECTED]> wrote:
> Hello all,
>
> I use $("#mydiv").load() to load a html file that has its own style
> and js, on IE and Firefox, it work good, but on Safari and Google
> Chrome, it can't load style and js in the html file, how can I fix
> it?
>
> example:
> MainPage.htm
>
> http://www.w3.org/1999/xhtml";>
>
>
> Main Page
>
>
> $(document).ready(function(){
> �$("#mydiv").load("test.htm");});
>
>
>
>
> �
>
>
>
> SubPage.htm
>
> http://www.w3.org/1999/xhtml";>
>
>
> Sub Page
>
> #box {
> �height:400px;
> �width:400px;
> �background:red;}
>
>
>
> �alert("Hello!");
>
>
>
> �Test Box
>
>
>
> on IE and Firefox,it alert "Hello" and show a red box, but on Chrome
> it show �text only, no alert, no style.
[jQuery] Re: Accessing forms
Seem like you're doing ajax form. I finished creating my own ajax form sample and it was really easy and simple to implement, but you are using other JavaScript libraries to process your form and combining different HTML files by JavaScript (suppose to be combine by the server), which I don't know and not recommend. In my opinion, using only "jquery.js" is all you need to perform ajax. You need to take a few steps backward and start over using only "jquery.js". Ajax Form References: http://remysharp.com/2007/03/05/jquery-ajaxed-forms/ http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/ Here is my sample ajax form (click on PHP request, don't use ASP.NET because it uses localhost): http://www.williamchang.org/jquery/ Sincerely, William Chang http://www.creativecrew.org http://www.diehard.cc On Apr 26, 8:12 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote: > sorry for posting 2x, it was a mistake ;)
[jQuery] Re: Accessing forms
Seem like your doing ajax form. I just finish creating my own ajax
form sample and it is really easy and simple to implement, but you are
using other JavaScript libraries to process your form which I don't
know about and recommend. In my opinion, using only "jquery.js" is all
you need to perform ajax. You need take a few steps backward and start
over using just "jquery.js".
Ajax Form References:
http://remysharp.com/2007/03/05/jquery-ajaxed-forms/
http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
Here is my sample ajax form (click on PHP request, don't use ASP.NET
because it uses localhost):
http://www.williamchang.org/jquery/
Sincerely,
William Chang
http://www.creativecrew.org
http://www.diehard.cc
On Apr 26, 8:47 am, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> Hi Karl, thanks for the link ;)
>
> i made a few steps with livequery, but it still doesnt work.
> below is a code snippet i made. and all i want is: the data should be
> sent via the form in the html (over ajaxForm or ajaxSubmit in the
> end), and its repsonse should be written to the DIV #cont.
>
> the index.html:
>
>
>
>
> $(document).ready(function() {
> $('form').livequery('submit', function() {
> alert('submit button pressed');
> var options = { target: "#cont" }
> $(this).ajaxForm(options);
> });
> return false;
> });
>
>
>
>
>
>
> $('#search').load('form.html');
>
>
>
> form.html :
>
>
>
> Query:
>
>
>
>
> thats it.
> if i press submit, i get the alert, it shows the response form the
> servlet, but it doesnt use the target at all...
> to me, it looks like it recognizes the click, but the rest is still
> done by a normal html-submit, and not ajax.
> is that possible ? i ve been searching for hours and i thought it
> would be easy, but i did not find a solution...
>
> Any help would be great
>
> Adrian
[jQuery] Superfish Menu Width Auto Resize
When I was searching for jQuery made menu, I stumble up the Superfish 1.4.1 (using jQuery) menu by Joel Birch: http://users.tpg.com.au/j_birch/plugins/superfish/ When I started implementing into my page I noticed the menu items with longer texts wrap around because every level of the menu has a fixed width. I'm wondering does anybody have a fix (or solution) to dynamically resize the menu to accommodate longer texts if it goes beyond the minimal width? I did some search in this group and found something, but it does not handle 3 level menus: http://groups.google.com/group/jquery-en/msg/b01c08cacedfccb0 It is a really nice simple menu with great accessibility. I hope the author will see this message and implement a "dynamic menu width" in the next version of jQuery Superfish. I really want use Superfish for all my projects, replacing the bloated YUI menubar. Thanks for the help, William Chang http://www.creativecrew.org http://www.diehard.cc
