Results 1 to 7 of 7

Thread: Conflict with scripts

  1. #1
    Join Date
    Jan 2006
    Location
    Derbyshire, UK
    Posts
    74
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Conflict with scripts

    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...
    Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-04-2009 at 08:02 AM. Reason: punctuation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Burgin (10-04-2009)

  4. #3
    Join Date
    Jan 2006
    Location
    Derbyshire, UK
    Posts
    74
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <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:

    Code:
        <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:

    Code:
        <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Burgin (10-05-2009)

  8. #6
    Join Date
    Jan 2006
    Location
    Derbyshire, UK
    Posts
    74
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    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;
    }
    Code:
    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;
    }

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I'm not sure that these functions do anything:

    Code:
    document.form
    is generally undefined.

    The correct term would be:

    Code:
    document.forms
    Further, the code:

    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):

    Code:
    (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):

    Code:
    (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:

    Code:
    document.forms[0].elements
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •