PDA

View Full Version : One script inside another ???



irukandji
02-01-2010, 04:44 PM
I'm re-developing a site view site (http://softclickit.com/clients/jsgs)with very limited content space and decided to implement some pre-made scripts to allow for tabbed 'divs' and scrolling divs to make the site have the capacity for more content.

I've been able to make the scripts run fine on the pages but then I decided to get creative and attempt to implement having a tabbed div run inside a scrolling div so that I could have several divs with more content than the visible area.

Everything looked great in code and on screen but the scroll function stopped working on the page with the tabbed div inside the scroller.

I know very little about .js and am not sure if it is even possible to have the tabbed script run inside the scroll script.

The tab script is found here on DD: Tab Content (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm)

An example of the scroll script is found here: Slider Example (http://sandbox.leigeber.com/contentslider/slider.html)

with its supporting js file here: http://sandbox.leigeber.com/contentslider/slider.js

and now for the html code which is inside my page with both scripts.
Please NOTE: I have removed the slider controls from the right column for now sine the script is not working there.


<p class="r_headline">FEATURED ARTISTS</p>

<div class="slider">
<div class="slidercontent" id="slider">
<div id="section-1" class="r_headline"></div>


<ul id="countrytabs" class="shadetabs">
<li><a href="#" id="nitsche" rel="country1" class="rbody_text">D.NITSCHE</a></li>
<li><a href="#" id="martin" rel="country2" class="rbody_text">M.MARTIN</a></li>
<li><a href="#" id="iordache" rel="country3" class="rbody_text">M.IORDACHE</a></li>
</ul>


<div style="border:none; width:270px; margin-bottom: 1em; padding: 0">

<div id="country1" class="tabcontent"><br />
<a id="testButton1" href="#" class="pageLink"><img src="img/Artists/Nitsche/art-nitsche-feat.jpg" style="margin:0 0 5px 0;" /></a><br />
<p class="rbody_text">Lorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum Ipsum
<br /><br />Lorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum Ipsum
<br /><br /> -Lorum Ipsum
</p>
</div>

<div id="country2" class="tabcontent"><br />
<a id="testButton2" href="#" class="pageLink"><img src="img/Artists/Marilyn/art-marilyn-feat.jpg" /></a><br />

<p class="rbody_text">Lorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum Ipsum
<br /><br />- Lorum Ipsum
</p>
</div>

<div id="country3" class="tabcontent"><br />
<a id="testButton3" href="#" class="pageLink"><img src="img/Artists/madalina/art-madalina-feat.jpg" /></a><br />
<p class="rbody_text">Lorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum Ipsum
<br /><br />
Lorum IpsumLorum IpsumLorum IpsumLorum IpsumLorum Ipsum - Lorum Ipsum
</p>
</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>


</div>
</div>
</div>


If it is possible to get the tabs to run inside the scroller script how would it look coded and what changes would need to be made to make it work if any?

Thanks in advance...