Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Requesting Help With Tabs Script

    WOW, it's been a long time since I've needed help and this one is a doozie for me.

    I know that this may seem like a CSS problem but it's not... I already worked all that out on my own. What I need is a way to make the selected tab to stay with the appearance of "#Tabn a:Active" until another tab is selected while the user is clicking around, but still allow the other tabs to have the normal (Tabn) and Hover style sets.


    This was suggested by someone on sitepoint.com but i can't get it to work. Here's what it was...

    -------------------------------------------------------------------------

    I used some easy Javascript to get an active tab:

    first, make a "#current" style which has exactly the styles that your hovered tab has.

    the HTML:

    ...
    <script src="cssnavi.js" type="text/javascript"></script>
    ...
    <div id="navigation">
    <ul>
    <li id="nav-home"><a href="#"><span>Home</span></a></li>
    <li id="nav-news"><a href="#"><span>News</span></a></li>
    </ul>
    </div>
    ...

    To set the "home"-Tab to a permanent active state, place this snippet on bottom of your "home"-page.

    <script language="JavaScript" type="text/javascript">setCurrent('home');</script>

    The JavaScript-Function in "cssnavi.js" is as follows:

    function setCurrent(theID) {
    if (document.getElementById('nav-' + theID)){
    document.getElementById('nav-' + theID).id = 'current';
    }

    --------------------------------------------------------------------------

    Here's My Entire Code...

    -------------------------------------------------------------------------

    <html><head><title>Blank Page</title>
    <META http-equiv=Content-Language content=en-us>
    <META http-equiv=Pragma content=no-cache>
    <META http-equiv=Cache-control content=private>
    <META http-equiv=Expires content=0>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <meta http-equiv="imagetoolbar" content="no">
    <STYLE type="text/css">
    BODY
    {
    background-color: #3A6EA5;
    font-family: arial, sans-serif, Comic Sans MS;
    font-color: #FFFFFF;
    background-image:url("");
    scrollbar-base-color: #3A6EA5;
    scrollbar-face-color: #5C8FC7;
    scrollbar-shadow-color: ;
    scrollbar-highlight-color: #5C8FC7;
    scrollbar-3dlight-color: ;
    scrollbar-darkshadow-color: ;
    scrollbar-track-color: #3A6EA5;
    scrollbar-arrow-color: ;
    font-size : x-small;
    color : #ffffff;
    margin-left: 0cm;
    margin-right: 0cm;
    margin-top: 0cm;
    margin-bottom: 0cm;

    }
    #Tabn a
    {
    background-image:url('Tab1.gif');
    background-repeat:no-repeat;
    font-family:Comic Sans MS;
    color:#ffffff;
    font-size:12px;
    font-weight:bold;
    cursor:hand;
    white-space:nowrap;
    text-decoration:none;
    vertical-align:center;
    }
    #Tabn a:hover
    {
    background-image:url('Tab2.gif');
    background-repeat:no-repeat;
    font-family:Comic Sans MS;
    color:#000000;
    font-size:12px;
    font-weight:bold;
    cursor:hand;
    white-space:nowrap;
    text-decoration:none;
    vertical-align:center;
    }
    #Tabn a:Active
    {
    background-image:url('Tab2.gif');
    background-repeat:no-repeat;
    font-family:Comic Sans MS;
    color:#ff0000;
    font-size:12px;
    font-weight:bold;
    cursor:hand;
    white-space:nowrap;
    text-decoration:none;
    vertical-align:center;
    }
    </style>
    </head>
    <body>
    <p>&nbsp;</p>
    <table cellpadding=0 cellspacing=0 border=0 align=center>
    <tr>
    <td align=right>
    <table cellpadding=0 cellspacing=0 border=0 align=center style="margin-top:-2px;border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff;">
    <tr>
    <td align=left id="Tabn" name="home">
    <a href="#">&nbsp;HOME&nbsp;</a>
    </td>
    <td align=left id="Tabn" name="news">
    <a href="#">&nbsp;NEWS&nbsp;</a>
    </td>
    <td align=left id="Tabn" name="links">
    <a href="#">&nbsp;LINKS&nbsp;</a>
    </td>
    <td align=left id="Tabn" name="help">
    <a href="#">&nbsp;HELP&nbsp;</a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>

    -------------------------------------------------------------------

    I know that there has to be some sort of scripting that can be done to do this. Unless someone else knows of another way of doing tabs that stick.

    Well Thanks for you time.
    Cheers
    Attached Thumbnails Attached Thumbnails Requesting Help With Tabs Script-tab1.gif   Requesting Help With Tabs Script-tab2.gif  
    "No Page To Show, Just Likes To Code."

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>50188</title>
    		<style type="text/css">
    			body
    			{
    				background-color:#3a6ea5;
    				color:#fff;
    				margin:0;
    			}
    
    			#menu
    			{
    				list-style:none;
    			}
    
    			#menu li
    			{
    				float:left;
    				margin-left:-3px;
    			}
    
    			#menu a
    			{
    				display:block;
    				color:#fff;
    				font-weight:bold;
    				white-space:nowrap;
    				text-decoration:none;
    				text-transform:uppercase;
    				padding:2px 1em;
    
    				background-image:url('50188/tab.gif');
    				background-repeat:no-repeat;
    			}
    
    			#menu a:hover
    			{
    				background-image:url('50188/tab_active.gif');
    				color:#000;
    			}
    
    			#menu a:active
    			{
    				background-image:url('50188/tab_active.gif');
    				color:#f00;
    			}
    
    			#menu a.current
    			{
    				background-image:url('50188/tab_active.gif');
    				color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="menu">
    			<li><a href="/test/cf/50188.html">Home</a></li>
    			<li><a href="/news/">News</a></li>
    			<li><a href="/links/">Links</a></li>
    			<li><a href="/help/">Help</a></li>
    		</ul>
    
    		<script type="text/javascript">
    			var menuLinks = document.getElementById("menu").getElementsByTagName("a");
    			var l = new String(window.location);
    
    			for(var i = 0; i < menuLinks.length; i++)
    			{
    				if(l.indexOf(menuLinks[i].getAttribute("href")) > -1)
    				{
    					menuLinks[i].className = "current";
    					continue;
    				}
    			}
    		</script>
    	</body>
    </html>

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a bunch hemebond,
    it works great but I'm having problems using it within frames. I know I should have mentioned it before but I plan on using it as the top frame so that it is always there and all the pages and links got to the bottom frame.

    Sorry I didn't mention it before. Any Ideas?
    "No Page To Show, Just Likes To Code."

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It should work fine within frames. All you need is a target attribute on the links. What problems are you having exactly?

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    My code has an error in it. You need to replace the continue command with break.

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry to bump a 4yr old thread but best i ask in here since i used this code abit, Anyway i have the code working fine just it seem's to have a few weird things happen on it and im not sure how to fix them. Any help or ways to fix these two things would be great.

    A) when i hover over the tabs the image dissapears even though it has a image assigned to hover.

    B) Fixed this bit now, just need help with the above problem.

    Board link:

    Code:
    body
    {
    margin:0px;
    padding: 0px;
    }
    
    #menu
    {
    list-style:none;
    }
    
    #menu li
    {
    float:left;
    display:inline;
    padding:0;
    margin:0;
    }
    
    #menu a
    {
    display:block;
    color:#fff;
    font-weight:bold;
    white-space:nowrap;
    text-decoration:none;
    width: 118px;
    }
    
    #menu a:hover
    {
    background:url(images/hover.png);
    color:#fff;
    width: 118px;
    }
    
    #menu a:active
    {
    background-image:url(images/hover.png);
    color:#fff;
    width: 118px;
    }
    
    #menu a.current
    {
    background:url(images/hover.png);
    color:#023e83;
    width: 118px;
    
    }
    Last edited by Remz; 05-14-2009 at 08:42 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Looks to me like something is overriding those CSS styles you show.

    Pretty clearly, when I hover over one of the name, I am seeing text-decoration: underline; in effect.

    I didn't try to download your CSS files, but I'd start looking into them some more.

    The other possibility is that you have a JS library there that is attaching itself to *all* <a> tags and doing something via onmouseout and onmouseover.

    OH YEAH! I'll bet that's it! Look at any of the forum name links (e.g., "My BB Themes"). See what happens when you hover over them? Just exactly what is happening with the <a>'s in the #menu.

    Check to see what is causing *that* underline:
    <strong><a href="forumdisplay.php?fid=10">MyBB Themes</a></strong>
    (and why is the <strong> outside the <a> instead of being a style of the <a>???)

    If that's not done via CSS--if it's done via JS--then I'll bet the JS is attaching itself to your tab links, as well.

  • Users who have thanked Old Pedant for this post:

    Remz (05-14-2009)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Nah...I think it's as simple as this, from your "custom.css" file:
    Code:
    #head ul li a {
    	position:relative;
    	left:5px;
    	float:left;
    	display:block;
    	padding:.8em 5px .7em 0;
    	width:100%;
    	width:5em;
    	text-align:center;
    	text-decoration:none;
    }
    #head ul li a:hover {
    	background:none;
    	text-decoration:underline;
    	color:#000;
    You have that *AFTER* the style for #menu so it is taking precedence! Because both sets of rules can AND DO apply to the same elements! So the later one takes precedence.

    Try just moving your #menu stuff to *after* all the #head stuff.

  • Users who have thanked Old Pedant for this post:

    Remz (05-14-2009)

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok scrap that it worked but with a minor error that i can fix by changing the image, Thank you very much for the help appreciated.
    Last edited by Remz; 05-14-2009 at 08:14 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    You could also do yourself a *BIG* favor if you'd comment all your </div> tags with the id or class of the matching <div>. It's not clear at all, for example, where the </div> that matches <div id="head"> is.

    (And I personally like to see pages properly indented via <div>s at a minimum, but that's your call.)

  • #11
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    You could also do yourself a *BIG* favor if you'd comment all your </div> tags with the id or class of the matching <div>. It's not clear at all, for example, where the </div> that matches <div id="head"> is.

    (And I personally like to see pages properly indented via <div>s at a minimum, but that's your call.)
    Thats all default MyBB code all i added was between the top <ul> and bottom <script> plus when i do close them my whole page seem's to get all screwed up i think the div container has the </div> in the footer to keep it all together as one.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Ahh...I see.

    Too bad some of these popular programs are sloppy in their HTML.


  •  

    Posting Permissions

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