Jump to content

Welcome to MSFN Forum
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. This message will be removed once you have signed in.
Login to Account Create an Account


Photo

jQuery Help

- - - - -

  • Please log in to reply
No replies to this topic

#1
Cyber Axe

Cyber Axe

    Geek

  • Member
  • Pip
  • 65 posts
  • Joined 13-December 03
What I am attempting to do is when the appropriate DIV is clicked it adds a class that the CSS tells it how to display that bit works fine.

What doesn't work is the fadeout that is supposed to occur after that #HeaderFade is the parent of #Header, what should happen is that the #HeaderFade's class is changed to the class that will display the appropriate background then #Header should be set to the same class afterwards so that it displays the same image after the fadeout occurs, then #Header is "invisibly" faded back in so that the next time it is clicked it will work for the next set of images.

I've also been unable to figure out how to stop the previous delayed action from the previous click to stop if you click on another one so that it doesn't result in sporadic time changing.

I know the following code is rather inefficient since I'm manually setting an event per ID instead of creating one function that can dynamically do it for each div but I've yet to figure out the best way to do stuff like that in jQuery.

<div id="HeaderFade"><div id="Header" class="HeaderOffer1"><div id="Header-Overlay"><div id="Logo"><a href="#"><img src="m/t.png" title="Stephen Clark Fitness: Perthshire and Tayside personal training." alt="Stephen Clarke Fitness Logo" /></a></div><div id="OffersContainer">
    <div id="Offers">
      <div id="OfferContent">
        <p id="Offer1Text" class="OfferText"><a href="#">Stephen Clarke fitness are now the health and fitness experts for Radio Tay and Perthshire online TV.</a></p>

        <p id="Offer2Text" class="OfferText Inactive"><a href="#">Read more about our Dundee Personal Training here.</a></p>
        <p id="Offer3Text" class="OfferText Inactive"><a href="#">The route to success begins with a KICKSTART, Full consultation, health check, nutrition review and exercise programme for just £80.</a></p>
        <div id="OffersBox">
          <div id="Offer1" class="Offer OfferActive"></div>
          <div id="Offer2" class="Offer"></div>
          <div id="Offer3" class="Offer"></div>
        </div>

      </div>
    </div>
  <script type="text/javascript">
   $('#Offer1').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer1Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer2');
     $('#HeaderFade').removeClass('HeaderOffer3');
     $('#HeaderFade').addClass('HeaderOffer1');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer2');
       $('#Header').removeClass('HeaderOffer3');
       $('#Header').addClass('HeaderOffer1');
       $('#Header').fadein('fast');
     });

     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer2').trigger("click"); 
       $(this).dequeue();
     });
   });
   $('#Offer2').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer2Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer1');
     $('#HeaderFade').removeClass('HeaderOffer3');
     $('#HeaderFade').addClass('HeaderOffer2');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer1');
       $('#Header').removeClass('HeaderOffer3');
       $('#Header').addClass('HeaderOffer2');
       $('#Header').fadein('fast');
     });

     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer3').trigger("click"); 
       $(this).dequeue();
     });
   });
   $('#Offer3').click(function(){
     $('.OfferText').addClass('Inactive');
     $('.Offer').removeClass('OfferActive');    	
     $(this).addClass('OfferActive');
     $('#Offer3Text').removeClass('Inactive');
     $('#HeaderFade').removeClass('HeaderOffer1');
     $('#HeaderFade').removeClass('HeaderOffer2');
     $('#HeaderFade').addClass('HeaderOffer3');

     $('#Header').fadeout(400, function() {
       $('#Header').removeClass('HeaderOffer1');
       $('#Header').removeClass('HeaderOffer2');
       $('#Header').addClass('HeaderOffer3');
       $('#Header').fadein('fast');
     });
 
     $('#Offer1').clearQueue();
     $('#Offer2').clearQueue();
     $('#Offer3').clearQueue();

     $(this).delay(7000).queue(function(){ 
       $('#Offer1').trigger("click"); 
       $(this).dequeue();
     });
   });
   $(document).ready(function() {
     $('#Offer2').delay(7000).queue(function(){ 
       $('#Offer2').trigger("click"); 
       $(this).dequeue();
     });
   });
  </script>
</div>

Thanks


How to remove advertisement from MSFN



0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users



How to remove advertisement from MSFN