user3649377 user3649377 - 2 months ago 6
HTML Question

click area problems with a div in javascript

I'm new with javascript, I've made some customize buttons with

<div>
and css style, the mouseover, mouseout and click events are controlled with Javascript. These events works relatively well but the click area is not working. Instead of work with all the button size, the click area is a small portion on the top of the
<div>
. How can I correct the click area to work with all the button?

This is the HTML, CSS and JavaScript code I'm using.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customize Button</title>
<!--import stylesheet -->
<link rel="stylesheet" type="text/css" href="botonesStyles.css">
</head>
<body>
<section class="services-wrap">

<div class="service-button" id="service_account" >
<span id="serviceA-text" class="service-button-text">ACCOUNT
TO ACCOUNT</span>
</div>

<div class="service-button" id="service_credit">
<span id="serviceB-text" class="service-button-text">CREDIT
CARD</span>
</div>

<div class="service-button" id="service_cash">
<span id="serviceC-text" class="service-button-text">WORLD
CASH</span>
</div>

<div class="service-button" id="service_exchange">
<span id="serviceC-text" class="service-button-text">EXCHANGE
UPDATES</span>
</div>



<div class="service-text-wrap">
<div id="service-account-wrap" class="service-account-wrap">
<span class="service-text"> Transfer money between accounts
in different currencies as one-time or recurrent transactions.</span>
</div>


<div id="service-credit-wrap" class="service-credit-wrap">
<span class="service-text"> Send money to your foreign credit
cards. Or use your local credit card to send cash worldwide. </span>
</div>


<div id="service-world-wrap" class="service-world-wrap">
<span class="service-text"> From your account or credit card
transfer money and collect it in cash at selected destination. </span>
</div>


<div id="service-exchange-wrap" class="service-exchange-wrap">
<span class="service-text"> Receive notification via email on
the exchange rate that meets your criteria free of charge. </span>
</div>

<script type="text/javascript">


//text variables to set it true or false
var t1 = 0;


var x1 = document.getElementById("service-account-wrap");
var x2 = document.getElementById("service-credit-wrap");
var x3 = document.getElementById("service-world-wrap");
var x4 = document.getElementById("service-exchange-wrap");


/* Add Event Listener for all service buttons */

document.getElementById("service_account").addEventListener("mouseover", showtextAccount);
document.getElementById("service_account").addEventListener("mouseout", hidetextAcount);
document.getElementById("service_account").addEventListener("click", clickAccount);

document.getElementById("service_credit").addEventListener("mouseover", showtextCredit);
document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit);
document.getElementById("service_credit").addEventListener("click", clickCredit);

document.getElementById("service_cash").addEventListener("mouseover", showtextCash);
document.getElementById("service_cash").addEventListener("mouseout", hidetextCash);
document.getElementById("service_cash").addEventListener("click", clickCash);

document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange);
document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange);
document.getElementById("service_exchange").addEventListener("click", clickExcahnge);

function showtextAccount() {
x1.style.display ="block";
x2.style.display = "none";
x3.style.display = "none";
x4.style.display = "none";
this.style.backgroundColor ="#7b3454";
}
function showtextCredit() {
x1.style.display ="none";
x2.style.display = "block";
x3.style.display = "none";
x4.style.display = "none";
this.style.backgroundColor ="#7b3454";
}
function showtextCash() {
x1.style.display ="none";
x2.style.display = "none";
x3.style.display = "block";
x4.style.display = "none";
this.style.backgroundColor ="#7b3454";
}
function showtextExchange() {
x1.style.display ="none";
x2.style.display = "none";
x3.style.display = "none";
x4.style.display = "block";
this.style.backgroundColor ="#7b3454";

}

function hidetextAcount() {
x1.style.display = "none";
document.getElementById("service_account").style.backgroundColor ="#1f1e20";

}

function hidetextCredit() {

x2.style.display = "none";
document.getElementById("service_credit").style.backgroundColor ="#1f1e20";
}
function hidetextCash() {
x3.style.display = "none";
document.getElementById("service_cash").style.backgroundColor ="#1f1e20";
}
function hidetextExchange() {
x4.style.display = "none";
document.getElementById("service_exchange").style.backgroundColor ="#1f1e20";
}

function clickAccount() {
t1 = 1;
document.getElementById("service_account").removeEventListener("mouseover", showtextAccount);
document.getElementById("service_account").removeEventListener("mouseout", hidetextAcount);


document.getElementById("service_credit").addEventListener("mouseover", showtextCredit);
document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit);


document.getElementById("service_cash").addEventListener("mouseover", showtextCash);
document.getElementById("service_cash").addEventListener("mouseout", hidetextCash);


document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange);
document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange);


x1.style.display ="block";
x2.style.display = "none";
x3.style.display = "none";
x4.style.display = "none";
document.getElementById("service_account").style.backgroundColor ="#f27a20";
document.getElementById("service_credit").style.backgroundColor ="#1f1e20";
document.getElementById("service_cash").style.backgroundColor ="#1f1e20";
document.getElementById("service_exchange").style.backgroundColor ="#1f1e20";
}

function clickCredit() {
t1 =2;
document.getElementById("service_account").addEventListener("mouseover", showtextAccount);
document.getElementById("service_account").addEventListener("mouseout", hidetextAcount);


document.getElementById("service_credit").removeEventListener("mouseover", showtextCredit);
document.getElementById("service_credit").removeEventListener("mouseout", hidetextCredit);


document.getElementById("service_cash").addEventListener("mouseover", showtextCash);
document.getElementById("service_cash").addEventListener("mouseout", hidetextCash);


document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange);
document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange);



x1.style.display ="none";
x2.style.display = "block";
x3.style.display = "none";
x4.style.display = "none";
document.getElementById("service_account").style.backgroundColor ="#1f1e20";
document.getElementById("service_credit").style.backgroundColor ="#f27a20";
document.getElementById("service_cash").style.backgroundColor ="#1f1e20";
document.getElementById("service_exchange").style.backgroundColor ="#1f1e20";
}

function clickCash() {
t1 = 3;
document.getElementById("service_account").addEventListener("mouseover", showtextAccount);
document.getElementById("service_account").addEventListener("mouseout", hidetextAcount);


document.getElementById("service_credit").addEventListener("mouseover", showtextCredit);
document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit);


document.getElementById("service_cash").removeEventListener("mouseover", showtextCash);
document.getElementById("service_cash").removeEventListener("mouseout", hidetextCash);


document.getElementById("service_exchange").addEventListener("mouseover", showtextExchange);
document.getElementById("service_exchange").addEventListener("mouseout", hidetextExchange);

x1.style.display ="none";
x2.style.display = "none";
x3.style.display = "block";
x4.style.display = "none";
document.getElementById("service_account").style.backgroundColor ="#1f1e20";
document.getElementById("service_credit").style.backgroundColor ="#1f1e20";
document.getElementById("service_cash").style.backgroundColor ="#f27a20";
document.getElementById("service_exchange").style.backgroundColor ="#1f1e20";
}
function clickExcahnge() {
t1 = 4;
document.getElementById("service_account").addEventListener("mouseover", showtextAccount);
document.getElementById("service_account").addEventListener("mouseout", hidetextAcount);


document.getElementById("service_credit").addEventListener("mouseover", showtextCredit);
document.getElementById("service_credit").addEventListener("mouseout", hidetextCredit);


document.getElementById("service_cash").addEventListener("mouseover", showtextCash);
document.getElementById("service_cash").addEventListener("mouseout", hidetextCash);


document.getElementById("service_exchange").removeEventListener("mouseover", showtextExchange);
document.getElementById("service_exchange").removeEventListener("mouseout", hidetextExchange);

x1.style.display ="none";
x2.style.display = "none";
x3.style.display = "none";
x4.style.display = "block";
document.getElementById("service_account").style.backgroundColor ="#1f1e20";
document.getElementById("service_credit").style.backgroundColor ="#1f1e20";
document.getElementById("service_cash").style.backgroundColor ="#1f1e20";
document.getElementById("service_exchange").style.backgroundColor ="#f27a20";
}

</script>

</div>



</section>

</body>
</html>


CSS code:

@media only screen and (min-device-width: 768px) {
html {
position: relative;
left: 15%;
margin: 10px;
padding: 0;
width: 1280px;
}
body {
display: block;
font-family: 'Open Sans', sans-serif;
text-align: center;
background-color: #cccccc;
}

/* ---------- SERVICES SECTION -----------*/
.services-wrap {
display: inline-block;
position: absolute;
top: 170px;
left: 0;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
}
.service-button {
float: left;
cursor: pointer;
background: #1f1e20;
width: 25%;
height: 35px;
margin: 0;
padding: 0;

}



.service-button-text {
position: relative;
top: 5px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
color: #FFFFFF;
width: 50%;
height: 16px;
text-align: center;
margin: 0;
}

/*-------------- SERVICE TEXT ---------------------------*/
.service-text-wrap {
width: 100%;
height: 90px;
}
.service-text {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
text-align: left;
color: #1f1e20;
}
.service-account-wrap {
display: none;
position: relative;
top: 10px; font-family : 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
text-align: left;
color: #1f1e20;
width: 90%;
height: 50px;
margin: 0 50px 0 50px;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.service-credit-wrap {
display: none;
position: relative; top : 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
text-align: left;
color: #1f1e20;
width: 90%;
height: 50px;
margin: 0 50px 0 50px;
padding: 0;
top: 10px;
}
.service-world-wrap {
display: none;
position: relative; top : 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
text-align: left;
color: #1f1e20;
width: 90%;
height: 50px;
margin: 0 50px 0 50px;
padding: 0;
top: 10px;
}
.service-exchange-wrap {
display: none;
position: relative; top : 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 14px;
text-align: left;
color: #1f1e20;
width: 90%;
height: 50px;
margin: 0 50px 0 50px;
padding: 0;
top: 10px;
}

}

Answer

I have go through your code. I found some design issue. Your mouseover, mouseout, and click events are working on "service-button". This class have a style "float:left;". Your next div "service-text-wrap" is coming over "service-button". You just need to add

  <div style="clear:both;">&nbsp;</div>

just before "service-text-wrap" div. Hope this will help you.

Comments