Featured Content Slider: real URLs+fade effect

1) Script Title: Featured Content Slider

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

3) Describe problem:

I have successfully gotten the content slider to use real URL's in the pagination tabs, but I realized that I was using a modified version of the .js file that did not include the fade transition effect. Is there any documentation about how to add the fade transition effect?

The files I am working with are here

http:www.v-linkstudio.com/macey

1 version has the fade, but no URLS for the tab, and the other is vice versa.

TIA!

Sure, try the below attached contentslider.js file. It's based on the most recent version, modified to include the Real URLs option.

Unfortunately, I still can't seem to get it working - the URL shows up in the status bar, but the page doesn't load.

The files are here: http://www.v-linkstudio.com/macey/

Ah right, there are actually two two versions of the Real URLs mode. The first one just modifies the pagination links to actual URLs for the benefit of search engines etc. Nothing else changes as far as behavior. The second version goes a step further, so clicking on a pagination link actually goes to each real URL, and mousing over the pagination links changes the featured content slider instead (instead of clicking on them)..

For the 2nd version, use the below attached .js file instead.

I'm sorry, but it's still not working :(

http://www.v-linksudio.com/macey/tabs3.htm

Have I set up the variables/parameters correctly?

Code:

---

<script type="text/javascript">
var linktext=[ "COMMERCIAL", "AGRICULTURAL", "RESIDENTIAL" , "POOL HEATING"]//custom linkstext array
var mylinks=['http://www.google.com', 'link2.htm', 'link3.htm', 'link4.htm' ]//navurls
 ContentSlider("slider1", 3000, linktext,"", mylinks)
</script>

---

The "tab3.htm" link you posted doesn't work. However, it looks like the parameters aren't set up properly. The Real URLs parameter should be the 5th one. For example:

Code:

---

var linktext=["horses", "scenery", "ocean", "sushi"]
var nexttext="Forward"
ContentSlider("slider1", 5000, linktext, nexttext, ['http://www.google.com', 'link2.htm', 'link3.htm', 'link4.htm'])

---

Hi, I tried setting it up the way you suggested, but it still doesn't work. The content changes when you mouse over the tabs, but the link does not work when you click. Also, if you keep your mouse on the tab, the fade up repeats to create a flicker effect. The link is here and it does work this time, sorry about that!!!

http://v-linkstudio.com/macey/tabs3.htm

The only change I made to the last script you posted was to add "display:none" to the Next button style.

Hmmm is there any reason why you're manually populating the pagination DIV with the desired links? For example:

Code:

---

<div class="pagination" id="paginate-slider1"></div>
<div class="statictabs"> <a href="commercial/index.html">COMMERCIAL</a>
<a href="agricultural/index.html">AGRICULTURAL</a>
<a href="residential/index.html">RESIDENTIAL</a>
<a href="pool/index.html">POOL HEATING</a>
</div>

---

By default all you should do is create a blank DIV:

Code:

---

<div class="pagination" id="paginate-slider1"></div>

---

In which the script then populates dynamically based on your custom link text and real URLs. This is possibly the source of your problem.

I've attached an entire working example of Featured Content script, with the fading effect, real URLs, plus disabling of the next button.

p.s: Please don't start a new thread on an existing question. Instead, just reply to the already existing one. I've gone ahead and deleted your new thread "Featured Content Slider - real url+fade (again)".

Thanks so much, everything works exactly as I need it to ... until I try to move the pagination links to above the content div(s). I'm trying to figure this out and will search the forum for answers, but if anyone one happens to know why this happens and how to avoid it, let me know.

In the test file that you posted above, it still works when I put the pagination links on top, so obviously it is something in my html or css that is causing the breakdown when I put the pagination links on top. I will try to pinpoint what the problem is.

Where your pagination DIV container appears shouldn't matter, as long as the initialization code comes after it in the page's source:

Code:

---

<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
ContentSlider("slider1")

</script>

---

Hi i ahve been working on this particular script and still am because i amtryin to fix a bug.
If i found something that might be useful to yuo i'll post it here

In my case this (exact same script), works good in IE 6 or lower but does not displya any images when viewed with IE7
Do you know if there is any extra piece of code i have to add up so it'll display the specified images?
Any suggestions?
Hexkrypt0r

Im having an issue with the fade. Im currently using a custom scroll bar for the content thats too big for the feature content slider. So it uses two DIV tags seen below

Code:

---

<div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
  <div id="divContent_1" style="padding: 5px; position: absolute;">
  (my content)
  </div>
</div>

---

It seems that the position tag (in either div) in the style is preventing the fade from happening, the content is just displayed. Is there anything that can be done besides removing that style?

This is happening in IE7, Firefox (of course) works fine.

Primotal, by custom scrollbar, do you mean CSS's scrollbar declaration (ie: overflow: scroll;), or some script that renders a custom scrollbar? An example URL might help.

p.s: In the future, please start a new thread when asking your own question, even if it's on the same script/ issue as another thread.

my appologies about piggy backing on this thread...

Its a javascript that renders the scrollbar (http://www.blueshoes.org/en/javascript/scrollablediv/), but I removed that script trying to figure out the issue. I tracked it down to when I remove "position: relative" from divContainer_1 style and "position: absolute" from divContent_1 style everything works perfectly in IE 7.

If you take the code from above insert it like below you wll see what i mean.

Code:

---

<div id="slider1" class="contentslide">
<div class="opacitylayer">

<div class="contentdiv">
<div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
  <div id="divContent_1" style="padding: 5px; position: absolute;">
  Content 1
  </div>
</div>
</div>

<div class="contentdiv">
<div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
  <div id="divContent_1" style="padding: 5px; position: absolute;">
  Content 2
  </div>
</div>
</div>

<div class="contentdiv">
<div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
  <div id="divContent_1" style="padding: 5px; position: absolute;">
  Content 3
  </div>
</div>
</div>

</div>
</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
ContentSlider("slider1")

</script>

---