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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fading in divs from buttons

    Hi all,

    I'm not sure if I'm going about this in the right way. What I'm doing doesn't seem to be working anyway.

    I'm trying to fade in a couple of divs when a button is clicked a fade out the current divs.

    It's all not quite working as planned though. When a button is clicked the current div is not fading out.

    It looks like the 'current' variable is not working.

    The first button pressed works as the 'current' variable is already set but I can't seem to be able to update it with further button clicked.

    Any suggestions? Am i going about this in the wrong way?

    Here's a link to the page:
    http://www.firstspace.co.uk/clients/...e/index_2.html



    Here's my code:

    Code:
    $(function() {
       
          //on click
          $('div.benefit_buttons a').click(function() {
          
          // get id
                var current = '#Content-Display';
                var current_text = '#Content_text-Display';
                var incoming = $(this).attr('id');
             
          //fade in image div and reset current variable
                $(current).fadeOut (1500, function(){
                      $('#Content-'+incoming).fadeIn (1500);   
                      current = '#Content-'+ incoming;
                });
                
          //fade in text div and reset current_text variable
                $(current_text).fadeOut (1500, function(){
                      $('#Content_text-'+incoming).fadeIn (1500);   
                      current_text = '#Content_text-'+ incoming;   
                });
             return false;
          });
       });
    The buttons:



    Code:
    <div class="rightcolumn" id="benefit_buttons">
          
                
                   <div class="benefit_buttons"> <a href="#" id="COMFORT"><img src="images/homepg/benefit_buttons/comfort.jpg" alt="COMFORT" />COMFORT</a></div>
                   
                   <div class="benefit_buttons"> <a href="#" id="CONSISTENCY"> <img src="images/homepg/benefit_buttons/consistency.jpg" alt="CONSISTENCY" />CONSISTENCY</a></div>
                   
                   <div class="benefit_buttons"> <a href="#" id="HYGIENE"><img src="images/homepg/benefit_buttons/hygiene.jpg" alt="HYGIENE" />HYGIENE</a></div>
                   
                   <div class="benefit_buttons">  <a href="#" id="AIR_FLOW"><img src="images/homepg/benefit_buttons/air_flow.jpg" alt="AIR FLOW" />AIR FLOW</a></div>
                   
                   <div class="benefit_buttons"> <a href="#" id="ADAPTABILITY"><img src="images/homepg/benefit_buttons/adaptability.jpg" alt="ADAPTABILITY" />ADAPTABILITY</a></div>
                   
                   <div class="benefit_buttons"> <a href="#" id="ENVIRONMENT"><img src="images/homepg/benefit_buttons/environment.jpg" alt="ENVIRONMENT" />ENVIRONMENT</a></div>
                   
                   <div class="benefit_buttons"> <a href="#" id="SLEEPSCAPE"><img src="images/homepg/benefit_buttons/sleepscape.jpg" alt="SLEEPSCAPE" />SLEEPSCAPE</a></div>
                
          </div>

    and the content:

    Code:
    <div class="rightcolumn" id="benefits">
          
             
             
             <div id="Content-Display">
                <p><img src="images/homepg/hp_start_img.png" alt="Ammique" /></p>
             </div>
    
             
             <div id="Content-COMFORT" class="hidden">
                <p><img src="images/homepg/Comfort.jpg" alt="Comfort" /></p>
             </div>
    
    
             <div id="Content-CONSISTENCY" class="hidden">
                <p><img src="images/homepg/Consistency.jpg" alt="Consistency" /></p>
             </div>
    
    
             <div id="Content-HYGIENE" class="hidden">
                <p><img src="images/homepg/Hygiene.png" alt="Hygiene" /></p>
             </div>
    
    
             <div id="Content-AIR_FLOW" class="hidden">
                <p><img src="images/homepg/AirFlow.jpg" alt="Air Flow" /></p>
             </div>
    
    
             <div id="Content-ADAPTABILITY" class="hidden">
                <p><img src="images/homepg/Adaptability.jpg" alt="Adaptability" /></p>
             </div>
    
    
             <div id="Content-ENVIRONMENT" class="hidden">
                <p><img src="images/homepg/Environment.jpg" alt="Environment" /></p>
             </div>
    
    
             <div id="Content-SLEEPSCAPE" class="hidden">
                <p><img src="images/homepg/Sleepscape.jpg" alt="Sleepscape" /></p>
             </div>
    
             
             
          </div>
    
    
    
       <div id="Content_text-COMFORT" class="hidden">
             <h2>COMFORT</h2>
             
             <p>Thousands of precision engineered components contour to the natural curves of the body making sleep
             a completely new experience.</p>
             </div>
             
             
             <div id="Content_text-CONSISTENCY" class="hidden">
             <h2>CONSISTENCY</h2>
             
             <p>The unique use of stainless steel extension springs within the system ensures that it will not deteriorate
             despite many years of use.</p>
             </div>
             
             
             <div id="Content_text-HYGIENE" class="hidden">
             <h2>HYGIENE</h2>
             
             <p>Designed with hygiene as a priority, the structure is easy-clean throughout with all padding removable
             and washable.</p>
             </div>
             
             
             <div id="Content_text-AIR_FLOW" class="hidden">
             <h2>AIR FLOW</h2>
             
             <p>Within the structure a void allows excellent air circulation, helping to regulate the body’s temperature
             throughout the night. </p>
             </div>
             
             
             <div id="Content_text-ADAPTABILITY" class="hidden">
             <h2>ADAPTABILITY</h2>
             
             <p>Modular construction therefore easy to deliver and simple to lengthen. Outer frame with interchangeable
             decorative items allow for endless styling options. </p>
             </div>
             
             
             <div id="Content_text-ENVIRONMENT" class="hidden">
             <h2>ENVIRONMENT</h2>
             
             <p>Developed and created with environmental sustainability in mind, the unique patented technology is a
             radical leap away from throwaway mattress technology. </p>
             </div>
             
             
             <div id="Content_text-SLEEPSCAPE" class="hidden">
             <h2>SLEEPSCAPE</h2>
             
             <p>State of the art technology as well as optional lighting and audio-visual systems providing a scientifically
             researched and holistic sleep solution.</p>
             </div>

    Any enlightenment greatly appreciated.

  • #2
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok got it working with this thread:


    http://www.codingforums.com/archive/.../t-171655.html


  •  

    Posting Permissions

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