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 to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Function not resetting - Sooo close...big time Novice here could use some help!

    Ok, so I'm probably over my head here, but I am so close, thought someone here might be able to help me. First the issue...to see the issue (and you really need to see it to understand it):
    1. Go to www.marvinsgardenspot.com/Photo-Gallery.html
    2. Notice that when you click on "Halloween 2008" that you can navigate through the pictures on the right panel...and everything works groovy.
    3. When you click on the menu item "Halloween again", then you can no longer navigate through the images. I need to reset, or clear an array, or something...but I am a serious novice at this, and frankly can't believe I got this far

    My HTML Code looks like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta name="verify-v1" content="jC8bRNMHuWPNxuyQIGhGXVknUg//vmTli/AGaA3d34Y=" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Marvin's Garden Spot - Quality Farm Market in the Interlochen area</title>
    <meta name="description" content="Locally grown produce, fresh fruits, flowers, and a variety of bedding plants all await you at Marvin's Garden Spot!" />
    <meta name="keywords" content="Produce, fruits, vegetables, traverse city, lake ann, interlochen, farm market, farmers market, local farmer, flowers, bedding plants" />
    <link href="marvingardenspot.css" rel="stylesheet" type="text/css" />
    
    <script src="jquery-1.1.2.js" type="text/javascript"></script>
    </head> 
    
    <body>
    <div id="top"></div>
    <div id="container">	
    <div id="wrapper">
    <div id="header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            width="766" height="320">
        <param name="movie" value="flash/marvins-gardenspot-flash-header.swf?button=0" />
        <param name="quality" value="high" />
        <param name="menu" value="false" />
        <!--[if !IE]> <-->
    		  <object data="flash/marvins-gardenspot-flash-header.swf?button=0" width="765" height="320" type="application/x-shockwave-flash">
    		  <param name="quality" value="high">
    		  <param name="menu" value="false">
    		  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
    		  FAIL (the browser should render some flash content, not this).
    		  </object>
    		  <!--> <![endif]-->
      </object>
    </div>	
    <div id="maincontent">
    			  <div id="leftside">
                        <img src="images/Photo-Gallery.jpg" alt="Marketplace Photos from Marvin's Garden Spot" width="195" height="41"/>
               	  <h5>Events</h5>
                    <div id="navigation">
                    <ul>
                        <li id="panel1_link"><a href="#panel1">Halloween 2008</a></li>
                        <li id="panel2_link"><a href="#panel2">Halloween again</a></li>
                        <li id="panel3_link"><a href="#panel3">Panel 3</a></li>
                        <li id="panel4_link"><a href="#panel4">Panel 4</a></li>
                        <li id="panel5_link"><a href="#panel5">Panel 5</a></li>
                    </ul>
                    <h5>Market Photos</h5>
                    <ul>    
                        <li id="panel20_link"><a href="#panel20">Greenhouse Photos</a></li>
                        <li id="panel21_link"><a href="#panel21">Panel 21</a></li>
                        <li id="panel22_link"><a href="#panel22">Panel 22</a></li>
                        <li id="panel23_link"><a href="#panel23">Panel 23</a></li>
                        <li id="panel24_link"><a href="#panel24">Panel 24</a></li>
                    </ul>
    				</div>                       
                          
                        
    </div>  <!-- leftside Div-->
    
    <div id="middle">
                    
     <div id="panels">
     <div id="gallery">
       <div id="panel1">  <!-- Beginning of Panel 1 DIV ---->
       <h1 align="center">Halloween 2008 was Spooktacular!</h1>
    	
                          <ul>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="1">1</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="2">2</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="3">3</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="4">4</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="5">5</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="6">6</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="7">7</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="8">8</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="9">9</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="10">10</a></li>
                          </ul>
      <div id="image"><img src="images/Halloween-Marvins-Garden-Spot2.jpg" alt="Halloween Inside the Market!" /></div>
      <script type="text/javascript">
    // <![CDATA[
      $(document).ready(
        function(){
          init("#image");
        }
      );
      function init(target){
        $('a').each(
          function() {
            if(this.getAttribute('href') &&
              (this.getAttribute('rel') == 'pagination')) {
              this.onclick = function(){
                $(target).html('<img src="' + this.href +
                               '" alt="' + this.getAttribute("title") +
                               '" title="' + this.getAttribute("title") +
                               '" />');
                return false;
              }
            }
          }
        );
      }
    // ]]>
    </script>
    
          </div>  <!-- end of Panel 1 DIV ---->
    
        	<div id="panel2">   <!-- Beginning of Panel 2 DIV ---->
    			<h1 align="center">Halloween 2008 was Spooktacular!</h1>
                <ul>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="11">1</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="12">2</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="13">3</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="14">4</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="15">5</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="16">6</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="17">7</a></li>
                            <li><a href="images/Halloween 2008.jpg"
                                   title="Employees Get in on the FUN!" rel="pagination" tabindex="18">8</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot.jpg"
                                   title="Scarey things happening at Marvin's Garden Spot" rel="pagination" tabindex="19">9</a></li>
                            <li><a href="images/Halloween-Marvins-Garden-Spot2.jpg"
                                   title="Halloween Inside the Market!" rel="pagination" tabindex="20">10</a></li>
                          </ul>
    	<div id="image"><img src="images/Halloween-Marvins-Garden-Spot.jpg" alt="Halloween Inside the Market!" /></div>
        <script type="text/javascript">
    // <![CDATA[
      $(document).ready(
        function(){
          init("#image");
        }
      );
       function init(target){
        $('a').each(
          function() {
            if(this.getAttribute('href') &&
              (this.getAttribute('rel') == 'pagination')) {
              this.onclick = function(){
                $(target).html('<img src="' + this.href +
                               '" alt="' + this.getAttribute("title") +
                               '" title="' + this.getAttribute("title") +
                               '" />');
                return false;
              }
            }
          }
        );
      }
    // ]]>
    </script>
    		</div>  <!-- Ending of Panel 2 DIV ---->
    		<div id="panel3">
    			<h1>Panel 3</h1>
    			<p>This is panel 3.</p>
    		</div>
    		<div id="panel4">
    			<h1>Panel 4</h1>
    			<p>This is panel 4.</p>
    		</div>
    		<div id="panel5">
    			<h1>Panel 5</h1>
    			<p>This is panel 5.</p>
    		</div>
            <div id="panel20">
    			<h1>Panel 20</h1>
    			<p>This is panel 20.</p>
    		</div>
    		<div id="panel21">
    			<h1>Panel 21</h1>
    			<p>This is panel 21.</p>
    		</div>
    		<div id="panel22">
    			<h1>Panel 22</h1>
    			<p>This is panel 22.</p>
    		</div>
    		<div id="panel23">
    			<h1>Panel 23</h1>
    			<p>This is panel 23.</p>
    		</div>
            <div id="panel24">
    			<h1>Panel 24</h1>
    			<p>This is panel 24.</p>
    		</div> <!-- Ending of the last individual panel (24 in this case) DIV ---->
    	
        </div>
    
    
        </div><!-- end of All Panels DIV ---->
      <script type="text/javascript" src="ChangingPanels.js"></script>  
        </div><!-- end of middle DIV ---->
      </div> <!-- main content Div-->			
    </div> <!-- Wrapper Div-->
    
    <div id="footer-spacer"></div>
    </div> <!-- Container Div-->
    
    						<!-- Footer Content -->	
    						<div id="footerwrap">
      							<div id="footer">
    							<div class="c_text">
    							<SCRIPT LANGUAGE="JavaScript" src="footer.js">
    							</script>
    							</div>
      							</div>
    						</div>
    						<!-- End Footer Content -->	
    
    <!-- Google Analytics Code Begins -->	
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-7915419-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>	
    <!-- Google Analytics Code ends -->	
    </body>
    </html>
    My CSS code for this area is:
    Code:
    #gallery{
          margin:5px 0 0;
          font-weight:bold;
    	  text-align:center;
    	  }
    	  
    #image{
          margin:5px 0 0;
          font-weight:bold;
    	  text-align:center;
    	  }
      
    #gallery li{
          display:inline;
        }
    	
      #gallery ul{
          margin:0 0 10px;
          padding:0;
          list-style-type:none;
        }
    
    #gallery img, #gallery a{
          margin:0;
          padding:6px;
          border:1px solid #DDD;
        }
    #gallery a{
          margin:0;
          padding:5px 8px;
          text-decoration:none;
          color:#000;
          background:#F1F1F1;
        }
    
        #gallery a:hover, #gallery .selected{
          color:#000;
          background:#E1E1E1;
        }
    I'm not sure what else you might need to see. I am sure it is something really basic, but I just can't figure it out.

    Alan

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    At a first glance... you have 2 divs with the same id - image. At a second, duplicating instances of $(document).ready and function init(target)

    Remove the second instance of your copy/pasted javascript, change the id of the second image div to image2... and after that, alter your links to do the following:
    Code:
    <li id="panel1_link"><a href="#panel1" onclick="init('#image')">Halloween 2008</a></li>
    <li id="panel2_link"><a href="#panel2" onclick="init('#image2')">Halloween again</a></li>
    If you need more help with it, let me know, though I tested the solution and it definitely works as intended.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • Users who have thanked Eldarrion for this post:

    Allllan (03-17-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    You are AWESOME!

    Thank you so much! It works perfectly.

    Thank you thank you thank you!


  •  

    Posting Permissions

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