homepage Welcome to WebmasterWorld Guest from 54.147.196.159
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Making a toggle work on multiple instances
dhutton



 
Msg#: 4617889 posted 9:02 pm on Oct 19, 2013 (gmt 0)

I have a script that toggles the size of an embeded video. You can see it in action on this page: [fairwhistleblower.ca ]

I want to generalize the script so that it will work with multiple videos on the same page. The page shown uses a crude workaround -- multiple instances of the function. Each embedded video has a unique ID (track, track2, track3...) and calls a unique function (adjust, adjust2, adjust3...)

I'd like a cleaner solution and one that will work for any number of videos. I'm clearly not a Javascript expert!

Here is the basic function:
function adjust(inp)
{
var vid=document.getElementById('track'); // ID of your embed tag
if(inp.value.toLowerCase()=='enlarge')
{
vid.style.width='525px'; // Adjust the width to Npx.
vid.style.height='423px'; // Adjust the height to Npx.
inp.value='Reduce'; // Change the textbox's value to 'Decrease'.
}
else
{
vid.style.width='222px'; // Adjust the width to Npx.
vid.style.height='179px'; // Adjust the height to Npx.
inp.value='Enlarge'; // Change the textbox's value to 'Enlarge'.
}
}

 

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4617889 posted 11:25 pm on Oct 27, 2013 (gmt 0)

change

function adjust(inp)
{
var vid=document.getElementById('track'); // ID of your embed tag

to

function adjust(inp,
videoId)
{
var vid=document.getElementById(
videoId); // ID of your embed tag

on calls to adjust, add id of particular track

adjust(...
,'track')
dhutton



 
Msg#: 4617889 posted 5:29 pm on Oct 28, 2013 (gmt 0)

This solution worked perfectly! Thank you.
P.S. you can see it implemented on the original page (above).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved