Solved

JQuery function execution structure issue

Posted on 2010-11-23
2
697 Views
Last Modified: 2012-05-10
Hello,

Hello,

I would like to run the jquery code in the $(document).ready(function() prior to the included js code in the jquery.youtubeplaylist.js file.  I would basically like to dynamically construct the LI and A elements and append them to the UL element prior to jquery.youtubeplaylist.js execution since it operates on it.  Is this possible?  The $(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo"); throws a JS error saying its undefined or null.  I've tried moving all the script inside the document.ready function but got the same result.

HTML page:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	var videoUL = $('#videoList');
	$.get("getVideos.php", function(theXML){
		$('video',theXML).each(function(i){  
			var videoId = $(this).find("id").text();
			var videoURL = $(this).find("url").text();
			var videoCaption = $(this).find("caption").text();			
			var liVideo=$(document.createElement("li"));			
			var videoLinkText = $(document.createTextNode(videoCaption));	
			var videoLink = $(document.createElement("a"))
				.attr("href", videoURL)											 
				.append(videoLinkText);	
			liVideo.append(videoLink);
			videoUL.append(liVideo);
		});
	});
	alert(videoUL.html());
});
</script>
<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>
<script type="text/ecmascript">
		$(function() {
			$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2', allowFullScreen:true});
		});
</script>

<style type="text/css">
.demo2 {
float:left;
margin:0;
padding:0;
width:350px;
height:440px;
overflow-x:hidden;
overflow-y:scroll;
}
#ytvideo2 {
    float: left;
	margin-right:10px;
	margin-left:25px;
}
.yt_holder {
    background: #f3f3f3;
    padding: 10px;
    float: left;
    border: 1px solid #e3e3e3;
	margin-bottom:15px;
}
ul {
    float: left;
    margin: 0;
    width: 345px;
}
ul li {
    list-style-type: none;
    display:block;
    background: #f1f1f1;
    float: left;
    width: 345px;
    margin-bottom: 5px;
}
ul li img {
    width: 120px;
    float: left;
    margin-right: 5px;
    border: 1px solid #999;
}
ul li a {
   font-family: georgia;
    text-decoration: none;
    display: block;
    color: #000;
    width: 345px;
	height: 90px;
    padding:2px;
}
.currentvideo {
	background: #ffffec;
}	
</style>
</head>
<body>
	<div id="page">           
    <div class="yt_holder">
        <ul id="videoList" class="demo2">
        </ul>
		<div id="ytvideo2"></div>
    </div>   
    </div>
</body>
</html>

Open in new window


jquery.youtubeplaylist.js:
//-------------------------------------------------
//		youtube playlist jquery plugin
//		Created by dan@geckonm.com
//		www.geckonewmedia.com
//
//		v1.1 - updated to allow fullscreen 
//			 - thanks Ashraf for the request
//-------------------------------------------------
jQuery.fn.ytplaylist = function(options) {
  // default settings
  var options = jQuery.extend( {
    holderId: 'ytvideo',
	playerHeight: '440',
	playerWidth: '658',
	addThumbs: false,
	thumbSize: 'small',
	showInline: false,
	autoPlay: true,
	showRelated: true,
	allowFullScreen: false
  },options);
  return this.each(function() {
   		var selector = $(this);
		var autoPlay = "";
		var showRelated = "&rel=0";
		var fullScreen = "";
		if(options.autoPlay) autoPlay = "&autoplay=1"; 
		if(options.showRelated) showRelated = "&rel=1"; 
		if(options.allowFullScreen) fullScreen = "&fs=1"; 
		//throw a youtube player in
		function play(id)
		{
		   var html  = '';
		   html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">';
		   html += '<param name="movie" value="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>';
		   html += '<param name="wmode" value="transparent"> </param>';
		   if(options.allowFullScreen) { 
		   		html += '<param name="allowfullscreen" value="true"> </param>'; 
		   }
		   html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"';
		   if(options.allowFullScreen) { 
		   		html += ' allowfullscreen="true" '; 
		   	}
		   html += 'type="application/x-shockwave-flash" wmode="transparent"  height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>';
		   html += '</object>';
		   return html;
		};
		//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html)
		function youtubeid(url) {
			var ytid = url.match("[\\?&]v=([^&#]*)");
			ytid = ytid[1];
			return ytid;
		};
		//load inital video
		var firstVid = selector.children("li:first-child").addClass("currentvideo").children("a").attr("href");
		$("#"+options.holderId+"").html(play(youtubeid(firstVid)));
		//load video on request
		selector.children("li").children("a").click(function() {
			if(options.showInline) {
				$("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo").html(play(youtubeid($(this).attr("href"))));
			}
			else {
				$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href"))));
				$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo");
				$(this).parent("li").addClass("currentvideo");
			}
			return false;
		});
		//do we want thumns with that?
		if(options.addThumbs) {
			selector.children().each(function(i){
				var replacedText = $(this).text();
				if(options.thumbSize == 'small') {
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/2.jpg";
				}
				else {
					var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/0.jpg";
				}
				$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);
			});	
		}
  });
};

Open in new window



0
Comment
Question by:cgray1223
2 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34204661

Perhaps loading the script dynamically will give you better control of any timing issues:

var js = document.createElement( "script" );
js.setAttribute( "type", "text/javascript" );
js.setAttribute( "src", "jquery.youtubeplaylist.js" );

Open in new window

0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34206783
Try moving the call to ytplaylist() into the success function of $.get() as below:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.youtubeplaylist.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

	var videoUL = $('#videoList');

	$.get("getVideos.php", function(theXML){

		$('video',theXML).each(function(i){  

			var videoId = $(this).find("id").text();

			var videoURL = $(this).find("url").text();

			var videoCaption = $(this).find("caption").text();			

			var liVideo=$(document.createElement("li"));			

			var videoLinkText = $(document.createTextNode(videoCaption));	

			var videoLink = $(document.createElement("a"))

				.attr("href", videoURL)											 

				.append(videoLinkText);	

			liVideo.append(videoLink);

			videoUL.append(liVideo);

			alert(videoUL.html());

			$("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2', allowFullScreen:true});

		});

	});

});

</script>



<style type="text/css">

.demo2 {

float:left;

margin:0;

padding:0;

width:350px;

height:440px;

overflow-x:hidden;

overflow-y:scroll;

}

#ytvideo2 {

    float: left;

	margin-right:10px;

	margin-left:25px;

}

.yt_holder {

    background: #f3f3f3;

    padding: 10px;

    float: left;

    border: 1px solid #e3e3e3;

	margin-bottom:15px;

}

ul {

    float: left;

    margin: 0;

    width: 345px;

}

ul li {

    list-style-type: none;

    display:block;

    background: #f1f1f1;

    float: left;

    width: 345px;

    margin-bottom: 5px;

}

ul li img {

    width: 120px;

    float: left;

    margin-right: 5px;

    border: 1px solid #999;

}

ul li a {

   font-family: georgia;

    text-decoration: none;

    display: block;

    color: #000;

    width: 345px;

	height: 90px;

    padding:2px;

}

.currentvideo {

	background: #ffffec;

}	

</style>

</head>

<body>

	<div id="page">           

    <div class="yt_holder">

        <ul id="videoList" class="demo2">

        </ul>

		<div id="ytvideo2"></div>

    </div>   

    </div>

</body>

</html>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now