Samuele Palazzi

"The more i see, the less i know"

Samuele Palazzi

"The more i see, the less i know"

How to simulate a click event with javascript and css


Hello there, Samuele Palazzi here again to write this little step by step guide on how to simulate the click event with javascript and css.
I hope this can help you when you are writing your own wysiwyg web editor!

This is just a little trick!

Meanwhile i was creating UI-command wysiwyg html web editor i get in touch with this situation: i would like use UL-LI element that on click will generate an event, but i wouldn’t like to use ‘button element’ in this case (for variuos reason that aren’t relevant in this post).
So…with ul li as you may know i can use css to show on hover onother submenu that will scroll down; Users can use this submenu too, for generate specific event but if you click on LI element the result is that the event will be generates but the element remains on top and do not disappears.

This is the trick

html part

<!--HTML-->
<div id="container">
<div class="disorder">disorder element</div>
<ul class="menu">
<li>element A
<ul class="submenu">
<li>element A1</li>
<li>element A2</li>
<li>element A3</li>
</ul>
</li>
<li>element B
<ul class="submenu">
<li>element B1</li>
<li>element B2</li>
<li>element B3</li>
<li>element B4</li>
</ul>
</li>
<li>element C
<ul class="submenu">
<li>element C1</li>
<li>element C2</li>
</ul>
</li>
</ul>
<div id="execute">
Hello World!
</div>
</div><!--end containter--><!--END HTML-->

css part

#container{
width: 306px;
float:left;
border: 12px solid #999999;
padding:0;
font-size: 13px;
font-family: arial;
position:relative;
}
#execute{
margin:0;
border:none;
text-align:center;
width: 306px;
height: 130px;
font-size: 40px;
float:left;
font-weight: bold;
color: #121212;
padding:0; padding-top: 70px;
}
.disorder{
position:absolute; /* RELEVANT */
left:0;/* RELEVANT */
top:0;/* RELEVANT */
width:100%;/* RELEVANT */
height:100%;/* RELEVANT */
 /* RELEVANT */
z-index:99; /* RELEVANT */
background:none;
opacity:0;
display:none;
}
ul.menu{
list-style-type: none;
float:left;
padding:0;
margin:0;
background: #A9A9A9;
border-top:1px solid #E7E7E7;
border-bottom:1px solid #E7E7E7;	
}
ul.menu li{
float:left;
width:80px;
border-bottom: 1px solid #7e7e7e;
border-top: 1px solid #7e7e7e;
border-right: 1px solid #7e7e7e;
border-left: 1px solid #e7e7e7;
padding: 10px;
font-weight: 700;
color: #212121;
position: relative; /* RELEVANT */
}
ul.menu li ul.submenu{
position: absolute; /* RELEVANT */
top:36px;
left: -1px; 
display:none;
list-style-type:none;
float:left;
padding:0;
margin:0;
z-index:98; /* RELEVANT */
border:0;
background:none;
}
ul.menu li ul.submenu li{
border:0;
border-right: 1px solid #7e7e7e;
border-left: 1px solid #e7e7e7;
width: 80px;
background: #a9a9a9;
}

ul.menu li ul.submenu li:hover{background:#000080; color: #e8e8e8;}
ul.menu li:hover ul.submenu{
display:block;/* RELEVANT */
}
ul.menu li:hover, ul.menu li:active{
display:block;/* RELEVANT */
background: #7e7e7e;
}

Javascript part (in this case for speed up operations i used jquery, but pure javascript solutions will works as well and maybe better)

<script>
$("ul.submenu li").on("click",function(){
var valore = $(this).text();
$("#execute").text(valore);
/* RELEVANT BELOW */
$(".disorder").css("display","block");
setTimeout(function(){
$(".disorder").css("display","none");
},100);
});
</script>

See the example below

disorder element
Hello World!