Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: how to combain 2 different java script in head

  1. #1
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default how to combain 2 different java script in head

    hallo sorry for my bad english, i wan to know how to combain 2 diffrent java script for example:

    frist java script

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    <style type="text/css">
    body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
    </style>

    second java script

    <script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/jquery_update/replace/jquery.min.js" type="text/javascript"></script>
    <script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/jquery.colorbox-min.js" type="text/javascript"></script>
    <link href="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/colorbox.css" media="all" rel="stylesheet" type="text/css" />


    so how merge 2 different java script in head html....thanks for help

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    These two scripts are so similar, why not just pick one or the other? Doing so will make the page much more efficient, and lighter weight byte wise.

    If you must use them both -

    You have to put jQuery into noConflict mode. If Color Box is well written, all you need to do is reverse the order of the scripts, putting jQuery and Color Box first, followed by:

    Code:
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    Then the Lightbox scripts.

    However, your Color Box initialization (if any, you haven't shown that part) must use jQuery in place of $.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - 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:

    xaverius (08-06-2010)

  4. #3
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    i try what your sugest but still i don't understand...sory im newbie in javascript code...i upload my case in http://jooysteak.50webs.com/# so if klick picture the picture is pop up...but i klick preview my widget it not working.
    i use first java script in my images
    i use second java script in the tex
    thanks for your time to help me...

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You missed a few steps and introduced line breaks that might have affected the outcome. Also, your lightbox.css is a 404 not found. This works:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <base href="http://jooysteak.50webs.com/" />
    <link href="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/colorbox.css" media="all" rel="stylesheet" type="text/css" />
    <script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/jquery_update/replace/jquery.min.js" type="text/javascript"></script>
    <script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/jquery.colorbox-min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    
    <style type="text/css">
    <!--
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: none;
    }
    -->
    </style></head>
    
    	<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    	
    	<script src="js/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    	<script src="js/lightbox.js" type="text/javascript"></script>
    
    	<style type="text/css">
    		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	}
    	</style>
    
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="45" height="200"><p><a href="images/almond.jpg"rel="lightbox"><img src="images/monin_01.jpg" width="45" height="200" border="0" /></a><a href="images/almond.jpg"rel="lightbox">monin</a></p>    </td>
        <td><a href="images/amaretto.jpg"rel="lightbox"><img src="images/monin_02.jpg" width="45" height="200" border="0" /></a><br />
          <a href="images/amaretto.jpg"rel="lightbox">tester</a></td>
        <td><a href="#" id="mmi_widget_content_open">Preview my widget</a>.
    </td>
      </tr>
    </table>
    <script type="text/javascript">
      jQuery("#mmi_widget_content_open").colorbox({iframe:true, innerWidth:700, innerHeight:465, href:"http://monin-mmi-prod.webs.icilalune.net/widget/10"}); 
    
    </script>
    </body>
    </html>
    - John
    ________________________

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

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

    xaverius (08-06-2010)

  7. #5
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default wow thanks

    wow i just try, now my widget and lightbox is work on same html page....wow cool thank you so much....

  8. #6
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    i try to fix javascript in my html, i try many time and i done with damaged html...so i paste javascript in my head html and for the widget. can you help me to fix this...so sory for disturbing you. thanks for your help







    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    	
    	<script src="js/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    	<script src="js/lightbox.js" type="text/javascript"></script>
    
    	<style type="text/css">
    		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	<script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/jquery_update/replace/jquery.min.js" type="text/javascript"></script>
    <script src="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/jquery.colorbox-min.js" type="text/javascript"></script>
    <link href="http://monin-mmi-prod.webs.icilalune.net/sites/all/modules/site/monin_mmi/widget/colorbox.css" media="all" rel="stylesheet" type="text/css" />
    
    }
    	</style>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KMDS Flavors</title>
    <style type="text/css">
    <!--
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    -->
    </style>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="lightbox.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    
    its for link widget to teks
    
    <a href="#" id="mmi_widget_content_open">see for detail</a>.
    <script type="text/javascript">
      $("#mmi_widget_content_open").colorbox({iframe:true, innerWidth:700, innerHeight:465, href:"http://monin-mmi-prod.webs.icilalune.net/widget/10"}); 
    </script></p></td>
    Last edited by jscheuer1; 08-06-2010 at 10:08 PM. Reason: format code

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You've reversed the order of the scripts and left out steps again. Follow the template from my previous post.
    - John
    ________________________

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

  10. #8
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    it's work i follow your step ... after many time i try...thanks for your help...

  11. #9
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi. I have tried getting this done but to no avail. I have changed the order in different ways but no way. if the jquery loads, the jscript won't and vice versa. pls help needed. this is my mark up.

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Edy &amp; Chi</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.slidepanel.setup.js"></script>
    <script type="text/javascript" src="scripts/jquery.cycle.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.cycle.setup.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    </head>

    thanks

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try updating to jQuery version 1.6.4. And make sure that your two setup.js files use jQuery instead of the $ shortcut.

    If that doesn't fix it and you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - 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
  •