Conflict with scripts

[Burgin]

I'm working on a new website that uses a number of javascripts. I would like to include a slider script that needs this code placed at the end of the page...

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.2.6");
    </script>

The problem is that the 2nd part of the above code stops one of the original scripts from loading properly. Is there another way that I can load the 2nd part or am I barking up the wrong tree?

You can view the page with the error here...
http://www.barlborough-first.co.uk/index_test.htm

I hope someone can help me.

[jscheuer1]

Wrong tree, sort of. Your page uses the Prototype script library and one or more of its helper script libraries (like Scriptaculous, Effects, etc.). Unless you can get your jQuery script to run in No Conflict mode, and without its jQuery library overwriting variables used by Prototype and its helpers at any point before they need to access them, it will not work.

Even in an uncluttered environment where the various script libraries are loaded in a more straightforward manner, this can be a bit challenging. I'm fairly certain it can be worked out, though the amount of coding involved may be considerable.

For more information on running jQuery in No Conflict mode, see:

http://docs.jquery.com/Using_jQuery_...ther_Libraries

However, since these various libraries can pretty much all do (albeit in different ways) whatever the others can, you would be far better off, and have a much lighter weight page code wise, if you pick one and base all your script code on it rather than trying to mix them together. For example, a Prototype based slider should not be too hard to find, then you wouldn't need to worry about jQuery or it conflicting with Prototype.

[Burgin]

Thanks for the advice, you've explained it well. The jQuery slider is history. Any pointers to a free Prototype slider would be appriciated. You can see the slider working OK here (SearchBox top-right) so anyone can see what I'm trying to achieve.http://www.barlborough-first.co.uk/i..._slider_ok.htm

Thanks again.

[jscheuer1]

I really thought it would be easier that it appears so far to find this for Prototype. Here is the closest I've found so far:

http://wiki.github.com/madrobby/scri...s/effect-morph

Which is not a full blown script, but shows basically how to get this sort of effect. I'll keep looking for a bit and add to this post or thread if I find any better examples.

Here's perhaps a better one:

http://www.ajaxdaddy.com/bouncer-demo.html

[jscheuer1]

OK, since I cannot find a decent Prototype replacement, here's what I would suggest (this assumes I am following what your scripts do, and that we are lucky) - First get rid of this:

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.2.6");
    </script>

Place this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

as the very first script tag in the head of your page.

Change this script:

    <script type="text/javascript">
        $(function(){
            $("#closeBtn").click(function(){
                $("#panel").animate({height: "80px"}, "swing").animate({height: "0px"}, "normal");
                $(".panelBtn").toggle();
                return false;
            });
            $("#openBtn").click(function(){
                $("#panel").animate({height: "80px"}, "swing").animate({height: "70px"}, "fast");
                $(".panelBtn").toggle();
                return false;
            });
        });
    </script>

to:

    <script type="text/javascript">
        jQuery(function(){
            jQuery("#closeBtn").click(function(){
                jQuery("#panel").animate({height: "80px"}, "swing").animate({height: "0px"}, "normal");
                jQuery(".panelBtn").toggle();
                return false;
            });
            jQuery("#openBtn").click(function(){
                jQuery("#panel").animate({height: "80px"}, "swing").animate({height: "70px"}, "fast");
                jQuery(".panelBtn").toggle();
                return false;
            });
        });
    </script>

That should do it, assuming that is the script you were having trouble adding.

Notes: Your page is a bit overloaded with scripts. I would be looking to get rid of some, not add. Also, there are errors in css and missing scripts. I'd correct the css errors (generally by just deleting them - they aren't doing anything in most cases - just make sure they aren't browser specific first), and get rid of the script tags that pont to missing scripts.

[Burgin]

Hi jscheuer

Thanks for the advice. I've made the changes and cleaned up somewhat.

I have several scripts, all very similar, that are needed to make my searchBox work. Am I better putting them all in one script? Here are two tipical scripts from the group.

var keyword;
document.form.ysearch.value==keyword
function fin_search_guard()
{
if(document.form.ysearch.value=="")
window.alert("Enter a keyword or a “news item” in the Search Box!");
else{
document.form.ysearch.value==keyword;
if(document.form.engine_guard.value=="guard")
window.open("http://browse.guardian.co.uk/search?search="+document.form.ysearch.value);
else
window.alert("Select Your UK Search Engine");
}
return;
}

var keyword;
document.form.ysearch.value==keyword
function fin_search_vjug()
{
if(document.form.ysearch.value=="")
window.alert("Enter a keyword or phrase in the Search Box!");
else{
document.form.ysearch.value==keyword;
if(document.form.engine_vjug.value=="vjug")
window.open("http://www.videojug.com/search?keywords="+document.form.ysearch.value);
else
window.alert("Select Your UK Search Engine");
}
return;
}

[jscheuer1]

I'm not sure that these functions do anything:

document.form

is generally undefined.

The correct term would be:

document.forms

Further, the code:

document.form.ysearch.value

Implies that there is either a form named ysearch, in which case - a form itself has no value. Or you have named your form 'form' and ysearch is just an element of that form, in which case the syntax is archaic, and the name of the form poorly chosen.

Yes, one could in theory combine these functions, though. The first step in doing so would be to either attach/add the functions to the forms/elements while passing the form/element to the function as an argument or making it available to the function in some other manner - Or by looping through the document.forms or the form's element collection and performing the one function on each. Once you had either of those, you could treat each form/element individually on the basis of some distinguishing characteristic, perhaps by its name.

Declaring the global keyword variable seems unnecessary. It certainly should only be declared once in any case. But my thinking is that since it appears to simply represent the empty value (albeit in an inconsistent type - it should probably be initially set to an empty string, as opposed to being left undefined), so the empty string could be used in its place in the function and it (the keyword variable) could then either be internal to the function or dropped altogether.

A basic example could be (this assumes separate forms):

(function(fs){
 for(var i = 0; i < fs.length; ++i){
  // do some things here based upon each form's name
  // or possibly its order as it appears in the document
 }
})(document.forms);

or (assuming a single form with multiple inputs):

(function(els){
 for(var i = 0; i < els.length; ++i){
  // do some things here based upon each form element's name
  // or the order in which they appear in the form
 }
})(document.forms.form.elements);

form in the above would be the name of the form, but as mentioned before it should be changed to something else. This should be a unique identifier, perhaps in this case 'searchForm'. Or one could use the bracketed number notation to select the form via its order in the document:

document.forms[0].elements