how to combain 2 different java script in head

**xaverius** · 08-05-2010, 08:36 PM

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

**jscheuer1** · 08-05-2010, 11:58 PM

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.

**xaverius** · 08-06-2010, 06:19 AM

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

**jscheuer1** · 08-06-2010, 02:38 PM

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>

**xaverius** · 08-06-2010, 04:10 PM

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

**xaverius** · 08-06-2010, 06:34 PM

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>

**jscheuer1** · 08-06-2010, 10:11 PM

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

**xaverius** · 08-07-2010, 08:50 AM

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

**funkyfela** · 10-31-2011, 08:19 PM

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 & 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

**jscheuer1** · 10-31-2011, 11:12 PM

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.