double click to show an div - javascript

I have used a javascript to show div by onclick but when i click outside div i want to hide the div.
after more searches, i have found an function, and it works perfectly
but there is an issue, the code requires double click for first time, to show the dive
my code:
<script>
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}
</script>
<style>#tools{display:none;}</style>
<div id="tools">Hidden div</div>
show/hide
This is my full code, you can test it on your computer.
The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )

Try this - http://jsfiddle.net/JjChY/1/
Change
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
to
el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';

Use this:
el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';
It should work.

The problem is that el.style.display only reads from the element's inline styles, not its CSS.
So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.
You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:
function getStyle(x, styleProp) {
if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
return y;
}
// click on the div
function toggle(e, id) {
var el = document.getElementById(id);
var display = el.style.display || getStyle(el, 'display');
el.style.display = (display == 'none') ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if (toggle.el) {
toggle.el.style.display = 'none';
}
}​
DEMO: http://jsfiddle.net/JjChY/2/

Your code is a little convoluted. It can be written much simpler:
<script>
var toggle = function(id) {
var element = document.getElementById(id);
element.className = element.className === 'hidden' ? '' : 'hidden';
return false;
};
</script>
<style>
.hidden {
display: none;
}
</style>
<div id="tools" class="hidden">Hidden div</div>
show/hide

If you have jQuery, you could do something like this for the click outside.
First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.
$('#tools').hover( function() {
$('#tools').addClass("inside");
},
function() {
$('#tools').removeClass("inside");
});
Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.
$("html").click( function() {
$("#tools").not(".inside").each( function() {
$("#tools").hide();
});
});

Related

how to show the sub elements text based on div>a like the select>option structure in a drop-down box using original javascript

everyone. I got some problems when I wanna accomplish a drop-down box in a HTML website without using select and option elements, instead of using and elements.
The main function is made up by two parts, the first function is when clicked the first elements in the drop-down box, the hidden parts of list shows up and hide clicked again. The second function is when choose the elements in the hidden list, the text of the elements on the list will replace the first element on the drop-down box.
I have accomplished first function using below codes:
// javascript codes
var searchListBtn = document.getElementById("btn_List");
var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a");
function show(event) {
let oevent = event || window.event;
if (document.all) {
oevent.cancelBubble = true;
}
else {
oevent.stopPropagation();
}
// click it to show it, click again to hide it and loop
if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") {
searchListBtn.style.display = "block";
}
else {
searchListBtn.style.display = "none";
}
}
document.onclick = function() {
searchListBtn.style.display = "none";
}
searchListBtn.onclick = function (event) {
let oevent = event || window.event;
oevent.stopPropagation();
}
<!-- html codes -->
<html>
<body>
<div>
<div class="ui-search-selected" onclick="show();">A</div>
<div class="ui-search-selected-list" id="btn_List">
B
C
D
</div>
</div>
</body>
</html>
But when I did the second part, my idea was not clear enough to implement that, I searched if I use select>option elements I could use selectedIndex method to find the index of list, but this is a custom drop-down box formed by div>a structure elements.
I tried to console.log(a_searchListBtn) and show an array from the console, and I could use a_searchListBtn[0~3].text to get the value of B/C/D.
I tried to write codes like below:
a_searchListBtn.onclick = function() {
console.log("Clicked.")
}
But nothing in the console, so, is there anyone could apply some help, thx in advance.
Well you're fetching all the a elements using getElementsByTagName("a"). Now you just need to loop through the results and add a click event listener that will take the innerHTML of that a element and put it into the innerHTML of the ui-search-selected div.
You don't need an index. You can access the clicked element's innerHTML using event.target. See it working in this snippet below:
// javascript codes
var searchListBtn = document.getElementById("btn_List");
var uiSearchSelected = document.getElementById("ui-search-selected");
var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a");
for (button of a_searchListBtn) {
button.addEventListener("click", replace);
}
function show(event) {
let oevent = event || window.event;
if (document.all) {
oevent.cancelBubble = true;
}
else {
oevent.stopPropagation();
}
// click it to show it, click again to hide it and loop
if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") {
searchListBtn.style.display = "block";
}
else {
searchListBtn.style.display = "none";
}
}
document.onclick = function() {
searchListBtn.style.display = "none";
}
searchListBtn.onclick = function (event) {
let oevent = event || window.event;
oevent.stopPropagation();
}
function replace(event) {
if (!event) return;
uiSearchSelected.innerHTML = event.target.innerHTML
}
<!-- html codes -->
<html>
<body>
<div>
<div id="ui-search-selected" onclick="show();">A</div>
<div class="ui-search-selected-list" id="btn_List">
B
C
D
</div>
</div>
</body>
</html>
I have tried to use this codes to implement this funtion, it works.
// javascript
var par_searchListBtn = document.getElementById("btn_list_parent");
var searchListBtn = document.getElementById("btn_List");
var a_searchListBtn = document.getElementById("btn_List").getElementsByTagName("a");
// console.log(a_searchListBtn.length);
// console.log(a_searchListBtn);
function show(event) {
let oevent = event || window.event;
if (document.all) {
oevent.cancelBubble = true;
}
else {
oevent.stopPropagation();
}
if (searchListBtn.style.display === "none" || searchListBtn.style.display === "") {
searchListBtn.style.display = "block";
}
else {
searchListBtn.style.display = "none";
}
}
document.onclick = function() {
searchListBtn.style.display = "none";
}
searchListBtn.onclick = function (event) {
let oevent = event || window.event;
oevent.stopPropagation();
}
for(var i = 0; i < a_searchListBtn.length; i++){
a_searchListBtn[i].onclick = function () {
par_searchListBtn.innerHTML = this.innerText;
//searchListBtn.style.display = "none";
}
}
<!-- html codes -->
<html>
<body>
<div>
<div class="ui-search-selected" id="btn_list_parent" onclick="show();">A</div>
<div class="ui-search-selected-list" id="btn_List">
B
C
D
</div>
</div>
</body>
</html>

CSS-Javascript: Show and Hide div

I want to create a menu where there is just title and a view more link is provided.
If that link is clicked it should open a hidden div and that view more should change to show less or close. And if I click that the div should close again.
So far I have this.
Title 1 View More
<div id="title1_div">
Some Information
</div>
<style>
#title1_div{
display:none;
}
</style>
<script>
function showdiv()
{
document.getElementById('title1_div').style.display = 'block';
}
</script>
This only provides the on click show division. How can I close that div on clicking.
Any help would be appreciated.
Please see this example at JSFiddle: https://jsfiddle.net/eo4cysec/
You just check if the property is set to block, if so you set it to none, else you set it to block. So you have a toggling logic in it.
if(document.getElementById('title1').style.display == 'block') {
document.getElementById('title1').style.display = 'none';
} else {
document.getElementById('title1').style.display = 'block';
}
To set the text to View Less you need the reference of the clicked tag, you pass it as parameter like this:
View More
Then you have the chance to use this parameter and set the innerHTML of it, which is the text that is displayed. So the final function will look like this, where e is now the reference on the a-tag:
function showdiv(e) {
if(document.getElementById('title1').style.display == 'block') {
e.innerHTML = 'View More';
document.getElementById('title1').style.display = 'none';
} else {
e.innerHTML = 'View Less';
document.getElementById('title1').style.display = 'block';
}
}
Please check out this fiddle:
https://jsfiddle.net/g7ry88h7/
Simple function. Call it on click and it'll handle the hide/show:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is a working example.
function showdiv(el) {
if (el.innerHTML == "View More") {
document.getElementById('title1').style.display = 'block';
el.innerHTML = "Show Less";
} else {
document.getElementById('title1').style.display = 'none';
el.innerHTML = "View More";
}
}
#title1 {
display: none;
}
Title 1
<div id="title1">
Some Information
</div>
View More
$('a').click(function () {
$(this).next('div').stop(true, true).slideToggle("fast");
if($(this).html() == 'View More'){
$(this).html('View Less');
} else {
$(this).html('View More');
}
}),

Javascript change display CSS

Im completely new to Javascript, this is what i want:
Guy clicks on an element, so i trigger an onclick and i want to run a JS function, all clear so i need a JS function, what this function needs to do:
Check if the display of element #mobilemenu is block or none.
When it is block change it to none, when its none change it to block.
What i found so far was this:
function Change(){
document.getElementById("mobilemenu").style.display = "block"; }
But i am stuck on checking if it is currently block or none. I am kinda new to JS so maybe it is super easy (as i think) but i can't find a proper tutorial or some examples.
Thanks in advance!
You can use an if/else statement to check whether the element is displayed, and then show or hide it accordingly:
function Change() {
/* Put the mobilemenu into a variable */
var mobilemenu = document.getElementById("mobilemenu");
/* Check the display property of the element's style object */
if (mobilemenu.style.display !== "block") {
/* The element isn't display: block; so show it */
mobilemenu.style.display = "block";
} else {
/* The element is display: block; so hide it */
mobilemenu.style.display = "none";
}
}
Just add an if-else.
function Change(){
var displayVal = document.getElementById("mobilemenu").style.display;
if (displayVal == "block")
document.getElementById("mobilemenu").style.display = "none";
else if (displayVal == "none")
document.getElementById("mobilemenu").style.display = "block";
}
Here is a Fiddle: http://jsfiddle.net/vaa9goLe/
Also, you can use getComputedStyle in case your element doesn't have initial display value to ensure your function will always work.
var element = document.getElementById('btn');
element.onclick = function() {
var mydiv = document.getElementById('mydiv'),
isVisible = (mydiv.currentStyle || window.getComputedStyle(mydiv, '')).display == 'block';
if (isVisible){
mydiv.style.display = 'none';
} else {
mydiv.style.display = 'block';
}
};
jsfiddle:
http://jsfiddle.net/ykypcmt2/
This may help you
<div id="mobilemenu" style="display:block"></div>
<script type="text/javascript">
function Change(){
var contentId = document.getElementById("mobilemenu");
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
If the div had style value anything other than block or none , the following code should do nothing and preserve the original style value.
function Change(){
document.getElementById("mobilemenu").style.display = ( document.getElementById("mobilemenu").style.display === "block" ) ? "none" : ( document.getElementById("mobilemenu").style.display === "none" ) ? "block" : document.getElementById("mobilemenu").style.display ;
}

toggle display only working on second click

I have a div that is display:none which should appear when an icon is clicked. My function works but always on the second click. Any ideas what's wrong with the function?
document.getElementById('icon').onclick = function(){
var el = document.getElementById('div');
if ( el.style.display != 'none' ){
el.style.display = 'none';
}
else {
el.style.display = 'block';
};
};
Change your test to the "positive"
if ( el.style.display == 'block' ){
And it will work.
The default is probably not exactly 'none'.
Using jQuery would make that a lot easier, see http://api.jquery.com/toggle/
el.style would refer to inline style , not global style.
so change your code to
<div id="nav_form_container" style="display:none">
and the code will work.
http://jsfiddle.net/2hobbk7u/2/
This is working for me. I believe what you may have been doing was using the div as a selector instead of an ID on your variable.
FIDDLE
HTML:
<button id="icon">Test Button</button>
<div id="test" style="display: none;">I am hidden</div>
JS:
document.getElementById('icon').onclick = function(){
var el = document.getElementById('test');
if ( el.style.display != 'none' ){
el.style.display = 'none';
}
else {
el.style.display = 'block';
};
};

JavaScript Code isn't working under XP

I am using this JS code for show and hide some div elements on my side - it is working perfectly on W7/W8 and all browsers, but for XP it doesn't work at all, am I something missing about JS libraries supported in XP or something?
Thanks for any replies in advance.
<script type="text/javascript">
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
</script>
It can be because 'block' is the default value of display for divs, i.e. if the actual style.display is '', then the div will act as a block. Try inverting your check like this:
divid.style.display = (divid.style.display == 'none' ? 'block' : 'none');

Categories