Tab Content script (v 2.0) in frames

[simsek97]

1) Script Title: Tab Content script (v 2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: i want to use tabcontent script in saparate frames. i mean tab links in frame A and tab contents in frame B. what changes should i make to make this possible???

let me detail my problem???

i am using a frameset like this


<frameset border='1' frameborder='1' framespacing='0' rows='10%, *''>
<frame name='frame_A' id='frame_A' src='frame_a.html'>
<frame name='frame_B' id='frame_B' src='frame_b.html'>
</frameset>

in frame_a.html i am using these codes

in head section


<link rel='stylesheet' type='text/css' href='tabcontent.css'>

in body section


<ul id="myTabs" class="shadetabs">
<li><a href="#" id="topTab0" rel="tab0" class="selected">Tab0</a></li>
<li><a href="#" id="topTab1" rel="tab1">Tab1</a></li>
<li><a href="#" id="topTab2" rel="tab2">Tab2</a></li>
</ul>

in frame_b.html i am using these codes

in head section


<script type="text/javascript" src="tabcontent.js"></script>

in body section


<div style="width:100%; height:100%; padding:0px">
<div id="tab0" class="tabcontent">Content 0</div>
<div id="tab1" class="tabcontent">Content 1</div>
<div id="tab2" class="tabcontent">Content 2</div>
</div>

<script type="text/javascript">

var topTabs=new ddtabcontent("myTabs")
topTabs.setpersist(true)
topTabs.setselectedClassTarget("link")
topTabs.init()

</script>

so i know i have to edit tabcontent.js but i dont know which changes i should make... please help me???

[ddadmin]

Firstly, inside frame_b.html, you should also add the external style sheet reference:


<link rel='stylesheet' type='text/css' href='tabcontent.css'>

Then, the key is just to modify tabcontent.js so all references to the tabs and the content DIV is done by going up the DOM hierarchy and to the correct frameset first. Specifically, make the changes in red to the lines below inside the script:


this.tabs=parent.frame_A.document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container


var subcontent=parent.frame_B.document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)

and


parent.frame_B.document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"

That should do it.

[simsek97]

Firstly, i want to thank you for your contribution...

i added those codes and i can now do what i want...

but i think there is a bug...

when i first open the page, tabs dont work but after selection any tab other than default and then refreshing page, tabs work.

i think there is a problem cookie codes. should i edit those codes about cookie...



ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

[simsek97]

i have edited those codes like this


ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (parent.frame_A.document.cookie.match(re)) //if cookie found
return parent.frame_A.document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
parent.frame_A.document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}



and also i changed some codes as below


if (typeof tabid_or_position=="string" && parent.frame_A.document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=parent.frame_A.document.getElementById(tabid_or_position)


these changes work now...

although i sometimes getting problems, it works...

do you have any idea about that changings...???

[simsek97]

Also i want to ask a question about the same frameset above...

is there any way to create dynamically (ie clicking any object in frame A) in frame B....

i mean when i clicked "open tab" button in frame A, can i create a new tab in frame B...

???

[jimbowvu80s]

ddadmin - can you clarify something for me. Is he trying to put a frame within a tabcontent div? I've been trying to do that and I can't get the frame to display. I am using the same code he is using for the tabs and the following for the frame.

Here is my frameset:

<frameset cols = "12%, *">
<frame src ="dates.html" name="Days" noresize />
<frame src ="start.html" name="Pictures and Reports" noresize scrolling="auto" />
</frameset>
</html>

[ddadmin]

can you clarify something for me. Is he trying to put a frame within a tabcontent div?

He's trying to put the tabs in one frame, and the contents they toggle in another frame. If what you're trying to do is simply have the contents be an IFRAME (so the content is from an external, embedded page), just use Ajax Tabs Content (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm), and refer to "Demo #3" to see how to do this.