mattyt81 mattyt81 - 29 days ago 12
CSS Question

On click replace CSS not working correctly on fast clicks

I have a site where I have selections boxes divs, when a user clicks on those boxes it reveals a hidden content div and also replaces the background images of the selection box div to a tick. This all works work fine, but if someone clicks fast or clicks in different areas of the selection box div, the background image of the selection box div might show the tick even the the content div is hidden again.
I have tried various methods from googling but most seem to relate to a delay on mobile devices. If any one has any ideas, please let me know, also I know my code is probably not the cleanest. The background images are 24kb in size each, could that be it? My code is below:



$(document).ready(function(){
$(document).on('click','.checkbox',function(){
target=$(this).data('target');
$(target).slideToggle(400);
});
});

/* Option Boxes */
.checkbox{
width:100%;
height: 50px;
position:relative;
float:left;
background-repeat:no-repeat;
background-image:url(../Images/Options/Template.png);
background-position: center center;
font-size:1.2em;
color:#000;
padding-top:2%;
text-align:center;
line-height:-100px;
margin-right:15%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.myCheckbox input {
display:none;
}


.myCheckbox input:checked + .checkbox{
width:100%;
height: 50px;
background-image: url("../Images/Options/Template-Tick.png");
color:#999;
}

/* Option Boxes */

.Content_Selection_Holder{
position:relative;
float:left;
width:100%;
height:auto;
}
.Content_Selection_Boxes{
position:relative;
float:left;
width:33%;
height:33%;
font-size:90%;
}
.Content_Answer_Holder{
position:relative;
float:left;
width:100%;
height:auto;
margin-top:5%;
}
.Content_Answer_Box{
position:relative;
float:left;
width:96%;
padding:2%;
height:auto;
display: none;
}

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="Content_Selection_Holder">

<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb1"> Content1</div></div>
<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb2">Content2</div></div>
<div class="Content_Selection_Boxes"><label class="myCheckbox"><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb3">Content3</div></div>

</div> <!-- Question Holder-->

<div class="Content_Answer_Holder">


<div class="Content_Answer_Box" title="Some content 1" id="sb1">
Some content 1
</div>

<div class="Content_Answer_Box" title="Content2" id="sb2">
Some content 2
</div>

<div class="Content_Answer_Box" title="Content3" id="sb3">
Some content 3
</div>
</div>
</div>
</div>
</div>




Answer

please review this one:

  1. in html you missed closing label tag

  2. so i need to fix the css

  3. in js part, the idea is to make sure .checkbox trigger input type=checkbox corresponding to it on click event.

$(document).ready(function(){
        $(document).on('click','.checkbox',function(){
            var self = $(this),
            target=self.data('target');            
            self.prev('input').trigger('click');            
            $(target).slideToggle(400);
        });
    });
/* Option Boxes */
.checkbox{
    width:100%; 
   height: 50px;
   position:relative;
   float:left;
   background-repeat:no-repeat;
   background-image:url(../Images/Options/Template.png);                 
   background-position: center center; 
   font-size:1.2em;
   color:#000;  
   padding-top:2%;
   text-align:center;
   line-height:-100px;
   margin-right:15%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
        }
.myCheckbox+input {
    display:none;
            }


input:checked + .checkbox{
    width:100%; 
    height: 50px;
    background-image: url("../Images/Options/Template-Tick.png");                    
    color:#999;
            }

/* Option Boxes */

.Content_Selection_Holder{
    position:relative;
    float:left;
    width:100%;
    height:auto;    
}
.Content_Selection_Boxes{
    position:relative;
    float:left;
    width:33%;
    height:33%; 
    font-size:90%;
}
.Content_Answer_Holder{
    position:relative;
    float:left;
    width:100%;
    height:auto;
    margin-top:5%;  
}
.Content_Answer_Box{
    position:relative;
    float:left;
    width:96%;
    padding:2%;
    height:auto;
    display: none;
}
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<div class="Content_Selection_Holder">

            <div class="Content_Selection_Boxes">
            <label class="myCheckbox"></label>
            <input type="checkbox" name="test"/>
            <div class="checkbox" data-target="#sb1"> Content1</div>
            </div>
            <div class="Content_Selection_Boxes">
            <label class="myCheckbox"></label><input type="checkbox" name="test"/><div class="checkbox" data-target="#sb2">Content2</div></div>
            <div class="Content_Selection_Boxes">
            <label class="myCheckbox"></label>
            <input type="checkbox" name="test"/><div class="checkbox" data-target="#sb3">Content3</div></div>

            </div> <!-- Question Holder-->

            <div class="Content_Answer_Holder">


            <div class="Content_Answer_Box" title="Some content 1" id="sb1">
            Some content 1
            </div>

            <div class="Content_Answer_Box" title="Content2" id="sb2">
            Some content 2         
            </div>

            <div class="Content_Answer_Box" title="Content3" id="sb3">
Some content 3          
            </div>

Comments