PDA

View Full Version : Featured Content Slider: real URLs+fade effect



mamaduck
11-21-2007, 03:25 AM
1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.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!

ddadmin
11-21-2007, 09:51 AM
Sure, try the below attached contentslider.js file. It's based on the most recent version, modified to include the Real URLs option (http://www.dynamicdrive.com/forums/showthread.php?t=20748).

mamaduck
11-21-2007, 04:18 PM
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/

ddadmin
11-21-2007, 09:51 PM
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.

mamaduck
11-21-2007, 10:33 PM
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?


<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>

ddadmin
11-21-2007, 11:33 PM
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:


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

mamaduck
11-22-2007, 07:15 PM
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.

ddadmin
11-26-2007, 04:53 AM
Hmmm is there any reason why you're manually populating the pagination DIV with the desired links? For example:


<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:


<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)".

mamaduck
11-26-2007, 08:26 PM
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.

mamaduck
11-26-2007, 08:53 PM
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.

ddadmin
11-26-2007, 10:39 PM
Where your pagination DIV container appears shouldn't matter, as long as the initialization code comes after it in the page's source:


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

</script>

hexkrypt0r
11-27-2007, 02:39 PM
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

primortal
11-30-2007, 12:47 PM
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


<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.

ddadmin
11-30-2007, 01:36 PM
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.

primortal
11-30-2007, 06:17 PM
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.


<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>