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
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
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
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
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
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
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
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');
snip
Oh cool, thanks for pointing it.
--
?php echo 'Just another PHP saint'; ?
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 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 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
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
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.
script type=text/javascript
// 1) using $(document).ready(); runs the code within when the page
is loaded
$(document).ready(
function(){
// define our targets: all li'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 p
elements
.click(
function(){
obj.find(p).toggle();
}
)
.end()
// 4) since the p's are initially shown, hide
the p's when
//the page loads; this allows agents
without JS support,
//like spiders, screen readers, etc., to
still see them.
.find(p).hide();
}
)
}
);
/script
Minor note on example #2: valid XHTML requires closing TD 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. br/) 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
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/
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 br / 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:
ul id=wrapper
li
h2Title 1/h2
pBody 1/p
/li
li
h2Title 2/h2
pBody 2/p
/li
li
h2Title 3/h2
pBody 3/p
/li
/ul
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
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: ul id=wrapper li h2Title 1/h2 pBody 1/p /li li h2Title 2/h2 pBody 2/p /li li h2Title 3/h2 pBody 3/p /li /ul 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
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/
snip
For #1, what about:
$(document).ready(function() {
$(#wrapper p).hide(); //hide initially
$(#wrapper h2).click (function() {
$(p, $(this).parent()).slideToggle(slow);
});
});
--
?php echo 'Just another PHP saint'; ?
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/
snip
--
?php echo 'Just another PHP saint'; ?
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/
