0
   

Browser not outputting textbox nor submit button

 
 
Frank86
 
Reply Wed 28 Jan, 2015 04:45 pm
Hello everyone. I have written a CSS/HTML/JavaScript code which SHOULD show the image icons of three cars, and when you click on an individual icon, a textbox SHOULD appear underneath that icon and you should be able to write your comments in it and submit it. BUT, what is happening is that the image icons are appearing but when the cursor is placed on the icon, NOTHING happens. The textbox and submit button do not appear. Could someone please tell me what I'm doing wrong?


<!DOCTYPE html>

<?php

$number_of_days = 30 ;
$date_of_expiry = time() + 60 * 60 * 24 * $number_of_days ;
setcookie('name', $name, $date_of_expiry );

?>

<html>
<head>
<style>

body {
background-color: #ADD8E6;
}

#form {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.car {
float: left;
margin: 2% 2% 5% 2%;
}

.car label img {
transform: scale(0.8);
transition-duration: 0.2s;
}

.car label img:hover {
cursor: pointer;
transform: scale(1);
}

.comment {
position: absolute;
visibility: hidden;
}

.comment input {
width: 128px;
font-size: 1em;
}

.car label img {
width: 128px;
display: block;
}

#button {
position: relative;
left: 66%;
margin: 2%;
visibility: hidden;
}

</style>
</head>
<body>

<div id="form">
<form method="post" action="#">

<div class="car">
<label for="mercedesbenz">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="mercedesbenz" placeholder="Merc" />
</div>
</div>
<div class="car">
<label for="porche">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="Porche" placeholder="Porc" />
</div>
</div>
<div class="car">
<label for="bmw">
<img src="http://tinyurl.com/on964r9">
</label>
<div class="comment">
<input type="text" id="bmw" placeholder="Beemer" />
</div>
</div>
<input id="button" type="submit" name="submit" value="Submit">
</form>
</div>


<script>
$('.car').click(function() {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");

var id = $(this).children('label').attr('for');
var buttonOffset;
switch(id) {
case 'mercedesbenz':
buttonOffset = '0';
break;
case 'porche':
buttonOffset = '33%';
break;
case 'bmw':
buttonOffset = '66%';
break;
}

$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});

$('.comment').mouseleave(function() {
setTimeout(function () {
$('.comment').css("visibility", "hidden");
$('#button').css("visibility", "hidden");
}, 500);
});

</script>

</body>
</html>


URL: http://able2know.org/post/ask/
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Question • Score: 0 • Views: 1,664 • Replies: 1
No top replies

 
cicerone imposter
 
  1  
Reply Wed 28 Jan, 2015 05:48 pm
@Frank86,
Try a reboot.
0 Replies
 
 

Related Topics

 
  1. Forums
  2. » Browser not outputting textbox nor submit button
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 04/23/2019 at 09:49:55