Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Im having a problem with setting the active attributes to links that change a div within the page. I have a small "menu" of 3 categories, that will make a div show up. the first category the divs thats auto displayed, and with that i want its menu button in its active state. But then when you click on the next menu button, that one needs to show its active state. Now... the problem is that its mainly about the background that changes, and all 3 buttons have different backgrounds (shape wise). So... i was wondering how i could get that to work. So basically one is selected, then when clicking on the next, the first looses its active state and it switches to the next one WITH the right background to it. So i guess i need to set a different background property for every link. I dont know if i have to do this with Javascript or PHP, but help would be appreciated.

    This is the HTML code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coding a Clean and Professional Web Design in Photoshop</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
     function toggleDivs (n) {
      
      //Hide all divs
      var elDivs = document.getElementById('featuredshow') .getElementsByTagName('div');
      for (var i = 0; i <elDivs.length; i++) {
       elDivs[i].setAttribute('style', 'display:none;');
      }
      
      //Show chosen div
      var elChosen = document.getElementById('category_' + n);
      elChosen.setAttribute('style', 'display:block');
     }
    </script>
    </head>
    <body>
    <div id="container">
      <div id="header">
        <h1>Future DzineR</h1>
        <a href="dutch.html"><img src="images/dutch.png" border="0" class="language" /></a>
        <a href="english.html"><img src="images/english.png" border="0" class="language" /></a>
        <div id="cars">
        </div>
        <div id="nav">
        <ul> 
         <li class="active"><a href="#">Home</a></li>
            <li><a href="#"> About Me</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>
      </div>
      <div id="latest_projects">
       <div id="latest_bar">
        </div>
        <div id="threecategories">
        <ul>
         <li onclick="toggleDivs (1)"><a class="item cardrawings">Car Drawings</a></li>
            <li onclick="toggleDivs (2)"><a class="item thdmodeling">3D modeling</a></li>
            <li onclick="toggleDivs (3)"><a class="item other">Other</a></li>
        </ul>
        </div>
      </div>
      <div style="clear:both;"></div>
      <div id="featured">
       <div id="featuredshow">
         <div id="category_1" style="display:block;">blaa</div>
            <div id="category_2" style="display:none;">blii</div>
            <div id="category_3" style="display:none;">bloo</div>
        </div>
      </div>
    <div id="content">
      <div class="col">
        <h2><span>About</span>Me</h2>
        <img src="images/about-me.jpg" alt="aboutme" />
        <p>Name: Daisy Nabben<br />
        Age: 18<br />
        Country: Netherlands<br />
        </p>
        <p>&nbsp;</p>
        <p> <a href="#" class="readmore">Read More</a></p>
      </div>
      <div class="col noMargin">
        <h2><span>My</span>Portfolio</h2>
        <img src="images/portfolio.jpg" alt="portfolio" />
        <p>Car Design, 3D Design and Other drawings, you can find all works here.</p>
        <p>&nbsp;</p>
        <p><a href="#" class="readmore">Read More</a></p><br />
      </div>
      <div class="col noMargin fr">
        <h2><span>My</span>Guestbook</h2>
        <img src="images/guestbook.jpg" alt="guestbook" />
        <p>Like my works, or got some feedback? Feel free to post in my guestbook</p>
        <p>&nbsp;</p>
        <p><a href="#" class="readmore">Sign it</a></p>
      </div>
    </div>
    <div style="clear:both;"></div>
    </div>
    <div id="footer">
     <div id="footercontainer">
      <div id="footerlogo">
            <br />
            <center><a href="#" class="footerlink">Home</a> / <a href="#" class="footerlink">About me</a> / <a href="#" class="footerlink">Portfolio</a> / <a href="#" class="footerlink">Contact</a><br /></center>
            </div><br />
            <center>Webdesign by <i>Daisy Nabben</i> // Copyright FutureD-zineR 2012</center>
     </div>
    </div>
    </body>
    </html>
    The part this is about is everything between <div id="latest_projects></div>

    Also i dont know if the CSS is needed, but ill just post it here:

    Code:
    /* CSS Reset */
    * { margin:0; padding:0; }
    body {
     background: url(../images/bgbody.jpg) repeat-x 0px 0px;
     font-family: Arial, Helvetica, sans-serif;
    }
    #container {
     width:960px;
     margin:0 auto;
     padding: 0 10px;
    }
    /* Header Styling */
    #header {
     position:relative;
     width: 100%;
    }
    #header h1 {
     display:block;
     float:left;
     margin-top:10px;
     width:480px;
     height:99px;
     background:url(../images/logo.jpg) no-repeat 0 0;
     text-indent:-9999px;
    }
    #header #cars {
     background: url(../images/cars.jpg) no-repeat right 0px;
     height: 140px;
     width:480px;
     position: absolute;
     top: 10px;
     right: 0;
     text-align:right;
    }
    .language {
     margin-top:78px;
     margin-left:8px;
    }
    /* Navigation Styles */
    #nav{
     clear: both;
     height: 41px;
     width: 100%;
    }
    #nav ul {
     float: left;
    }
    #nav ul li {
     list-style-type: none;
     display: block;
     height: 41px;
     width:103px;
     float: left;
     padding: 0px 15px 0px 0px;
     text-align:center;
    }
    #nav ul li a {
     color:#fff;
     display:block;
     text-decoration:none;
     font-size:12px;
     font-weight:bold;
     text-transform:uppercase;
     height:100%;
     line-height:35px;
     margin-left:8px;
    }
    #nav li a:hover, #nav li.active a {
     background:url(../images/menuhover.jpg) no-repeat left;
     color:#fff;
     cursor:pointer;
     text-decoration:none;
    }
    /* Latest Projects Styles */
    #latest_projects {
     position:relative;
     width:100%;
    }
    #latest_bar {
     display:block;
     float:left;
     width:240px;
     height:40px;
     background:url(../images/latestprojects.jpg) no-repeat 0 0;
    }
    #threecategories {
     height:40px;
     width:354px;
     position:absolute;
     top:0px;
     right:100px;
    }
    #threecategories ul {
     float:left;
    }
    #threecategories ul li {
     list-style:none;
     display:block;
     height:40px;
     width:118px;
     float:left;
     padding: 0 0 0 0;
     text-align:center;
    }
    #threecategories ul li a {
     color:#fff;
     display:block;
     text-decoration:none;
     font-size:10px;
     font-weight:bold;
     text-transform:uppercase;
     height:100%;
     line-height:40px;
     margin-left:0px;
    }
    #threecategories li a.cardrawings {
     background:url(../images/cardrawingsunselect.jpg) no-repeat left;
     color:#fff;
     text-decoration:none;
    }
    #threecategories li a.cardrawings:hover, #threecategories li.active a.cardrawings{
     background:url(../images/cardrawingselect.jpg) no-repeat left;
     color:#fff;
     cursor:pointer;
     text-decoration:none;
    }
    #threecategories li a.thdmodeling {
     background:url(../images/thdmodelingunselect.jpg) no-repeat left;
     color:#fff;
     text-decoration:none;
    }
    #threecategories li a.thdmodeling:hover, #threecategories li.active a.thdmodeling {
     background:url(../images/thdmodelingselect.jpg) no-repeat left;
     color:#fff;
     cursor:pointer;
     text-decoration:none;
    }
    #threecategories li a.other {
     background:url(../images/otherunselect.jpg) no-repeat left;
     color:#fff;
     text-decoration:none;
    }
    #threecategories li a.other:hover, #threecategories li.active a.other {
     background:url(../images/otherselect.jpg) no-repeat left;
     color:#fff;
     cursor:pointer;
     text-decoration:none;
    }
    /* Featured Area */
    #featured {
     background:url(../images/featured-bg.jpg) no-repeat left;
     margin-top:10px;
     width:960px;
     height:390px;
    }
    #featuredshow {
     background:transparent;
     padding:15px;
     width:930px;
     height:360px;
    }
    #category_1 {
     color:#FFF;
     width:930px;
     height:360px;
     
    }
    #category_2 {
     color:#FFF;
     width:930px;
     height:360px;
    }
    #category_3 {
     color:#FFF;
     width:930px;
     height:360px;
    }
    /* Content Styles */
    #content {
      margin: 40px 0 0;
      clear: both;
      font-size: 12px;
      color: #FFF;
    }
    #content .col {
      float: left;
      width: 258px;
      background: url(../images/colbg.jpg) repeat-x;
      height: 165px;
      border: 1px solid #CCC;
      padding: 20px;
      margin-right: 30px;
      margin-bottom:10px;
    }
    #content .col h2 {
      font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #011bb9;text-decoration: none;
      margin-bottom: 18px;
    }
    #content .col h2 span {
      color: #000;
    }
    #content .col img {
      border: solid 1px #d8d8d8;
      padding: 2px;
      float: right;
      margin-left:10px;
      margin-bottom: 10px;
    }
    #content .col p {
      margin-bottom: 20px;
      line-height: 18px;
    }
    #content .col a.readmore {
      font-weight: bold;
      color: #252525;
      text-decoration: underline;
    }
    #content .col a:hover.readmore {
      text-decoration: none;
    }
    #content .col.noMargin {
      margin: 0;
    }
    #content .col.fr {
      margin: 0;
      float: right;
    }
    .clear {
      clear: both;
    }
    /*Footer Styles*/
    #footer {
     background:url(../images/footerbg.jpg);
     width:100%;
     height:100px;
    }
    #footercontainer {
     margin:0px auto 0;
     width:960px;
     font-size:12px;
     color:#fff;
     padding-top:20px;
     position:relative;
    }
    #footercontainer .footerlink {
     font-weight:bold;
        color:#fff;
        text-decoration:none;
    }
    #footercontainer a:hover.footerlink {
     text-decoration:underline;
    }
    As you can see i did set active attribute inside of the CSS, but thats not working hehe...

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Have a look at jQuery. It'll make what you're doing a whole lot easier. Specifically, have a look at the click event handler. You'll have to recode your Javascripts completely, but the good news is that they're so small it won't take long. Once you go jQuery, it's hard to go back to regular Javascript.

    If you're still stuck, let us know.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Thanks,,

    But I managed to figure out how to do it
    I basically made 2 more menu's and gave those display:none, and the first display:block, then i just rewrote the javascript for an onClick toggle for the <ul> tags. and assigned them to the menu buttons, so now when you click a menu, itll trigger the right images in the div on the page, but it will also trigger the right menu in which that menu shows the active state.
    Might not be the easiest way, but it works hehe


Remove Ads

Posting Permissions

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

Search tags for this page

set active link in page

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com