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 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How Do I Create Tabs

    I need help creating tabs for my website. I was looking at http://www.dynamicdrive.com/dynamici...tabcontent.htm and needed help customizing it in some way...mainly the look. Even better, I was wondering if someone can show me how to do it from scratch so that it is fully customizable.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Technique View Post
    I need help creating tabs for my website. I was looking at http://www.dynamicdrive.com/dynamici...tabcontent.htm and needed help customizing it in some way...mainly the look. Even better, I was wondering if someone can show me how to do it from scratch so that it is fully customizable.

    Thanks.

    Ok, well there are multiple approaches you can take depending on the amount of content in each tab area...

    For Example: if you have tonnes of content and wany your main navigation to be tabs you may want to ajax the content in... or, if you have small enough content you can place it all on the page as is.

    OR

    you can create a seriese of pages that look like tabs but just navigate the entire page.

    i.e. you have two pages, pageone and pagetwo.

    both have the tabs hard coded in with the current page selected (hard coded) when you 'switch' tabs, simply navigate to the new page where the 'tab' is 'styled' to be selected.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm looking for something more like the tabs here: http://www.teamxbox.com/...under the news heading.

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anybody have any idea?

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    I don't know if this is the right way, but certainly works. I'm using tables because I suck at divs but feel free to use divs if u want.

    Code:
     HTML:
    <div align=center>
    	<table class=table>
    		<tr>
    		<div class=bck>
    			<td class=menuitem>
    				<a href=page.html>Link 1</a>
    			</td>
    			<td class=menuitem>
    				<a href=page.html>Link 2</a>
    			</td>
    			<td class=menuitem>
    				<a href=page.html>Link 3</a>
    			</td>
    			<td class=menuitem>
    				<a href=page.html>Link 4</a>
    			</td>
    		</div>
    		</tr>
    	</table>
    </div>
    Code:
     CSS:
    .table{
    	width:400px;	
    }
    
    .bck{
    	width:400px;
    	background: url(your-main-bck-for-all-of-the-links.gif);
    }
    
    .menuitem a:link{
    	width:100px;
    	display: table;
    }
    
    .menuitem a:visited{
    	width:100px;
    	display: table;
    }
    
    .menuitem a:hover 
    {
    	width:100px;
    	display: table;
    	background: url(mathcing-bck-as-the-content.gif); << You want this image to fade in or be same color as background of the content so it looks like its part of it.
    }
    .menuitem a:active 
    {
    	width:100px;
    	display: table;
    	background: url(mathcing-bck-as-the-content.gif); << You want this image to fade in or be same color as background of the content so it looks like its part of it.
    }
    .menuitem a:hover background will change when u put mouse over link.
    .menuitem a:active background will change when link is selected so it looks selected.


    Didn't try it but should work.


    EDIT: OF COURSE YOU CAN ADD YOUR OWN TOUCHES LIKE TEXT COLOR AND WHATNOT TO THE CSS SO THE LINKS DONT LOOK LIKE CRAPPERS!

  • #6
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok seriously, not too sound rude.. but if thats all you wanted why not just search google??

    i ran "javascript tab content"

    and on the first page found almost all were usable scripts..

    for example...

    http://www.google.ca/search?q=javasc...en-US:official

    second hit

    http://www.javascriptkit.com/script/...tenttabs.shtml
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rlemon View Post
    ok seriously, not too sound rude.. but if thats all you wanted why not just search google??
    I never learn by using scripts unless it's like a php news script and I mess with it so much to get it what I want it to do that i could slap a copyright on it and call it mine without any legal issues. My way is easier and certainly no javascript and whatnot. It's the poor, thinking man's way of doing things. I said its not the best way of doing it but still works. Not too hard to understand unlike the javascripts.

    Anyway, yeah theres thousands and thousands of them out there.

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I appreciate you both helpin me out.

  • #9
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Erindesign View Post
    I never learn by using scripts unless it's like a php news script and I mess with it so much to get it what I want it to do that i could slap a copyright on it and call it mine without any legal issues. My way is easier and certainly no javascript and whatnot. It's the poor, thinking man's way of doing things. I said its not the best way of doing it but still works. Not too hard to understand unlike the javascripts.

    Anyway, yeah theres thousands and thousands of them out there.
    The idea is not to cut and paste. the idea is to learn a the different techniques on how to acheive the affect then build your own.

    he's not going to learn any more from you that we wouldn't learn by reading a few of these pages..
    and if he just copy and pastes your code in there then he still can't slap a copyright on it now can he?

    i'm not flaming your responce, i appreciate people helping all they can.. i was just saying to him that he should take a little time and see some examples already posted..
    it's just easier if someone attempts the script on their own first..
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #10
    New Coder
    Join Date
    Sep 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, that's what I was going to do. I just wanted a very basic script so that I could put my own work into it later.

  • #11
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Technique View Post
    No, that's what I was going to do. I just wanted a very basic script so that I could put my own work into it later.

    exactly, search google. there are thousands.

    "Javascript tab content" is the search term.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<


  •  

    Posting Permissions

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