PDA

View Full Version : moving options from one select list to another.



riptide
09-19-2010, 06:39 PM
I wanted to know if I could move options from one select list to another by using document.getElementById instead of using sel and other methods.

I just wish to directly call one particular select list. because I worried that all these select list scripts don't work when there are more than two select list on a page.
I have a nice script I want to modify but I don't understand. selfrom and selto
I never see anything that points to my select list's ID, class or name.

however the code works. Can some one help me understand what is happening?


function moveOptions(theSelFrom, theSelTo)
{
var selLength = theSelFrom.options.length;
for(var i=0; i<selLength; i++)
{
if(theSelFrom.options[i].selected)
{
if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
}

jscheuer1
09-19-2010, 10:04 PM
You are not showing us the addOption() function. Without that, I can't say for sure how this works. What you do have there shows that moveOptions() takes two arguments (theSelFrom, theSelTo). These are the select element that you are moving an option from and the select element you are moving an option to. These may be supplied in at least several ways. It could as document.getElementById(), as part of a form's elements collection, or via the this keyword of an inline javascript function of the select element itself. There are variations on each of these. There are other possible methods.

To answer your question at least in part though, it should be possible to use DOM methods (like - removeChild() and insertBefore() or appendChild()) and document.getElementById() to move options around.

Do you have an example using the method from your post? If so, post the full code (including markup) or a link to it. Then explain specifically what you want it to do that it doesn't.

riptide
09-20-2010, 12:14 AM
most of the select list scripts don't use the document.getElementById()
the script I have doesn't use it so I've become confused cause I can't modify it.

this is one example

function fnMoveItems(lstbxFrom,lstbxTo)
{
var varFromBox = document.all(lstbxFrom);
var varToBox = document.all(lstbxTo);
if ((varFromBox != null) && (varToBox != null))
{
if(varFromBox.length < 1)
{
alert('There are no items in the source ListBox');
return false;
}
if(varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
{
alert('Please select an Item to move');
return false;
}
while ( varFromBox.options.selectedIndex >= 0 )
{
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox
}
}
return false;
}

this is what I've been using. And I wonder why the particular select list only tigers all the functions since I don't see the select list calling any function in the body. I was wondering if I wanted to let two select list move options to the third select list named sel2 should I change how the script find the select list or am i missing something easy.


function deleteOption(theSel)
{
var theIndex = theSel.options.selectedIndex;
if (theIndex != -1){
theSel.options[theIndex] = null;
}
}



function moveOptions(theSelFrom, theSelTo)
{
var selLength = theSelFrom.options.length;
for(var i=0; i<selLength; i++)
{
if(theSelFrom.options[i].selected)
{
if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
}
}
}

if(NS4) history.go(0);
}

function addOption(sel, txt, val){
//check if the option already exists
var dupe=false;
for (var i=0; i<sel.options.length; i++){
if (sel.options[i].value==val && sel.options[i].text==txt){
dupe=true;
break;
}
}
if (!dupe){ //add the option at the end
sel.options[sel.options.length] = new Option(txt, val);
setTimeout(function(){sel.options[sel.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
}
return dupe;
}




in the body
<select name="sel1" size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM" class="channels" >

<option value="|" title="JAC" class="ice">JAC</option>

jscheuer1
09-20-2010, 12:52 AM
Still not enough code to go by. There's only one select, and only in the second example, and it only has one option. I need the full markup of both selects, including their parent form(s) if any.

If you want more help, please post code of or a link to a working example. I need both the script and the markup.

In the meantime, I'll see what I can work up using the DOM.

jscheuer1
09-20-2010, 01:12 AM
Here's a simple demo of concept:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function moveOption(s1, s2, opt){
s1 = document.getElementById(s1);
s2 = document.getElementById(s2);
opt = opt || s1.options[s1.options.selectedIndex];
if(opt.value){
s2.appendChild(s1.removeChild(opt));
}
}
</script>
</head>
<body>
<form>
<select id="sel1">
<option value="">Please Select</option>
<option value="bob">Bob</option>
<option value="carol">Carol</option>
<option value="ted">Ted</option>
<option value="alice">Alice</option>
</select>
<select id="sel2">
<option value="">Please Select</option>
</select>
<select id="sel3">
<option value="">Please Select</option>
</select><br>
<input type="button" value="Move selected of first select to second select" onclick="moveOption('sel1', 'sel2');">
<br>
<input type="button" value="Move selected of first select to third select" onclick="moveOption('sel1', 'sel3');">
<br>
<input type="button" value="Move selected of second select to first select" onclick="moveOption('sel2', 'sel1');">
<br>
<input type="button" value="Move selected of third select to second select" onclick="moveOption('sel3', 'sel2');">
</form>
</body>
</html>

riptide
09-20-2010, 06:06 PM
hum...I see how it's set up but what if select list one and two have options and select list three don't.




Here is my full code. the original code had the sel, selM, sending values to sel2. I wanted to see if I could send values from selM and sel3 to sel2 using document.getElementById because if I could do that then I could connect to a getElementByClassName function so that every select list of a certain class could send options to sel2.

I have an idea how to do it but I sill need some of the code from this script to send to the media player. I still have to send the time to the function.




<head>
<script language="JavaScript" type="text/javascript">

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);


function deleteOption(theSel)
{
var theIndex = theSel.options.selectedIndex;
if (theIndex != -1){
theSel.options[theIndex] = null;
}
}

function moveOptions(theSelFrom, theSelTo)
{
var selLength = theSelFrom.options.length;
for(var i=0; i<selLength; i++)
{
if(theSelFrom.options[i].selected)
{
if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
}
}
}

if(NS4) history.go(0);
}

function addOption(sel, txt, val){
//check if the option already exists
var dupe=false;
for (var i=0; i<sel.options.length; i++){
if (sel.options[i].value==val && sel.options[i].text==txt){
dupe=true;
break;
}
}
if (!dupe){ //add the option at the end
sel.options[sel.options.length] = new Option(txt, val);
setTimeout(function(){sel.options[sel.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
}
return dupe;
}



var ctr=0;
function playSongs(){
var arr, len;
var sel = document.forms[0].sel2;
var defaultLen = 310; //6 mins
if (ctr<sel.options.length){
arr = sel.options[ctr].value.split("|");
if (arr.length>0 && arr[0]){
len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds
document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true" ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
}
ctr++;
setTimeout("playSongs()", len);
}
}
</script>
</head>





this is the html



<body>

<div id="ChooseSeason" > <form id="misteriof" action="yourpage.asp" method="post">


<div id="slider">
<select name="sel1" size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM" class="channels" >

<option value="|" title="JAC" class="ice">JAC</option>
<option class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light" value="C:/Users/Talibah/TV on the PC/Jackie Chan Adventures/Season 3/S3E53 Jackie Chan Adventures - Re-Enter the J Team.avi|436">avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|" class="dark">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|" class="light">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436" class="dark">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|" class="light">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|" class="dark">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>








<!--experimental select don't use the exact same files. all is left to do is get the js to collect from any slect than copy the page. I'm thinking about showing the users playlist -->

<select name="sel3" size="13" multiple="multiple" id="nex2" class="channels" >

<option value="|" title="JAC2">JAC2</option>
<option class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light" value="C:/Users/Talibah/TV on the PC/X-Men.Evolution.Seasons.1-3.Complete.DVDRip[EJ]/Season 1/X-Men.Evolution.1x11.Grim.Reminder.DVDRip[EJ].avi" >avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>




</div>




<div id="ubuttons">


<select name="sel2" size="4" multiple="multiple" onchange="this.form.sel1.selectedIndex=-1;" id="userChoose">

<option value="">Em</option>

</select>


<input type = "button" id = "btnMoveLeft" value="try" onclick = "fnMoveItems('selM','sel2')"/>
<input type="button" value="add"
onclick="moveOptions(this.form.sel1, this.form.sel2);" />
<input type="button" value="Del"
onclick="deleteOption(this.form.sel2);" />
<input type="button" value="Play" onclick="playSongs()" />
</div>


</form> <!--blue trans background--> </div>










<div id="misterioProgram">

<object width="550" height="450" id="Player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<param name="URL" value="">
<param name="autoStart" VALUE="true">
<param name="uiMode" value="full">
<param name="currentPosition" value="1" >
<param name="ShowStatusBar" value="true" >
<embed type="application/x-mplayer2"
src=""
ShowControls="0"
width="550"
height="450">
</embed>
</object>
</div>
</body>

jscheuer1
09-21-2010, 12:26 PM
I'm getting this error:


Error: document.getElementById("music1") is null
Line: 58

That's in the playSongs() function. However, I see what it's trying to and would (in Firefox with the required plug in at least) do if the markup agreed with it. The playSongs() function is independent of the others. So you may substitute my code or a variation of it to move the options around, and still use playSongs() to play the music.

It looks like the playSongs() function can only run once before the global ctr variable gets out of useful range. If I'm right about that, it could be moved inside the function.

One thing that the existing code does that mine doesn't is to check for duplicates in the target select. That could be included. And I believe you are saying that you want to be able to pull the selected option of both of the first two selects into the third at once. Are you sure? If the user adds one from the first, and one from the second, then removes the one that came from the second, then goes to add a different one from the first, the one from the second that they had just removed would get added again. Unless after adding, the select(s) from which the option(s) came were reset to their first options, which presumable (as in my existing code) do not qualify to be moved.

Another thing, the code from your post doesn't appear to be moving anything. Rather it's copying options.

riptide
09-21-2010, 05:26 PM
yes it is copying. I really don't need to check for duplicates either. you got it right that is what I was trying to do. PlaySongs() is independent of the other functions since it only works with sel2 so I don't have to do anything to it.

Since the function is just copying from the other selects I only need two buttons. play and delete, Which will remove a selected option from sel2.

And there will be no problems telling the script which select list to take options from with getElementById or a getElementByClassName function if I should use that, right?

riptide
09-22-2010, 10:42 PM
I've got it working with just two select list in Firefox but not in IE. IE is still throwing an error.



<head>
<script language="JavaScript" type="text/javascript">
var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

/*function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var pattern = new RegExp('\\b'+searchClass+'\\b');
for (var i = 0; i < els.length; i++)
if ( pattern.test(els[i].className) )
classElements[classElements.length] = els[i];
return classElements;
}
*/


var s1 = document.getElementById("selM");
var s2 = document.getElementById("sel2");
function deleteOption(s1)
{
var theIndex = s1.options.selectedIndex;
if (theIndex != -1){
s1.options[theIndex] = null;
}
}

function moveOptions(s1, s2)
{
var selMLength = s1.options.length;
for(var i=0; i<selMLength; i++)
{
if(s1.options[i].selected)
{
if (!addOption(s2, s1.options[i].text, s1.options[i].value)){
s1.options[i].selected = false; //remove selection if not duplicate and added
}
}
}

if(NS4) history.go(0);
}

function addOption(s2, txt, val){
//check if the option already exists
var dupe=false;
for (var i=0; i<s2.options.length; i++){
if (s2.options[i].value==val && s2.options[i].text==txt){
dupe=true;
break;
}
}
if (!dupe){ //add the option at the end
s2.options[s2.options.length] = new Option(txt, val);
setTimeout(function(){s2.options[s2.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
}
return dupe;
}







var ctr=0;
function playSongs(){
var arr, len;
var sel = document.forms[0].sel2;
var defaultLen = 310; //6 mins
if (ctr<sel.options.length){
arr = sel.options[ctr].value.split("|");
if (arr.length>0 && arr[0]){
len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds
document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true" ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
}
ctr++;
setTimeout("playSongs()", len);
}
}
</script> </head.




<body>

<div id="ChooseSeason" > <form id="misteriof" action="yourpage.asp" method="post">


<div id="slider">
<select name="sel1" size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM" class="channels" >

<option value="|" title="JAC" class="ice">JAC</option>
<option class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light" value="C:/Users/Talibah/TV on the PC/Jackie Chan Adventures/Season 3/S3E53 Jackie Chan Adventures - Re-Enter the J Team.avi|436">avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|" class="dark">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|" class="light">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436" class="dark">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|" class="light">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|" class="dark">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>
<div id="ubuttons">


<select name="sel2" size="4" multiple="multiple" onchange="this.form.sel1.selectedIndex=-1;" id="userChoose">

<option value="">Em</option>

</select>



<input type="button" value="add"
onclick="moveOptions(this.form.sel1, this.form.sel2);" />
<input type="button" value="Del"
onclick="deleteOption(this.form.sel2);" />
<input type="button" value="Play" onclick="playSongs()" />
</div>


</form> <!--blue trans background--> </div>
</body>

jscheuer1
09-23-2010, 01:32 AM
Doesn't work here in Firefox, same error again:


Error: document.getElementById("music1") is null
Line: 74


function playSongs(){
var arr, len;
var sel = document.forms[0].sel2;
var defaultLen = 310; //6 mins
if (ctr<sel.options.length){
arr = sel.options[ctr].value.split("|");
if (arr.length>0 && arr[0]){
len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds
document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true" ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
}
ctr++;
setTimeout("playSongs()", len);
}
}


Moving things around works fine in both IE and Firefox though.

riptide
09-23-2010, 02:18 PM
Even with your code it still throws an error in IE. because in IE none of the songs get added to sel2. It still add options to sel2 in Firefox and opera.
Also I worry if the global vars s1 and s2 are not being used.

jscheuer1
09-23-2010, 04:43 PM
My code works fine in IE:

http://home.comcast.net/~jscheuer1/side/move_options.htm

But you aren't moving, you're copying. So, where I have (slightly simplified over the previous version, we don't have to removeChild, browsers do it automatically):


function moveOption(s1, s2, opt){
s1 = document.getElementById(s1);
s2 = document.getElementById(s2);
opt = opt || s1.options[s1.options.selectedIndex];
if(opt.value){
s2.appendChild(opt);
}
}

A companion function to copy options could be:


function copyOption(s1, s2, opt){
s1 = document.getElementById(s1);
s2 = document.getElementById(s2);
opt = opt || s1.options[s1.options.selectedIndex];
if(opt.value){
s2.appendChild(opt.cloneNode(true));
}
}

riptide
09-23-2010, 04:57 PM
yeah I should just use that. I have no idea why my script wasn't working in IE.
I'll ask more questions if I have any problems.

jscheuer1
09-23-2010, 06:47 PM
From what you've told me so far, this:

http://home.comcast.net/~jscheuer1/side/manipulate_options.htm

might be very close to what you're looking for.

Notes: I added error checking for selects that are out of range and to prevent duplicates. The clear function ignores the first option in the select, but doesn't have to. The functions used have also other capabilities.

riptide
09-23-2010, 08:17 PM
Yes, but are functions 1,2 and 3 purely optional. Can the script work with out them. I ask because I may want to add more select list or change it so select list with a particular className can send their options to sel2(sel3 in your code).

jscheuer1
09-24-2010, 12:05 AM
No. But that shouldn't stop you from using the code as you see fit.

If you look over the code, it should be fairly obvious what each function does. If you have specific questions, feel free.

In general:


manipOption() is the centerpiece. It does the main work of either copying or moving an option depending upon how it's invoked.



manipOption.noDupe() ensures that when copying or moving an option to another select, that the option's value is not already represented by another option already in the target select.



manipOption.inRange() determines whether or not the option to be moved exists insofar as is it a specific option element, and if not, if it is represented by an index of the from select's options, if that is a valid index for the options in that select.



manipOption.multiCopy() is a front end for manipOption() to get it to handle selects with the multiple attribute set visa vis allowing more than one option from a multiple select to be copied at a time, and at the same time to allow two from selects to be copied from at one time.



manipOption.clear() is pretty much standalone except that to conserve the global namespace it uses the main manipOption() object's namespace. What it does is optionally remove all options from a select, or only the selected one(s), depending upon how it's invoked. In it you will see:


for (var i = sel.options.length - 1; i > 0; --i){

Because of that, it will always skip removing the first option. If that 0 is changed to -1, then the first option will also be removed if it qualifies for removal.

riptide
09-26-2010, 07:48 PM
I'm getting the error manipOption is not defined.
Line: 1
what do you think is happening?

jscheuer1
09-26-2010, 10:36 PM
Sounds like either a syntax error or typo, or you failed to include it in your version. What's the link to your current version?

Please post a link to a page on your site that contains the problematic code so we can check it out.

riptide
09-27-2010, 01:00 PM
it's off line so it's better that I give you the source.

there are a lot of things commented out because I'm planning to do a some other things. functionally I'm wondering if it would be a good idea to add a stop function to the media player. I haven't decided what to do. but anyway here is the code. I probably made some dumb error in the HTML.

it was so large I have to attach it.

jscheuer1
09-27-2010, 03:54 PM
there are a lot of things commented out

I'll say. It's unwise to use HTML comment tags (<!-- or -->) inside a script tag. They can be used, but their logic and significance is different than when used in normal HTML. Their main reason inside a script tag though is to hide the script code from older browsers. This is no longer needed, and in the future may cause the script code to be skipped. So all comments within a script block should be javascript comments (// for 'from here to the end of the line' or /* */ for 'ignore what's between').

That said, simply removing:


-->

from line #151 seems to satisfy IE, while Firefox doesn't have a problem with it either way.

Once you do that, both browsers recognize the 'missing' function. But you still have a problem.

You originally asked to do this using document.getElementById(), but there are no elements with the id of sel1, sel2, or sel3. There are elements with those names. So just add here (and similar for the other two):


<div id="slider">
<select name="sel1" id="sel1" size="13" multiple="multiple" oncha . . .

Back in business!

riptide
09-27-2010, 11:49 PM
I thought I did something to the HTML. Yeah I do need to clean up the comments. I kinda when overboard. I thought I had changed the id but I was changing the names.

I fixed that but IE is giving me an error when I try and play it. It says ctr is not defined.

jscheuer1
09-29-2010, 07:56 PM
IE is giving me an error when I try and play it. It says ctr is not defined.

It's not. Try:


function playSongs(){
var arr, len;
var sel = document.forms[0].sel3;
var defaultLen = 310; //6 mins
if (playSongs.ctr<sel.options.length){
arr = sel.options[playSongs.ctr].value.split("|");
if (arr.length>0 && arr[0]){
len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds
document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true" ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
}
playSongs.ctr++;
setTimeout(playSongs);
}
}

playSongs.ctr = 0;

and later:


<input type="button" value="Play" onclick="playSongs.ctr = 0; playSongs()" />

riptide
09-30-2010, 09:28 PM
hum...I'm guessing that had something to do with moving moving the global ct. I have no idea why it went all buggy because of something like that. the player works but it's not working with my local files. It won't play avi's how strange...I WMP works when I click on the file.

well it's probably windows being windows.

thanks for all the help.

jscheuer1
10-01-2010, 07:52 AM
I was going to get around to that. Whether for the web or the local machine, though it can be harder to set up, Flash is the preferred method for all multimedia content in the browser. With .avi you may have to convert it to .flv or .mp4 first unless you can find a Flash .swf that can support it. But FLV is a better format (smaller fies) for the web anyway.

riptide
10-05-2010, 07:58 PM
is that about the avi's not working or just my choice of files. I tried using flash but I can't find any flash player that would play avi's based on flash 8 or MX. As for converting the files I don't know if I really want to do that, I still would need an old video player. Plus what if flash is turned off?

jscheuer1
10-16-2010, 01:47 PM
Sorry to take so long getting back to you. Flash is preferred for that very reason. It has the largest installed and active base on the web. As for avi and media player, you are immediately limited to Windows. The versions vary and support in other browsers, other than IE, even in Windows is limited. Conversion programs abound. At least several high quality free ones are available. Some with a GUI, some are command line only. I like WinFF:

http://winff.org/html_new/

Features:

Easy to use interface.
Fast (Winff does not hinder FFmpeg in anyway).
High quality output.
Converts multiple different files all to the same format at once.
Convert video to audio.
Convert between audio formats.
No external codecs needed.
Includes a variety of preset conversion settings for common formats and devices.
Preset conversions can be created to encode to any format FFmpeg supports.
Easy access to common conversion options such as bitrate, frame size, frame rate.
Specify additional command line parameters for advanced users (options button).
Easily change FFmpeg versions.
Supports FFmpeg's multi threading for dual core processors
Multilingual, available in over 10 languages


There are Flash objects readily available to play your flv or mp4 (if you even need video, I still recommend flv, as it's so much more efficient). But, as I recall, you don't even need video, your clips appear to be audio only. In which case you could use mp3 and the standalone Wordpress audio player:

http://wpaudioplayer.com/standalone

riptide
10-20-2010, 09:53 PM
Most of them are going to be video. don't flash and quicktime play avi's?

also I got the avi's to play but the script won't play the first file no matter what it is. also the timer doesn't work. I think it has something to do with playSong.ctr.

I'll go look at the other versions of playsong in DD because I deleted my old script.

jscheuer1
10-21-2010, 05:58 AM
If you have true avi video, convert to .flv format and use Flash. Everything else I said is similar with video. The .flv format is much, much more efficient (byte wise) than .avi format. There are many, many ready made Flash methods for displaying .flv files (use flowplayer or Google to find others). With some of these (including flowplayer) you may also stream, which is great for larger video files.

http://flowplayer.org/

riptide
10-21-2010, 11:02 AM
I have flower player but I had some sort of issues installing it. I originally thought flower player played any type of files. it would be nice to have a flash 8 based player that can play many types of files.

I really don't want to convert the avi files because I'll have two copies and the avi's I use on my computer. I guess I could convert it but I'am worried about the quality for some of the videos.


I've got the function playSongs working by adding [setTimeout("playSongs()",len)]

the function was ignoring the timer. Anyway the last object plays forever but I'm not mad about it at least it's working.

jscheuer1
10-21-2010, 01:18 PM
Try again with flowplayer. If you still have problems, give a link to the problem page. With flowplayer you can have communication back and forth between the player and javascript for more precise timing/switching videos.

Here's Superę, another, probably a better conversion program:

http://www.erightsoft.com/SUPER.html

riptide
10-21-2010, 08:21 PM
Thank you. I was looking for a third option. No matter what format the videos are in I wanted this to be cross browser, work with out plugins, work in special browsers for disabled people.

jscheuer1
10-22-2010, 04:25 AM
Flash with .flv is your best bet for cross browser as it's the most widely supported.

No browser will display video without a plugin. Media Player is (when used via a browser, even IE) a plugin.

You can, if you want to be extra thorough, make the files available in various formats and let the browser decide what to do with them http://www.w3.org/TR/html5/video.html#video (http://www.w3.org/TR/html5/video.html#video). Worse comes to worse the user can always save a copy of the format he/she prefers for offline viewing.

Or, host them on YouTube.

Disabled people will (like folks who aren't disabled, unless they are deaf and/or blind, in which case it doesn't matter what you do) more likely have Flash than any other multimedia plugin.