Featured Content Glider Toggle links

**dyzine** · 12-18-2008, 06:23 AM

1) Script Title: Featured Content Glider Toggle links

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:

hello all. this is my first post in the forums. i usually spend a few hrs fixing these problems myself, but this one has me stumped. I'm using the Featured Content Glider script again, and everything is great. but... on this particular installation i need to wrap the toggle links in an unordered list within the "p-select" container (or i could use "p-select" as the id of the UL and that's fine too), but it seems if i modify the toggle links in anyway, then they no longer toggle the content, they just become dead links. i've tried many different ways to style these links, but no luck. i have a specific application in mind and there's just no way around it, i need these toggle links to be viewed as unordered list items. its not the "look" of a list a need, it's the code structure, so adding a block image beside each link and a breaking space afterward does me no good in case your clever minds were thinking of this lol. i NEED the UL structure in the code.

Any help would be greatly appreciate. thanks

**Snookerman** · 12-18-2008, 07:25 AM

Could you please post a link to your site or the code you are using?

**dyzine** · 12-18-2008, 09:30 PM

sure. i dont have it on a live site yet, i'm working locally, but here's the code for the page im playing with. it's exactly the same as the code given on the scripts page, i only put each toggle link in a list item (bottom of the code). this is where i'm having the trouble... everything works great until i add the UL, or change anything inside the "p-select" container. i also tried adding the "p-select" ID to the UL tag itself and removing the "p-select" container div, but no luck with that either. It seems the js looks for it to be a div with nothing else inside but the links, but i cant figure out where in the external js to change this behavior so it reads the list items properly

================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />

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

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</head>

<body>
<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="canadaprovinces" class="glidecontentwrapper">
<div class="glidecontent">
content 1
</div>

<div class="glidecontent">
content 2
</div>

<div class="glidecontent">
content 3
</div>
</div>

<div id="p-select" class="glidecontenttoggler">
<ul>
<li><a href="#" class="toc">Page 1</a></li>
<li><a href="#" class="toc">Page 2</a><li>
<li><a href="#" class="toc">Page 3</a></li>
</ul>
</div>

</body>
</html>

**ddadmin** · 12-19-2008, 12:50 AM

Ah yes, the problem is because by default the script only scans direct children nodes of the pagination container for special links (ie: those with class="toc"). When you added a list, the links are no longer direct children of the DIVs, but the LIs instead.

To fix this, find the below lines in red in the .js file:

Code:

			config.$toc=config.$togglerdiv.children('.toc')
			config.$next=config.$togglerdiv.children('.next')
			config.$prev=config.$togglerdiv.children('.prev')

Replace the part in red with "find" instead (no quotes). I've updated the .js file officially on the script page as well btw.

**dyzine** · 12-19-2008, 02:15 AM

works like a charm! thanks for the quick replies and resolution

Thread: Featured Content Glider Toggle links

Thread Tools

Search Thread

Featured Content Glider Toggle links

Bookmarks

Bookmarks

Posting Permissions