PDA

View Full Version : Featured Content Slider - external data



sol07
07-24-2007, 08:40 AM
1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem:

I would like to know if it is possible to extract the data to be displayed from a single external file, which has multiple "articles", for example:


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

<div class="contentdiv" rel="external.htm">

</div>

and in the external.htm, there would be 6 articles to be rotated. I tried the above, but it simply displayed all 6 at the same time which is not what I want. I do not want to have to create an external file for each article.

So, how do I separate each article in external.htm so that they are displayed separately, in rotation?

Thanks
_________________

ddadmin
07-25-2007, 10:06 AM
Ok, try the below modified contentslider.js file. Then, use the 5th parameter to define your single external file that contains all the DIV contents:


ContentSlider("slider1", "", "", "", "master.htm")

Inside "master.htm", you'd have something like:


<div class="contentdiv">
Content 1
</div>

<div class="contentdiv">
Content 2
</div>

<div class="contentdiv">
Content 3
</div>

The most important thing to take note when using this feature is to empty the default DIV tags that are contained inside your Slider on your page:


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

</div>

In other words, remove the DIVs inside the above DIV that now reside in your external file instead.

sol07
07-25-2007, 11:41 AM
Thank you for your suggestion. I have tried it but no luck. Here's what I have:

the master.htm (my file is actually called contentnews.php - presumably there's no problem with linking to a PHP file?)


<!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>contentnews</title>
</head>
<body>

<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/tech_images/net2.gif" alt="" width="140" height="100" />
<br />
<strong>will this work</strong></a></div>
Hoping to get this data from this external file to display in the main page... <a href="#" target="_new"> [read more]</a>
</div>


<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/tech_images/filing_230x126.jpg" alt="" width="140" height="100" /><br />
<strong>Lots of news today</strong></a></div>
yes there is a lot of news to display today, if it will display at all...<a href="#" target="_new"> [read more]</a>
</div>


<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/wmm_1.jpg" alt="" width="140" height="100" /><br />
<strong>Worth his salt</strong></a></div>
ddadmin is a very generous dude to help others' with their coding issues...<br />
<a href="#" target="_new"> [read more]</a>
</div>


</body>
</html>


And for the code on the main page




<link rel="stylesheet" type="text/css" href="styles/contentslider.css" />
<script type="text/javascript" src="scripts/contentslider.js">
/***********************************************
* Featured Content Slider- &#169; 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 this script and 100s more
***********************************************/
</script>



<h3>Latest News:</h3>

<!--content ticker courtesy of www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm-->

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


<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
//Auto rotate slider every 5 seconds
ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")
</script>


And finally, I used your JS file, just as you said, without any mods.

Should the script on the main page be in the master.htm file?

What am I missing here?

TIA

ddadmin
07-25-2007, 11:43 AM
ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")

Shouldn't it be "contentnews.php" instead of "contentnews.htm"?


Should the script on the main page be in the master.htm file?

Nope.

sol07
07-26-2007, 05:42 AM
[QUOTE=ddadmin;102063]
ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")

Shouldn't it be "contentnews.php" instead of "contentnews.htm"?


Well, yes it should, and it is in my file. This is a mistake in the example code.

Any other observations?

TIA

ddadmin
07-26-2007, 08:26 AM
The modification I posted does work for me. I guess a URL to your problem page would be helpful at this point.

sol07
07-26-2007, 10:18 AM
Thanks for your help so far....

OK, here are the files:

www.thesallyconnection.com/testpage.php
www.thesallyconnection.com/contentnews.php
www.thesallyconnection.com/contentslider5.js

As you can see, it's still not working, but it is displaying the Next button!

Thanks again for helping



Thanks again.
Sol

ddadmin
07-27-2007, 02:32 AM
Ok, three errors I see on your page testpage.php:

1) You didn't actually empty out the Featured Content DIV container completely as I've mentioned before:


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

The line in red shouldn't be there.

2) When calling the script, you should use the 5th paramater to specify the external file to fetch, not the 6th. So the correct call should be:


ContentSlider("slider1", 5000, "", "", "contentnews.php")

3) Finally, inside contentnews.php, remove the <head><body> tags etc, so all that the page contains are the DIV content tags. It probably doesn't matter if you don't, but better to do it anyway.

sol07
07-27-2007, 03:04 AM
Thanks ddadmin

Some simple changes there. The pagination stuff wasn't actually there originally, I was just trying different things to get it to work. ;-)

Anyways, I have implemented your changes and yes, the content does now display, except it is still displaying all at once, rather than one at a time. Also, we've lost the buttons!

Arggg!

Have I missed something else?

ddadmin
07-27-2007, 03:16 AM
Actually, you did. :) The pagination DIV should still exist, just outside your Featured Content DIV:


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

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

That should fix the other problem when fixed.

sol07
07-27-2007, 04:23 AM
Excellent, thank you heaps. It works now and just needs a tidy up with the code and formatting.

By the way, is there an easy way to add images to the buttons? I've read some of the other forum posts on this matter and quite frankly, it seems to be a very drawn out & complicated process!

Really appreciate your help, thanks again.

ddadmin
07-27-2007, 04:31 AM
By the way, is there an easy way to add images to the buttons? I've read some of the other forum posts on this matter and quite frankly, it seems to be a very drawn out & complicated process!

I don't see how it can get any easier actually. :) It's a built in feature of the script. See this thread: http://www.dynamicdrive.com/forums/showthread.php?t=23014

sol07
07-28-2007, 02:24 AM
I don't see how it can get any easier actually. :) It's a built in feature of the script. See this thread: http://www.dynamicdrive.com/forums/showthread.php?t=23014

OK, well, yes, you're right, I worked it out no worries. Thanks again for all your help, ddadmin, you're a damn fine human being :-)

If I may be permitted to do so, I would like to test your super powers once more!

I have come across John's ContentSlider Javasript mod that allows one to add a "back" link and also a "play / pause" link. You might be familiar with it?

I had a good look at both scripts and I can see there is quite a bit of difference. I tried to make a hybrid by carefully comparing the two and adding where I thought it needed it (from your code to his, to enable the external data pull). However, this has sadly resulted in me breaking the script :-(

Do you have the time and inclination to have a look at creating a better hybrid than mine? I would really like the back and play/pause feature.

I have attached the following scripts :
[contentslider5.js] this is your original script for calling from external file which works fine.
[contentslider4.js] John's script which works fine when it doesn't have to call from external source
[contentslider7.js] - this is my hybrid of the two (might be best to ignore!!)

Perhaps amending John's script to add your code might be easiest?
I realise this could be a big job, so I won't hold you to it!

Thanks heaps once again.
Sol

sol07
07-30-2007, 09:02 PM
ddadmin,

Would you be able to show me the code in the contentslider.js that you added? Maybe I can have a go myself at adding it to the other JS's?

ddadmin
07-31-2007, 06:52 AM
Hmm can you tell me the thread you're referring to as far as John's modifications? Do you mean this one (http://www.dynamicdrive.com/forums/showthread.php?t=14412)?

sol07
07-31-2007, 10:44 AM
Hi ddadmin, thanks for responding. Yes I do mean that script. Sorry it's by jscheuer1 (I think his name is indeed John).

It would be fantastic beyond amazing, if the script could:

1) call external data (as you've shown me, THANK YOU)
2) have the pagination links in John's script (i.e. stop/play back next)
3) have graphics on the pagination links (I failed miserably on John's script)

Hope that clarifies this for you.

Thanks once again for all your time and help.
Cheers
Sol

ddadmin
08-01-2007, 06:37 AM
I just spent some time combining the two .js files, but looks like I'm starting to confuse myself a bit lol. Hopefully you don't need this asap- I'll take a stab at it again tomorrow. :)

ddadmin
08-01-2007, 09:41 AM
Ok, try the attached zip file, which contains all the files that make up the modified script. It adds support for a "Back" button, plus "Play/Pause", and of course, the ability to get its content from a single external file. Run test3.htm.

sol07
08-01-2007, 11:58 AM
Hello ddadmin,

It works real great after a lot of tweaking from this end on the css and integration. A little more tidying from me on the css and then sprucing up the actual content should finish it.

http://www.thesallyconnection.com/testpage.php

I can't thank you enough. I quite simply take my hat off to you!!!
I would be happy to send you a free music CD by way of thanks? You will have to email me your postal address.

Any chance of helping me with adding the images to the pagination links (and then I really will be super delighted, and stop hassling you, honest!!) :-)

Hey, really appreciate all you time and effort. Thanks again.
Sol



ps I have the images ready: play.gif, pause.gif, forward.gif, back.gif

ddadmin
08-01-2007, 08:31 PM
Actually, the modified script like the original already lets you customize the nav links, whether it's the "Back", "forth", or "1", "2", "3" etc links with your own custom HTML instead. So in your case, you would do something like:


<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext], [custombacklinktext], [externalfile_url])
ContentSlider("slider1", 5000, "", "<img src='forth.png' />", "<img src='back.png' />", "master.htm")
</script>

That leaves the 'Play/Pause' buttons, which require editting the .js file unfortunately. Let me know if you can get the above working first, and I'll let you know the changes needed within the .js file to complete it.

p.s: No need to thank me, John deserves the credit for the work he put in with his modifications. :)

sol07
08-02-2007, 12:08 AM
OK then, thank you again.

I have added the back and next links.

Is it possible to

1) remove the 1, 2, 3 links (would I do this in the JS? Which line? I don't want to tinker in case it breaks!)
2) add an image rollover state such as a back_over (highlighted colour) to the pagination gif's?


Would be delighted to be able to add the play / pause image too when you have time.

TIA
Cheers
Sol

ddadmin
08-03-2007, 06:07 AM
Ok, try the below attached .js file over the one in the last zip file. It adds to the later:

-Ability to specify a custom "pause" and "play" button
-Removes the pagination links "1", "2", "3" etc
-Easy defining of all four images used by the script- pause, play, back, and forth buttons.

With the attached .js file used, your HTML for calling it now looks like this:


ContentSlider("slider1", 5000, ['pause.gif','play.gif','back.gif','forth.gif'], "master.htm")

Obviously change the 4 image paths above to your own. As far as a rollover, it's certainly possible, though right now my head is spinning looking at the same script for so many days, so for now, I'd like to only address any bugs, not new features. :)

sol07
08-03-2007, 11:05 AM
Hello ddadmin

It works perfectly now. I have it working on every page!! Even two of them!! hehe, perhaps a little too enthusiastic! Oh, what the hell, I might even put different content on every page lol.
Have a look here:

www.thesallyconnection.com

A BIG THANK YOU ! You are really a very generous person to help with this. And thanks of course go to John.... hope he'll see this post and pick up on his share of the limelight!

I hope that other users will find this script of use too!

Of course, no worries on the rollover, just if you have chance sometime in the future!

Thanks heaps again my friend.
Let me know if there is something I can do for you in return?

Cheers for now.
Sol

sol07
08-08-2007, 01:42 AM
[snip...] for now, I'd like to only address any bugs, not new features. :)

Hi ddadmin,

I have had a look at the site in Internet Explorer ( using this tool http://ipinfo.info/netrenderer/index.php) and the pagination seems to be a little dodgy (IE7). Interestingly (or rather, annoyingly) in IE 6 and IE5.5 the entire right side is blank (darn it! another job!)

Any suggestions on how to fix it?

TIA

ddadmin
08-08-2007, 05:39 AM
Hi:
I just checked your page in IE6- the script does work and is running fine actually. The "blank" space you're seeing is in fact a layout issue with your page in IE6. The way your columns are designed, in IE6, everything on the right column is being pushed down a page's height or so. This is unfortunately a different issue from the script itself, and is layout related. I'm guessing some sort of CSS problem.

sol07
08-08-2007, 06:06 AM
OK, thanks 4 that, I'll have a good look at the css.

Cheers

sol07
08-09-2007, 11:34 PM
Hi ddadmin,

I have another question for you :-)

I'm going to use this in my other project website, but I can't for the life of me get the pagination images to line up. I've messed around with CSS for too long! Also, in IE, the right hand (next) button shows up with a box around it. I have tried to remove this but can't locate where it is coming from.

Here is the page in question:
http://www.purpledogdesign.com/testpage.php

Is there anyway to rectify this in the script? I did try with absolute positioning and this worked for the alignment, but not the box.

TIA
Sol

ddadmin
08-10-2007, 07:01 AM
Inside the .js file, try adding a border="0" inside the IMG tag for the next link:


pcontent+='<a href="" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\"><img src="'+slider.controls[3]+'" border="0" /></a>'

The code in red is new.

sol07
08-12-2007, 04:27 AM
Oh so simple! The only thing I didn't try! Works great. Thanks once again.

Now all I have to do is work out why neither of the sites manages to display the script in IE 6.... !

Best wishes
Sol

ddadmin
08-12-2007, 08:36 PM
Oh so simple! The only thing I didn't try! Works great. Thanks once again.

Now all I have to do is work out why neither of the sites manages to display the script in IE 6.... !

Best wishes
Sol

Are you referring to the previous problem of your two column layout breaking in IE6, or that the script now no longer works in IE6? Last I checked it does, just that your layout doesn't.

sol07
08-13-2007, 03:35 AM
Are you referring to the previous problem of your two column layout breaking in IE6, or that the script now no longer works in IE6? Last I checked it does, just that your layout doesn't.

Yes. Both sites use a 2 column css layout and neither manages to display the script in IE6 (I haven't even checked 5.5). Perhaps there is a conflict somewhere, because, as you say the script does work in IE6, just not in my webpages.

I'll have a good look through on the weekend to see what CSS might be causing the issue, code be that a hack is required?

ddadmin
08-13-2007, 06:54 AM
Actually, what I'm asking is whether you mean the problem in IE6 is with the right column being pushed down in IE6, hence hiding the script from initial view, or if you mean in IE6, the script actually doesn't work, period. FYI I've just tested this one (http://www.purpledogdesign.com/testpage.php) in IE6, and the script works, plus the layout holds up as well actually.

sol07
08-14-2007, 07:37 AM
Yes, I've had a look with browser shots and it does seem to load fine. Thank you again ddadmin.

Cheers
Sol