Toggle and focus element - javascript

I would like to hide a div and show it when the use select a drop button (like google showing questions in google search results). After some googling i found a way for this. I had used the below jquery to toggle between two states(show/hide) for a div.
function showDiv(a) {
$("#" + a).toggle("slow");
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show
<div id="element" class="hidden">
Hidden content
</div>
Now the problem is that it first shows the div. When i click the link it hides. But that's not what i need. I need to hide the div and it should only be shown when i click the link. Also the focus on the div is lost when i toggle between the states which is bad. Can anybody help me correct this. I need to focus the div on show as well as hide.

Try this inside your showDiv(a) function:
$("#"+a).toggle("slow").focus()
If you want to remove focus:
$("#"+a).blur();

Related

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks
You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

page scrolled to the div

I have a react component, which I am using as Modal and also as element in a page. It has radio buttons.
The problem is When the user is top of the page and modal is open. If the user selects anything in modal, the page is scrolled to another element (same component) in that page which will distract the user.
Since both elements are same, selecting in one will also selects in another. Thats understandable.
I tried, onChange for radio and e.preventDefault, but did not work.
Any suggestions would be helpful.
Closest i can reproduce is https://jsfiddle.net/3tbkLxcu/
Here, preventDefault works but not in my application.
When you click on label, it will scroll to the bottom.
<label htmlFor="test-id" onClick={this.handleClick.bind(this)}>Test radio</label>
handleClick(e) {
e.preventDefault();
}
I found a solution to you problem, just add the following css :)
.ReactModal__Body--open {
overflow: hidden;
}

Is there any way to hide a checkbox's parent div upon clicking it, with pure CSS?

I have this example: http://dabblet.com/gist/540b8d498447aaea159fa4215d18984f which gets me close.
I'd like for the click of the "I'm a Toggle" to hide itself and the top green box.
Is this possible without Javascript?
Thanks in advance!
As of 2016, there is no way to select the parent of an element in CSS. Check this link.

click button simulates clicking a dropdown hidden

I do not know if it's possible, but wanted to have a jsp page when loaded uam dropdown does not appear, but when I click a button.
Basically I want a button that makes the select box. that when clicked appear a list "option".
Already experimenting with various js events and jquery but none works. I had a div with style = "display: none;" and within the div I have the select. and wanted to show the option only when you click a button. It is possible ?
Thanks for listening
try this
$(document).ready(function(){
$('.mySelectbox').hide();
$('.myButton').click(function(){
$('.mySelectbox').val(-1); //clear selection of selectbox
$('.mySelectbox').show(); //show make the magic
});
});
this work for you?

Updating z-index multiple times in order that menu item appears correctly

There is a predictive search which creates a drop down menu of items the user can select from. Behind the dropdown there is a menu button which contains a z-index of 9999. Because of this the menu button appears in front of the dropdown menu. To fix this here is my solution :
Using jQuery listeners :
Once the user clicks into the search box update the z-index of the button :
$( ".myIcon").css("z-index" , 1);
and once the user clicks off the search box using the 'blur' listener re-update the z-index :
$( ".myIcon").css("z-index" , 9999);
This works but it does not seem very clean. I do not have access to the code that is used to generate the drop down menu so cannot update the z-index of this item.
Is there another solution I am not aware of ?
Give the parent of the search the same z-index
Though it's hard to know what the html looks like since you didn't include an example. If you want it to appear on the same level then you can give it the same z-index from the gate. If the block the search part is in is after the nav, then they will naturally be on top of each other with the same z-index.
#nav,#search{position:absolute;z-index:9999}
for example, would put #search above #nav given that #search is after #nav in the html; like:
<parent><nav/><search/></parent>
If it is located before it, and possibly with a different parent, then you can use something like:
#nav{z-index:9998} #search{z-index:9999}
which would be if the html is more like:
<search/><parent><nav/></parent>
Though, if you need it to turn on/off the z-index, and it can't be fixed at all on #search, then you're already heading the right direction.
Something like this would be fairly easy:
$('#search input').on('focusin', function(){//on focus
$(this).siblings('.myIcon').css({zIndex: '9999'});
}).on('focusout', function(){//on un-focus
$(this).siblings('.myIcon').css({zIndex: '1'});
});
Though if you were able to control the css then you could just make a class for .myIcon with z-index:9999 and instead use something like this:
.on{z-index:9999}/*added css*/
$('#search input').on('focusin focusout', function(){//on focus change
$(this).siblings('.myIcon').toggleClass('on');
});
made a fiddle: http://jsfiddle.net/filever10/pxdz5/
Are you able to request that the menu icon be changed to something a bit more reasonable?
There's no need to have it that high, simply 1 value above the next element is sufficient.
I'm sorry but I can't see any other way of solving this problem than the one you have suggested.
You can use this:
$( ".myIcon").css("visibility" , "hidden");
$( ".myIcon").css("visibility" , "visible");

Categories