SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Johannesburg, Gauteng, South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation Bar Works Once then stops working

    I'm trying to create a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below

    Code:
    function setTimeRed() 
    {
        document.getElementById("time").style.ClassName = 'timetable_r';
    }
    
    function setTimeBlack() 
    {
        document.getElementById("time").style.ClassName = 'time_r';
    }
    And then four blocks like this:

    Code:
    function changeTimeButton()
    {
        var timePath = new String();
        timePath = document.getElementById("timetable").style.backgroundImage;
    
        if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
        {
            setTimeRed();
            setHomeBlack();
            setNotiBlack();
            setSportBlack();
        }
        else {
    
        }  
    }
    finally, my html has this:

    HTML Code:
    <div id="tabbar">
                <ul id="tabs">
    
                    <a href"#" onclick="changeTimeButton()">
                        <li id="timetable" class="time_b">
                            <p>Timetable</p>
                        </li>
                    </a>
    
                    <a href"#" onclick="changeHomeButton()">
                        <li id="homework" class="home_b">
                            <p>Homework</p>
                        </li>
                    </a>
    
                    <a href"#" onclick="changeNotiButton()">
                        <li id="notifications" class="noti_b">
                            <p>Notifications</p>
                        </li>
                    </a>
    
                    <a href"#" onclick="changeSportButton()">
                        <li id="sport"  class="sport_b">
                            <p>Sport</p>
                        </li>
                    </a>
    
                </ul>
    
            </div>

    It works once then does nothing. Why, and how would I go about fixing this?? Please help!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi cjhoney. Welcome to the forums.

    That all looks a bit convoluted. It's easier to style links like that using CSS or PHP. Have a look at this recent thread which discusses both approaches:

    http://www.sitepoint.com/forums/show...-CSS&p=5091887
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Johannesburg, Gauteng, South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph, my only problem is that this has to function locally, I can't use any server-side code, I'm quite familiar with php, but a lot less so with JavaScript thus this project is taking some time... Is there a better way to do this in JavaScript, maybe with jquery?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, it's easy with jQuery:

    http://css-tricks.com/snippets/jquer...-current-page/
    http://www.webringideas.com/web-deve...tion-link.html
    http://stackoverflow.com/questions/2...-page-in-jquer

    But don't forget the CSS option, too. It works with JS off, and doesn't require a big library. (I guess if you are already downloading the library for other purposes, that's irrelevant, of course.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Johannesburg, Gauteng, South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The links don't really help, I think I'm taking the wrong approach.... My aim is to have one file that ALL the content is viewed in, with two navigation bars, one at the top, one at the bottom, and a sort of "window" in the middle. The bottom navigation has four links, and the one at the top has three, but the three top links are different depending on what page you are viewing. so when I click the timetable link on the bottom navigation, I get the timetable for the day, with the day link at the top of the page selected. When I click "week" on the top, the 'Timetable' stays selected but the the 'day' becomes deselected, and the content in the window changes to the week. I don't need any special effects, or flashes or shiny buttons. I just need this simple page, but I CANNOT load a new page entirely, all the content has to be available through the index.html file. AND it all has to function from a flash drive on any computer, so no online links or content. It's really confusing me... How would I go about doing this?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Are you talking about a page kind of like this:

    http://www.grigorlawyers.com.au/

    As you click the menu links, the page scrolls up or down, and the current section link is highlighted.

    This is all done with JavaScript.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Or, is the functionality that's being look for like a tabbed interface?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Johannesburg, Gauteng, South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yay!! Thanks Paul, that's exactly what I'm looking for, I just need to implement two. Can you put a tab within one of the tabs?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cjhoney View Post
    Yay!! Thanks Paul, that's exactly what I'm looking for, I just need to implement two. Can you put a tab within one of the tabs?
    Yes you can. Nested tabs demo
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •