...

View Full Version : [HELP] fadeIn and button swapping.



Spamsational
05-20-2012, 05:41 PM
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:


<!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>

Old Pedant
05-20-2012, 10:51 PM
Totally the wrong forum. This has ZERO to do with MySQL.

sunfighter
05-21-2012, 11:38 PM
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:

<!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>

guelphdad
05-22-2012, 08:18 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum