Solved

JQuery function execution structure issue

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Triple line in an alert message 4 24
Jquery if else not working ... WHY? 5 26
setInterval() calls function twice in one interval 2 36
JS to redirect to prev page 8 24
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

733 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