Go Back   Computer Forums > Web Design | Website Development > Web Programming
Join Computer forums Today

Thread Tools Search this Thread Display Modes
Old 04-29-2012, 11:30 AM   #1
Baseband Member
Join Date: Nov 2011
Posts: 29
Default Replace content withut page loading

See this is what i want to achieve in my webpage....

There will be three tabs side by side with names T1 T2 and T3 in the header.

Below this tab-bar, will be a div element with some text (let's call that element "Text-box")
I want to change the text on that div element without reloading the page when the tabs are clicked. For example when the user opens the page there will be some text in the div-element like "welcome". Then when the user clicks T1 tab, the text in the div element will change to "This is tab 1", when the user clicks T2 tab, the text will change to "This is tab 2"....like this. I want to achieve all this without having to reload the page everytime the user clicks a tab.

Now I don't know much coding, so I'll be glad if someone comes up with the full code (html,jss etc whatever needed).

From a Google search I got this code:-

<style type="text/css">
div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
div.tabBody { position: absolute; top: 0px; left: 0px;
width: 95%; height: 75%;
z-index: 1;
background-color: yellow; border: solid brown 2px;
padding: 20px;
div.tabHead { position: absolute; top: -20px; left: 10px;
width: 200px; height: 22px;
z-index: 2;
text-align: center;
background-color: lightyellow; border: solid brown 2px; border-bottom: none;
<script type="text/javascript">
function front(which)
for ( var t = 1; t < 9999; ++t )
var dv = document.getElementById("TABBODY"+t);
if ( dv == null ) return;
dv.style.zIndex = t == which ? 5 : 1;
var tab = document.getElementById("TAB"+t);
tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
tab.style.zIndex = t == which ? 7 : 1;
<body onload="front(1);">
Stuff at the top of the page.
<div id="ALL">
<div id="TAB1" class="tabHead" onclick="front(1);"><strong>t1</strong></div>
<div id="TAB2" class="tabHead" onclick="front(2);" style="left: 226px;"><strong>T2</strong></div>
<div id="TAB3" class="tabHead" onclick="front(3);" style="left: 452px;"><strong>T3</strong></div>
<div id="TAB4" class="tabHead" onclick="front(4);" style="left: 678px;"><strong>T4</strong></div>

<div id="TABBODY1" class="tabBody">

<div id="TABBODY2" class="tabBody">
<div id="TABBODY3" class="tabBody">
<div id="TABBODY4" class="tabBody">

The problem is that I'd like to use this entire thing as an element in a table, and in that case the above code causes problems...please suggest a solution.

So either pls give me a different code or pls suggest remedies to make it usable as table elements. Screenshot when used as a table element attached.
Attached Images
File Type: jpg screen.jpg (40.2 KB, 3 views)

Soumikbhat is offline   Reply With Quote
Old 06-08-2012, 07:05 PM   #2
Join Date: Jan 2005
Location: Wales
Posts: 5,556
Send a message via MSN to j03
Default Re: Replace content withut page loading

Have a look at jQuery - specifically the replaceWith method. You can use it to dynamically change the contents of a div.

The documentation for replaceWith is here: .replaceWith() – jQuery API
j03 is offline   Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

All times are GMT -5. The time now is 12:02 AM.

Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0