Welcome to WebmasterWorld Guest from 54.205.251.179

Forum Moderators: open

Message Too Old, No Replies

Making a toggle work on multiple instances

   
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'.
}
}
11:25 pm on Oct 27, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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')
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).