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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy latest weeks problem of making tabs..... (i'm a newbie)

    I'm having the problem of adding tabs to my profile for a chat site where they allow the use of html and javascripts to personalize your profile which i make good use of but have been trying to find to add tabs for just a small window in the profile but haven't gotten anywhere with this problem for a week now so i hope someone here can help, thanks in advance.



    P.s i hope this isn't the wrong place to ask for help on this exact thing if it is then tell and i'll move on in my search to where the right place is and thanks for reading this even if you can't help

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    The Javascript tab character is \t.

    It would help if you showed us some code.


    They [Stoke] have played Chelsea half a dozen times since they were promoted, and they've lost ten of them. - Commentator BBC Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Hayate (02-17-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well what i have is this: (please tell me what i am doing wrong and don't care about the text since it was on the page where i found the help first off but can't get it to work and i read and there was about it)


    <html>
    <head>

    <title>JavaScript tabs example</title>

    <style type="text/css">
    body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
    ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
    ul#tabs li { display: inline; }
    ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
    ul#tabs li a:hover { background-color: #f1f0ee; }
    ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
    div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
    div.tabContent.hide { display: none; }
    </style>

    <script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

    // Grab the tab links and content divs from the page
    var tabListItems = document.getElementById('tabs').childNodes;
    for ( var i = 0; i < tabListItems.length; i++ ) {
    if ( tabListItems[i].nodeName == "LI" ) {
    var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
    var id = getHash( tabLink.getAttribute('href') );
    tabLinks[id] = tabLink;
    contentDivs[id] = document.getElementById( id );
    }
    }

    // Assign onclick events to the tab links, and
    // highlight the first tab
    var i = 0;

    for ( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur() };
    if ( i == 0 ) tabLinks[id].className = 'selected';
    i++;
    }

    // Hide all content divs except the first
    var i = 0;

    for ( var id in contentDivs ) {
    if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
    i++;
    }
    }

    function showTab() {
    var selectedId = getHash( this.getAttribute('href') );

    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
    if ( id == selectedId ) {
    tabLinks[id].className = 'selected';
    contentDivs[id].className = 'tabContent';
    } else {
    tabLinks[id].className = '';
    contentDivs[id].className = 'tabContent hide';
    }
    }

    // Stop the browser following the link
    return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
    for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
    }
    }

    function getHash( url ) {
    var hashPos = url.lastIndexOf ( '#' );
    return url.substring( hashPos + 1 );
    }

    //]]>
    </script>
    </head>
    <body onload="init()">
    <h1>JavaScript tabs example</h1>

    <ul id="tabs">
    <li><a href="#about">About JavaScript tabs</a></li>
    <li><a href="#advantages">Advantages of tabs</a></li>
    <li><a href="#usage">Using tabs</a></li>
    </ul>

    <div class="tabContent" id="about">
    <h2>About JavaScript tabs</h2>
    <div>
    <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>
    </div>

    <div class="tabContent" id="advantages">
    <h2>Advantages of tabs</h2>
    <div>
    <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
    <p>They're also good for things like multi-step Web forms.</p>
    </div>
    </div>

    <div class="tabContent" id="usage">
    <h2>Using tabs</h2>
    <div>
    <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
    </div>
    </div>

    <p><a href="/articles/javascript-tabs/">Return to the JavaScript Tabs article</a></p>

    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    it is very easy to add tabs so you need to expain your requirement mor fully
    Code:
    <html>
    <head>
    
    <title>JavaScript tabs example</title>
    
    <style type="text/css">
    body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
    ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
    ul#tabs li { display: inline; }
    ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
    ul#tabs li a:hover { background-color: #f1f0ee; }
    ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
    div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
    div.tabContent.hide { display: none; }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var tabLinks = new Array();
    var contentDivs = new Array();
    
    function init() {
    
    // Grab the tab links and content divs from the page
    var tabListItems = document.getElementById('tabs').childNodes;
    for ( var i = 0; i < tabListItems.length; i++ ) {
    if ( tabListItems[i].nodeName == "LI" ) {
    var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
    var id = getHash( tabLink.getAttribute('href') );
    tabLinks[id] = tabLink;
    contentDivs[id] = document.getElementById( id );
    }
    }
    
    // Assign onclick events to the tab links, and
    // highlight the first tab
    var i = 0;
    
    for ( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur() };
    if ( i == 0 ) tabLinks[id].className = 'selected';
    i++;
    }
    
    // Hide all content divs except the first
    var i = 0;
    
    for ( var id in contentDivs ) {
    if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
    i++;
    }
    }
    
    function showTab() {
    var selectedId = getHash( this.getAttribute('href') );
    
    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
    if ( id == selectedId ) {
    tabLinks[id].className = 'selected';
    contentDivs[id].className = 'tabContent';
    } else {
    tabLinks[id].className = '';
    contentDivs[id].className = 'tabContent hide';
    }
    }
    
    // Stop the browser following the link
    return false;
    }
    
    function getFirstChildWithTagName( element, tagName ) {
    for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
    }
    }
    
    function getHash( url ) {
    var hashPos = url.lastIndexOf ( '#' );
    return url.substring( hashPos + 1 );
    }
    
    //]]>
    </script>
    </head>
    <body onload="init()">
    <h1>JavaScript tabs example</h1>
    
    <ul id="tabs">
    <li><a href="#about">About JavaScript tabs</a></li>
    <li><a href="#advantages">Advantages of tabs</a></li>
    <li><a href="#usage">Using tabs</a></li>
    <li><a href="#usage2">Using tabs 2</a></li>
    </ul>
    
    <div class="tabContent" id="about">
    <h2>About JavaScript tabs</h2>
    <div>
    <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>
    </div>
    
    <div class="tabContent" id="advantages">
    <h2>Advantages of tabs</h2>
    <div>
    <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
    <p>They're also good for things like multi-step Web forms.</p>
    </div>
    </div>
    
    <div class="tabContent" id="usage">
    <h2>Using tabs</h2>
    <div>
    <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
    </div>
    </div>
    
    <div class="tabContent" id="usage2">
    <h2>Using tabs 2</h2>
    <div>
    <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
    </div>
    </div>
    
    <p><a href="/articles/javascript-tabs/">Return to the JavaScript Tabs article</a></p>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow another useless attempt for help

    Quote Originally Posted by vwphillips View Post
    it is very easy to add tabs so you need to expain your requirement mor fully
    I said i was a newbie so no it isn't easy for me and apparently i can't get any help from this site either and i explained what i needed which is getting the code i posted to work since i isn't working for me as of how it is now.

    Guess i'll just move on to get help somewhere else since getting it here looks hopeless...

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by Hayate View Post
    I said i was a newbie so no it isn't easy for me and apparently i can't get any help from this site either and i explained what i needed which is getting the code i posted to work since i isn't working for me as of how it is now.

    Guess i'll just move on to get help somewhere else since getting it here looks hopeless...
    With that juvenile attitude you will find it difficult to get help anywhere.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well sorry about the attitude but it annoys me when someone acted like you did since i already explained everything i needed properly and you said "making tabs is easy" like a person is stupid if not able to

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by Hayate View Post
    well sorry about the attitude but it annoys me when someone acted like you did since i already explained everything i needed properly and you said "making tabs is easy" like a person is stupid if not able to
    Vic Phillips said "It is very easy to add tabs so you need to explain your requirement more fully". And gave you an example.

    If you insult senior members of this forum they tend to lose interest in your problem. As a newbie you are perhaps trying to run before you can walk.

    You need to say in what way your code does not work. Does not work at all? Or works but not as expected? Have you tried using your error console? People are put off and tend to ignore your question when you do not use the recommended code tags. Have you looked as "How to ask a Javascript question" at MUST READ- How to post a JavaScript question! Para #3?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    what i try to explain it doesn't work at all nothing showed when i used the code and when i use a coding "console"(not sure if i could call it that since it is unusual way to try the code) and it says error like no parts of the code is usable in any way

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    The changes you need are in RED in the following code section.
    You can make any number of additional tabs by following that template outline.

    Code:
    <html>
    <head>
    
    <title>JavaScript tabs example</title>
    
    <style type="text/css">
     body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
     ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
     ul#tabs li { display: inline; }
     ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
     ul#tabs li a:hover { background-color: #f1f0ee; }
     ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
     div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
     div.tabContent.hide { display: none; }
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var tabLinks = new Array();
    var contentDivs = new Array();
    
    function init() {
    
    // Grab the tab links and content divs from the page
     var tabListItems = document.getElementById('tabs').childNodes;
     for ( var i = 0; i < tabListItems.length; i++ ) {
      if ( tabListItems[i].nodeName == "LI" ) {
       var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
       var id = getHash( tabLink.getAttribute('href') );
       tabLinks[id] = tabLink;
       contentDivs[id] = document.getElementById( id );
      }
     }
    
    // Assign onclick events to the tab links, and
    // highlight the first tab
     var i = 0;
    
     for ( var id in tabLinks ) {
      tabLinks[id].onclick = showTab;
      tabLinks[id].onfocus = function() { this.blur() };
      if ( i == 0 ) tabLinks[id].className = 'selected';
      i++;
     }
    
    // Hide all content divs except the first
     var i = 0;
    
     for ( var id in contentDivs ) {
      if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
      i++;
     }
    }
    
    function showTab() {
     var selectedId = getHash( this.getAttribute('href') );
    
    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
     for ( var id in contentDivs ) {
      if ( id == selectedId ) {
       tabLinks[id].className = 'selected';
       contentDivs[id].className = 'tabContent';
      } else {
       tabLinks[id].className = '';
       contentDivs[id].className = 'tabContent hide';
      }
     }
    // Stop the browser following the link
     return false;
    }
    
    function getFirstChildWithTagName( element, tagName ) {
     for ( var i = 0; i < element.childNodes.length; i++ ) {
      if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
     }
    }
    
    function getHash( url ) {
     var hashPos = url.lastIndexOf ( '#' );
     return url.substring( hashPos + 1 );
    }
    
    //]]>
    </script>
    </head>
    <body onload="init()">
    <h1>JavaScript tabs example</h1>
    
    <ul id="tabs">
     <li><a href="#about">About JavaScript tabs</a></li>
     <li><a href="#advantages">Advantages of tabs</a></li>
     <li><a href="#usage">Using tabs</a></li>
     <li><a href="#usage2">Using tabs 2</a></li>
     <li><a href="#aboutme">About Me</a></li>
    </ul>
    
    <div class="tabContent" id="about">
     <h2>About JavaScript tabs</h2>
     <div>
      <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
      <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
     </div>
    </div>
    
    <div class="tabContent" id="advantages">
     <h2>Advantages of tabs</h2>
     <div>
      <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>
      <p>They're also good for things like multi-step Web forms.</p>
     </div>
    </div>
    
    <div class="tabContent" id="usage">
     <h2>Using tabs</h2>
     <div>
      <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
     </div>
    </div>
    
    <div class="tabContent" id="usage2">
     <h2>Using tabs 2</h2>
     <div>
      <p>Click a tab to view the tab's content. Using tabs couldn't be easier!</p>
     </div>
    </div>
    
    <div class="tabContent" id="aboutme">
     <h2>About Me</h2>
     <div>
      <p>Here is where you would place your information about yourself<p>
      <p>Name: Hayate<br>
         Location: Somewhere<br>
         Joined: 2/16/2014
      <p>
     </div>
    </div>
    
    <p><a href="/articles/javascript-tabs/">Return to the JavaScript Tabs article</a></p>
    
    </body>
    </html>
    If the changes do not make sense to you, then the next step I would suggest
    is to read some books or view some online tutorials about javascript.

    Forum members are usually delighted to help noobies to the JS language
    unless they get belligerent about the questions asked of them to explain further their problem.
    If someone is asking as question, while it may be plain to you, the inquiry is for more information that you should provide.
    You will get better responses when you calmly express you problem, show what you have tried,
    explain what does happen and what you expected to happen. We are not mind readers here (at least not me).
    We have time to explain where the problem might lie, but not enough time to
    guess at what you are trying to do and write it for you from scratch, and then to be criticized when it does not meet your expectations.

    If you do not have time for those activities, then I would suggest hiring someone to make your changes.

    Good Luck!

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I copied and pasted your code as is and it works for me locally.

  • #12
    sal
    sal is offline
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use a bunch of non-breaking space characters. HTML is &nbsp;

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The OP is not referring to tab character but to the "folder tab" UI control.


  •  

    Tags for this Thread

    Posting Permissions

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