1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Very simple JavaScript question

Discussion in 'JavaScript' started by TJ1234, Aug 20, 2009.

0
  1. #1
    This is my first time programming with JavaScript and HTML. I need to create a page that has clickable tabs that don't navigate away from the page. I've got everything set up I just need to know if there is a way to embed links into my tab content for example I have:

    function f1() {document.getElementById("contenttab").firstChild.nodeValue="Tab 1 Content Goes Here";}

    function f1() {document.getElementById("contenttab").firstChild.nodeValue="Tab 2 Content Goes Here";}

    I want to know if its possible using that code to do something like:

    function f1() {document.getElementById("contenttab").firstChild.nodeValue="<a href="tab1.html">Tab 1</a> Content Goes Here";}

    Thanks in advance.
     
    TJ1234, Aug 20, 2009 IP
  2. ajaXpert

    ajaXpert Member

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #2
    I can't understand exactly what you mean. However, if you don't want to navigate, use 'onclick' attribute of the link (or any dom element) or href:'javascript:myFunction()'.
     
    ajaXpert, Aug 20, 2009 IP
  3. TJ1234

    TJ1234 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry, I'm trying to set up something similar to this websites tabs on the opening page: http://www.waterloomin.com/

    Right now I have it set up so you can click on the tab and the content changes but in that content we need to have links to other parts of our website but I cannot figure out how to do this with JavaScript.
     
    TJ1234, Aug 20, 2009 IP
  4. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #4
    .....nodevalue="<a href='mylink.htm'>This is a link</a>"

    although, there are other easier ways to go about this.
     
    camjohnson95, Aug 20, 2009 IP
  5. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Here is an example for you:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript tab example.</title>
<style type="text/css" >  
#cp1 
{
	background-color:Gray;
	border: solid 1px black;
	width: 400px;
	height: 300px;
	padding: 5px;
}
#cp1 div
{
	display: none;
}
#tabs
{
	width: 100%;
	padding: 5px;
}
#tabs td
{
	border: solid 1px black;
	cursor: pointer;
	text-align: center;
}
</style>
</head>
<body>
<div id="cp1">
    <table id="tabs" cellspacing="5px">
        <tr>
            <td>Tab1</td>
            <td>Tab2</td>
            <td>Tab3</td>
            <td>Tab4</td>
        </tr>
    </table>
    <div>
    This is my <font color="red">first tab.</font> Here is a <a href="http://www.google.com">link</a>.
    </div>
    <div>
    Second tab. 
    </div>
    <div>
    Third tab.
    </div>
    <div>
    Fourth tab.
    </div>
</div>
<script type="text/javascript">
//get all the tabs and divs for quick access
var myTabs = document.getElementById("tabs").getElementsByTagName("td");
var myDivs = document.getElementById("cp1").getElementsByTagName("div");

//show the first tab by default
showTab(0)

//iterate through all the tabs and create an onclick handler for each
for(i=0; i<myTabs.length; i++) {
    //assign a new attribute tabNo to each tab, so it can easily find the corresponding div when clicked
    myTabs(i).setAttribute("tabNo", i);
    myTabs(i).onclick = function() {
            //retrieve the value of the previous mentioned 'tabNo' attribute
            var tabNo = this.getAttribute("tabNo");
            hideAll();
            showTab(tabNo);
    }
}

function hideAll() {
//hides all the divs and makes all the tabs their 'non-selected' color: gray
    for(i=0; i<myDivs.length; i++) {
        myDivs(i).style.display = "none";
        myTabs(i).style.backgroundColor = "gray";
    }
}

function showTab(tabNo) {
//change the clicked tab's color to the 'selected' color: lightgrey and show the div
    myTabs(tabNo).style.backgroundColor = "lightgrey";
    myDivs(tabNo).style.display = "block";
}</script>
</body>
</html>
    Code (markup):
    With this method you can easily add new tabs and add new content with html code etc... without having to change the javascript each time.
     
    Last edited: Aug 20, 2009
    camjohnson95, Aug 20, 2009 IP
    TJ1234 and dimitar christoff like this.
  6. TJ1234

    TJ1234 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for the code. But it doesn't seem to work. On Firefox there is just the grey box and when you click the tab buttons nothing happens. On IE the content for the first tab shows up but when you click any other tab the content disappears. The error I get from the firefox error console says "myTabs is not a function". It says the error is on line 85 but I think its actually on line 64.
     
    Last edited: Aug 21, 2009
    TJ1234, Aug 21, 2009 IP
  7. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #7
    dimitar christoff, Aug 21, 2009 IP
    TJ1234 likes this.
  8. TJ1234

    TJ1234 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I'm a networking guy not a programmer so I appreciate the help. I have it working. Now all i needs to do it style it. Thank you both very much.
     
    TJ1234, Aug 21, 2009 IP
  9. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #9
    why is that dimitar_christoff? should i be using [] instead of () ??? I tested with both ie7 and ff3.
     
    camjohnson95, Aug 21, 2009 IP
  10. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #10
    erm - because it is an array and not a function. array[key] = value etc, whereas func(argument)... i thought it was a typo or something :D

    although an array in js is also an object so you can also do array.key = value - still - you can't do array(key) = value (unless you prototype array somehow to a function...)
     
    dimitar christoff, Aug 21, 2009 IP
  11. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #11
    Yeah I guess I forgot. Getting too used to vb.net. I don't know why I didn't get an error.
     
    camjohnson95, Aug 22, 2009 IP