class toggle navigation
|
View:
New views
5 Messages
—
Rating Filter:
Alert me
|
 |
class toggle navigation
by Bernard Elsmere
::
Rate this Message:
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 |
|
|
Re: class toggle navigation
by Richard D. Worth-2
::
Rate this Message:
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@...> wrote: Hello |
|
|
Re: class toggle navigation
by Bernard Elsmere
::
Rate this Message:
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...@...> wrote: > 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...@...>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 |
|
|
Re: class toggle navigation
by jmatthews
::
Rate this Message:
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? |
|
|
Re: class toggle navigation
by Bernard Elsmere
::
Rate this Message:
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...@...> wrote: > 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? |
| Free embeddable forum powered by Nabble | Forum Help |
