SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Use variable to target element

    Hi all

    I have a simplified version of what I'm working with here

    http://www.ttmt.org.uk/forum/4_Gallery/

    The page scrolls when the links are clicked to show the relevant div.

    My problem is I want to change the color of the link when it's pressed to illustrate which section is being shown.

    This is the function I'm using to scroll the page

    Code:
        function slideContent(div){
          var $btn = div+'Btn'; 
          var $content = $('#content');
          var divPos = $('#content ' + div).position();
          var scrollPosition = $content.scrollTop()+divPos.top;
          $('#content').animate({scrollTop: scrollPosition}, 500);
          //$('#OneBtn').css('color','red');
          //alert($btn);
          $btn.css('color','red');
        }
    I can capture the name of the Link to highlight in the variable here

    Code:
    var $btn = div+'Btn';
    How can I use this variable to change the color of the link

    I tried this, but no luck

    Code:
    $btn.css('color','red');



    *** Code*****
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
    	<script type="text/javascript" src="js/lightbox.js"></script>
    	<script type="text/javascript" >
        function slideContent(div){
          var $btn = div+'Btn'; 
          var $content = $('#content');
          var divPos = $('#content ' + div).position();
          var scrollPosition = $content.scrollTop()+divPos.top;
          $('#content').animate({scrollTop: scrollPosition}, 500);
          //$('#OneBtn').css('color','red');
          //alert($btn);
          $btn.css('color','red');
        }    
    	</script>
    	<link rel="stylesheet" href="css/master.css" type="text/css" />
    </head>
    
    <body>
      <div id="wrap">
        <div id="header">
          <h1>Gallery</h1>
          
          <ul>
            <li><a href="#" id="OneBtn" onclick="slideContent('#One')">One</a></li>
            <li><a href="#" id="TwoBtn" onclick="slideContent('#Two')">Two</a></li>
            <li><a href="#" id="ThreeBtn" onclick="slideContent('#Three')">Three</a></li>
          </ul>
          
        </div><!-- #header -->
        <div id="content">
          <div id="One" class="section">
            <ul>
              <li><a href="images/01.jpg" rel="lightbox"><img src="images/01_th.jpg" alt="" /></a></li>
              <li><a href="images/02.jpg" rel="lightbox"><img src="images/02_th.jpg" alt="" /></a></li>
              <li><a href="images/03.jpg" rel="lightbox"><img src="images/03_th.jpg" alt="" /></a></li>
              <li><a href="images/04.jpg" rel="lightbox"><img src="images/04_th.jpg" alt="" /></a></li>
              <li><a href="images/05.jpg" rel="lightbox"><img src="images/05_th.jpg" alt="" /></a></li>
              <li><a href="images/06.jpg" rel="lightbox"><img src="images/06_th.jpg" alt="" /></a></li>
              <li><a href="images/07.jpg" rel="lightbox"><img src="images/07_th.jpg" alt="" /></a></li>
              <li><a href="images/08.jpg" rel="lightbox"><img src="images/08_th.jpg" alt="" /></a></li>
              <li><a href="images/09.jpg" rel="lightbox"><img src="images/09_th.jpg" alt="" /></a></li>
              <li><a href="images/10.jpg" rel="lightbox"><img src="images/10_th.jpg" alt="" /></a></li> 
            </ul>
          </div>
          <div id="Two" class="section">
            <ul>
              <li><a href="images/11.jpg" rel="lightbox"><img src="images/11_th.jpg" alt="" /></a></li>
              <li><a href="images/12.jpg" rel="lightbox"><img src="images/12_th.jpg" alt="" /></a></li>
              <li><a href="images/13.jpg" rel="lightbox"><img src="images/13_th.jpg" alt="" /></a></li>
              <li><a href="images/14.jpg" rel="lightbox"><img src="images/14_th.jpg" alt="" /></a></li>
              <li><a href="images/15.jpg" rel="lightbox"><img src="images/15_th.jpg" alt="" /></a></li>
              <li><a href="images/16.jpg" rel="lightbox"><img src="images/16_th.jpg" alt="" /></a></li>
              <li><a href="images/17.jpg" rel="lightbox"><img src="images/17_th.jpg" alt="" /></a></li>
              <li><a href="images/18.jpg" rel="lightbox"><img src="images/18_th.jpg" alt="" /></a></li>
              <li><a href="images/19.jpg" rel="lightbox"><img src="images/19_th.jpg" alt="" /></a></li>
              <li><a href="images/20.jpg" rel="lightbox"><img src="images/20_th.jpg" alt="" /></a></li> 
            </ul>
          </div>
          <div id="Three" class="section">
            <ul>
              <li><a href="images/01.jpg" rel="lightbox"><img src="images/01_th.jpg" alt="" /></a></li>
              <li><a href="images/02.jpg" rel="lightbox"><img src="images/02_th.jpg" alt="" /></a></li>
              <li><a href="images/03.jpg" rel="lightbox"><img src="images/03_th.jpg" alt="" /></a></li>
              <li><a href="images/04.jpg" rel="lightbox"><img src="images/04_th.jpg" alt="" /></a></li>
              <li><a href="images/05.jpg" rel="lightbox"><img src="images/05_th.jpg" alt="" /></a></li>
              <li><a href="images/06.jpg" rel="lightbox"><img src="images/06_th.jpg" alt="" /></a></li>
              <li><a href="images/07.jpg" rel="lightbox"><img src="images/07_th.jpg" alt="" /></a></li>
              <li><a href="images/08.jpg" rel="lightbox"><img src="images/08_th.jpg" alt="" /></a></li>
              <li><a href="images/09.jpg" rel="lightbox"><img src="images/09_th.jpg" alt="" /></a></li>
              <li><a href="images/10.jpg" rel="lightbox"><img src="images/10_th.jpg" alt="" /></a></li> 
            </ul>
          </div>
          
        </div><!-- #content -->
      </div><!-- #wrap -->
    
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're just storing the name/id of the element in $btn, not selecting it with JQuery:

    Code JavaScript:
    var $btn = div+'Btn'; //this gives you the name/id of the element
    var $el = $('#' + $btn); //assuming you are referencing the element by id
    $el.css('color', 'red');

    I think that's something along the lines of what you need!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •