Page 1 of 4 123 ... LastLast
Results 1 to 10 of 33

Thread: Featured Content Slider - external data

  1. #1
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider - external data

    1) Script Title: Featured Content Slider

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

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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    ContentSlider("slider1", "", "", "", "master.htm")
    Inside "master.htm", you'd have something like:

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

    Code:
    <div id="slider1" class="contentslide">
    
    </div>
    In other words, remove the DIVs inside the above DIV that now reside in your external file instead.

  3. #3
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?)
    Code:
    <!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


    Code:
    <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
    Last edited by sol07; 07-25-2007 at 11:46 AM.

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

  5. #5
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    [QUOTE=ddadmin;102063]
    Code:
    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

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The modification I posted does work for me. I guess a URL to your problem page would be helpful at this point.

  7. #7
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

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

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

  9. #9
    Join Date
    Jun 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    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?

  10. #10
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Actually, you did. The pagination DIV should still exist, just outside your Featured Content DIV:

    Code:
    <div id="slider1" class="contentslide">
    </div>
    
    <div class="pagination" id="paginate-slider1"></div>
    That should fix the other problem when fixed.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •