kafi
10-12-2007, 02:14 PM
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 wish to set up multiple content boxes with tab content script.
I have just cloned first content box.
It works OK in FF but doesnt in IE :(
Can anybody advise how to set up more content boxes on one page?
Here is what I tried:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country5" class="selected">Tab 5</a></li>
<li><a href="#" rel="country6">Tab 6</a></li>
<li><a href="#" rel="country7">Tab 3</a></li>
<li><a href="#" rel="country8">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country5" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country6" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country7" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country8" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
3) Describe problem:
I wish to set up multiple content boxes with tab content script.
I have just cloned first content box.
It works OK in FF but doesnt in IE :(
Can anybody advise how to set up more content boxes on one page?
Here is what I tried:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country5" class="selected">Tab 5</a></li>
<li><a href="#" rel="country6">Tab 6</a></li>
<li><a href="#" rel="country7">Tab 3</a></li>
<li><a href="#" rel="country8">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country5" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country6" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country7" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country8" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>