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 to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    [HELP] fadeIn and button swapping.

    DISCLAIMER: as you can see this is homework, I have done nearly all of it I am just stumped on the final bit and require some assistance. If you don't want to help because it is homework; please stop reading and I'm sorry I 've wasted your time.

    Hey guys, just wondering if I could get some help. I am currently wondering why my button wont fade out the 'curtain' image and was also wondering how I could get the button "Open Curtains" to be replaced with "Close Curtains" when clicked (keeping in mind the "Open Curtains" should be the button intially loaded.)

    What I have is as follows:

    Code:
    <!DOCTYPE html>
    <head>
    	<title>Prac 10</title>
    	<script type="text/javascript" src="jquery.js">
    	</script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("#curtain").fadeOut();
      });
      $(".btn2").click(function(){
        $("#transformer").fadeIn();
      });
    });
    </script>
    	<style type="text/css">
    		#curtain
    		{
    		position:absolute;
    		left:10px;
    		}
    		#screen
    		{
    		position:absolute;
    		left:50px;
    		top:150px;
    		}
    		#transformer
    		{
    		position:absolute;
    		left:55px;
    		top:190px;
    		width:385px; 
    		height:35%;
    		}
    	</style>
    </head>
    <body>
    <div style="height:500px" align=center>
    	<img id="transformer" src="images/Transformer4.jpg" />
    	<img id="screen" src="images/Screen.jpg" />
    	<img id="curtain" src="images/Curtain.jpg" />
    </div>
    <div class="buttons" style="margin-left:135px">
    	<button class="btn1">Open Curtain</button>
    	<button class="btn2">Close Curtain</button>
    </div>
    </div>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Totally the wrong forum. This has ZERO to do with MySQL.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Your missing a <html> tag
    Has an extra </div> tag.

    Had to use my images and at first had no buttons. Maybe set the height and width on your images, it's good programming.

    Had to use <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script> in order to get the fade to work. Maybe your js is not where you think it is.

    New code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Prac 10</title>
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
    #curtain
    {
    	position:absolute;
    	left:10px;
    	height: 400px;
    }
    #screen
    {
    	position:absolute;
    	left:50px;
    	top:150px;
    }
    #transformer
    {
    	position:absolute;
    	left:55px;
    	top:190px;
    	width:385px;
    	height:35%;
    }
    .btn1
    {
    	display: block;
    }
    .btn2
    {
    	display: none;
    }
    </style>
    </head>
    <body>
    <div style="height:500px" align=center>
    	<img id="transformer" src="images/Transformer4.jpg">
    	<img id="screen" src="images/Screen.jpg">
    	<img id="curtain" src="images/Curtain.jpg">
    </div>
    <div class="buttons" style="margin-left:5px">
    	<button type="button" class="btn1">Open Curtain</button>
    	<button type="button" class="btn2">Close Curtain</button>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
    
      $(".btn1").click(function(){
        $("#curtain").fadeOut('slow');
    	//$('.btn1').text('Close Curtain');
    	$(this).hide();
    	$('.btn2').show();
      });
    
    	 $(".btn2").click(function(){
        $("#curtain").fadeIn('slow');
    	$(this).hide();
    	$('.btn1').show();
      });
    
    });
    </script>
    </body>
    </html>

  • #4
    Super Moderator guelphdad's Avatar
    Join Date
    Mar 2006
    Location
    St. Catharines, Ontario Canada
    Posts
    2,633
    Thanks
    4
    Thanked 148 Times in 139 Posts
    Quote Originally Posted by Spamsational View Post
    DISCLAIMER: as you can see this is homework, I have done nearly all of it I am just stumped on the final bit and require some assistance. If you don't want to help because it is homework; please stop reading and I'm sorry I 've wasted your time.
    As an FYI, for this or other forums, you are most likely to get help because of the following reasons:

    a) you've labeled it as homework
    b) most importantly, you've shown that you've attempted to do the work yourself and now need help solving some part to get a conclusive answer.

    Many people who post homework don't bother to do either.

    But do check you are in the right forum when posting. Thread has been moved from MySQL forum.
    Last edited by guelphdad; 05-22-2012 at 09:49 PM.


  •  

    Tags for this Thread

    Posting Permissions

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