CodingForums.com - Prototype Need help resolving conflict between Proto and Uize

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Prototype Need help resolving conflict between Proto and Uize (http://www.codingforums.com/showthread.php?t=169453)

Need help resolving conflict between Proto and Uize

I know it's probably a lousy idea but I have both prototype and uize referenced in the <head> of my document:

Code:

    <script type="text/javascript" src="js/Uize.js"></script>

    <script  type="text/javascript" src="javascript/prototype.js"></script>

The only time I use a prototype function in the <body> of the document is to create a function that plays a movie when a thumbnail is clicked.

The function is:

Code:

<script>

function setMovie( url, title )

{

 $('movieHost').innerHTML = '';

 var elEmbed = document.createElement( 'embed' );

 elEmbed.src = url;

 elEmbed.setAttribute("width", "100%");

 elEmbed.setAttribute("height","100%");

 elEmbed.setAttribute("scale","aspect");

 elEmbed.setAttribute("bgcolor","black");



 $('movieHost').appendChild( elEmbed );



 $('nowPlaying').innerHTML = title;

}



new Ajax.Request( '', { 

  method: 'get',

  onSuccess: function( transport ) {

    var bFirst = true;

    for( var b = 0; b < movieTags.length; b++ ) {



      if ( bFirst )

      {

        setMovie( url, title );

        bFirst = false;

      }

                var html = '<a href="javascript:void setMovie(\''+url+'\',\''+title+'\');">';

      html += title+'</a><br/>';

    }

  }

} );

</script>

The only problem I'm having is that I call the function at body onload:

Code:

<BODY onload="setMovie('Quicktimes/mov1.mov', 'Suzuki : "Fence" 1 of 12')">

In order that the first movie starts playing right away...

And everything is fine... EXCEPT that about 10 or 15 seconds into the first movie it skips back to the beginning and starts playing again. Once it's done that everything works fine until a page reload - and then it plays and skips back.

I've tried changing the order of the script references in the <head> section... but that breaks the uize framework.

Is it possible there's some way to recode the function with absolutes?

Thanks!

whoa there cowboy...

where is the conflict?
what does uize actually handle?
what is happening 10-15 seconds in to trigger the second load?

Quote:

Is it possible there's some way to recode the function with absolutes?

and why do you suggest that? what do you suspect it would resolve?

What would I do without you...! :D

The Uize framework handles a horizontal thumbnail scroller... I thought that there might be a conflict in the shorthand of the two frameworks that could be resolved by going back to 'longhand' of one of them, as it were.

The weird thing is that if I reference the prototype.js script before the uize.js script then the movie restart glitch goes away (but it breaks the scroller).

The only thing I can think of that is triggering 10-15s in is Quicktime plugin's 'fast start' ability means that a quicktime only starts playing (on download from a server anyway) once a certain percentage of the movie is cached on the users computer... maybe there's something there. But why does referencing the prototype.js script first fix it?!

Actually I've been playing with a slightly different approach - recommended by Apple:

Code:

<script language="JavaScript" type="text/javascript"><!--



if (isQTInstalled()){QT_WriteOBJECT(

'media/mov1.mov', '100%', '100%','',

'controller', 'true', 

'scale','aspect',

'autoplay','true',

'cache','false',

'bgcolor',''

,'SaveEmbedTags','true'

);}

else

{document.write('<a href="http://www.apple.com/quicktime/download/"><img src="media/getQT7freeDownload.jpg"  width="440" height="180"  border="0"></a>');}

// -->



// --></script>

But in order for this to work then the 'media/mov1.mov' would need to be a variable that could be called by an onclick event. I've been trying to figure out how to incorporate the url of the quicktime as a variable into the function... so far with little success ;p

Quote:

Code:

<script language="JavaScript" type="text/javascript"><!--



function moviepicker(what){

if(what == ""){ what = 'media/mov1.mov';}if (isQTInstalled()){QT_WriteOBJECT(

what, '100%', '100%','',

'controller', 'true', 

'scale','aspect',

'autoplay','true',

'cache','false',

'bgcolor',''

,'SaveEmbedTags','true'

);}

else

{document.write('<a href="http://www.apple.com/quicktime/download/"><img src="media/getQT7freeDownload.jpg"  width="440" height="180"  border="0"></a>');}
}

// -->



// --></script>

that way you can specifiy what movie. you could also call that function from your onload or wherever. if the "what" arg is blank, it defaults to your first movie.

you could also pass what movie with your url string via get or something i suppose if that's useful

http://www.idealog.us/2006/06/javascript_to_p.html

For some reason I can't get this to work... I've adjusted it (a little) to:

Code:

<script language="JavaScript" type="text/javascript"><!--



function setMovie(url){

if(url == ""){ url = 'Quicktimes/mov1.mov';}

if (isQTInstalled()){QT_WriteOBJECT(

url, '100%', '100%','',

'controller', 'true', 

'scale','aspect',

'autoplay','true',

'cache','false',

'bgcolor',''

,'SaveEmbedTags','true'

);}

else

{document.write('<a href="http://www.apple.com/quicktime/download/"><img src="media/getQT7freeDownload.jpg"  width="440" height="180"  border="0"></a>');}

// -->



// --></script>

and added the onclick event:

Code:

<a href="#" class="thumbnail" onClick="setMovie('Quicktimes/mov1.mov');">

But nothing happens... am I missing something...?

it probably doesn't help that you have stuff commented out... you have the closing // --> twice, not sure if that'll screw stuff up

also, i don't know how much QT cares about the format it receives args in. it might be pissed off that url doesn't have single quotes around it for all i know. i wouldn't think so, but i don't know QT

throw some alerts in and see how car it's making it

Okay... I'll clean it up and try various adjustments - thanks! I'll post back here...

Okay... I love the idea of this script:

Code:

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



function setMovie(srcUrl){

if(srcUrl == ""){ srcUrl = 'media/mov1.mov';}



    if (isQTInstalled()){QT_WriteOBJECT( srcUrl, '100%', '100%','', 'controller', 'true', 'scale','aspect', 'autoplay','true', 'cache','false', 'bgcolor','' ,'SaveEmbedTags','true' );} 



else {document.write('<a href="http://www.apple.com/quicktime/download/"><img src="media/getQT7freeDownload.jpg" width="440" height="180" border="0"></a>');}

}



</script>

but I can't get it to work... The QT_WriteOBJECT function references the AC_Quicktime.js external script (which is quoted in full at the end of this post).

Possibly buried in it is the answer to how to pass variables such as src url to the QT_WriteObject function, but my rudimentary scripting skills just aren't up to the task...

If there are any insights - they would be much appreciated... sorry about the homework! :P

Code:

/*



File: AC_QuickTime.js



Abstract: This file contains functions to generate OBJECT and EMBED tags for QuickTime content.



Version: <1.2>



Disclaimer: IMPORTANT:  This Apple software is supplied to you by Apple

Computer, Inc. ("Apple") in consideration of your agreement to the

following terms, and your use, installation, modification or

redistribution of this Apple software constitutes acceptance of these

terms.  If you do not agree with these terms, please do not use,

install, modify or redistribute this Apple software.



In consideration of your agreement to abide by the following terms, and

subject to these terms, Apple grants you a personal, non-exclusive

license, under Apple's copyrights in this original Apple software (the

"Apple Software"), to use, reproduce, modify and redistribute the Apple

Software, with or without modifications, in source and/or binary forms;

provided that if you redistribute the Apple Software in its entirety and

without modifications, you must retain this notice and the following

text and disclaimers in all such redistributions of the Apple Software. 

Neither the name, trademarks, service marks or logos of Apple Computer,

Inc. may be used to endorse or promote products derived from the Apple

Software without specific prior written permission from Apple.  Except

as expressly stated in this notice, no other rights or licenses, express

or implied, are granted by Apple herein, including but not limited to

any patent rights that may be infringed by your derivative works or by

other works in which the Apple Software may be incorporated.



The Apple Software is provided by Apple on an "AS IS" basis.  APPLE

MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION

THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS

FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND

OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.



IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL

OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,

MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED

AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),

STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE

POSSIBILITY OF SUCH DAMAGE.



Copyright å© 2006-2007 Apple Computer, Inc., All Rights Reserved



*/ 



/*

 * This file contains functions to generate OBJECT and EMBED tags for QuickTime content. 

 */



/************** LOCALIZABLE GLOBAL VARIABLES ****************/



var gArgCountErr =        'The "%%" function requires an even number of arguments.'

                                +        '\nArguments should be in the form "atttributeName", "attributeValue", ...';



/******************** END LOCALIZABLE **********************/



var gTagAttrs                                = null;

var gQTGeneratorVersion                = 1.2;

var gQTBehaviorID                        = "qt_event_source";

var gQTEventsEnabled                = false;



function AC_QuickTimeVersion()        { return gQTGeneratorVersion; }



function _QTComplain(callingFcnName, errMsg)

{

    errMsg = errMsg.replace("%%", callingFcnName);

        alert(errMsg);

}



function _QTIsMSIE()

{

    var ua = navigator.userAgent.toLowerCase();

        var msie = /msie/.test(ua) && !/opera/.test(ua);



        return msie;

}





function _QTGenerateBehavior()

{

        return objTag = '<!--[if IE]>'

                                 + '<object id="' + gQTBehaviorID + '" classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598"></object>'

                                 + '<![endif]-->';

}



function _QTPageHasBehaviorObject(callingFcnName, args)

{

        var haveBehavior = false;

        var objects = document.getElementsByTagName('object');

        

        for ( var ndx = 0, obj; obj = objects[ndx]; ndx++ )

        {

                if ( obj.getAttribute('classid') == "clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598" )

                {

                        if ( obj.getAttribute('id') == gQTBehaviorID )

                                haveBehavior = false;

                        break;

                }

        }



        return haveBehavior;

}





function _QTShouldInsertBehavior()

{

        var                shouldDo = false;



        if ( gQTEventsEnabled && _QTIsMSIE() && !_QTPageHasBehaviorObject() )

                shouldDo = true;

        

        return shouldDo;

}





function _QTAddAttribute(prefix, slotName, tagName)

{

        var                value;



        value = gTagAttrs[prefix + slotName];

        if ( null == value )

                value = gTagAttrs[slotName];



        if ( null != value )

        {

                if ( 0 == slotName.indexOf(prefix) && (null == tagName) )

                        tagName = slotName.substring(prefix.length); 

                if ( null == tagName ) 

                        tagName = slotName;

                return ' ' + tagName + '="' + value + '"';

        }

        else

                return "";

}



function _QTAddObjectAttr(slotName, tagName)

{

        // don't bother if it is only for the embed tag

        if ( 0 == slotName.indexOf("emb#") )

                return "";



        if ( 0 == slotName.indexOf("obj#") && (null == tagName) )

                tagName = slotName.substring(4); 



        return _QTAddAttribute("obj#", slotName, tagName);

}



function _QTAddEmbedAttr(slotName, tagName)

{

        // don't bother if it is only for the object tag

        if ( 0 == slotName.indexOf("obj#") )

                return "";



        if ( 0 == slotName.indexOf("emb#") && (null == tagName) )

                tagName = slotName.substring(4); 



        return _QTAddAttribute("emb#", slotName, tagName);

}





function _QTAddObjectParam(slotName, generateXHTML)

{

        var                paramValue;

        var                paramStr = "";

        var                endTagChar = (generateXHTML) ? ' />' : '>';



        if ( -1 == slotName.indexOf("emb#") )

        {

                // look for the OBJECT-only param first. if there is none, look for a generic one

                paramValue = gTagAttrs["obj#" + slotName];

                if ( null == paramValue )

                        paramValue = gTagAttrs[slotName];



                if ( 0 == slotName.indexOf("obj#") )

                        slotName = slotName.substring(4); 

        

                if ( null != paramValue )

                        paramStr = '<param name="' + slotName + '" value="' + paramValue + '"' + endTagChar;

        }



        return paramStr;

}



function _QTDeleteTagAttrs()

{

        for ( var ndx = 0; ndx < arguments.length; ndx++ )

        {

                var attrName = arguments[ndx];

                delete gTagAttrs[attrName];

                delete gTagAttrs["emb#" + attrName];

                delete gTagAttrs["obj#" + attrName];

        }

}





// generate an embed and object tag, return as a string

function _QTGenerate(callingFcnName, generateXHTML, args)

{

        // is the number of optional arguments even?

        if ( args.length < 4 || (0 != (args.length % 2)) )

        {

                _QTComplain(callingFcnName, gArgCountErr);

                return "";

        }

        

        // allocate an array, fill in the required attributes with fixed place params and defaults

        gTagAttrs = new Object();

        gTagAttrs["src"] = args[0];

        gTagAttrs["width"] = args[1];

        gTagAttrs["height"] = args[2];

        gTagAttrs["classid"] = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B";

                //Impportant note: It is recommended that you use this exact classid in order to ensure a seamless experience for all viewers

        gTagAttrs["pluginspage"] = "http://www.apple.com/quicktime/download/";



        // set up codebase attribute with specified or default version before parsing args so

        //  anything passed in will override

        var activexVers = args[3]

        if ( (null == activexVers) || ("" == activexVers) )

                activexVers = "7,3,0,0";

        gTagAttrs["codebase"] = "http://www.apple.com/qtactivex/qtplugin.cab#version=" + activexVers;



        var        attrName,

                attrValue;



        // add all of the optional attributes to the array

        for ( var ndx = 4; ndx < args.length; ndx += 2)

        {

                attrName = args[ndx].toLowerCase();

                attrValue = args[ndx + 1];



                gTagAttrs[attrName] = attrValue;



                if ( ("postdomevents" == attrName) && (attrValue.toLowerCase() != "false") )

                {

                        gQTEventsEnabled = true;

                        if ( _QTIsMSIE() )

                                gTagAttrs["obj#style"] = "behavior:url(#" + gQTBehaviorID + ")";

                }

        }



        // init both tags with the required and "special" attributes

        var objTag =  '<object '

                                        + _QTAddObjectAttr("classid")

                                        + _QTAddObjectAttr("width")

                                        + _QTAddObjectAttr("height")

                                        + _QTAddObjectAttr("codebase")

                                        + _QTAddObjectAttr("name")

                                        + _QTAddObjectAttr("id")

                                        + _QTAddObjectAttr("tabindex")

                                        + _QTAddObjectAttr("hspace")

                                        + _QTAddObjectAttr("vspace")

                                        + _QTAddObjectAttr("border")

                                        + _QTAddObjectAttr("align")

                                        + _QTAddObjectAttr("class")

                                        + _QTAddObjectAttr("title")

                                        + _QTAddObjectAttr("accesskey")

                                        + _QTAddObjectAttr("noexternaldata")

                                        + _QTAddObjectAttr("obj#style")

                                        + '>'

                                        + _QTAddObjectParam("src", generateXHTML);

        var embedTag = '<embed '

                                        + _QTAddEmbedAttr("src")

                                        + _QTAddEmbedAttr("width")

                                        + _QTAddEmbedAttr("height")

                                        + _QTAddEmbedAttr("pluginspage")

                                        + _QTAddEmbedAttr("name")

                                        + _QTAddEmbedAttr("id")

                                        + _QTAddEmbedAttr("align")

                                        + _QTAddEmbedAttr("tabindex");



        // delete the attributes/params we have already added

        _QTDeleteTagAttrs("src","width","height","pluginspage","classid","codebase","name","tabindex",

                                        "hspace","vspace","border","align","noexternaldata","class","title","accesskey","id","style");



        // and finally, add all of the remaining attributes to the embed and object

        for ( var attrName in gTagAttrs )

        {

                attrValue = gTagAttrs[attrName];

                if ( null != attrValue )

                {

                        embedTag += _QTAddEmbedAttr(attrName);

                        objTag += _QTAddObjectParam(attrName, generateXHTML);

                }

        } 



        // end both tags, we're done

        return objTag + embedTag + '></em' + 'bed></ob' + 'ject' + '>';

}





// return the object/embed as a string

function QT_GenerateOBJECTText()

{

        var        txt = _QTGenerate("QT_GenerateOBJECTText", false, arguments);

        if ( _QTShouldInsertBehavior() )

                txt = _QTGenerateBehavior() + txt;

        return txt;

}



function QT_GenerateOBJECTText_XHTML()

{

        var        txt = _QTGenerate("QT_GenerateOBJECTText_XHTML", true, arguments);

        if ( _QTShouldInsertBehavior() )

                txt = _QTGenerateBehavior() + txt;

        return txt;

}



function QT_WriteOBJECT()

{

        var        txt = _QTGenerate("QT_WriteOBJECT", false, arguments);

        if ( _QTShouldInsertBehavior() )

                document.writeln(_QTGenerateBehavior());

        document.writeln(txt);

}



function QT_WriteOBJECT_XHTML()

{

        var        txt = _QTGenerate("QT_WriteOBJECT_XHTML", true, arguments);

        if ( _QTShouldInsertBehavior() )

                document.writeln(_QTGenerateBehavior());

        document.writeln(txt);

}



function QT_GenerateBehaviorOBJECT()

{

        return _QTGenerateBehavior();

}



function QT_ReplaceElementContents()

{

        var element = arguments[0];

        var args = [];



        // copy all other arguments we want to pass through to the fcn

        for ( var ndx = 1; ndx < arguments.length; ndx++ )

                args.push(arguments[ndx]);



        var        txt = _QTGenerate("QT_ReplaceElementContents", false, args);

        if ( txt.length > 0 )

                element.innerHTML = txt;

}





function QT_ReplaceElementContents_XHTML()

{

        var element = arguments[0];

        var args = [];



        // copy all other arguments we want to pass through to the fcn

        for ( var ndx = 1; ndx < arguments.length; ndx++ )

                args.push(arguments[ndx]);



        var        txt = _QTGenerate("QT_ReplaceElementContents_XHTML", true, args);

        if ( txt.length > 0 )

                element.innerHTML = txt;

}

well, i don't really know how this works i guess

function QT_WriteOBJECT() takes no arguments... but calls _QTGenerate that does. everything makes sense to me except how the arguments make it in there for the code generation.

where are you getting your examples?

Mostly I'm getting my examples from:

http://developer.apple.com/documenta...ript%20QT.html

But I scatter about looking for code snippets as well... I always test them in un-hacked state to verify that they perform as promised... then keep adjusting til I break them, then step backwards.

Currently I'm looking at:

Code:

<a href="javascript:document.movie1.SetURL('new url');">

as a possible solution as an event at the thumbnail - but I can't get it to work either... v frustrating. Especially since everything else on the page is working perfectly - horizontal scrolling thumbnails, dynamic auto resizing of the browser centered movie as the viewport is user-resized, forward html php, and a js driven fullscreen option.

... but no playlist :D

you running firebug to see why it's failing?

okay.. I've cracked the 'on click' event - with the AC_Quicktime.js (from Apple dev) referenced in the head then:

Code:

<a href="javascript:document.movie1.SetURL(new url)

With the param 'ID','Movie1'works in IE but ONLY works in Safari and Netscape/Firefox if the object and embed tags are adressed separately as in:

Code:

'obj#ID', 'Movie1'

'emb#ID', 'Movie1'

And the 'new url' path must be relative to Movie1 (not the document).

So now I'm working on the dynamic titles - will post back the whole solution if I ever figure it out ;)

just call a second function in your onclick to set the title

Umm... that works, of course, when the user actually clicks on a thumbnail to choose a particular movie.

But... the quicktimes are daisychained - either by calling the next in a string through the qtnext parameter or by an href call from the final frame of the movie.

That means if there are, say, five movies to choose from (and therefore five thumbnails), then if the user were to click NO thumbnails all five movies would play in order. The user could then jump forward to movie #3, say, and then #4 and #5 would play on automatically when #3 finished.

This, of course, means that there may not be an onclick event... yet the movie will still change...

.. and therefore the title should somehow also change.

good point...

can you add an arg to SetURL(new url)? like SetURL(new_url, new_title)?

if not, you need a place to drop an attribute in that would contain the title. then from within SetURL(new url) or one of those functions have it read that attribute and set the title

not seeing what you're working with now i really can't be any more specific i guess