Browser not outputting textbox nor submit button

Forums: Html, Css, Javascript
Email this Topic • Print this Page

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/

Browser not outputting textbox nor submit button

Related Topics

Quick Links

My Account

able2know