[jQuery] Re: A better way of writing this code?
While
$("li a").hover(function(){
$(this).addClass("move");
}, function() {
$(this).removeClass("move");
});
works well in theory, I've found that
$("li a").hover(function(){
$("li a").removeClass("move");
$(this).addClass("move");
}, function() {
$(this).removeClass("move");
});
is necessary in practice. Assuming of course that you can't use the
CSS solution which is obviously preferable.
_jason
On May 15, 8:09 am, "benoit v." wrote:
> what about that ?
>
> $("li a").hover(function(){
> $(this).toggleClass("move");
> });
>
> On May 15, 4:42 pm, Jthomas wrote:
>
> > Hi Calvin,
> > I think what you're looking for is something like this, as James said.
>
> > $("li a").hover(function(){
> > $(this).addClass("move");
> > }, function() {
> > $(this).removeClass("move");
> > });
>
> > Of course, include document ready function.
> > -Jon Thomas
>
> > On May 14, 8:35 pm, Calvin wrote:
>
> > > Hi,
>
> > > I was able to get this script to work and was wondering if there was
> > > a better/proper/more efficient way of writing it. Here is the script:
>
> > > $(document).ready(function() {
> > > $('li.a').hover(function() {
> > > $(this).addClass('move');
> > > });
> > > $('li.a').mouseLeave(function() {
> > > $(this).removeClass('move');
>
> > > )};
> > > )};
>
> > > Thanks for your time,
>
> > > Calvin Stephens
[jQuery] Re: A better way of writing this code?
what about that ?
$("li a").hover(function(){
$(this).toggleClass("move");
});
On May 15, 4:42 pm, Jthomas wrote:
> Hi Calvin,
> I think what you're looking for is something like this, as James said.
>
> $("li a").hover(function(){
> $(this).addClass("move");
> }, function() {
> $(this).removeClass("move");
> });
>
> Of course, include document ready function.
> -Jon Thomas
>
> On May 14, 8:35 pm, Calvin wrote:
>
> > Hi,
>
> > I was able to get this script to work and was wondering if there was
> > a better/proper/more efficient way of writing it. Here is the script:
>
> > $(document).ready(function() {
> > $('li.a').hover(function() {
> > $(this).addClass('move');
> > });
> > $('li.a').mouseLeave(function() {
> > $(this).removeClass('move');
>
> > )};
> > )};
>
> > Thanks for your time,
>
> > Calvin Stephens
[jQuery] Re: A better way of writing this code?
Hi Calvin,
I think what you're looking for is something like this, as James said.
$("li a").hover(function(){
$(this).addClass("move");
}, function() {
$(this).removeClass("move");
});
Of course, include document ready function.
-Jon Thomas
On May 14, 8:35 pm, Calvin wrote:
> Hi,
>
> I was able to get this script to work and was wondering if there was
> a better/proper/more efficient way of writing it. Here is the script:
>
> $(document).ready(function() {
> $('li.a').hover(function() {
> $(this).addClass('move');
> });
> $('li.a').mouseLeave(function() {
> $(this).removeClass('move');
>
> )};
> )};
>
> Thanks for your time,
>
> Calvin Stephens
[jQuery] Re: A better way of writing this code?
On May 15, 3:24 pm, "ryan.j" wrote: > as rob said, unless the OP is using the anchor's class itself in > conjunction with some other jquery selector at that point, the OP > would be better off just using :hover. > > jquery is awesome, but using it to do stuff CSS already does better is > considerably less awesome. And less efficient which was a primary concern of the OP :)
[jQuery] Re: A better way of writing this code?
as rob said, unless the OP is using the anchor's class itself in conjunction with some other jquery selector at that point, the OP would be better off just using :hover. jquery is awesome, but using it to do stuff CSS already does better is considerably less awesome. On May 15, 9:22 am, RobG wrote: > On May 15, 5:22 pm, Karthikraj wrote: > > > But CSS :hover will not work in IE6. So better use script > > Rubbish. The OP wants to use it on an A element, which > supports :hover in probably every browser since Navigator and IE 4, if > not older. > > -- > Rob
[jQuery] Re: A better way of writing this code?
On May 15, 5:22 pm, Karthikraj wrote: > But CSS :hover will not work in IE6. So better use script Rubbish. The OP wants to use it on an A element, which supports :hover in probably every browser since Navigator and IE 4, if not older. -- Rob
[jQuery] Re: A better way of writing this code?
:hover does work in IE6, it's just limited to elements.
Jonathan
Karthikraj wrote:
But CSS :hover will not work in IE6. So better use script
On May 15, 9:26 am, RobG wrote:
On May 15, 11:35 am, Calvin wrote:
Hi,
I was able to get this script to work and was wondering if there was
a better/proper/more efficient way of writing it. Here is the script:
$(document).ready(function() {
$('li.a').hover(function() {
$(this).addClass('move');
});
$('li.a').mouseLeave(function() {
$(this).removeClass('move');
)};
)};
Use the CSS a:hover pseudo-class and set your style rules there, no
script required.
li a:hover {
/* insert rules */
}
http://www.w3.org/TR/CSS2/selector.html#x32>
--
Rob
[jQuery] Re: A better way of writing this code?
$(function() {
$("#myid").hover(function() {
// when mouse is over element
}, function() {
// else
});
});
On Fri, May 15, 2009 at 9:22 AM, Karthikraj wrote:
>
> But CSS :hover will not work in IE6. So better use script
>
> On May 15, 9:26 am, RobG wrote:
> > On May 15, 11:35 am, Calvin wrote:
> >
> > > Hi,
> >
> > > I was able to get this script to work and was wondering if there was
> > > a better/proper/more efficient way of writing it. Here is the script:
> >
> > > $(document).ready(function() {
> > > $('li.a').hover(function() {
> > > $(this).addClass('move');
> > > });
> > > $('li.a').mouseLeave(function() {
> > >$(this).removeClass('move');
> > > )};
> > > )};
> >
> > Use the CSS a:hover pseudo-class and set your style rules there, no
> > script required.
> >
> > li a:hover {
> > /* insert rules */
> > }
> >
> > http://www.w3.org/TR/CSS2/selector.html#x32>
> >
> > --
> > Rob
[jQuery] Re: A better way of writing this code?
But CSS :hover will not work in IE6. So better use script
On May 15, 9:26 am, RobG wrote:
> On May 15, 11:35 am, Calvin wrote:
>
> > Hi,
>
> > I was able to get this script to work and was wondering if there was
> > a better/proper/more efficient way of writing it. Here is the script:
>
> > $(document).ready(function() {
> > $('li.a').hover(function() {
> > $(this).addClass('move');
> > });
> > $('li.a').mouseLeave(function() {
> > $(this).removeClass('move');
> > )};
> > )};
>
> Use the CSS a:hover pseudo-class and set your style rules there, no
> script required.
>
> li a:hover {
> /* insert rules */
> }
>
> http://www.w3.org/TR/CSS2/selector.html#x32>
>
> --
> Rob
[jQuery] Re: A better way of writing this code?
On May 15, 11:35 am, Calvin wrote:
> Hi,
>
> I was able to get this script to work and was wondering if there was
> a better/proper/more efficient way of writing it. Here is the script:
>
> $(document).ready(function() {
> $('li.a').hover(function() {
> $(this).addClass('move');
> });
> $('li.a').mouseLeave(function() {
> $(this).removeClass('move');
> )};
> )};
Use the CSS a:hover pseudo-class and set your style rules there, no
script required.
li a:hover {
/* insert rules */
}
http://www.w3.org/TR/CSS2/selector.html#x32 >
--
Rob
[jQuery] Re: A better way of writing this code?
Thanks James!
On Thu, May 14, 2009 at 6:49 PM, James wrote:
>
> Slight typo near the end.
>
> $(document).ready(function() {
> $('li.a').hover(
> function() { $(this).addClass('move'); },
> function() { $(this).removeClass('move'); }
> );
> )};
>
> On May 14, 3:47 pm, James wrote:
>> $(document).ready(function() {
>> $('li.a').hover(
>> function() { $(this).addClass('move'); },
>> function() { $(this).removeClass('move'); }
>> )};
>> )};
>>
>> On May 14, 3:35 pm, Calvin wrote:
>>
>> > Hi,
>>
>> > I was able to get this script to work and was wondering if there was
>> > a better/proper/more efficient way of writing it. Here is the script:
>>
>> > $(document).ready(function() {
>> > $('li.a').hover(function() {
>> > $(this).addClass('move');
>> > });
>> > $('li.a').mouseLeave(function() {
>> > $(this).removeClass('move');
>>
>> > )};
>> > )};
>>
>> > Thanks for your time,
>>
>> > Calvin Stephens
[jQuery] Re: A better way of writing this code?
Slight typo near the end.
$(document).ready(function() {
$('li.a').hover(
function() { $(this).addClass('move'); },
function() { $(this).removeClass('move'); }
);
)};
On May 14, 3:47 pm, James wrote:
> $(document).ready(function() {
> $('li.a').hover(
> function() { $(this).addClass('move'); },
> function() { $(this).removeClass('move'); }
> )};
> )};
>
> On May 14, 3:35 pm, Calvin wrote:
>
> > Hi,
>
> > I was able to get this script to work and was wondering if there was
> > a better/proper/more efficient way of writing it. Here is the script:
>
> > $(document).ready(function() {
> > $('li.a').hover(function() {
> > $(this).addClass('move');
> > });
> > $('li.a').mouseLeave(function() {
> > $(this).removeClass('move');
>
> > )};
> > )};
>
> > Thanks for your time,
>
> > Calvin Stephens
[jQuery] Re: A better way of writing this code?
$(document).ready(function() {
$('li.a').hover(
function() { $(this).addClass('move'); },
function() { $(this).removeClass('move'); }
)};
)};
On May 14, 3:35 pm, Calvin wrote:
> Hi,
>
> I was able to get this script to work and was wondering if there was
> a better/proper/more efficient way of writing it. Here is the script:
>
> $(document).ready(function() {
> $('li.a').hover(function() {
> $(this).addClass('move');
> });
> $('li.a').mouseLeave(function() {
> $(this).removeClass('move');
>
> )};
> )};
>
> Thanks for your time,
>
> Calvin Stephens
[jQuery] Re: A better way
Very good to know! Now I know what to look for :) On Nov 20, 6:11 pm, Dave Methvin <[EMAIL PROTECTED]> wrote: > > I was looking at the jQuery docs for toggle here > > http://docs.jquery.com/Events/toggle > > The toggle() without any arguments implements show/hide functionality, > so it's in the Effects section: > > http://docs.jquery.com/Effects/toggle > > There are a few other words that overlap like this, such as .load() > which either loads some content via ajax or sets an onload handler, > depending on its arguments.
[jQuery] Re: A better way
> I was looking at the jQuery docs for toggle here > http://docs.jquery.com/Events/toggle The toggle() without any arguments implements show/hide functionality, so it's in the Effects section: http://docs.jquery.com/Effects/toggle There are a few other words that overlap like this, such as .load() which either loads some content via ajax or sets an onload handler, depending on its arguments.
[jQuery] Re: A better way
That works perfectly! 10+ lines to what could be a one liner.
I was looking at the jQuery docs for toggle here
http://docs.jquery.com/Events/toggle
and it was confusing me... it wasn't clear to me that an empty toggle
() would do show/hide. Furthermore, when I tried to add functions into
them (test functions with alert() inside of them, they didn't seem to
fire. Any idea why?
On Nov 20, 4:02 pm, Lukas Pitschl | Dressy Vagabonds
<[EMAIL PROTECTED]> wrote:
> Hi,
>
> i think this is a short way to do it, altough i haven't tested it
> myself.
>
> $("a.showHide").click(function() {
> $("#" + $(this).attr('rel')).toggle();
>
> });
>
> It uses the rel attribute of the anchor to find the DIV-Node, and using
> the toggle method, the div is either hidden or displayed, depending
> on the current status.
>
> cheers
>
> lukas
>
> Am 21.11.2008 um 00:56 schrieb Brendan:
>
>
>
> > I am new to jQuery (coming from Mootools) and the way things are done
> > here are a bit different, but I am willing to put a lot of effort into
> > learning it.
>
> > That said, I have some working code here (I wrap it in the $
> > (document).ready function) but I wanted to know if there is a more
> > efficient way to do it using jQuery's built in functions/selectors. I
> > am flexible about how it is achieved, but I just need to know how I
> > should "think" with jQuery.
>
> > $("a.showHide").click(function(){
>
> > var aRel = $(this).attr("rel");
> > var dTog = $("div.showHide[id="+aRel+"]");
>
> > if(dTog.css('display') == 'block') {
> > dTog.css('display','none');
> > } else {
> > dTog.css('display','block');
> > }
>
> > return false;
> > });
>
> > a basic HTML example of this is:
>
> > click me
> > hide me
>
> > You can test it yourself, but it just shows or hides the div when the
> > anchor is clicked. The div ID corresponds to the anchor's REL
> > attribute.
>
> > So in short-- is there a better way?
[jQuery] Re: A better way
Hi,
i think this is a short way to do it, altough i haven't tested it
myself.
$("a.showHide").click(function() {
$("#" + $(this).attr('rel')).toggle();
});
It uses the rel attribute of the anchor to find the DIV-Node, and using
the toggle method, the div is either hidden or displayed, depending
on the current status.
cheers
lukas
Am 21.11.2008 um 00:56 schrieb Brendan:
I am new to jQuery (coming from Mootools) and the way things are done
here are a bit different, but I am willing to put a lot of effort into
learning it.
That said, I have some working code here (I wrap it in the $
(document).ready function) but I wanted to know if there is a more
efficient way to do it using jQuery's built in functions/selectors. I
am flexible about how it is achieved, but I just need to know how I
should "think" with jQuery.
$("a.showHide").click(function(){
var aRel = $(this).attr("rel");
var dTog = $("div.showHide[id="+aRel+"]");
if(dTog.css('display') == 'block') {
dTog.css('display','none');
} else {
dTog.css('display','block');
}
return false;
});
a basic HTML example of this is:
click me
hide me
You can test it yourself, but it just shows or hides the div when the
anchor is clicked. The div ID corresponds to the anchor's REL
attribute.
So in short-- is there a better way?
[jQuery] Re: A better way to animate this list..?
Cheers Guys, a great help!!
[jQuery] Re: A better way to animate this list..?
didn't notice that, thanks a lot!
- ricardo
On Sep 23, 1:00 am, Eric <[EMAIL PROTECTED]> wrote:
> You can trim it down a bit by using the index that each() passes to
> the callback function:
>
> $('#jq-secondaryNavigation li').each( function(i) {
> var that = $(this);
> setTimeout( function () {that.fadeIn('slow')}, i * 500 );
>
> });
>
> On Sep 22, 11:14 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > got it! :D
>
> > $('#jq-secondaryNavigation li').each(function(){
> > var index = $('#jq-secondaryNavigation li').index(this);
> > setTimeout("$('#jq-secondaryNavigation li:eq("+index
> > +")').fadeOut(300)",index*500);
>
> > });
>
> > 500 is the time between the animations.
>
> > hope this helps,
> > ricardo
>
> > On Sep 22, 11:46 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > > This works, but there must be a better way (without using a global
> > > var).
>
> > > fade = function(){
> > > $(this).next().fadeIn(500,fade);};
>
> > > $('#ul.menu li:first-child').fadeIn(500,fade);
>
> > > On Sep 22, 5:34 pm, PaulC <[EMAIL PROTECTED]> wrote:
>
> > > > I'm new to jQuery so be gentle!!
>
> > > > I have a menu list, and I want each li to fade in one at a time, I can
> > > > do this with the following code:
>
> > > > $("ul.menu li:first-child").fadeIn(1000, function () {
> > > > $(this).next().fadeIn(1000, function () {
> > > > $(this).next().fadeIn(1000, function () {
> > > > $(this).next().fadeIn(1000, function ()
> > > > {
> > > > $(this).next().fadeIn(1000,
> > > > function () {
> > > >
> > > > $(this).next().fadeIn(1000, function (){
> > > >
> > > > $(this).next().fadeIn(1000, function (){
> > > >
> > > > $(this).next().fadeIn(1000);
> > > > })
> > > > });
> > > > });
> > > > });
> > > > });
> > > > });
> > > > });
>
> > > > As you can see its not nice! I'm sure there is a better way,
> > > > especially as the menu is dynamic so I'd never know how many items
> > > > there are.
>
> > > > Any help or advice is appreciated.
[jQuery] Re: A better way to animate this list..?
You can trim it down a bit by using the index that each() passes to
the callback function:
$('#jq-secondaryNavigation li').each( function(i) {
var that = $(this);
setTimeout( function () {that.fadeIn('slow')}, i * 500 );
});
On Sep 22, 11:14 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> got it! :D
>
> $('#jq-secondaryNavigation li').each(function(){
> var index = $('#jq-secondaryNavigation li').index(this);
> setTimeout("$('#jq-secondaryNavigation li:eq("+index
> +")').fadeOut(300)",index*500);
>
> });
>
> 500 is the time between the animations.
>
> hope this helps,
> ricardo
>
> On Sep 22, 11:46 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > This works, but there must be a better way (without using a global
> > var).
>
> > fade = function(){
> > $(this).next().fadeIn(500,fade);};
>
> > $('#ul.menu li:first-child').fadeIn(500,fade);
>
> > On Sep 22, 5:34 pm, PaulC <[EMAIL PROTECTED]> wrote:
>
> > > I'm new to jQuery so be gentle!!
>
> > > I have a menu list, and I want each li to fade in one at a time, I can
> > > do this with the following code:
>
> > > $("ul.menu li:first-child").fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000,
> > > function () {
> > >
> > > $(this).next().fadeIn(1000, function (){
> > >
> > > $(this).next().fadeIn(1000, function (){
> > >
> > > $(this).next().fadeIn(1000);
> > > })
> > > });
> > > });
> > > });
> > > });
> > > });
> > > });
>
> > > As you can see its not nice! I'm sure there is a better way,
> > > especially as the menu is dynamic so I'd never know how many items
> > > there are.
>
> > > Any help or advice is appreciated.
[jQuery] Re: A better way to animate this list..?
got it! :D
$('#jq-secondaryNavigation li').each(function(){
var index = $('#jq-secondaryNavigation li').index(this);
setTimeout("$('#jq-secondaryNavigation li:eq("+index
+")').fadeOut(300)",index*500);
});
500 is the time between the animations.
hope this helps,
ricardo
On Sep 22, 11:46 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> This works, but there must be a better way (without using a global
> var).
>
> fade = function(){
> $(this).next().fadeIn(500,fade);};
>
> $('#ul.menu li:first-child').fadeIn(500,fade);
>
> On Sep 22, 5:34 pm, PaulC <[EMAIL PROTECTED]> wrote:
>
> > I'm new to jQuery so be gentle!!
>
> > I have a menu list, and I want each li to fade in one at a time, I can
> > do this with the following code:
>
> > $("ul.menu li:first-child").fadeIn(1000, function () {
> > $(this).next().fadeIn(1000, function () {
> > $(this).next().fadeIn(1000, function () {
> > $(this).next().fadeIn(1000, function () {
> > $(this).next().fadeIn(1000,
> > function () {
> > $(this).next().fadeIn(1000,
> > function (){
> >
> > $(this).next().fadeIn(1000, function (){
> >
> > $(this).next().fadeIn(1000);
> > })
> > });
> > });
> > });
> > });
> > });
> > });
>
> > As you can see its not nice! I'm sure there is a better way,
> > especially as the menu is dynamic so I'd never know how many items
> > there are.
>
> > Any help or advice is appreciated.
[jQuery] Re: A better way to animate this list..?
This works, but there must be a better way (without using a global
var).
fade = function(){
$(this).next().fadeIn(500,fade);
};
$('#ul.menu li:first-child').fadeIn(500,fade);
On Sep 22, 5:34 pm, PaulC <[EMAIL PROTECTED]> wrote:
> I'm new to jQuery so be gentle!!
>
> I have a menu list, and I want each li to fade in one at a time, I can
> do this with the following code:
>
> $("ul.menu li:first-child").fadeIn(1000, function () {
> $(this).next().fadeIn(1000, function () {
> $(this).next().fadeIn(1000, function () {
> $(this).next().fadeIn(1000, function () {
> $(this).next().fadeIn(1000, function
> () {
> $(this).next().fadeIn(1000,
> function (){
>
> $(this).next().fadeIn(1000, function (){
>
> $(this).next().fadeIn(1000);
> })
> });
> });
> });
> });
> });
> });
>
> As you can see its not nice! I'm sure there is a better way,
> especially as the menu is dynamic so I'd never know how many items
> there are.
>
> Any help or advice is appreciated.
[jQuery] Re: A better way to do this?
".find()" should help
$(this).find("ul > li > a").each(
)
[jQuery] Re: A better way to do this?
Gracias amigo, that did the trick! I knew it was simple ;-)
On Aug 24, 4:27 pm, MorningZ <[EMAIL PROTECTED]> wrote:
> ".find()" should help
>
> $(this).find("ul > li > a").each(
>
> )
[jQuery] Re: A better way to update jQuery & Plug-ins...
Thanks for the perspective, Sean. I realize this is a "volunteer army", and I wouldn't even suggest what I proposed, but jQuery and its plug-ins undergo such rapid development that if one doesn't "eat, drink, and sleep" jQuery development every day it's an almost impossible task to keep up with what works together and what doesn't. And the time spent trying to figure out the right combinations is time I spend not making money (I'm an independent contractor. it's entirely different if someone is on salary). Just looking for some way to bring some order to the chaos. Rick From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Sean Catchpole Sent: Sunday, September 16, 2007 2:00 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: A better way to update jQuery & Plug-ins... Anyone can test with the latest version of jquery by grabbing a nightly build. http://code.jquery.com/nightlies/jquery-nightly.js The issue is rather that plugin authors don't have the time to update their plugins right when the new version comes out. I believe there are already some plugins labeled "official". Remember that everyone here develops in their free time so placing high demands isn't a viable option. I agree that there is quite the mayhem when new versions are released and plugins must be updated, but this is true with most software with plugins, like firefox addons, or world of warcraft addons. Discussion of ways to improve this is always appreciated though, thank you. ~Sean
[jQuery] Re: A better way to update jQuery & Plug-ins...
Anyone can test with the latest version of jquery by grabbing a nightly build. http://code.jquery.com/nightlies/jquery-nightly.js The issue is rather that plugin authors don't have the time to update their plugins right when the new version comes out. I believe there are already some plugins labeled "official". Remember that everyone here develops in their free time so placing high demands isn't a viable option. I agree that there is quite the mayhem when new versions are released and plugins must be updated, but this is true with most software with plugins, like firefox addons, or world of warcraft addons. Discussion of ways to improve this is always appreciated though, thank you. ~Sean
