SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to pull a caption from an array and place in a div?

    Hey all,

    I'm working on a site that plays a video when users select them from a list. The site loads with a video up, and there are two divs that hold links to more videos.

    I'm using swfobject and the below code for video selection and playing:

    Code:
    function createplayer(theFile, go){
    	var s = new SWFObject("fla/mediaplayer.swf","playerID","500","300","7");
    	s.addParam("allowfullscreen","true");
    	s.addVariable("file",theFile);
    	s.addVariable("width","500");
    	s.addVariable("height","300");
    	s.addVariable("displayheight","300");
    	s.addVariable("overstretch","fit");
    	if (go) { s.addVariable("autostart","true"); }
    	s.write("clip");
    }//end createplayer
    The code on the anchor link for a video looks like this:

    Code:
    <a href="javascript:createplayer('flv/01.flv', true)" title="Movie 1"><img src="images/pic1.jpg" alt="Movie Image 1" /></a>
    Each link has a subsequent video, set as 02.flv, 03.flv, etc.

    On click, the video loads into the "clip" div. Below that div, I have a "description" div. Here's where my knowledge of JavaScript stops (I'm still in school).

    I have an array of descriptions I'd like to pull from:

    Code:
    var descArray = new Array(13);//change the number in Array(x) to match the number of the descriptions below (starting at zero).
    descArray[0] = "This is a null description. It is unused.";
    descArray[1] = "Movie One Description.";
    descArray[2] = "Movie Two Description.";
    descArray[3] = "Movie Three Description.";
    descArray[4] = "Movie Four Description.";
    descArray[5] = "Movie Five Description.";
    descArray[6] = "Movie Six Description.";
    descArray[7] = "Movie Seven Description.";
    descArray[8] = "Movie Eight Description.";
    descArray[9] = "Movie Nine Description.";
    descArray[10] = "Movie Ten Description.";
    descArray[11] = "Movie Eleven Description.";
    descArray[12] = "Movie Twelve Description.";
    My question is.. how do I write a script that will load the particular description of a video into the "description" div when the user clicks to load the video?

    Is it possible to do this on the anchor link instead of writing a function? The reason I'd like to do it this way is that the client requires that edits to the site be made through the design view in Dreamweaver.. I'm trying to keep it as simple as possible for whomever takes over to add descriptions and movies without having to mess with much code (other than copying and pasting).

    I'd really appreciate any help on the matter. Thanks in advance!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Because there is no obvious way currently to obtain the information from the HTML code, we'll place an identifier on the link so that we can bring the path into javascript. I'll also place a div to hold the description.

    I strongly disagree with the javascript pseudo-protocol, but I suspect that you have it there for editing in design view.

    Code html4strict:
    <a id="movie" href="javascript:createplayer('flv/01.flv', true);" title="Movie 1"><img src="images/pic1.jpg" alt="Movie Image 1" /></a>
    <div id="description"></div>

    Now with the following script placed at the end of the body, you won't need to worry about making any changes to the script.

    Code javascript:
    var movie = document.getElementById('movie');
    var path = movie.getAttribute('href');
    var value = Number(path.match(/\/(\d*)/)[1]);
    var text = document.createTextNode(descArray[value]);
    document.getElementById('description').appendChild(text);

    The secret sauce is the regex /\/(\d*)/ which gets the digits after the path
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, for your reply.

    I can sort of see what's going on, and when trying it out, the correct description is pulled for movie 1, but the description doesn't change for the other movies. Is there a change that needs to be made elsewhere in the code?

    For example, the next video link reads:

    Code:
    <a id="movie" href="javascript:createplayer('flv/02.flv', true);" title="Movie 2"><img src="images/pic1.jpg" alt="Movie Image 2" /></a>
    ..and the links iterate (for now) all the way up to position 14 in descArray. Also, as-is, this code works in Firefox, but not IE.

    As far as that bad protocol goes.. you're right. It's an ugly way to do it, and I did it only for simplicity's sake. This will be an internal company site, so it wont necessarily have to be pretty! >.>

    Thanks again for your continuing help!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Solutions for that differ depending on how the page is arranged.
    if there's a separate page for each link then that will differ from if the page is full of links that get clicked on.

    If there's a whole lot of links on the page, then you will want an onclick event to update the description each time.

    Code html4strict:
    <a ... onclick="updateDescription(this.href)" ...>

    Code javascript:
    function updateDescription(href) {
        var value = Number(href.match(/\/(\d*)/)[1]);
        var text = document.createTextNode(descArray[value]);
        document.getElementById('description').appendChild(text);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see. The site consists of a single page. Each link only changes the loaded video on the page - there is no separate page for each of them.

    This code is working now, though it doesn't replace the text in the "description" div when a new link/video, it simply adds onto what was there before. With enough clicks, you can fill the page with text.

    I imagine the cause of that is the ".appendChild(text);" command? If so, can I use ".replaceChild(text);"? I'll give it a try in a sec here. ..Okay. ".replaceChild(text)" doesn't work. I'll keep looking.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    ...
    var desc = document.getElementById('description');
    while (desc.firstChild) {
        desc.removeChild(desc.firstChild);
    }
    desc.appendChild(text);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that works perfectly! Thank you very much, Paul. I really appreciate it.

    One more question, so you'll really get tired of me.. This works very well in Firefox, but IE doesn't handle it at all - nothing shows up. It's got something to do with how IE processes DOM objects, correct? If there a workaround that avoids rewriting this code in an IE-friendly way?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    My tests have it working fine in IE, so the issue becomes one of what else is happening on the page that may be interfering with it.

    For the sake of interest, here is the test I've been running.

    Code html4strict:
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    <a href="javascript:createplayer('flv/01.flv', true);" onclick="updateDescription(this.href)" title="Movie 1"><img src="images/pic1.jpg" alt="Movie Image 1" /></a>
    <a href="javascript:createplayer('flv/02.flv', true);" onclick="updateDescription(this.href)" title="Movie 2"><img src="images/pic2.jpg" alt="Movie Image 2" /></a>
    <div id="description">
    </div>
    <script>
    function createplayer() {
       // ...
    }
    var descArray = [
    	"This is a null description. It is unused."
    	, "Movie One Description."
    	, "Movie Two Description."
    	, "Movie Three Description."
    	, "Movie Four Description."
    	, "Movie Five Description."
    	, "Movie Six Description."
    	, "Movie Seven Description."
    	, "Movie Eight Description."
    	, "Movie Nine Description."
    	, "Movie Ten Description."
    	, "Movie Eleven Description."
    	, "Movie Twelve Description."
    ];
    function updateDescription(href) {
        var value = Number(href.match(/\/(\d*)/)[1]);
        var text = document.createTextNode(descArray[value]);
    	var desc = document.getElementById('description');
    	while (desc.firstChild) {
    	    desc.removeChild(desc.firstChild);
    	}
    	desc.appendChild(text);
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm. Strange. Here's my code (the entire page):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    	<title>Page Title Here</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta name="description" content=" " />
    	<meta name="author" content="FLC" />
    	<link href="css/default.css" rel="stylesheet" type="text/css" />
    		
    	<script type="text/javascript" src="js/swfobject.js"></script>
    
    	<script type="text/javascript" src="js/sitemovies.js"></script>
    		
    	<style type="text/css">
    		<!--
    		.style1 {font-size: 1em}
    		-->
    	</style>
    </head>
    
    <body onLoad="createplayer('flv/01.flv', false)">
    
    <div id="container">
    	<div id="headerupper">
                <ul id="utility">
                	<li style="width:95px"><a href="#" title="Right Tab Link">MyKO</a></li>
                    <li style="width:112px;"><a href="#" title="Left Tab Link">@KO</a></li>
                </ul><!--/utility-->
    	</div><!--/headerupper-->
    
    	<div id="headerlower">
    	</div><!--/header-->
    	
    	<div class="splitter"></div><!--/splitter-->
    	
    <div id="wrapper">
    
    	<div id="leftwrap">
    	
    		<div id="moviewrapper">
    			<div id="clip">
    				<embed type="application/x-shockwave-flash" src="fla/mediaplayer.swf" style="" id="playerID" name="playerID" quality="high" allowfullscreen="false" flashvars="file=flv/01.flv&width=500&height=300&displayheight=300&overstretch=fit&screencolor=0x8BC43F" height="300" width="500">
    			</div><!--/clip-->
    			<div id="description">Many people contributed to the successful launch of Office 2007. But those first pilot users who helped us determine our training strategy, helped us decide what options were important, what resources were most valuable to our associates around the globe...they deserve special recognition. Thank you!</div>
    			<!--/description-->
    		</div><!--/moviewrapper-->
    	
    		<div id="blockbox">
    			<a href="#" title="Link 1" target="_blank"><img src="images/linkpic1.jpg" alt="linkpic1" /></a>
    			<a href="#" title="Link 2" target="_blank"><img src="images/linkpic2.jpg" alt="linkpic2" /></a>
    			<a href="#" title="Link 3" target="_blank"><img src="images/linkpic3.jpg" alt="linkpic3" /></a>
    			<a href="#" title="Link 4" target="_blank"><img src="images/linkpic4.jpg" alt="linkpic4" /></a>
    		</div><!--/navigation-->
    		
    		<div id="footer">
    		<p><img src="images/arrowicon.gif" alt="icon1" align="absmiddle"/><span class="style1">Support.</span> <a href="http://it.na.ko.com/ko_office/support.asp?support=navb" target="_blank" title="KO Support">http://it.na.ko.com/ko_office/support.asp?support=navb</a></p>
    		<br />
    		<p><img src="images/arrowicon.gif" alt="icon2" align="absmiddle"/><span class="style1">KO Office Europe.</span> <a href="http://it.na.ko.com/ko_office/regions/europe/europe_main.asp" target="_blank" title="KO Office Europe">http://it.na.ko.com/ko_office/regions/europe/europe_main.asp</a></p>
    		<br />
    		<br />
    		<br />
    		<p>&copy;<img src="images/cclogo.gif" alt="Internal Logo" align="absmiddle" /> <span style="font-size:.7em; margin-left:-25px;">For internal use only.</span></p>
    		</div><!--/footer-->
    
    	</div><!--/leftwrap-->
    
    	<div id="rightwrap">
    
    		<div id="staticbox">
    		<a id="movie" href="javascript:createplayer('flv/01.flv', true)" onclick="updateDescription(this.href)" title="Movie 1"><img src="images/pic1.jpg" alt="Movie Image 1" /></a>		
    		<p>Lorem ipsum dolor sit amet, nam pellentes 1.</p>
    		<br />
    		<a id="movie" href="javascript:createplayer('flv/02.flv', true)" onclick="updateDescription(this.href)" title="Movie 2"><img src="images/pic2.jpg" alt="Movie Image 2" /></a>
    		<p>Lorem ipsum dolor sit amet, Nam pellentes 2.</p>
    		</div><!--/staticbox-->
    		
    		<h2>More Features Headline</h2>
    					
    		<div id="featurescroll">
    			<a id="movie" href="javascript:createplayer('flv/03.flv', true)" onclick="updateDescription(this.href)" title="Link 1"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 3.</a>
    			<a id="movie" href="javascript:createplayer('flv/01.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 4.</a>
    			<a id="movie" href="javascript:createplayer('flv/02.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 5.</a>
    			<a id="movie" href="javascript:createplayer('flv/03.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 6.</a>
    			<a id="movie" href="javascript:createplayer('flv/01.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 7.</a>
    			<a id="movie" href="javascript:createplayer('flv/02.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 8.</a>
    			<a id="movie" href="javascript:createplayer('flv/03.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 9.</a>
    			<a id="movie" href="javascript:createplayer('flv/01.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 10.</a>
    			<a id="movie" href="javascript:createplayer('flv/02.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 11.</a>
    			<a id="movie" href="javascript:createplayer('flv/03.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 12.</a>
    			<a id="movie" href="javascript:createplayer('flv/01.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 13.</a>
    			<a id="movie" href="javascript:createplayer('flv/02.flv', true)" onclick="updateDescription(this.href)" title="Link 2"><img src="images/arrowicon.jpg" alt="arrow icon" />Nam pellentes 14.</a>
    		</div><!--featurescroll-->
    		
    		<div id="featurestatic">
    		<br />
    		<h2>More Features Headline</h2>
    
    			<a href="#" title="Link 1" target="_blank"><img src="images/arrowicon2.jpg" alt="arrow icon" />Nam pellentesque.</a>
    			<a href="#" title="Link 2" target="_blank"><img src="images/arrowicon2.jpg" alt="arrow icon" />Nam pellentesque.</a>
    			<a href="#" title="Link 3" target="_blank"><img src="images/arrowicon2.jpg" alt="arrow icon" />Nam pellentesque.</a>
    			<a href="#" title="Link 4" target="_blank"><img src="images/arrowicon2.jpg" alt="arrow icon" />Nam pellentesque.</a>
    
    		</div><!--/featurestatic-->
    		
    	</div><!--/rightwrap-->
    	
    	<div class="clear"></div><!--/clear-->
    
    </div><!--/wrapper-->
    
    </div><!--/container-->
    
    </body>
    </html>
    And this is the JavaScript file:

    Code:
    // JavaScript Document
    
    function createplayer(theFile, go){
    	var s = new SWFObject("fla/mediaplayer.swf","playerID","500","300","7");
    	s.addParam("allowfullscreen","true");
    	s.addVariable("file",theFile);
    	s.addVariable("width","500");
    	s.addVariable("height","300");
    	s.addVariable("displayheight","300");
    	s.addVariable("overstretch","fit");
    	if (go) { s.addVariable("autostart","true"); }
    	s.write("clip");
    	//document.getElementById("description").innerText = descArray[descNum];
    }//end createplayer
    
    var descArray = new Array(14);//change the number in Array(x) to match the number of the descriptions below (starting at zero).
    descArray[0] = "This is a null description. It is unused.";
    descArray[1] = "Many people contributed to the successful launch of Office 2007. But those first pilot users who helped us determine our training strategy, helped us decide what options were important, what resources were most valuable to our associates around the globe...they deserve special recognition. Thank you!";
    descArray[2] = "Movie Two Description.";
    descArray[3] = "Movie Three Description.";
    descArray[4] = "Movie Four Description.";
    descArray[5] = "Movie Five Description.";
    descArray[6] = "Movie Six Description.";
    descArray[7] = "Movie Seven Description.";
    descArray[8] = "Movie Eight Description.";
    descArray[9] = "Movie Nine Description.";
    descArray[10] = "Movie Ten Description.";
    descArray[11] = "Movie Eleven Description.";
    descArray[12] = "Movie Twelve Description.";
    descArray[13] = "Movie Thirteen Description.";
    
    var movie = document.getElementById('movie');
    var path = movie.getAttribute('href');
    var value = Number(path.match(/\/(\d*)/)[1]);
    var text = document.createTextNode(descArray[value]);
    document.getElementById('description').appendChild(text);
    	
    function updateDescription(href) {
        var value = Number(href.match(/\/(\d*)/)[1]);
        var text = document.createTextNode(descArray[value]);
    	var desc = document.getElementById('description');
    		while (desc.firstChild) {
    			desc.removeChild(desc.firstChild);
    		}
    		desc.appendChild(text);
    }
    Nothing jumps out at me. IE is giving me a script error that reads:

    Line:46
    Char: 3
    Error: Unexpected call to method or property access.
    Code: 0
    URL: ...etc

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The original code was getting an identifier called "movie", but because of the change that happened due to the page structure, that original code isn't needed anymore. You can remove that original code.

    Change this

    Code javascript:
    var movie = document.getElementById('movie');
    var path = movie.getAttribute('href');
    var value = Number(path.match(/\/(\d*)/)[1]);
    var text = document.createTextNode(descArray[value]);
    document.getElementById('description').appendChild(text);
     
    function updateDescription(href) {
        var value = Number(href.match(/\/(\d*)/)[1]);
        var text = document.createTextNode(descArray[value]);
        var desc = document.getElementById('description');
    	while (desc.firstChild) {
    		desc.removeChild(desc.firstChild);
    	}
    	desc.appendChild(text);
    }

    to this

    Code javascript:
    function updateDescription(href) {
        var value = Number(href.match(/\/(\d*)/)[1]);
        var text = document.createTextNode(descArray[value]);
        var desc = document.getElementById('description');
    	while (desc.firstChild) {
    		desc.removeChild(desc.firstChild);
    	}
    	desc.appendChild(text);
    }
    Last edited by paul_wilkins; Mar 27, 2008 at 18:12.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made the changes, but IE is still giving me the error. It's having an issue with the closing bracket of the updateDescription function.

    Everything's in there the way you've posted, and it definitely works in Firefox.. Gotta love IE and it's ambiguous error logging:

    Line:39
    Char: 5
    Error: Unexpected call to method or property access.
    Code: 0
    URL: ...etc

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Okay, on to the error. The problem is the meta element called "description"
    IE is picking up that one instead of the on-page element with the "description" identifier.

    Rename that one on the page to "movieDesc" or something similar, and use that identifier from the script instead. Then you'll be fine.
    Last edited by paul_wilkins; Mar 28, 2008 at 04:19.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hah. I had actually solved the problem, albeit completely inadvertently. I changed the "description" div to a more concise name. I didn't notice that it worked until I read your last post.

    Again, thank you very much for the help and your patience with a JavaScript newbie. Not many people do that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •