Re: [jQuery] Some jQuery tips and tricks
I've changed the examples and their look a bit. Also, added RSS 2.0 feed: http://dmitriid.com/jquery/en/rss.xml Dmitrii Dimandt wrote: > Hi all > > I've started collecting some examples I've come across while solving > problems using jQuery. I guess they could be interesting to the > community as a whole. > > These (sort of) tricks are available here: http://dmitriid.com/jquery/en/ > > I hope to add more examples with time. > > Hopefully, this will be helpful to at least someone :) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
I personally prefer writing $(document).ready(fn) in full because it is
easier to spot
agent2026 wrote:
> Why wouldn't you use $(fn) here instead of $(document).ready(fn)?
>
> Adam
>
>
>
>
> Karl Swedberg-2 wrote:
>
>> $(document).ready(function() {
>>$('#wrapper p').hide()
>>$('#wrapper h2').filter(':even').css('backgroundColor',
>> '#ef').end().filter(':odd').css('backgroundColor', '#ef').end
>> ().css({cursor: 'hand', cursor: 'pointer', color: '#fff'}).click
>> (function() { $(this).siblings('p').slideToggle('slow'); });
>> });
>>
>> Or, to make it more readable:
>>
>> $(document).ready(function() {
>>$('#wrapper p').hide()
>>$('#wrapper h2')
>>.filter(':even')
>> .css('backgroundColor', '#ef')
>>.end()
>>.filter(':odd')
>> .css('backgroundColor', '#ef')
>>.end()
>>.css({cursor: 'hand', cursor: 'pointer', color: '#fff'})
>>.click(function() {
>> $(this).siblings('p').slideToggle('slow');
>>});
>> });
>>
>>
>> --Karl
>> _
>> Karl Swedberg
>> www.englishrules.com
>> www.learningjquery.com
>>
>>
>>
>>
>
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Why wouldn't you use $(fn) here instead of $(document).ready(fn)?
Adam
Karl Swedberg-2 wrote:
>
>
> $(document).ready(function() {
>$('#wrapper p').hide()
>$('#wrapper h2').filter(':even').css('backgroundColor',
> '#ef').end().filter(':odd').css('backgroundColor', '#ef').end
> ().css({cursor: 'hand', cursor: 'pointer', color: '#fff'}).click
> (function() { $(this).siblings('p').slideToggle('slow'); });
> });
>
> Or, to make it more readable:
>
> $(document).ready(function() {
>$('#wrapper p').hide()
>$('#wrapper h2')
>.filter(':even')
> .css('backgroundColor', '#ef')
>.end()
>.filter(':odd')
> .css('backgroundColor', '#ef')
>.end()
>.css({cursor: 'hand', cursor: 'pointer', color: '#fff'})
>.click(function() {
> $(this).siblings('p').slideToggle('slow');
>});
> });
>
>
> --Karl
> _
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
--
View this message in context:
http://www.nabble.com/Some-jQuery-tips-and-tricks-tf3219479.html#a9002620
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Oh. Ok. :) But I will still add different approaches whenever necessary :) Oh and an RSSS feed for changes... Hopefully over the weekend... Rick Faircloth wrote: > > Hi, Dmitrii… > > > > I think you’re misunderstanding what I’m saying… > > > > All I meant was that by the time I read about your > > problem with your code and went to look at your > > code on your site, the problem had already been solved > > and you had already updated the code on the site. > > > > I was just behind in reading about the problem and > > viewing the code. > > > > No need to change what you have online. > > > > Sorry for the confusion! > > > > Rick > > > > *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > *On Behalf Of *Dmitrii 'Mamut' Dimandt > *Sent:* Thursday, February 15, 2007 3:50 AM > *To:* jQuery Discussion. > *Subject:* Re: [jQuery] Some jQuery tips and tricks > > > > Yes, thank you. I will change the example to include different approaches > > > > > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Hi, Dmitrii… I think you’re misunderstanding what I’m saying… All I meant was that by the time I read about your problem with your code and went to look at your code on your site, the problem had already been solved and you had already updated the code on the site. I was just behind in reading about the problem and viewing the code. No need to change what you have online. Sorry for the confusion! Rick From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dmitrii 'Mamut' Dimandt Sent: Thursday, February 15, 2007 3:50 AM To: jQuery Discussion. Subject: Re: [jQuery] Some jQuery tips and tricks Yes, thank you. I will change the example to include different approaches ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Thank you! I will incorporate those changes! Kenneth wrote: > Interesting site, I was actually thinking of compiling something > similar myself, but more to do with either obtuse uses of $(). > However, I did notice a few things about your examples and thought I'd > mention them to you. These are merely suggestions; I won't be offended > if you ignore me :) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Yes, thank you. I will change the example to include different approaches Rick Faircloth wrote: > > I saw the comments made about your markup on a recent > > problem in an email you sent to the list, > > and when I went to look at the problem code at your site, it looked > exactly > > like the code someone suggested as a solution for you. > > > > In other words, by the time I read your email about your problem > > code and how you might change it, it had already been changed > > on your site, too. > > > > I expected to see two different approaches to the problem, instead > > I saw the same code and was confused. > > > > Does that make any sense? :o) > > > > Rick > > > > *From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > *On Behalf Of *Dmitrii Dimandt > *Sent:* Wednesday, February 14, 2007 10:40 AM > *To:* jQuery Discussion. > *Subject:* Re: [jQuery] Some jQuery tips and tricks > > > > > > On 2/13/07, *Rick Faircloth* <[EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]>> wrote: > > > > I know I'm very new to jQuery, but I thought my understanding of > > what was going on had been set back a few light years… :o) > > What exactly do you mean? :) > > What i like about jQuery is that you can "go with the flow" of your > thoughts. If you say "I want this and that behave like this and like > that", then it's just a simple task of writing these thoughts down in > the form of jQuery :) And after that someone will come and tell you > that there is a better way of doing that :) (and there usually is :)) ) > > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Interesting site, I was actually thinking of compiling something similar myself, but more to do with either obtuse uses of $(). However, I did notice a few things about your examples and thought I'd mention them to you. These are merely suggestions; I won't be offended if you ignore me :) In the 1st example, the following sentence had me scratching my head initially: "And we want the page to be indexed by search engines." It took a minute of me looking at the code (and then the API) to realize the relevance. If your aim is to inform and educate the reader, I would suggest some form of mapping the intent (or purpose) to the implementation. Being the author of numerous help articles and walk-throughs, I've found that comprehension is generally better when you define not only the problems, but also define the elements of the solution that solve those parts of the problem. I think an example would explain this better: 1) We want bodies of these articles to be hidden on page load. 2) We want to toggle the visibility of these articles by clicking on the headers. 3) We also want to color odd and even headers differently. 4) And we want the page to be indexed by search engines. // 1) using $(document).ready(); runs the code within when the page is loaded $(document).ready( function(){ // define our targets: all's in id="wrapper" $("#wrapper > li").each( function(index){ var obj = $(this); obj // narrow our elements to the headers only .find("h2") .css( { // 3) color the odd and even headers differently backgroundColor: index % 2 == 0 ? "#ef" : "#ef", cursor: "hand", cursor: "pointer", color: "#FFF" } ) // 2) assign onclick() functions to the elements .click( function(){ obj.find("p").toggle(); } ) .end() // 4) since the
's are initially shown, hide the
's when //the page loads; this allows agents without JS support, //like spiders, screen readers, etc., to still see them. .find("p").hide(); } ) } ); Minor note on example #2: valid XHTML requires closing tags. Browsers will generally fix this problem for you during the page rendering process, however remember that for XHTML that all tags must either be self-closing ( i.e. ) or must have an explicit closing tag. Minor note on all examples: language="Javascript" is deprecated; there's no need for it. Cheers, and I look forward to more tips! -kenman ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
I saw the comments made about your markup on a recent problem in an email you sent to the list, and when I went to look at the problem code at your site, it looked exactly like the code someone suggested as a solution for you. In other words, by the time I read your email about your problem code and how you might change it, it had already been changed on your site, too. I expected to see two different approaches to the problem, instead I saw the same code and was confused. Does that make any sense? :o) Rick From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dmitrii Dimandt Sent: Wednesday, February 14, 2007 10:40 AM To: jQuery Discussion. Subject: Re: [jQuery] Some jQuery tips and tricks On 2/13/07, Rick Faircloth <[EMAIL PROTECTED]> wrote: I know I'm very new to jQuery, but I thought my understanding of what was going on had been set back a few light years. :o) What exactly do you mean? :) What i like about jQuery is that you can "go with the flow" of your thoughts. If you say "I want this and that behave like this and like that", then it's just a simple task of writing these thoughts down in the form of jQuery :) And after that someone will come and tell you that there is a better way of doing that :) (and there usually is :)) ) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
On 2/13/07, Rick Faircloth <[EMAIL PROTECTED]> wrote: I know I'm very new to jQuery, but I thought my understanding of what was going on had been set back a few light years… :o) What exactly do you mean? :) What i like about jQuery is that you can "go with the flow" of your thoughts. If you say "I want this and that behave like this and like that", then it's just a simple task of writing these thoughts down in the form of jQuery :) And after that someone will come and tell you that there is a better way of doing that :) (and there usually is :)) ) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
On 2/13/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
Looks good to me. Also, instead of this...
$("p", $(this).parent()).slideToggle("slow");
...you could do this:
$(this).siblings('p').slideToggle('slow');
Thank you. I completely overlooked this possibility :)
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
On Feb 13, 10:47 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> On Feb 13, 2007, at 11:22 AM, R. Rajesh Jeba Anbiah wrote:
>
> > For #1, what about:
> > $(document).ready(function() {
> >$("#wrapper p").hide(); //hide initially
> >$("#wrapper h2").click (function() {
> >$("p", $(this).parent()).slideToggle("slow");
> >});
> > });
>
> Looks good to me. Also, instead of this...
>
> > $("p", $(this).parent()).slideToggle("slow");
>
> ...you could do this:
>$(this).siblings('p').slideToggle('slow');
Oh cool, thanks for pointing it.
--
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
On Feb 13, 2007, at 11:22 AM, R. Rajesh Jeba Anbiah wrote:
For #1, what about:
$(document).ready(function() {
$("#wrapper p").hide(); //hide initially
$("#wrapper h2").click (function() {
$("p", $(this).parent()).slideToggle("slow");
});
});
Looks good to me. Also, instead of this...
$("p", $(this).parent()).slideToggle("slow");
...you could do this:
$(this).siblings('p').slideToggle('slow');
If you still want to add all the css stuff in the jQuery code (I
usually prefer adding and removing classes), you can do that in the
same line by using the .filter() method:
$(document).ready(function() {
$('#wrapper p').hide()
$('#wrapper h2').filter(':even').css('backgroundColor',
'#ef').end().filter(':odd').css('backgroundColor', '#ef').end
().css({cursor: 'hand', cursor: 'pointer', color: '#fff'}).click
(function() { $(this).siblings('p').slideToggle('slow'); });
});
Or, to make it more readable:
$(document).ready(function() {
$('#wrapper p').hide()
$('#wrapper h2')
.filter(':even')
.css('backgroundColor', '#ef')
.end()
.filter(':odd')
.css('backgroundColor', '#ef')
.end()
.css({cursor: 'hand', cursor: 'pointer', color: '#fff'})
.click(function() {
$(this).siblings('p').slideToggle('slow');
});
});
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 13, 2:23 pm, "Dmitrii Dimandt" <[EMAIL PROTECTED]> wrote:
I've started collecting some examples I've come across while solving
problems using jQuery. I guess they could be interesting to the
community as a whole.
These (sort of) tricks are available here:http://dmitriid.com/
jquery/en/
--
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
On Feb 13, 2:23 pm, "Dmitrii Dimandt" <[EMAIL PROTECTED]> wrote:
> I've started collecting some examples I've come across while solving
> problems using jQuery. I guess they could be interesting to the
> community as a whole.
>
> These (sort of) tricks are available here:http://dmitriid.com/jquery/en/
For #1, what about:
$(document).ready(function() {
$("#wrapper p").hide(); //hide initially
$("#wrapper h2").click (function() {
$("p", $(this).parent()).slideToggle("slow");
});
});
--
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Boy. I was about to say that Dmitrii's markup looks exactly like what Klaus suggested. then I realized Dmitrii's markup had already been updated on his example page. I know I'm very new to jQuery, but I thought my understanding of what was going on had been set back a few light years. :o) Rick From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Dmitrii Dimandt Sent: Tuesday, February 13, 2007 7:30 AM To: jQuery Discussion. Subject: Re: [jQuery] Some jQuery tips and tricks Thank you! The example has been updated! On 2/13/07, Klaus Hartl <[EMAIL PROTECTED]> wrote: Here's more semantic markup I'd use for that: Title 1 Body 1 Title 2 Body 2 Title 3 Body 3 The good thing about semantic markup is that you don't need classes or id's to separate the elements because you can pick them by type (Using div soup naturally results in classitis as well). You should also add the missing type attribute to your style and script elements. As these examples seem to be meant as copy & paste do not let the people copy the incorrect markup. Apart from that, thanks for your efforts of course. -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Thank you! The example has been updated! On 2/13/07, Klaus Hartl <[EMAIL PROTECTED]> wrote: Here's more semantic markup I'd use for that: Title 1 Body 1 Title 2 Body 2 Title 3 Body 3 The good thing about semantic markup is that you don't need classes or id's to separate the elements because you can pick them by type (Using div soup naturally results in classitis as well). You should also add the missing type attribute to your style and script elements. As these examples seem to be meant as copy & paste do not let the people copy the incorrect markup. Apart from that, thanks for your efforts of course. -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Dmitrii Dimandt schrieb:
> Hi all
>
> I've started collecting some examples I've come across while solving
> problems using jQuery. I guess they could be interesting to the
> community as a whole.
>
> These (sort of) tricks are available here: http://dmitriid.com/jquery/en/
>
> I hope to add more examples with time.
>
> Hopefully, this will be helpful to at least someone :)
A few things I noticed:
* In the first example you're using invalid HTML (apart from the fact
that it's also div soup). An id is supposed to be unique in a document
and if you're using the same id more than once, that will most probably
cause problems and unexpected behaviour. For example will
document.getElementById('title') only return the first element in the
source with that id.
* Instead of using correct semantics - you're already talking of headers
so why don't you use it - you're using divs only.
* Using to create margins is purely presentational and not any
better than using font tags or inline styles. It's hard to control
margins via CSS with these breaks in the way.
Here's more semantic markup I'd use for that:
Title 1
Body 1
Title 2
Body 2
Title 3
Body 3
The good thing about semantic markup is that you don't need classes or
id's to separate the elements because you can pick them by type (Using
div soup naturally results in classitis as well).
You should also add the missing type attribute to your style and script
elements. As these examples seem to be meant as copy & paste do not let
the people copy the incorrect markup.
Apart from that, thanks for your efforts of course.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Some jQuery tips and tricks
Just one comment, i dont like to repeat ID's =) 2007/2/13, Dmitrii Dimandt <[EMAIL PROTECTED]>: Hi all I've started collecting some examples I've come across while solving problems using jQuery. I guess they could be interesting to the community as a whole. These (sort of) tricks are available here: http://dmitriid.com/jquery/en/ I hope to add more examples with time. Hopefully, this will be helpful to at least someone :) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- Rafael Santos Sá :: webdeveloper www.rafael-santos.com ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
[jQuery] Some jQuery tips and tricks
Hi all I've started collecting some examples I've come across while solving problems using jQuery. I guess they could be interesting to the community as a whole. These (sort of) tricks are available here: http://dmitriid.com/jquery/en/ I hope to add more examples with time. Hopefully, this will be helpful to at least someone :) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
