Featured Content Slider Youtube Video Won't Stop When Other Item Is Clicked

**cuckleburr** · 02-12-2017, 07:35 PM

1) Script Title: Featured Content Slider

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

3) Describe problem: I had gotten the pictures and video installed properly one the first table (girlfriend). I added the javascript to make the youtube video stop when any other button was clicked. Everything worked fine till I added a second table (rudy). Now only one table (girlfriend) will stop the youtube video. The other one (rudy) will not. Is my javascript conflicting or am I just missing something? I am going to have several of these tables on a page so if I can't figure out how to make the videos stop I will have to change something. Thanks in advance.

Here is the link to the page: http://schimkeranch.com/video1.html

Here is the code:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video</title>
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js"></script>
<style type="text/css">
<!--
.style1 {font-size: 11px;
text-align: left}

.floatedTable {
            float:left;
        }
.inlineTable {
            display: inline-block;
        }
-->
</style>
</head>

<body>

<table class="floatedTable" width="435px" border="1" cellspacing="0" cellpadding="5" id="ITS COMPLICATED">
    <tr>
      <th scope="col">Its Complicated ~ 2008 Bay AQHA mare--AKA "Girlfriend"</th>
    </tr>
    <tr>
      <td align="center"><p>Bred & raised by Alexia Mehrle, and owned by Julie Crews of Rising Star, TX, "Girlfriend" is one of the most fun horses we've had come in the barn! "Girlfriend" is a daughter of the #1 Ranked Barrel Racing Sire, Dash Ta Fame! This mare is out of barrel racing producer, Leetta Bug Flit. This is a big, strong, quiet mare with a lot of talent!</p>
     <div id="girlfriend" class="sliderwrapper">
     
     <div class="contentdiv">
  <img src="images/winners/girlfriend.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend1.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend2.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend3.jpg" />  </div>
  
<div class="contentdiv">
  <ul class="style1">
    <li>2nd place 2nd go 2012 Red White & Run Futurity</li>
      <li>3rd place 1D 1st go, 2012 JJ Classic Futurity</li>
      <li>2nd place 1st go, 2012 Cornhusker Breeders & Open Futurities</li>
      <li>3rd place 1st go, 2012 Roper Apparel Futurity</li>
      <li>Fizz Bomb Finalist, money earner first go</li>
      <li>Roper Rally Futurity Average Champion</li>
      <li>Placed both goes and 3rd in the 1D Average, 2012 Grid Iron Futurity</li>
      <li>Won both rounds of the SDBRA Open 4D Finals. Fastest time of entire show both days</li>
      <li>1st place 1st go Hawki Futurity. Fast time of the entire futurity</li>
      <li>1D money earner both rounds of SD Heartland Futurity, 2nd in the 1D Average</li>
      <li>BFA World Championship Barrel Futurity Finalist, money winner in the Average</li>
      <li>Reserve Champion 2013 Minnesota Breeders Barrel Maturity</li>
      <li>4th place in the average at the 2013 JJ Classic Breeders Derby</li>
      <li>2013 Red White & Run Maturity Champion</li>
      <li>Placed in 2nd round of 2013 Cornhusker Breeders Futurity</li>
      </ul>
   </div> 
     
    <div class="contentdiv">
      <ul class="style1">
        <li>Placed in both rounds and 4th in the Average at the 2013 Roper Apparel Derby</li>
      <li>3rd in the 1st go of the 2013 Northern Lights Derby.  Short Go qualifier.  Scratched due to injury</li>
      <li>2014 Fast time of Derby/1st go Cornhusker Breeders & Open Derby</li>
      <li>Northern Lights Derby- 1st place & 2nd place long goes, Derby Finalist</li>
      <li>2015 Cornhusker Breeders Derby Reserve Champion</li>
      <li>2015 Cornhusker Open Derby 3rd place in the Average</li>
      <li>2015 Triangle Cross Derby Champion</li>
      <li>2016 NBHA Heartland National Super Show Day 2 1D Champion</li>
      <li>2016 Cornhusker Open Maturity Champion</li>
      <li>2016 Cornhusker Breeders Maturity Champion</li>
      <li>2016 Bonus Race, 1D 14th place, Open Race</li>
      </ul>
    <strong>Current LTE of over $50,000</strong>  </div>   
  
<div class="contentdiv">
  <iframe width="400" height="300" src="http://www.youtube.com/embed/SPy_YUsdhnE?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
  </div>  
       </div>
  
<div id="paginate-girlfriend" class="pagination">  </div>
  
<script>

/*** Youtube script to find all iframes inside slider #slider1 and instantiate a Youtube API player object for each iframe ***/
/*** This code should proceed the initialization code for Featured Content Slider below, not following it ***/

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtub..._api_reference)
	var contentdivs = document.querySelectorAll('div#girlfriend div.contentdiv') //get all ".contentdiv" elements inside #slider1
	for (var i=0; i<contentdivs.length; i++){
		var tubeiframe = contentdivs[i].querySelector('iframe')
		if ( tubeiframe && (/youtube.com/i).test(tubeiframe.getAttribute('src')) ){ //if iframe exists inside content div and it points to youtube
		  var player = new YT.Player(tubeiframe, { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
		    events: {
		      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
		    }
		  })
			contentdivs[i].youtubeplayer = player // attach Youtube API player object to the corresponding content DIV
		}
	}
}

function playpausevideo(player, action){
	if (player && player._donecheck === true){
		if (action == "play")
			player.playVideo()
		else if (action == "pause")
			player.pauseVideo()
	}
}

</script>
        
  <!--Youtube API reference. Should follow onYouTubeIframeAPIReady() above, not proceed: -->
  <script src="http://www.youtube.com/iframe_api"></script>
        
  <script type="text/javascript">

featuredcontentslider.init({
	id: "girlfriend",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: ["Photo", "Photo", "Photo", "Photo", "Stats 1", "Stats 2", "Video"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["", ""],  //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, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
	         if (previndex != curindex && contentdivs[previndex].youtubeplayer) // if this isn't the first slide loaded automatically when page loads and a youtube video exists inside the previous slide
			playpausevideo( contentdivs[previndex].youtubeplayer, "pause" ) // pause previous slide's youtube video
	}
})

</script>      </td>
    </tr>
</table> 
  
  <!--RUDY-->
  
 <table width="435px" border="1" cellspacing="0" cellpadding="5" id="THREE TYMES A LADY">
    <tr>
      <th scope="col">Three Tymes A Lady ~ 2011 Bay AQHA Mare ~ AKA "Rudy"</th>
    </tr>
    <tr>
      <td align="center">Three Tymes A Lady, better known as "Rudy" was purchased by us on the Heritage Place Sale as a 2 year old. She was started under saddle by Rodney Yost and used in his 2014 Horsemanship Demo at the Black Hills Stock Show Rodeo. She was trained for barrel racing by Amy Schimke and shown in 2016 by Hilary Van Gerpen & Brett Borkowski. She won and placed at several mounted shooting competitions and barrel futurities and continues to be shown in both events.
     <div id="rudy" class="sliderwrapper">
       
       <div class="contentdiv">
  <img src="images/winners/rudy1.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/rudy2.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/rudy3.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/rudy4.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/rudy5.jpg" />  </div>  

<div class="contentdiv">
  <img src="images/winners/rudy6.jpg" />  </div>
    
<div class="contentdiv">
  <img src="images/winners/rudy8.jpg" />  </div>   
  
<div class="contentdiv">
  <ul class="style1">
    <li>2016 Showdown On The Mighty Mo CMSA Overall Champion</li>
    <li>2016 B Tuff Futurity Reserve Champion</li>
    <li>2016 Tri State Futurity Reserve Champion</li>
    <li>2016 Dash & Dance Futurity, 5th Go 2</li>
    <li>2016 JJ Classic Open Futurity Champion</li>
    <li>2016 JJ Classic Future Fortunes Futurity Champion</li>
    <li>2016 Cornhusker Breeders Futurity 1st place 2nd go</li>
    <li>2016 Cornhusker Open Futurity 1st place 2nd go</li>
    <li>2016 Cornhusker Open 4D race, 1D 1st, 2nd go</li>
    <li>2016 Triangle Cross Futurity, 6th place in the average</li>
    <li>2016 DeKalb Classic Futurity, 3rd place 1st go</li>
    <li>2016 Fizz Bomb Futurity Finalist, 14th in the average</li>
    <li>2016 Roper Rally Futurity 7th, 2nd Go</li>
    <li>2016 Grid Iron Open Futurity, Reserve Champion</li>
    <li>2016 Hawki Futurity, 2nd place Go 1</li>
    <li>2016 Heartland Futurity Reserve Champion</li>
    <li>2016 SDBRA Finals, 1D 1st, Go 2</li>
    <li>2017 Roy Rogers Rangers CMSA Shoot Mens Champion</li>
    </ul>
<strong>LTE over $22,000 as of 2/8/2017</strong>
   </div>    
  
<div class="contentdiv">
  <iframe width="400" height="300" src="http://www.youtube.com/embed/SPy_YUsdhnE?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
  </div>
       </div>
<div id="paginate-rudy" class="pagination">  </div>
 

        
  <script type="text/javascript">

featuredcontentslider.init({
	id: "rudy",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: ["Photo", "Photo", "Photo", "Photo", "Photo", "Photo", "Photo", "Stats 1", "Video"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["", ""],  //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, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
	         if (previndex != curindex && contentdivs[previndex].youtubeplayer) // if this isn't the first slide loaded automatically when page loads and a youtube video exists inside the previous slide
			playpausevideo( contentdivs[previndex].youtubeplayer, "pause" ) // pause previous slide's youtube video
	}
})

</script>      </td>
    </tr>
  </table>

</body>
</html>

**jscheuer1** · 02-12-2017, 09:09 PM

Change:

Code:

	var contentdivs = document.querySelectorAll('div#girlfriend div.contentdiv') //get all ".contentdiv" elements inside #slider1

to:

Code:

	var contentdivs = document.querySelectorAll('div#girlfriend div.contentdiv, div#rudy div.contentdiv') //get all ".contentdiv" in the two sliders

This also works:

Code:

	var contentdivs = document.querySelectorAll('div.contentdiv') //get all ".contentdiv" elements that are also div elements

Also, for best results, though it might not matter, this should be moved to right before the closing </body> tag near the end of the page:

Code:

  <!--Youtube API reference. Should follow onYouTubeIframeAPIReady() above, not proceed: -->
  <script src="http://www.youtube.com/iframe_api"></script>

Otherwise some videos might be missed in rare cases where the the API loads before the DOM.

**jscheuer1** · 02-12-2017, 09:25 PM

I think I've edited my previous post since you first read it to include more information and to be more specific about other information. Refresh your browser and reread it please.

**cuckleburr** · 02-12-2017, 09:41 PM

Okay, I changed the script like you mentioned and it worked great. Now I will try to move the other code to the bottom and see what happens. Thanks you so much.

**jscheuer1** · 02-12-2017, 10:07 PM

I believe I may have revised my thinking on that since you read my post, only this:

Code:

  <!--Youtube API reference. Should follow onYouTubeIframeAPIReady() above, not proceed: -->
  <script src="http://www.youtube.com/iframe_api"></script>

would benefit from being moved to the end of the page - to right before the closing </body> tag. Otherwise, in rare cases, the API might sometimes initialize before all the content divs are parsed.

Oh, looks like you got the message already.

**cuckleburr** · 02-13-2017, 10:18 AM

One last question. If I move my contentdiv to their own external html file for each animal and call them with the contentsource:["ajax", "path_to_file"] will my javascript still read the contentdiv from those files or is that going to be another coding nightmare for me? If so, then I will just stick with what I have. Thanks again.

PS- I moved the API reference script to the bottom of the page and everything still worked fine.

**jscheuer1** · 02-13-2017, 03:29 PM

Well the two (API script loading and external AJAX content loading) are related. Since the loading of the API script is what triggers the search for qualifying elements (.contentdiv divisions in this case) on the page, you wouldn't want to load the API until all the qualifying elements are loaded onto the page. When the contentdiv elements are already on the page this is easy to ensure simply by placing the tag for the API after all of them. But if you pull them into the page using AJAX, there's no controlling when they will get there. It could be before or it could be after the API loads. And since you could be pulling in contentdivs for two or more sliders, each with one or more videos in them, and those can arrive in any order as well, we would have to make sure all of the contentdivs had arrived before running the code currently triggered by the loading of the API, but only if the API has already loaded.

It can be worked out, but would require some modifications to both the contentslider.js file and to the on page onYouTubeIframeAPIReady code.

I'll probably mess around with it later and let you know what would need to be done. Oh, and, as I say, just doing it without modifications would probably work sometimes, and sometimes not. So if you want to set it up that way, just keep a backup of your current working code around just in case.

**jscheuer1** · 02-13-2017, 05:11 PM

OK, I tried this out and it worked without modifications, but that's likely because I was pulling the AJAX content from my localhost server and the YT API from the web, so of course the content would almost always load before the API. So I went ahead and made the modifications to ensure that always happens. First you will need this slightly modified contentslider.js file (it adds an onAjaxLoad function):

contentslider.js

In the inits, you will have to set the sliders to use ajax and add this new onAjaxLoad function. I've done that for the two sliders you have (changes/additions highlighted):

Code:

featuredcontentslider.init({
	id: "girlfriend",  //id of main slider DIV
	contentsource: ["ajax", "girlfriend.txt"],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: ["Photo", "Photo", "Photo", "Photo", "Stats 1", "Stats 2", "Video"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["", ""],  //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, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
	         if (previndex != curindex && contentdivs[previndex].youtubeplayer) // if this isn't the first slide loaded automatically when page loads and a youtube video exists inside the previous slide
			playpausevideo( contentdivs[previndex].youtubeplayer, "pause" ) // pause previous slide's youtube video
	},
	onAjaxLoad: featuredcontentslider.loadhandler
})

and:

Code:

featuredcontentslider.init({
	id: "rudy",  //id of main slider DIV
	contentsource: ["ajax", "rudy.txt"],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: ["Photo", "Photo", "Photo", "Photo", "Photo", "Photo", "Photo", "Stats 1", "Video"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["", ""],  //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, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
	         if (previndex != curindex && contentdivs[previndex].youtubeplayer) // if this isn't the first slide loaded automatically when page loads and a youtube video exists inside the previous slide
			playpausevideo( contentdivs[previndex].youtubeplayer, "pause" ) // pause previous slide's youtube video
	},
	onAjaxLoad: featuredcontentslider.loadhandler
})

Now, I suppose you already know this means you remove the content divisions and only the content divisions from the page and put them in their respective files. For example, this is the girlfriend.txt file:

Code:

     <div class="contentdiv">
  <img src="images/winners/girlfriend.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend1.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend2.jpg" />  </div>
  
<div class="contentdiv">
  <img src="images/winners/girlfriend3.jpg" />  </div>
  
<div class="contentdiv">
  <ul class="style1">
    <li>2nd place 2nd go 2012 Red White & Run Futurity</li>
      <li>3rd place 1D 1st go, 2012 JJ Classic Futurity</li>
      <li>2nd place 1st go, 2012 Cornhusker Breeders & Open Futurities</li>
      <li>3rd place 1st go, 2012 Roper Apparel Futurity</li>
      <li>Fizz Bomb Finalist, money earner first go</li>
      <li>Roper Rally Futurity Average Champion</li>
      <li>Placed both goes and 3rd in the 1D Average, 2012 Grid Iron Futurity</li>
      <li>Won both rounds of the SDBRA Open 4D Finals. Fastest time of entire show both days</li>
      <li>1st place 1st go Hawki Futurity. Fast time of the entire futurity</li>
      <li>1D money earner both rounds of SD Heartland Futurity, 2nd in the 1D Average</li>
      <li>BFA World Championship Barrel Futurity Finalist, money winner in the Average</li>
      <li>Reserve Champion 2013 Minnesota Breeders Barrel Maturity</li>
      <li>4th place in the average at the 2013 JJ Classic Breeders Derby</li>
      <li>2013 Red White & Run Maturity Champion</li>
      <li>Placed in 2nd round of 2013 Cornhusker Breeders Futurity</li>
      </ul>
   </div> 
     
    <div class="contentdiv">
      <ul class="style1">
        <li>Placed in both rounds and 4th in the Average at the 2013 Roper Apparel Derby</li>
      <li>3rd in the 1st go of the 2013 Northern Lights Derby.  Short Go qualifier.  Scratched due to injury</li>
      <li>2014 Fast time of Derby/1st go Cornhusker Breeders & Open Derby</li>
      <li>Northern Lights Derby- 1st place & 2nd place long goes, Derby Finalist</li>
      <li>2015 Cornhusker Breeders Derby Reserve Champion</li>
      <li>2015 Cornhusker Open Derby 3rd place in the Average</li>
      <li>2015 Triangle Cross Derby Champion</li>
      <li>2016 NBHA Heartland National Super Show Day 2 1D Champion</li>
      <li>2016 Cornhusker Open Maturity Champion</li>
      <li>2016 Cornhusker Breeders Maturity Champion</li>
      <li>2016 Bonus Race, 1D 14th place, Open Race</li>
      </ul>
    <strong>Current LTE of over $50,000</strong>  </div>   
  
<div class="contentdiv">
  <iframe width="400" height="300" src="http://www.youtube.com/embed/SPy_YUsdhnE?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
  </div>

Now comes the slightly tricky part. Where you had:

Code:

<script>

/*** Youtube script to find all iframes inside slider #slider1 and instantiate a Youtube API player object for each iframe ***/
/*** This code should proceed the initialization code for Featured Content Slider below, not following it ***/

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
	var contentdivs = document.querySelectorAll('div.contentdiv') //get all ".contentdiv" elements inside all sliders
	for (var i=0; i<contentdivs.length; i++){
		var tubeiframe = contentdivs[i].querySelector('iframe')
		if ( tubeiframe && (/youtube.com/i).test(tubeiframe.getAttribute('src')) ){ //if iframe exists inside content div and it points to youtube
		  var player = new YT.Player(tubeiframe, { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
		    events: {
		      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
		    }
		  })
			contentdivs[i].youtubeplayer = player // attach Youtube API player object to the corresponding content DIV
		}
	}
}

function playpausevideo(player, action){
	if (player && player._donecheck === true){
		if (action == "play")
			player.playVideo()
		else if (action == "pause")
			player.pauseVideo()
	}
}

</script>

It should now look like so (copy and paste it replacing what you have):

Code:

<script>

/*** Youtube script to find all iframes inside the sliders and instantiate a Youtube API player object for each iframe ***/
/*** This code should proceed the initialization code for Featured Content Slider below, not following it ***/
featuredcontentslider.loadhandler = function(){
	var requiredloads = 3; // number of ajax loading content sliders + 1
	featuredcontentslider.loadhandler.count = featuredcontentslider.loadhandler.count || 0;
	if(++featuredcontentslider.loadhandler.count === requiredloads){
		var contentdivs = document.querySelectorAll('div.contentdiv') //get all ".contentdiv" elements inside sliders
		for (var i=0; i<contentdivs.length; i++){
			var tubeiframe = contentdivs[i].querySelector('iframe')
			if ( tubeiframe && (/youtube.com/i).test(tubeiframe.getAttribute('src')) ){ //if iframe exists inside content div and it points to youtube
			  var player = new YT.Player(tubeiframe, { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
			    events: {
			      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
			    }
			  })
				contentdivs[i].youtubeplayer = player // attach Youtube API player object to the corresponding content DIV
			}
		}
	}
};
function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
	featuredcontentslider.loadhandler();
}

function playpausevideo(player, action){
	if (player && player._donecheck === true){
		if (action == "play")
			player.playVideo()
		else if (action == "pause")
			player.pauseVideo()
	}
}

</script>

I can't really highlight all the changes, so have highlighted the one part that's important. Notice the red 3. That's the number of loads, both AJAX and API, required before the iframe video initialization should fire. Three in this case. One for each slider and one for the API. That's pretty much it. Any questions or problems, just let me know.

**cuckleburr** · 02-13-2017, 05:17 PM

Wow, you are the best! I wouldn't worry about it except I will have probably 20 or more horses on this page. I was worried about the page being really loaded with code. But if it gets too aggravating, then don't put too much time into it. I had tried it earlier but couldn't make it work. Probably something that I'm missing. I know just enough coding to get myself in trouble and deep into confusion. Thanks again.

**jscheuer1** · 02-13-2017, 05:55 PM

I think we may have cross posted again, I've worked it out here:

http://www.dynamicdrive.com/forums/s...782#post320782

If you have any problems, tell me what they are and link me to your demo.