Solved

JQuery function execution structure issue

Posted on 2010-11-23
2
709 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

861 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