Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Can Someone Help Me Understand How To Run More Than One Script?

    Hello,

    I have been scratching my head through different iterations of combining scripts for my site today and by now my hair is standing up like a mad professor!

    I am a pretty quick-learner, but still very much a newbie to JQuery and CSS.

    I keep having issues when trying to combine more than one JQuery function on my pages.

    Right now, I have a conflict between SqueezeBox and the JQuery-min file... In this example (http://santamarinas.com/RS/Tests/GFRG/index12.html), the Nivo slideshow requires Jquery-min,

    However, whenever I put jquery back in (example: http://santamarinas.com/RS/Tests/GFRG/index13.html), the squeezebox plugin stops working.

    Once I comment out the jquery-min (as I have done in the first example), squeezebox works fine.

    I have come to the conclusion that I have a fundamental lack of knowledge of how to integrate more than one script.

    I would greatly appreciate it if someone could explain to me how to properly run more than one script on a page since I continuously run into this issue.

    Thank you!!

    Below is my code:

    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=iso-8859-1"></meta>
    <title>Gluten Free Reviewer Grocery</title>
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    
    <!-- dynamic assets --> 
    	<link rel="stylesheet" type="text/css" href="css/SqueezeBox.css" /> 
    	<script type="text/javascript" src="js/mootools-1.2-core-nc.js"></script> 
    	<script type="text/javascript" src="js/SqueezeBox.js"></script> 
    	<script type="text/javascript"> 
    		/* <![CDATA[ */
     
    window.addEvent('domready', function() {
    
    
    
    	/**
    
    	 * That CSS selector will find all <a> elements with the
    
    	 * class boxed
    
    	 *
    
    	 * The example loads the options from the rel attribute
    
    	 */
    
    	SqueezeBox.assign($$('a.boxed'), {
    
    		parse: 'rel'
    
    	});
    
    
    
    });
    		/* ]]> */
    	</script> 
    
    
    
    <style type="text/css"> html, body { background:url(images/bg.jpg); width: 1000px; margin-right: auto; margin-left: auto; margin-top:0px; padding: 0px; border: 0px; } 
    
    	#container2 { height: auto; width: 1000px; margin: 0 0 0 0px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    	#container2 #col1 { background:url(images/bg.jpg); height: auto; width: 700px; float: left; } 
    
    	#container2 #col2 { background:url(images/bg.jpg); margin-top: 10px; height: auto; width: 300px; float: right; } 
    
    	#header_division { 
    		background-image: 
    		url('images/vline.png'); 
    		background-repeat: repeat-y; 
    		position: absolute;
    		margin-top: 15px;
    		margin-left: 935px;
    		width: 5px;
    		height: 185px;
    		float: right
    		}
    
    	#facebook {  
    		position: absolute;
    		margin-top: 30px;
    		margin-left: 945px;
    		float: right
    		}	
    		
    	#twitter {  
    		position: absolute;
    		margin-top: 90px;
    		margin-left: 945px;
    		float: right
    		}	
    		
    	#contact-form {  
    		position: absolute;
    		margin-top: 150px;
    		margin-left: 945px;
    		float: right
    		}
    
    	#spacer { background: #000; width: auto; height: 33.5px; 
    		text-align: center;
    		color: #ffcc00;
    		}
    
    	#slider {
    		text-align: center;
    		margin-left: 0px;
    		margin-right: auto;
    		margin-top: 10px;
    		}
    
    </style> 
    
    
    <style type="text/css" media="screen">
    
    	/**************** menu coding *****************/
    	#menu {
    	width: 1000px;
    	background: #CCC;
    	margin: auto;
    	}
    
    	#menu ul {
    	list-style: none;
    	margin: auto;
    	padding: 0;
    	width: 250px;
    	float: left;
    	}
    
    	#menu a, #menu h2 {
    	font: 12px/16px arial, helvetica, sans-serif;
    	text-transform: uppercase;
    	display: block;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #111 #888 #555 #bbb;
    	margin: 0;
    	padding: 2px 3px;
    	}
    
    	#menu h2 {
    	color: #000;
    	background: #ccc;
    	text-transform: uppercase;
    	}
    
    	#menu a {
    	color: #FFF;
    	background: #631598;
    	text-decoration: none;
    	}
    
    	#menu a:hover {
    	color: #000;
    	background: #ff7102;
    	}
    
    	#menu li {position: relative;}
    
    	#menu ul ul {
    	position: absolute;
    	z-index: 500;
    	}
    
    	#menu ul ul ul {
    	position: absolute;
    	top: 0;
    	left: 100%;
    	}
    
    	div#menu ul ul,
    	div#menu ul li:hover ul ul,
    	div#menu ul ul li:hover ul ul
    	{display: none;}
    
    	div#menu ul li:hover ul,
    	div#menu ul ul li:hover ul,
    	div#menu ul ul ul li:hover ul
    	{display: block;}
    
    	#notice {
    		font: 10px arial;
    	}
    
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    }
    
    #menu ul li a {height: 1%;} 
    
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    }
    </style>
    <![endif]-->
    
    
    
    
    </head>
    
    
    
    <body>
    
    <div id="header_division"></div>
    
    <div id="facebook">
    	<a href="facebook.html" class="boxed" rel="{handler:'iframe',size:{x:220,y:450}}"> <img src="images/facebook.png"></a>
    </div>
    
    <div id="twitter">
    	<a href="twitter.html" class="boxed" rel="{handler:'iframe',size:{x:220,y:450}}"><img src="images/twitter.png"></a>	
    </div>
    
    
    <div id="contact-form">
    	<a href="data/contact.php" class="boxed" rel="{handler:'iframe',size:{x:420,y:450}}"><img src="images/email.png"></a>
    
    </div>
    
    <img src="images/TopHeader.JPG" width="1000" height="207" alt="GFR" />
    
    
      <!-- start menu HTML -->
    
    <!-- BEGIN NAVIGATION MENU -->
    
    <div id="menu">
    	<ul>
    	  <li><a href="index.html">Home</a>
    	  </li>
    	</ul>
    
    	<ul>
    
    	  <li><a href="about.html">About Us</a>
    		<ul>
    		  <li><a href="about/about-WIG.html" title="What Is Gluten?">What Is Gluten?</a></li>
    		  <li><a href="about/about-AU.html" title="About Us">About Us</a></li>
    		  <li><a href="about/about-AOR.html" title="About Our Reviews">About Our Reviews</a></li>
    		  <li><a href="about/about-CI.html" title="Contact Information">Contact Information</a></li>
    		</ul>
    	  </li>
    	</ul>
    
    
    	<ul>
    	  <li><a href="community.html">Community</a>
    
    		<ul>
    		
    		  <li><a href="community/community-EAG.html" title="Events @ Gluten Free Reviewer Grocery">Events @ GFRG</a></li>
    		  <li><a href="community/community-LE.html" title="Local Events">Local Events</a></li>
    		  <li><a href="community/community-JU.html" title="Join Us">Join Us</a></li>
    
    		</ul>
    	  </li>
    	</ul>	
    
    	  
    	<ul>
    	  <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="Our Blog">Blog</a></li>
    	</ul>
    			
    </div>
    
    <!-- END NAVIGATION MENU -->
    
    
    
    <div id="container2">
    
    	<div id="col1">
            
                <div id="slider" class="nivoSlider">
                    <img src="images/060311-1.JPG" alt="" title="DOT: Gluten Free Ingredients: ___________ 06/02/11... for more information, tweet us..." />
                    
                    <img src="images/060311-2.JPG" alt="" title="This is an example of a caption 2" />
                    <img src="images/060311-3.JPG" alt="" title="#htmlcaption" />
                    <img src="images/060311-4.JPG" alt="" title="#htmlcaption" />
                    <img src="images/060311-5.JPG" alt="" title="#htmlcaption" />
                  
                    
                    
         		</div>
         
            <div id="htmlcaption" class="nivo-html-caption">
                 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
     
               
            <div id="notice" align="left">
    			Copyright © 2011 Gluten Free Reviewer Grocery 
            </div>   
            
       </div>
            
            
          
    	<div id="col2">
    
            <img src="images/store/store8.jpg" width="300" height="200"/>
    	
    		<div id ="spacer"><h3>CLICK HERE FOR A TOUR OF OUR STORE</h3></div>
            
            <iframe style="position:relative; left:0px; top:0px; z-index:1" width="300" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=600+Illinois+Street,+San+Francisco,+CA&amp;sll=37.76416,-122.388142&amp;sspn=0.011382,0.020642&amp;ie=UTF8&amp;hq=&amp;hnear=600+Illinois+St,+San+Francisco,+California+94107&amp;ll=37.76416,-122.388142&amp;spn=0.01145,0.020642&amp;z=14&amp;output=embed" target="_blank"></iframe>
            
    		<div id ="spacer">MAP OF STORE</div>
    
    	</div>
            
            
                  
    </div>
          
            
    <!-- Slider JS -->    
    <!--<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    
    
    
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
            slices:15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed:500, // Slide transition speed
            pauseTime:2500, // How long each slide will show
            startSlide:0, // Set starting Slide (0 index)
            directionNav:false, // Next & Prev navigation
            directionNavHide:true, // Only show on hover
            controlNav:false, // 1,2,3... navigation
            controlNavThumbs:false, // Use thumbnails for Control Nav
            controlNavThumbsFromRel:false, // Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', // Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
            keyboardNav:true, // Use left & right arrows
            pauseOnHover:true, // Stop animation while hovering
            manualAdvance:false, // Force manual transitions
            captionOpacity:0.8, // Universal caption opacity
            prevText: 'Prev', // Prev directionNav text
            nextText: 'Next', // Next directionNav text
            beforeChange: function(){}, // Triggers before a slide transition
            afterChange: function(){}, // Triggers after a slide transition
            slideshowEnd: function(){}, // Triggers after all slides have been shown
            lastSlide: function(){}, // Triggers when last slide is shown
            afterLoad: function(){} // Triggers when slider has loaded
        });
    });
    
    </script>
    
    	
    </body>
    </html>

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    so I've been able to resolve this one after reading through several forums by using the following:

    1. Adding

    Code:
    <script type="text/javascript" src="js/noconflict.js"></script>
    2. Which points to a file that contains the following code:
    Code:
    jQuery.noConflict();
    var $j = jQuery;
    3. Then I replaced the NivoSlider "$" with "$j", but left the squeezebox variables as "$"

    This seems to work so far, but I don't fully understand why. I would think that the code I inserted would make it that the "$" variable would not use JQuery functionality at all...

    Can someone help clarify this?

    Thanks!

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,798
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    OK, first and foremost: You shouldn’t use several different JS frameworks in one document. Here you are using mootools for Squeezebox and jQuery for the slider. The problem with this is that both frameworks use the dollar character for their functions so no wonder this causes issues since each framework thinks it can run a certain function while they are clearly only written for a certain framework.

    So, if you wanna do things right then scrap one of both frameworks (either mootools or jQuery) and use a plugin for either of those scripts (slider and Squeezebox) that works with the chosen framework. I’m sure there is something for what you want in either framework.

    Now, to your second question: In jQuery the dollar character is a shorthand for the jQuery() function which is the mother of all functions (as in mootools). Since the dollar is used in both frameworks this will lead to conflicts. With the jQuery no conflict function you can change the function name jQuery() and therefore $() to anything you like. This means if you’ve done that and continue using the $() function then the function won’t react to jQuery anymore (but rather to mootools in your case) since the function isn’t defined anymore (you changed the namespace).

  • Users who have thanked VIPStephan for this post:

    rsantamarina (06-05-2011)

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    VIPStephan,

    Thank you! That is very helpful in clarifying what I did.

    I will try to find both functions within the same framework as you suggested.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •