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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Nivo-Slider vs. SimpleModal... Conflict? Or Loading Issue?

    Hello Everyone,

    I am attempting to integrate both Nivo-Slider (http://nivo.dev7studios.com/) and SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) scripts in my page and for some reason I am unable to get them to work together...

    The SimpleModal code works fine on its own when uploaded to my webserver, but as soon as I try to integrate it into my code containing NivoSlider, it does not work.

    My expertise is somewhat limited, but there must be something that I am missing which properly calls the functions. I would greatly appreciate any assistance!!

    Here is my current (stuck) progress: http://santamarinas.com/RS/Tests/GFRG/index3.html

    Below is my code (please forgive the somewhat chaotic state as I have been experimenting with various items):

    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" />
    
    <!-- Contact Form CSS files -->
    <link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />
    
    
    
    
    <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: #ffcc00; height: auto; width: 700px; float: left; } 
    
    #container2 #col2 { background: #ffcc00; margin-top: 10px; height: auto; width: 300px; 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">
    
    body {
    	text-align: center;
    	margin: auto;
    	background-color: #FFF;
    }
    
    
    
    
    
    #sliderSide {
    	position: relative;
    	text-align: center;
    	margin-left: 695px;
    	margin-top: -482px;
    }
    
    
    #sliderSide2 {
    	position: relative;
    	text-align: center;
    	margin-left: 698px;
    	margin-top: -701px;
    }
    
    
    #sliderSide3 {
    	position: relative;
    	text-align: center;
    	margin-left: 0px;
    	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>
    
    
    <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>
          
    <!--
          <li><a href="vs7.html" title="Complete Example">Further SubMenus</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
                <ul>
    
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
    
              </li>
            </ul>
          </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>
    
    <!--
    <div>
    <iframe allowtransparency="true" frameborder="0" scrolling="yes" src="http://www.glutenfreereviewer.com/" style="border: medium none; overflow: shown; width: 1000px; height: 1000px;"></iframe>
    </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 id='container'>
    	<div id='logo'>
    		<h1>Simple<span>Modal</span></h1>
    		<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
    	</div>
    	<div id='content'>
    		<div id='contact-form'>
    			<h3>Contact Form</h3>
    			<p>A contact form built on SimpleModal. Demonstrates the use of the <code>onOpen</code>, <code>onShow</code> and <code>onClose</code> callbacks, as well as the use of Ajax with SimpleModal.</p>
    			<p>To use: open <code>data/contact.php</code> and modify the <code>$to</code> and <code>$subject</code> values. To enable/disable information about the user, configure the <code>$extra</code> array.</p>
    			<p><strong>Note:</strong> This demo must be run from a web server with PHP enabled.</p>
    			<input type='button' name='contact' value='Demo' class='contact demo'/> or <a href='#' class='contact'>Demo</a>
    		</div>
    		<!-- preload the images -->
    		<div style='display:none'>
    			<img src='img/contact/loading.gif' alt='' />
    		</div>
    	</div>
    
    </div>
    		
    		
            </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>
    
    
    <!-- SmipleModal CONTACT SCRIPT -->
    <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
    <script type='text/javascript' src='js/contact.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>

    Thank you in advance for your help!!

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    hmm... an observation:

    When I remove the jquery min script and put in the full jquery.js, the SimpleModal contact form works (but the nivo slider does NOT)...

    I thought that jquery and jquery min were the exact same thing just one was compressed.

    Here is the file with jquery instead of the min version: http://santamarinas.com/RS/Tests/GFRG/index3-1.html

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have also noticed this issue. I have a css drop down menu that works fine in IE6 when using the non-minified version, but using the minified version of jquery, it stops working.

    Actually, I was wrong, both versions break my css menu. However, if I place <script src="/libs/jquery.js" ></script> ABOVE the css rather than below it, everything works fine.

    Oddness
    Last edited by Nitronium; 07-20-2011 at 06:47 PM.


  •  

    Posting Permissions

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