[jQuery] Re: toggleClass() help - assigning double class names that look like this: classname classname
Nice - that code blocks looks way turbo awesome. I can't wait to be able to
bust out nice looking jquery code like that! XD
Thanks again for your help.
Jenni
No problem.
btw you can simplify further if you wish...
function toggleMode(mediaType) {
$.each(['.video', '.music', '.radio'], function(n, v){
$(v)[(mediaType == n+1 ? 'add' : 'remove')+'Class']('active');
});
}
On Nov 23, 9:01 am, [EMAIL PROTECTED] wrote:
Hey Wizzud. Thanks for your help - I figured it out. You're right - there was
no reason to use the toggleClass function in this case. The addClass and
removeClass were the way to go. It totally makes sense now - I'm just adding
the active class to whatever existing class I need. This is very helpful!
Here is my final code sample:
function toggleMode(mediaType) {
// reset all tabs
$(.music).removeClass(active);$(.video).removeClass(active);$(.radio).
removeClass(active);
// set active
if (mediaType == 1) $(.video).addClass(active);
else if (mediaType == 2) $(.music).addClass(active);
else if (mediaType == 3) $(.radio).addClass(active);
}
[jQuery] Re: toggleClass() help - assigning double class names that look like this: classname classname
by the way is it bad practice to use functions in jquery? It feels kind of like
going against its unobtrusive nature when I write them...
No problem.
btw you can simplify further if you wish...
function toggleMode(mediaType) {
$.each(['.video', '.music', '.radio'], function(n, v){
$(v)[(mediaType == n+1 ? 'add' : 'remove')+'Class']('active');
});
}
On Nov 23, 9:01 am, [EMAIL PROTECTED] wrote:
Hey Wizzud. Thanks for your help - I figured it out. You're right - there was
no reason to use the toggleClass function in this case. The addClass and
removeClass were the way to go. It totally makes sense now - I'm just adding
the active class to whatever existing class I need. This is very helpful!
Here is my final code sample:
function toggleMode(mediaType) {
// reset all tabs
$(.music).removeClass(active);$(.video).removeClass(active);$(.radio).
removeClass(active);
// set active
if (mediaType == 1) $(.video).addClass(active);
else if (mediaType == 2) $(.music).addClass(active);
else if (mediaType == 3) $(.radio).addClass(active);
}
[jQuery] Re: toggleClass() help - assigning double class names that look like this: classname classname
Hey Wizzud. Thanks for your help - I figured it out. You're right - there was
no reason to use the toggleClass function in this case. The addClass and
removeClass were the way to go. It totally makes sense now - I'm just adding
the active class to whatever existing class I need. This is very helpful!
Here is my final code sample:
function toggleMode(mediaType) {
// reset all tabs
$(.music).removeClass(active);$(.video).removeClass(active);$(.radio).removeClass(active);
// set active
if (mediaType == 1) $(.video).addClass(active);
else if (mediaType == 2) $(.music).addClass(active);
else if (mediaType == 3) $(.radio).addClass(active);
}
Thanks again!
By the way - cool website ;)
If all you want it to do is toggle *just* the active class then do
exactly that...
$('.video').toggleClass('active');
However, the $('.video') selector will never find any class='video
active' because you've changed them all to class='active' in the
previous code. Therefore it ( $('.video') ) will only ever pick up
elements that do not have 'active' class, therefore toggling is a
waste of effort and you might just as well do an addClass('active')!
*If* that's what you want to do?
If you want to toggle both video and active (leaving *just* 'active'
as the class!?) then use
$('.video').removeClass('video'.addClass('active');
If you want to do something else then describe it, or give a before/
after example.
BTW
$(.music.active).toggleClass(music);
might just as well be
$(.music.active).removeClass(music);
because the selector restricts your toggleClass() to only ever being
able to remove, never add!
On Nov 22, 6:43 pm, [EMAIL PROTECTED] wrote:
Hey Karl. That code just sets the element class attribute to empty:
from this:
a class=video/
to this
a class=/
Thanks.
Try $(.video).toggleClass(video active);
Karl Rudd
On Nov 22, 2007 10:23 AM, [EMAIL PROTECTED] wrote:
The problem with the code below is that it modifies the tag to look like
this:
Code:
a class=video video.active/
When it needs to look like this:
Code:
a class=video active/
Here is the code that I'm using:
Code:
function swapMode(mediaType) {
$(.music.active).toggleClass(music);
$(.video.active).toggleClass(video);
$(.radio.active).toggleClass(radio);
if (mediaType == 1)
$(.video).toggleClass(.video.active);
else if (mediaType == 2)
$(.music).toggleClass(.music.active);
else if (mediaType == 3)
$(.radio).toggleClass(.radio.active);
}
Thanks for your help
[jQuery] Re: toggleClass() help - assigning double class names that look like this: classname classname
Here is a runable code sample of my problem - this pretty much breaks it down
and shows what I'm trying to do :)
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleJQ TAB TEST THING/title
style
#media div.tabs{position:relative;height:41px;background:black
url(http://82.165.250.104/music/img/media_tabs.jpg) repeat: none;}
#media div.tabs
a{position:absolute;height:41px;width:105px;left:230px;background-image:url(http://82.165.250.104/music/img/media_tabs.jpg);background-position:-230px
0;}
#media div.tabs a.video{background-position-x:-230px !important;}
#media div.tabs a.video:hover, #media div.tabs
a.video.active{background-position:-230px -41px;}
#media div.tabs a.music{left:335px;background-position:-335px
0;background-position-x:-335px;}
#media div.tabs a.music:hover, #media div.tabs
a.music.active{background-position:-335px -41px;}
#media div.tabs a.radio{left:440px;background-position:-440px
0;background-position-x:-440px;}
#media div.tabs a.radio:hover, #media div.tabs
a.radio.active{background-position:-440px -41px;}
#media div.tabs a.active{background-position-y:-41px !important;}
/style
script src=http://code.jquery.com/jquery-latest.pack.js;
type=text/javascript/script
/head
body id=media
script type=text/javascript
function toggleMode(mediaType) {
// reset all tabs
$(.music).toggleClass(music);
$(.video).toggleClass(video);
$(.radio.active).toggleClass(radio);
// set active
if (mediaType == 1)
$(.video).toggleClass(active);
else if (mediaType == 2)
$(.music).toggleClass(active);
else if (mediaType == 3)
$(.radio).toggleClass(active);
alert(mediaType);
}
/script
div class=tabs
a class=music /a class=video /a class=radio /
/div
div style=text-align: left; padding-left: 230px;
a href=# onclick=toggleMode('1');Set Video Active/a
a href=# onclick=toggleMode('2');Set Music Active/a
a href=# onclick=toggleMode('3');Set Radio Active/a
/div
/body
/html
-- jq
Try $(.video).toggleClass(video active);
Karl Rudd
On Nov 22, 2007 10:23 AM, [EMAIL PROTECTED] wrote:
The problem with the code below is that it modifies the tag to look like
this:
Code:
a class=video video.active/
When it needs to look like this:
Code:
a class=video active/
Here is the code that I'm using:
Code:
function swapMode(mediaType) {
$(.music.active).toggleClass(music);
$(.video.active).toggleClass(video);
$(.radio.active).toggleClass(radio);
if (mediaType == 1)
$(.video).toggleClass(.video.active);
else if (mediaType == 2)
$(.music).toggleClass(.music.active);
else if (mediaType == 3)
$(.radio).toggleClass(.radio.active);
}
Thanks for your help
[jQuery] Re: toggleClass() help - assigning double class names that look like this: classname classname
Hey Karl. That code just sets the element class attribute to empty:
from this:
a class=video/
to this
a class=/
Thanks.
Try $(.video).toggleClass(video active);
Karl Rudd
On Nov 22, 2007 10:23 AM, [EMAIL PROTECTED] wrote:
The problem with the code below is that it modifies the tag to look like
this:
Code:
a class=video video.active/
When it needs to look like this:
Code:
a class=video active/
Here is the code that I'm using:
Code:
function swapMode(mediaType) {
$(.music.active).toggleClass(music);
$(.video.active).toggleClass(video);
$(.radio.active).toggleClass(radio);
if (mediaType == 1)
$(.video).toggleClass(.video.active);
else if (mediaType == 2)
$(.music).toggleClass(.music.active);
else if (mediaType == 3)
$(.radio).toggleClass(.radio.active);
}
Thanks for your help
[jQuery] toggleClass() help - assigning double class names that look like this: classname classname
The problem with the code below is that it modifies the tag to look like this:
Code:a class=video video.active/
When it needs to look like this:
Code:a class=video active/
Here is the code that I'm using:
Code:function swapMode(mediaType) {
$(.music.active).toggleClass(music);
$(.video.active).toggleClass(video);
$(.radio.active).toggleClass(radio);
if (mediaType == 1)
$(.video).toggleClass(.video.active);
else if (mediaType == 2)
$(.music).toggleClass(.music.active);
else if (mediaType == 3)
$(.radio).toggleClass(.radio.active);
}
Thanks for your help
