Javascript Errors!! Lightbox and toggle

jon22 · 02-03-2012, 02:48 PM

I am trying to get lightbox working on my site but am having a few problems,

The only way i can get it to work is if I remove another section of javascript which controls a toggle sidebar

Even if I just remove the jquery.min.js from the script below then the lightbox starts to work,

I've tried calling lighbox first and moving it around but no luck, any ideas?

Code:

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

this is the rest of the code

Code:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".toggle-content").hide();
  //toggle the componenet with class msg_body
  jQuery(".link-toggle").click(function()
  {
    jQuery(this).next(".toggle-content").slideToggle(500);
  });
});
</script>

jon22 · 02-03-2012, 02:59 PM

Sweet! just fixed it with no conflict

Code:

<script type="text/javascript">jQuery.noConflict();</script>

Forgot all about this!!!

VIPStephan · 02-03-2012, 03:31 PM

Your solution is not a solution, it’s just fixing the symptoms and shows me that you haven’t quite understood how to use jQuery (and you using jQuery 1.3.2 while we’re at version 1.7.1 shows that, too). Apparently you have included the framework twice which isn’t necessary in 99% of all cases. If you showed us your complete source code and not just a few lines, then we would even be able to help you actually fix your issue.

jon22 · 02-04-2012, 10:01 AM

Yep your right I don't understand Jquery yet but i will learn soon

ok so I only need to include the latest version of jQuery once?

here's the rest of my code for the site

Code:

<!--Bing Webmasters Verification-->
<meta name="msvalidate.01" content="97E40E7913B3EFAE99B0E62C2A3B2CEA" />
<!--Google Webmasters Verification-->
<meta name="google-site-verification" content="TEp_zmRBpKI11TgL7UGDBoR1WwMKsbzQ_G0awJiH1oU" />
<!--Switch Content Used in Sidebar Navigation)-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".toggle-content").hide();
  //toggle the componenet with class msg_body
  jQuery(".link-toggle").click(function()
  {
    jQuery(this).next(".toggle-content").slideToggle(500);
  });
});
</script>
<script type="text/javascript">jQuery.noConflict();</script>


<!--Tabs Files-->
<!--<link rel="stylesheet" type="text/css" href="style/tabcontent.css" />

<script type="text/javascript" src="applications/js/tabcontent.js">

</script>-->
<!--Contact Form validation-->
<script src="information/information/free_validation.js"></script>
<script>
	required.add('Full_Name','NOT_EMPTY','Full Name');
	required.add('Email_Address','EMAIL','Email Address');
	required.add('Your_Message','NOT_EMPTY','Your Message')
	</script>
<script type="text/javascript">

/* Modified to support Opera */
function bookmarksite(title,url){
if (window.sidebar) // firefox
	window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
	var elem = document.createElement('a');
	elem.setAttribute('href',url);
	elem.setAttribute('title',title);
	elem.setAttribute('rel','sidebar');
	elem.click();
} 
else if(document.all)// ie
	window.external.AddFavorite(url, title);
}
</script>

<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="information/information/applications/slider/engine1/style.css"/>
	

<script type="text/javascript" src="information/information/applications/slider/engine1/jquery.js"></script>
	<script type="text/javascript" src="information/information/applications/slider/engine1/wowslider.js"></script>
	<!-- End WOWSlider.com HEAD section -->

<!-- Show Cart Content & Value -->
<script type="text/javascript">
function upDate(){
qty="0"; sub="0.00";
querystring=parent.document.URL.substring(document.URL.indexOf('?')+1);
if (querystring.charAt(0)!="q"){querystring="";}
if (querystring){
today=new Date();
millisecs_in_half_hour=1800000;
expireDate = new Date(today.getTime() + millisecs_in_half_hour);
document.cookie=querystring+"&exp="+expireDate+";path=/;expires="+expireDate.toGMTString();
}else{
if (document.cookie !=""){
thisCookie=document.cookie.split("; ");
for (i=0; i<thisCookie.length; i++) {
if (thisCookie[i].split("=")[0]=="qty"){
querystring=thisCookie[i];
expireDate=thisCookie[i].split("exp=")[1];
}}}}
if (querystring){
querystring=querystring.split("&");
qty=querystring[0].split("=")[1]; if (qty==""){qty="0";}qty=parseInt(qty);
sub=querystring[1].split("=")[1]; if (sub==""){sub="0.00";}
}
update=document.write("Items in cart: "+qty+"<br>Subtotal: "+sub+"");
return update;
}
</script>

<!-- Tabs for product pages -->
<link rel="stylesheet" type="text/css" href="style/tabcontent-products.css" />

<script type="text/javascript" src="applications/js/tabcontent-products.js">
</script>

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

VIPStephan · 02-04-2012, 11:18 AM

Ah, no, I see. You used both, the jQuery and prototype libraries in one document. Since they are two different frameworks that do have similar function names, however, they are incompatible, and that’s why it wasn’t working. You should decide for one library (prototype, jQuery, or whatever else) and stick with it. And then you look for plugins/extensions for that one library. Since jQuery is the most popular JS framework, there are plugins for virtually everything, there are even multiple lightbox type plugins. So remove the lightbox you have right now and use one for jQuery. I can recommend fancybox. And remember: If you have included the core library file already you don’t need the jQuery file tha might be provided with the plugin.