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

    Swapping Contents of DIV onClick

    I have a (seemingly) simple task. I would like to swap out the contents of a div using the onClick() function. I can also use php, if need be. Basically I'd like to mimic what Target.com has done Here. The description features... tabs are very nice. it looks as though they are using a javascript function but I am not good enough to figure it out. Too new to js I guess. ANY help would be greatly appreciated.

    This is what I have so far (the only code that has worked, even a little):

    Code:
    <script type="text/javascript">
    function changeDesc(desc) {
    	var obj = document.getElementById("special");
    	
    	var description = ("This is a detail");
    	var feature = ("These are the features");
    	obj.firstChild.nodeValue = description;
    	
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <a href="" onclick="changeDesc('feature'); return false;">Description</a>
    <a href="" onclick="changeDesc(); return false;">Feature</a>
      <div id="special">
            Whatever is in here should change?
    	
      </div>
    This frustrated musician thanks you in advance.

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've made minor progress but I'm having trouble still... I'd like to have a table set to obj.innerHTML for features... is this possible? What I have now doesn't do it.

    Thanks again for any help or guidance

    Code:
    <script type="text/javascript" language="javascript">
    function changeDesc(desc)
    {      var obj =
    document.getElementById("special");    
    
      if (desc == 'feature')
      {
        obj.innerHTML = document.getElementById("feature");
      }
      else if (desc == 'description')
      {
        obj.innerHTML = "This is a description";
      }
      else
      {
        obj.innerHTML = "You have clicked other";
      }
      
    }
    
    </script>
    
    </head>
    
    <body>
      <table>
        <tr>
    	  <td width="100">
    	    <a href="" onclick="changeDesc('description'); return false;">Description</a>
    	  </td>
    	  <td width="100">
    	    <a href="" onclick="changeDesc('feature'); return false;">Feature</a>
    	  </td>
    	  <td width="100">
    	    <a href="" onclick="changeDesc('other'); return false;">Other</a>
    	  </td>
    	</tr>
    	<tr>
    	  <td id="special" colspan="3">
    	    <div id="description">
              Description in the DIV
    		</div>
    		<div id="feature">
    		  Feature in the DIV
    		</div>
    	  </td>
    	</tr>
      </table>
    </body>

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Do you mean something on these lines?

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>
    </
    HEAD>
    <
    BODY>
    <
    script type="text/javascript" language="javascript">

    function 
    changeDesc(desc){
    var 
    obj document.getElementById("special");    

    if (
    desc == 'feature'){
    obj.innerHTML "This is a feature"
    }
    else if (
    desc == 'description'){
    obj.innerHTML "This is a description";
    }
    else{
    obj.innerHTML "You have clicked other";
    }
      
    }

    </script>
    </HEAD>
    <BODY>

    <table>
    <tr>
    <td width="100">
    <a href="" onclick="changeDesc('description'); return false;">Description</a>
    </td>
    <td width="100">
    <a href="" onclick="changeDesc('feature'); return false;">Feature</a>
    </td>
    <td width="100">
    <a href="" onclick="changeDesc('other'); return false;">Other</a>
    </td>
    </tr>
    <tr>
    <td id="special" colspan="3" valign="top" style="border:1px solid black;height:70px">
    &nbsp;
    </td>
    </tr>
    </table>

    <div id="description" style="display:none">Description in the DIV</div>
    <div id="feature" style="display:none">Feature in the DIV</div>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, that is what I meant. You are a wonderful man, Mr J.

    Last question:
    I wanted to put a table and a list inside of the feature obj.innerHTML (the way I have done)
    For readability is there something I can do differently for the feature obj.innerHTML? As in carriage returns, it's hard to decipher at the moment.

    PHP Code:
    <script type="text/javascript" language="javascript">

    function 
    changeDesc(desc){
    var 
    obj document.getElementById("special");    

    if (
    desc == 'feature'){
    obj.innerHTML "<table><tr><td><ul><li>Feature #1</li><li>Feature #2</li><li>Feature #3</li></ul></td></tr><tr><td>Oh yeah this is totally what I was talking about</td></tr></table>";
    }
    else if (
    desc == 'description'){
    obj.innerHTML "This is a description = obj";
    }
    else{
    obj.innerHTML "You have clicked other = obj";
    }
      
    }

    </script> 

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    How about this?

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript" language="javascript"

    function 
    changeDesc(desc){ 
    var 
    obj document.getElementById("special");     

    if (
    desc == 'feature'){

    obj.innerHTML='<ul>'
    obj.innerHTML+='<li>Feature #1</li>'
    obj.innerHTML+='<li>Feature #2</li>'
    obj.innerHTML+='<li>Feature #3</li>'
    obj.innerHTML+='</ul>'

    obj.innerHTML+='<br>Oh yeah this is totally what I was talking about'


    else if (
    desc == 'description'){ 
    obj.innerHTML "This is a description = obj"

    else{ 
    obj.innerHTML "You have clicked other = obj"

       


    </script> 

    <style>

    #special LI{
    margin-left:10px;
    }

    </style>

    </HEAD>
    <BODY>

    <table>
    <tr>
    <td width="100">
    <a href="" onclick="changeDesc('description'); return false;">Description</a>
    </td>
    <td width="100">
    <a href="" onclick="changeDesc('feature'); return false;">Feature</a>
    </td>
    <td width="100">
    <a href="" onclick="changeDesc('other'); return false;">Other</a>
    </td>
    </tr>
    <tr>
    <td id="special" colspan="3" valign="top" style="border:1px solid black;height:70px">
    &nbsp;
    </td>
    </tr>
    </table>

    </BODY>
    </HTML> 
    Last edited by Mr J; 06-29-2006 at 12:18 AM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's much prettier, but a lot more code But I'll take what I can get! Thanks so much for all your time Mr J, you teh man.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You could go

    obj.innerHTML='<ul><li>Feature #1</li><li>Feature #2</li><li>Feature #3</li></ul><br>Oh yeah this is totally what I was talking about"

    for that particular line to make it shorter but my previous example is easier to read or as you put it, prettier
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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