Solved

JQuery Script Conflict

Posted on 2011-09-27
5
658 Views
Last Modified: 2014-11-12
I am having a conflict with some of my JQuery scripts. I have a background resize script as well as a script that will allow me to display my Google Calendar in a lightbox. Problem I am having is it will not run both services at the same time. I also ran into this problem with a Twitter script.

I have attached the HTML code. I have commented out the JQuery background script but I need it working.
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >  
<head>  

		<link rel="stylesheet" href="css/supersized.core.css" type="text/css" media="screen" />
		
		<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />

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

		<script type="text/javascript" src="js/bgresize.js"></script>
		
		<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" charset="utf-8">
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script language="javascript" type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
		
		

<!-- <script type="text/javascript">  
		
			jQuery(function($){
				$.supersized({
					slides	:  [ { image : 'images/bg1.jpg' } ]					
				});
			});
</script> -->
			
			
			<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$("a.iframe").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	})
</script>
		
</head>

<body>

<div id="container">
<h1>Adam Romito</h1>
<h2>Bass Gutair // Nashville,TN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus eleifend neque quis porta. Quisque tortor elit, scelerisque eu fermentum eu, mattis ultrices sapien. Sed varius ligula euismod est sagittis vel condimentum odio blandit. Phasellus sapien odio, laoreet at commodo vel, porta commodo diam. In luctus mauris a leo pharetra eget ornare ligula tristique. Donec sodales faucibus tortor, id porttitor purus lacinia non. In nec lectus urna. Mauris id nulla sem, quis rutrum libero. Etiam elit quam, dignissim laoreet ultricies non, accumsan vitae nunc. Mauris iaculis, libero sed mattis venenatis, enim lectus tincidunt leo, a dignissim elit orci ac libero. Suspendisse justo sapien, commodo sed sodales sed, aliquam at justo. Morbi posuere porttitor cursus. Nam lacus erat, scelerisque tristique tristique commodo, posuere id dui. Morbi luctus libero quis urna semper mollis. Nam in enim et sapien fermentum egestas.
</p>
<div id="addthis">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7eab600ce967d9"></script>
<!-- AddThis Button END -->

</div>

<div id="footer">

<img src="images/adamromitosignature.png" name="signature" width="294" height="100" id="signature" />

<div id="navigation">
<ul>
	<li><a href="url">Home</a></li>
	<li><a class="iframe" href="http://www.google.com/calendar/embed?src=www@www.com&ctz=UTC">Calendar</a></li>
	<li><a href="#">Contact</a> </li>
</ul>

</div>

<div id="socialnetworking"></div>

</div>


  
</body>  

</html>

Open in new window

0
Comment
Question by:thebradnetwork
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36714236
could you provide a link to your bgresize.js plugin/file?

You should not add multiple time the jquery lib (line 9 and line 14), try this :
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >  
<head>  
	<link rel="stylesheet" href="css/supersized.core.css" type="text/css" media="screen" />		
		<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
		<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" charset="utf-8">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>		
<script language="javascript" type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
		<script type="text/javascript" src="js/bgresize.js"></script>
		
			<script language="javascript" type="text/javascript">
	$(document).ready(function() {
				$.supersized({
					slides	:  [ { image : 'images/bg1.jpg' } ]					
				});
		$("a.iframe").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	})
</script>
		
</head>

<body>

<div id="container">
<h1>Adam Romito</h1>
<h2>Bass Gutair // Nashville,TN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus eleifend neque quis porta. Quisque tortor elit, scelerisque eu fermentum eu, mattis ultrices sapien. Sed varius ligula euismod est sagittis vel condimentum odio blandit. Phasellus sapien odio, laoreet at commodo vel, porta commodo diam. In luctus mauris a leo pharetra eget ornare ligula tristique. Donec sodales faucibus tortor, id porttitor purus lacinia non. In nec lectus urna. Mauris id nulla sem, quis rutrum libero. Etiam elit quam, dignissim laoreet ultricies non, accumsan vitae nunc. Mauris iaculis, libero sed mattis venenatis, enim lectus tincidunt leo, a dignissim elit orci ac libero. Suspendisse justo sapien, commodo sed sodales sed, aliquam at justo. Morbi posuere porttitor cursus. Nam lacus erat, scelerisque tristique tristique commodo, posuere id dui. Morbi luctus libero quis urna semper mollis. Nam in enim et sapien fermentum egestas.
</p>
<div id="addthis">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7eab600ce967d9"></script>
<!-- AddThis Button END -->

</div>

<div id="footer">

<img src="images/adamromitosignature.png" name="signature" width="294" height="100" id="signature" />

<div id="navigation">
<ul>
	<li><a href="url">Home</a></li>
	<li><a class="iframe" href="http://www.google.com/calendar/embed?src=www@www.com&ctz=UTC">Calendar</a></li>
	<li><a href="#">Contact</a> </li>
</ul>

</div>

<div id="socialnetworking"></div>

</div>


  
</body>  

</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36714250
using 3.1.3 from here : http://buildinternet.com/project/supersized/download.html

(note main folder renamed with : supersized-13f5a41)
<!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>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" charset="utf-8">
<link rel="stylesheet" type="text/css" href="supersized-13f5a41/core/css/supersized.core.css" media="screen" />	
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script language="javascript" type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="supersized-13f5a41/core/js/supersized.3.1.3.core.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function() {

				$.supersized({
					slides	:  [ { image : 'images/bg1.jpg' } ]					
				});
				
		$("a.iframe").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	})
</script>
</head>
<body>

<div id="container">
<h1>Adam Romito</h1>
<h2>Bass Gutair // Nashville,TN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus eleifend neque quis porta. Quisque tortor elit, scelerisque eu fermentum eu, mattis ultrices sapien. Sed varius ligula euismod est sagittis vel condimentum odio blandit. Phasellus sapien odio, laoreet at commodo vel, porta commodo diam. In luctus mauris a leo pharetra eget ornare ligula tristique. Donec sodales faucibus tortor, id porttitor purus lacinia non. In nec lectus urna. Mauris id nulla sem, quis rutrum libero. Etiam elit quam, dignissim laoreet ultricies non, accumsan vitae nunc. Mauris iaculis, libero sed mattis venenatis, enim lectus tincidunt leo, a dignissim elit orci ac libero. Suspendisse justo sapien, commodo sed sodales sed, aliquam at justo. Morbi posuere porttitor cursus. Nam lacus erat, scelerisque tristique tristique commodo, posuere id dui. Morbi luctus libero quis urna semper mollis. Nam in enim et sapien fermentum egestas.
</p>
<div id="addthis">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7eab600ce967d9"></script>
<!-- AddThis Button END -->

</div>

<div id="footer">

<img src="images/adamromitosignature.png" name="signature" width="294" height="100" id="signature" />

<div id="navigation">
<ul>
	<li><a href="url">Home</a></li>
	<li><a class="iframe" href="http://www.google.com/calendar/embed?src=www@www.com&ctz=UTC">Calendar</a></li>
	<li><a href="#">Contact</a> </li>
</ul>

</div>

<div id="socialnetworking"></div>

</div>
</body>
</html>

Open in new window

leakim971-505118.flv
0
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36714256
Its based off of the Supersized plugin. http://buildinternet.com/project/supersized/
bgresize.js
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36714267
ok, I got the latest one, the page work without any error
0
 
LVL 2

Expert Comment

by:maricksville
ID: 36714382
The commented out code you provided:

jQuery(function($){
$.supersized({
slides :  [ { image : 'images/bg1.jpg' } ]					
});
});
</script>

Open in new window


Isnt the Jquery prefix indicating JQuery running in 'no-conflict' mode? I notice that leakim creates the supersized instance differently, wrapping the Supersized in $(document).ready() function {} which also contains the iframe script.

If you try Leakims code form line 12 to line 26 and replace your code from line 19 to line 39 and see how that goes.



0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦
This Micro Tutorial will demonstrate how to use comments in Google Docs. You will learn how to create, edit, and delete a comment.
This Micro Tutorial will demonstrate common damaging and frequent mistakes I see in most analytic audits. Most of them are campaign tagging mistakes, so this video will break it down into simple steps.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question