PDA

View Full Version : 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:


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


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








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

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.

funkyfela
11-02-2011, 07:03 AM
thanks John. it finally worked. what I did was to change the $ to jquery and updated the script to 1.6. but I discovered that updating isn't necessary cos its stilled worked with d 1.4 all that is needed is just to change form $ to jquery.

thanks a million dozen times

jscheuer1
11-02-2011, 07:10 AM
1.6.4 overcomes bugs that might not be apparent in all browsers.