[SOLVED] JavaScript List

[conormacaoidh]

Hi,

 

I can see how this will be both a difficult question to explain and to answer. I am dealing with the following list:

 

<ul id="list">
  <li><a href="#" id="page1">Page One</a></li>
  <li><a href="#" id="page2">Page Two</a></li>
  <li><a href="#" id="page3">Page Three</a></li>
  <li><a href="#" id="page4">Page Four</a></li>
</ul>

 

What I want to do is to write a piece of JavaScript that will detect what page is currently selected and then apply certain style rules to that page through the id in the list. This much I have achieved by creating a function and passing the pagename through the function.

 

I just want to know is there any easier way of going about such a task. Is it possible to get the current filename through JavaScript and then apply styles to links that are linked to that URL, without the use of an id?

 

Or am I off track completely? Can anyone think of a better way to go about such a task?

 

This is where it gets more complicated... If I manage to pull of that much i want to take advantage of CSS3 and set the li below the selected li to have -moz-border-radius-topright:5px; and the li above the selected li to have -moz-border-radius-bottomright:5px;

 

I know that i'm asking a lot but any help would be greatly appreciated.

[rhodesa]

to get you started...here is something written with jQuery that will tag the LI of the current page with a class 'current':

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    var thisUrl = window.location.href;
    if(i = thisUrl.indexOf('?')){
      thisUrl = thisUrl.substring(0,i);
    }
    $('#list li a').each(function(){
      if(this.href == thisUrl){
        $(this.parentNode).addClass('current');
      } 
    });
  });
</script>
<ul id="list">
  <li><a href="home.php" id="page1">Page One</a></li>
  <li><a href="about.php" id="page2">Page Two</a></li>
  <li><a href="test.php" id="page3">Page Three</a></li>
  <li><a href="contact.php" id="page4">Page Four</a></li>
</ul>

[conormacaoidh]

Thanks that will help. I don't actually use JQuery for this particular app but I have been meaning to include it for a while. I'll let you know if I have any problems once I set up jQuery - might get a chance tonight. Thanks

[conormacaoidh]

I used the same code as you posted above and named the file about.php but it still doesn't work when I look at it. It doesn't adopt the class 'current'. Do I need to have more jQuery modules installed than the one I have currently?

 

Thanks

[darkfreaks]

http://ejohn.org/blog/classy-query/

[rhodesa]

my bad...

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    var thisUrl = window.location.href;
    var i = thisUrl.indexOf('?');
    if(i >= 0){
     thisUrl = thisUrl.substring(0,i);
    }
    $('#list li a').each(function(){
      if(this.href == thisUrl){
        $(this.parentNode).addClass('current');
      }
    });
  });
</script>
<ul id="list">
  <li><a href="home.php" id="page1">Page One</a></li>
  <li><a href="about.php" id="page2">Page Two</a></li>
  <li><a href="test.php" id="page3">Page Three</a></li>
  <li><a href="contact.php" id="page4">Page Four</a></li>
</ul>

[conormacaoidh]

Thanks that works!

 

jQuery seems cool, I might just use it a bit more often now!

[darkfreaks]

be sure to mark as solved