class toggle navigation

#1

Hello

I'm trying to implement a minimal navigation bar using jQuery's
toggleClass() function but can't seem to get it working, no matter how
many tips from all you gurus out there that I follow meticulously.

It's the .img_selector div at the bottom of the page:
http://www.thomasrugani.com/static/designobjects/02.html

I want to toggle the 'active' class for each <a> when it's selected,
to indicate which image is showing, so after calling jQuery, in the
<head> I've got

<script type="text/javascript">
$(document).ready(function(){
$('a').click(function () {
$(this).toggleClass('active');
});
});
</script>

then the links, which also include the showPic function:
---------------
<div class="img_selector">
Image  
<ul>
<li><a class="active" onclick="return showPic(this)" href="images/
stoppino_tictacs_lit.jpg" title="">01</a></li>
<li><a onclick="return showPic(this)" href="images/
stoppino_tictacs.jpg" title="">02</a></li>
<li><a onclick="return showPic(this)" href="images/
stoppino_tictac_base1.jpg" title="">03</a></li>
<li><a onclick="return showPic(this)" href="images/
stoppino_tictac_base2.jpg" title="">04</a></li>
</ul>
</div>
--------------------
Can anyone see what I'm missing? Thanks in advance..

Bernard

#2

Try this

<script>
$(document).ready(function(){
$('a').click(function() {
$(this).toggleClass('active');
showPic(this);
return false;
});
});
</script>

....

<div class="img_selector">Image  
<ul>
<li><a class="active" href="images/stoppino_tictacs_lit.jpg"
title="">01</a></li>
<li><a href="images/stoppino_tictacs.jpg"
title="">02</a></li>
<li><a href="images/stoppino_tictac_base1.jpg"
title="">03</a></li>
<li><a href="images/stoppino_tictac_base2.jpg"
title="">04</a></li>
</ul>
</div>

- Richard

On Mon, Nov 2, 2009 at 2:48 PM, Bernard Elsmere
<bernard.elsmere (AT) gmail (DOT) com>wrote:

Quote:

Hello

I'm trying to implement a minimal navigation bar using jQuery's
toggleClass() function but can't seem to get it working, no matter how
many tips from all you gurus out there that I follow meticulously.

It's the .img_selector div at the bottom of the page:
http://www.thomasrugani.com/static/designobjects/02.html

I want to toggle the 'active' class for each <a> when it's selected,
to indicate which image is showing, so after calling jQuery, in the
head> I've got

script type="text/javascript"
$(document).ready(function(){
$('a').click(function () {
$(this).toggleClass('active');
});
});
/script

then the links, which also include the showPic function:
---------------
div class="img_selector"
Image  
ul
li><a class="active" onclick="return showPic(this)"
href="images/
stoppino_tictacs_lit.jpg" title="">01</a></li
li><a onclick="return showPic(this)" href="images/
stoppino_tictacs.jpg" title="">02</a></li
li><a onclick="return showPic(this)" href="images/
stoppino_tictac_base1.jpg" title="">03</a></li
li><a onclick="return showPic(this)" href="images/
stoppino_tictac_base2.jpg" title="">04</a></li
/ul
/div
--------------------
Can anyone see what I'm missing? Thanks in advance..

Bernard

#3

thanks Richard, but it doesn't work - were you aiming to combine the 2
scripts in one?

On Nov 2, 9:08*pm, "Richard D. Worth" <rdwo... (AT) gmail (DOT) com> wrote:

Quote:

Try this

script
$(document).ready(function(){
* $('a').click(function() {
* * $(this).toggleClass('active');
* * showPic(this);
* * return false;
* });});

/script

...

div class="img_selector">Image  
* * * *<ul
* * * * * * * *<li><a class="active" href="images/stoppino_tictacs_lit.jpg"
title="">01</a></li
* * * * * * * *<li><a href="images/stoppino_tictacs.jpg"
title="">02</a></li
* * * * * * * *<li><a href="images/stoppino_tictac_base1.jpg"
title="">03</a></li
* * * * * * * *<li><a href="images/stoppino_tictac_base2.jpg"
title="">04</a></li
* * * *</ul
/div

- Richard

On Mon, Nov 2, 2009 at 2:48 PM, Bernard Elsmere
bernard.elsm... (AT) gmail (DOT) com>wrote:

Hello

I'm trying to implement a minimal navigation bar using jQuery's
toggleClass() function but can't seem to get it working, no matter how
many tips from all you gurus out there that I follow meticulously.

It's the .img_selector div at the bottom of the page:
http://www.thomasrugani.com/static/designobjects/02.html

I want to toggle the 'active' class for each <a> when it's selected,
to indicate which image is showing, so after calling jQuery, in the
head> I've got

* * * *<script type="text/javascript"
* * * * *$(document).ready(function(){
* *$('a').click(function () {
* * *$(this).toggleClass('active');
* *});
*});
* * * *</script

then the links, which also include the showPic function:
---------------
div class="img_selector"
Image  
* * * *<ul
* * * * * * * *<li><a class="active" onclick="return showPic(this)"
*href="images/
stoppino_tictacs_lit.jpg" title="">01</a></li
* * * * * * * *<li><a onclick="return showPic(this)" *href="images/
stoppino_tictacs.jpg" title="">02</a></li
* * * * * * * *<li><a onclick="return showPic(this)" *href="images/
stoppino_tictac_base1.jpg" title="">03</a></li
* * * * * * * *<li><a onclick="return showPic(this)" *href="images/
stoppino_tictac_base2.jpg" title="">04</a></li
* * * *</ul
/div
--------------------
Can anyone see what I'm missing? Thanks in advance..

Bernard

#4

I'm a little confused, but before I examine more closely, one thing
I'd like an answer to is whether you have defined the initial "active"
<a> incorrectly.

You gave the link to http://www.thomasrugani.com/static/designobjects/02.html

That's 02.html - NOT 01.html

Yet, when I look at the source of 02.html, here is what I see:

<li><a href="01.html" class="active">Design Objects</a><br/></li>

Maybe your definition of "active" should refer to all the 02's?

It would help to see your class styling for active. Can you move it
into the source, so that View Page Source will show what the styling
criteria is?

Also, post a description of what the "active" style is supposed to
change? What are you trying to do?

It is confusing that every one of your pages: 01, 02, and 03 show 01
as active in the source.

On a last-second re-look, it occurs to me that your <a> causes a re-
direct to another page. How do you stall (delay) (avoid immediate
loss of control) in order to change the class in the current page
script? Once you redirect, I think you are gone. Your current page
loses control.

I have had this happen in another context, so I bet this is it.

Do not use <a>. Use just the <li> and give it a style that makes it
look like a link. Use onclick() only in your Jquery. In your Jquery,
change the class, and then.... redirect. I believe it is a javascript
"window.location=..." that accomplishes the same thing is <a>'s re-
direct.

window.location = 'http://www.yourdomain.com' // this immediately
takes you to the page yourdomain.

Now, once you are in the new page, the importance of knowing what
element had the active class in the previous page is defeated. In the
new page, you will know nothing about what used to be in the old
page. So, what is the point of the needing to know active class if
you are leaving the page?

#5

Thanks for the reply - I put the .active styling on the individual
pages to make it clearer..

Sorry if this was confusing - the first link you referred to:
<li><a href="01.html" class="active">Design Objects</a><br/></li>
Isn't what I was trying to switch the class of - that's just the
category menu and I know that once the browser has moved on, the
active class and it's switchability is irrelevant.

The links whose classes I'm trying to switch are in the <div
class="img_selector"> at the bottom of the page, and they aren't
redirects - they're there to switch the image, hence the necessity of
changing classes to turn them black, so they act as indicators of
which image is active. I know I could just redirect to another page
with a different image, but I'd love to get it working on the same
page so that the "more information" button isn't reset and the page
doesn't flash to reload..

Seems to me that there's some conflict between the image swapping
script and the class swapping script.. The image swapper is called in
the "tr.js" file which contains this:

function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue =
whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

var j = jQuery.noConflict();

j(document).ready(function()
{
j('a#content-link').click(function()
{
j('#content-div').toggle(80);
return false;
});

});

Do you have any idea how to combine them?

As you can probably tell, I'm an absolute novice with jQuery. Thanks
a million for any pointers,

Bernard

On Nov 3, 4:35*am, jmatthews <jmatth... (AT) xexam (DOT) net> wrote:

Quote:

I'm a little confused, but before I examine more closely, one thing
I'd like an answer to is whether you have defined the initial "active"
a> incorrectly.

You gave the link tohttp://www.thomasrugani.com/static/designobjects/02.html

That's 02.html - NOT 01.html

Yet, when I look at the source of 02.html, here is what I see:

li><a href="01.html" class="active">Design Objects</a><br/></li

Maybe your definition of "active" should refer to all the 02's?

It would help to see your class styling for active. *Can you move it
into the source, so that View Page Source will show what the styling
criteria is?

Also, post a description of what the "active" style is supposed to
change? *What are you trying to do?

It is confusing that every one of your pages: 01, 02, and 03 show 01
as active in the source.

On a last-second re-look, it occurs to me that your <a> causes a re-
direct to another page. *How do you stall (delay) (avoid immediate
loss of control) in order to change the class in the current page
script? *Once you redirect, I think you are gone. *Your current page
loses control.

I have had this happen in another context, so I bet this is it.

Do not use <a>. *Use just the <li> and give it a style that makes it
look like a link. *Use onclick() only in your Jquery. *In your Jquery,
change the class, and then.... redirect. *I believe it is a javascript
"window.location=..." that accomplishes the same thing is <a>'s re-
direct.

window.location = 'http://www.yourdomain.com'*// this immediately
takes you to the page yourdomain.

Now, once you are in the new page, the importance of knowing what
element had the active class in the previous page is defeated. *In the
new page, you will know nothing about what used to be in the old
page. *So, what is the point of the needing to know active class if
you are leaving the page?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

class toggle navigation

jQuery jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

class toggle navigation - 11-02-2009 , 02:48 PM

Re: [jQuery] class toggle navigation - 11-02-2009 , 04:08 PM

Re: class toggle navigation - 11-02-2009 , 05:33 PM

Re: class toggle navigation - 11-02-2009 , 11:35 PM

Re: class toggle navigation - 11-04-2009 , 04:53 PM