Results 1 to 4 of 4

Thread: Featured Content Slider: Embedding inline content using js

  1. #1
    Join Date
    Aug 2013
    Location
    PGH PA US
    Posts
    14
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider: Embedding inline content using js

    1) Script Title: Featured Content Slider

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

    3) Describe problem: As the title indicates, I am using the contentsource: ["inline", ""] method. I have written a script that is intended to make an API call and parses each piece of the returned JSON data into its own “contentdiv” item and appends it to the “.sliderwrapper” in my html page:

    Code:
    (function() {
    var url = "http://xxxxxx";
    
    var apiKey = "XXXXXXXXX";
    
    $.getJSON(url + apiKey).done(function(data) {
    
    $.each( data.sports[0].leagues[0].events, function() {
    
    var score = $("<div/>", {class: "contentdiv"}).html('<table>' + '<tr>' + '<td>' + this.competitions[0].competitors[1].team.name + '</td>' + '</tr>' + '<tr>' + '<td>' + this.competitions[0].competitors[0].team.name + '</td>' + '</tr>' + '</table>');
     
    $(score).appendTo($(".sliderwrapper"))
    });
    
    });
    Problem is, I can’t get that data to display in the featured content slider at all. If I look at the source code after page load, everything appears to be as it would need to be in order for things to work. That is, my script appears to be working as intended. Just to make sure I wasn’t missing something simple, I even ran a test using some truly in-line content (i.e., <div class=”contentdiv”><p>This is a test…</p></div>), which worked just fine.

    My question: is this a problem of timing between my own script and the contentslider.js file, considering that both are referenced in the head of my html? Or am I not seeing something in my own script that is causing things to not work? Any insight would be greatly appreciated.

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

    Default

    The FCS runs as soon as you call featuredcontentslider.init(), any additional DIVs you add to the slider afterwards won't be properly recognized by the script. Looking at your code it seems to be asynchronous- in that case, you might try initializing the slider only after having finished adding the DIVs to it dynamically, such as:

    Code:
    (function() {
    var url = "http://xxxxxx";
    
    var apiKey = "XXXXXXXXX";
    
    $.getJSON(url + apiKey).done(function(data) {
    
    $.each( data.sports[0].leagues[0].events, function() {
    
    var score = $("<div/>", {class: "contentdiv"}).html('<table>' + '<tr>' + '<td>' + this.competitions[0].competitors[1].team.name + '</td>' + '</tr>' + '<tr>' + '<td>' + this.competitions[0].competitors[0].team.name + '</td>' + '</tr>' + '</table>');
     
    $(score).appendTo($(".sliderwrapper"))
    
    });
    
    // initialize slider with your own settings:
    
    
    featuredcontentslider.init({
    	id: "slider2",  //id of main slider DIV
    	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    	toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    	enablefade: [true, 0.2],  //[true/false, fadedegree]
    	autorotate: [false, 3000],  //[true/false, pausetime]
    	onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
    		//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
    		//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
    	}
    })
    
    });
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    yuengling25 (08-25-2016)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not really familiar with your method (shown in your post). But I've seen similar, and it may very well be timing. You don't want the slider initializing until after the content is there. And it cannot initialize until after document ready and content import. And I see you're using jQuery, so I would combine your script and the init under a doc ready call and hope for the best:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	var url = "http://xxxxxx";
    	var apiKey = "XXXXXXXXX";
    	$.getJSON(url + apiKey).done(function(data) {
    		$.each( data.sports[0].leagues[0].events, function() {
    			var score = $('<div class="contentdiv"></div>');
    			score.html('<table><tr><td>' + this.competitions[0].competitors[1].team.name +
    				'</td></tr><tr><td>' + this.competitions[0].competitors[0].team.name + 
    				'</td></tr></table>').appendTo(".sliderwrapper");
    		});
    		featuredcontentslider.init({
    			id: "slider1",  //id of main slider DIV
    			contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    			toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    			nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    			revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    			enablefade: [true, 0.2],  //[true/false, fadedegree]
    			autorotate: [true, 3000],  //[true/false, pausetime]
    			onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
    				//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
    				//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
    			}
    		});
    	});
    });
    </script>
    Just make sure everything is right in the init for your purposes, and that the url/key combo is correct to connect with the desired service.

    NOTEs: This replaces both your import code and the slider init code and should be placed after the slider markup (where the slider init would have been). I cleaned up your code a bit and tested all the code for syntax errors. But there could be other issues once the getJSON call is executed.

    The page may need to be refreshed and/or the browser's cache cleared to see changes.

    If you want more help - please post a link the page on your site that has the problematic code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    yuengling25 (08-25-2016)

  6. #4
    Join Date
    Aug 2013
    Location
    PGH PA US
    Posts
    14
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Thank you both for the help. Since I plan on adding multiple getJSON calls to this, I stuck to using my off-page js file as I didn't want to complicate the html too much with a lot of script code as well. It really was just a simple matter of removing the slider initialization code from my html and into the js file following the getJSON call in order to make sure its allowed to finish. Everything is working fine now .

Similar Threads

  1. Combining Featured Content Slider with Featured Content Glider problems.
    By ortizhj in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-18-2011, 02:12 PM
  2. Featured Content Slider v2.4 dynamically changing content source
    By ikefor in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-02-2011, 05:43 PM
  3. Replies: 4
    Last Post: 12-19-2010, 09:46 AM
  4. Replies: 2
    Last Post: 07-28-2010, 12:15 PM
  5. Replies: 0
    Last Post: 07-22-2010, 08:15 PM

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
  •