"First Click" of Button does not hide div - javascript

Below code works, but the onclick only works with the function after the second click of the button. Why and what do I need to do for the button to hide the text area on the first click?
My javascript:
function hideShow() {
var e = document.getElementById('divHR');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
html
<button id="btnHideShow" onclick="hideShow();">
<img src="Images/arrow1.bmp" alt="Right Arrow icon" style="width:13px;
height:13px; border:0px;" />
Hide or show Human Resources Information
</button>
<div id="divHR" class="showHRInfo">
<h3 id="h3Inline">About Windsurf Human Resource (HR) division </h3>
<p id="pWindSurfHR" > Windsurf values and respects its employees very highly.
Should you have any problem, questions or concerns please
contact our Human Resource division. They are always at your service.
</p>
</div>

it should work,
function hideShow() {
var e = document.getElementById('divHR');
if(e.style.display != 'none')
e.style.display = 'none';
else
e.style.display = 'block';
}
Your div style display property might not set 'block'. If so, thus your code set block your display property.

Related

Show drop down menu onmousedown without loosing onclick functionality

I try to get a drop down menu to work as most drop down menus seem to work, i.e. as soon as the mouse button is pressed on the trigger the drop menu shows up. Seems rather easy with some css and javascript but it turns out to be a bit tricky.
The obvious way would be this:
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
}
</script>
<input type="button" value="click me" onmousedown="toggle('menu');"><div id="menu" style="display: none">Menu</div>
Unfortunately this is not exactly it, since now it is no more possible to navigate to the trigger with the tab-key and hit enter to show the menu. Seems that this needs the menu to show with onclick. But adding the toggle function to onclick as well shows the menu at onmousedown and then collapses it when the mouse button is released at onclick. Is there a way to stop onclick from firing when onmousedown was firing before?
Hope this would work fine for your requirement
<script>
var lastEvent = '';
function toggle(id, event) {
event = event || window.event;
if (lastEvent === 'mousedown' && event.type === 'click' && event.detail > 0){
lastEvent = event.type;
return;
}
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
lastEvent = event.type;
}
</script>
<input type="submit" value="click me" onmousedown="toggle('menu', event);" onclick="toggle('menu', event);">
<div id="menu" style="display: none">Menu</div>
https://jsfiddle.net/safeer/rzg7sahb/18/
try adding onclick event and submit your form using its name
<input type="submit" value="click me" onmousedown="toggle('menu');" onclick="document.getElementById('form_name').submit();" >
whats about this method?
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'inline-block' : 'none';
}
function activate(e){
alert(e.id);
}
</script>
<div id="menuWrapper" onmousedown="toggle('menu');"onmouseup="toggle('menu');">
<div id="mainlink" >Click Here</div>
<div id="menu" onmouseup="activate(this);" style="display: none">Menu</div>
</div>
JS fiddle with div for menu opener
Here is another way that seems to work:
<script>
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display === 'none') ? 'inline-block' : 'none';
}
</script>
<input type="submit" value="click me" onmousedown="toggle('menu');" onkeypress="if (event.keyCode === 13) toggle('menu');" onkeyup="if (event.keyCode === 32) toggle('menu');">
<div id="menu" style="display: none">Menu</div>
It emulates the normal key behaviour. Although I am not fully sure that it emulates all of it and in the right way on all operating systems.

Set object string ID's to Javascript parameters

I am starting coding with HTML, CSS and Javascript and I have a problem. I have a Blogger and my posts usually have a lot of content on it, so I was wondering to split my posts by "categorizing them" and use something like Spoiler. So, I am using some div tags just like above
<div style="background-color:rgb(0, 0, 0);">
<p style="font-family:Segoe UI Light; color:white; vertical-align:middle; font-size:16px;">
<img id="icon_1" src="show.png"
style="width:20px; height:20px; margin:2px; vertical-align:middle;">Example</img>
</p>
</div>
<div id="cont_1" style="display: none;">
<p>just some stuff for an example<br/>
content will be placed on this div</p>
<p>I have set a default ID string, but don't know If I will need it at all</p>
</div>
As you can see, I have a main div which contains an picture (an icon related to show/hide) and a string input. Then, I have another div class, where the content will be placed. I have set and id, in this example cont_1. Plus, on load, this div will be collapsed/hidden so I set display:none;. You can also see that the img tag has an Id icon_1
Next, I built a JavaScript class. There, I will set the cont_1 style display to block; and I also want to change the image src
This is my script code
<script>
function click1(item, ico)
{
var a = document.getElementById(item);
if ( a.style.display == 'block' ) {
a.style.display = 'none';
icon_change(ico, "hide")
}
else {
a.style.display = 'block';
icon_change(ico, "show")
}
}
function icon_change(ico, visibility)
{
var image = document.getElementById(icon);
var s = visibility;
if ( s == "hide" ) {
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC";
}
else {
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII=";
}
}
</script>
Yeah.. my code is not very organized and probably I just need one function to complete the task, I have tried that and din't worked too..
My problem is carry the ID's to JavaScript function, that must be the issue on my code. I would like to have one or two javascript functions to work with multiple div, the divs that contain the content and will show and hide.
I am using OnClick just like this
<div Onclick="click1(content_1, icon_1)"/>
So, I tried to set two parameters to JavaScript, one it's the div ID and other the image ID
I am inserting it as String, should I do that? Do you know any easier way to do this? I would like to see if there are easier alternatives :)
Thanks! This is my post and hope it's clear enough..
I guess the problem you have there is that your parameters aren't called as string. It should be:
<div Onclick="click1('content_1', 'icon_1')"/>
You could simplify it this way:
function click1(which_div)
{
var a = document.getElementById("content_"+which_div);
var image = document.getElementById("icon_"+which_div);
if ( a.style.display == 'block' ) {
a.style.display = 'none';
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC";
}
else {
a.style.display = 'block';
image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII=";
}
}
And you call it like this:
<div Onclick="click1('1')"/>
I have created following code snippet which gives same functionality/behavior as you expects but implemented little differently.
Hope this will solve your problem. You could test/play this on JSFiddle.
<figure onclick="showHide('show');" id="show">
<img src="http://bioinformatica.upf.edu/2009/projectes09/Ex/resultats/seli/SelI_human_pfam_files/showButton.png" alt="An awesome picture">
<figcaption>Show</figcaption>
</figure>
<figure onclick="showHide('hide');" id="hide" style="display:none;">
<img src="http://tweetingmeeting.com/images/hide-button.png">
<figcaption>Hide</figcaption>
</figure>
<div id="cont_1" style="display:none;">
<p>just some stuff for an example<br/>
content will be placed on this div</p>
<p>some more content.....</p>
</div>
<script>
function showHide(activity)
{
show = document.getElementById("show");
hide = document.getElementById("hide");
content = document.getElementById("cont_1");
// a.style.display = "none";
if(activity == "show")
{
show.style.display = "none";
hide.style.display = "block";
content.style.display = "block";
}
else if(activity == "hide")
{
show.style.display = "block";
hide.style.display = "none";
content.style.display = "none";
}
}
</script>

Script On Click Css Display Property Changes Not Working Normally Asp.net?

i am trying to display google map on click java script changes its display property and shows google map. Its not working on IE 8 and working fine on other browsers if i do not use CSS its working fine too on IE
my code is as under
<div class="getDirectionsBtnMain">
<a href="#" id="new-yorkiframeNav" onclick="toggle_visibility('new-yorkiframe');">
</a>
</div>
<div id="new-yorkiframe" style="background: none repeat scroll 0% 0% rgb(5, 72, 65); width: 950px; border: 10px solid rgb(5, 72, 65);" class="tab-pane vcard">
<iframe frameborder="0" style="width: 100%; height: 379px;" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=+40+Wall+Street,+11th+Floor+New+York,+NY+10005&aq=&sll=37.0625,-95.677068&sspn=39.320439,86.572266&t=m&ie=UTF8&hq=&hnear=40+Wall+St,+New+York,+10005&iwloc=A&output=embed">
</iframe>
</div>
script is as,
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
alert(e.style.display);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
if (e.style.display != 'block' && e.style.display != 'none')
e.style.display = 'block';
}
</script>
In CSS i am using this property,
#new-yorkiframe{display:none;}
First of all its not showing its Display property it is showing "null" that i alert in script it is behaving same in other browser too but after changing its property in script it show maps in other browser except IE
but if i change its css property to,
new-yorkiframe{display:none;}
its click button shows and hide map on ie as well as on other browser.
What should i do that i want to hide map first time page load ??
Hopes for you Cooperation
Thanks in Advance
Did you keep the "<script>..you code..</script>" just before closing the html tag
Try this:
<script type="text/javascript">
function toggle_visibility(id) {
var ele = document.getElementById(id);
if (ele.style.display == 'block')
ele.style.display = 'none';
else
ele.style.display = 'block';
}
window.onload = toggle_visibility('new-yorkiframe');
</script>

Javascript Expand and Collapse

I am using javascript drag and drop functionality to expand and collapse my contents.
The following is my code.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
Click here to toggle visibility of element #foo</div>
<div id="id1" style="display:none;">This is foo</div>
Click here to see wonder</div>
Edit
<div id="id2">This is foo</div>
<div id="id3">Edit</div>
The problem is,when I click the Edit section should display.Now both edit and foo is displaying...
Please let me know the correct code to do this one.
Thanks in advance..

HTML/Javascript - Button takes two clicks to execute click event

Testing out a simple toggle display, however, it takes two clicks to toggle the display the first time. Afterwards it does it in one.
<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}
#p2{visibility:hidden;}
#p1{display:block;}
#btn{position:absolute;
top:2000px;}
</style>
<script src="mainScript.js"></script>
</head>
<body>
<div id="carousel">
<img id="p1" src="pic1.jpg">
<img id="p2" src="pic2.jpg">
</div>
<button type="button" id="button" onclick="clickEvent()">Click</button>
</body>
</html>
And here is my javascript:
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
p.style.display = "none";
else
p.style.display = "block";
}
It should be noted I am using no jQuery, as all other questions I found about this were jQuery related.
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
p.style.display = "block";
else
p.style.display = "none";
}
you can also simplify things a bit:
p.style.display = p.style.display == "none" ? "block" : "none";
I have an update to my previous fiddle posted in my comment above. My previous fiddle still ran into the same problem after further testing of the double click.
After stepping through, the initial display value is coming back as "" not block. I'm not sure why its not taking your value you set in the <head></head> section but if you inline it like so:
<img id="p1" src="pic1.jpg" style="display: none;" />
it works correctly the first time with only one click of the button.
Here is my new updated fiddle demonstrating this.
I'm going to look more into why your styling in the <head></head> section but for now, here is a quick (and semi crude) fix.
Hope this helps and best of luck!
The default display attribute is "inline" so your logic is not taking this into account. It is changing it the block on the first run, so it is still visible, then it is hiding it on the second click (setting display to none)
your answer
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display === "block")
p.style.display = "none";
else
p.style.display = "block";
}
I changed the condition I have the same problem and I realize that it was about the order code executes my CSS style for the element was already "block", and I was checking if the element display was "none" then do the display block thing, so when the first time I was clicking, it changed the display to "none", then in the second time it would change the display to block, I hope It was clear my explanation
enjoy
The same problem can be resolved by just replacing "block" : "none"; by ?"none" : "block";
you will not need to double click the toggle button for the first time, single click will work.

Categories