Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JQuery function execution structure issue

Posted on 2010-11-23
2
Medium Priority
?
753 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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:
Justin Mathews earned 2000 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

610 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