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..
Related
I have this JS code that creates a popup box and makes everything else grey in the background.
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
HTML
<div id="wrapper">
<p>Open popup box 1</p>
</div>
<div id="popup-box1" class="popupposition">
<div id="popupwrapper">
<div id="popupcontainer">
****POPUP BOX CONTENT
</div>
</div>
</div>
EVERYTHING ON THE BACKGROUND of the page becomes grey and not clickable, BUT this HTML part of the page remains visible, what should I do?
<div class="classfinder">
<div class="searchbox">
<ul>
<div class="searchboxclasswidth" onClick="return !!(classFunction() & changeColor1())"><li><p id="findclass"><a href><b>Trova classe </b></a></p></li> </div>
<div class="searchboxcoursewidth" onClick="return !!(courseFunction() & changeColor2())"><li><p><a href><b>Trova corso</b></a></p></li></div>
</ul>
Thanks!
I am not clear with the organization of HTML Controls in your page. The structure seems to be wrong.
CSS Property z-index of parent div of pop up must be more than that of all other elements in the page to achieve the functionality that you are expecting. Compare the z-index of popup-box1 with other element that are visible above popup box.
If it doesn work out, then kindly copy paste the html as well as its associated css & JS codes here again.
I solved it. I added to the JS:
else
e.style.display = 'block';
e.style.zIndex="1";
And now my div is on top of everything. Thank you folks
In that case you can also fix this issue by adding z-index:1 to popupposition class as below:
.popupposition{display:none;position:fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.7); width:100%; height:100%;z-index:1}
This will avoid 1 unnecessary line of code in JS function.
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.
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.
I have a DIV (box) that’s toggled (with JavaScript) between ‘display: block’ and ‘display: none’ when clicking another DIV (text). There is also a close option (‘display: none’) in that box.
There are also other DIVs (Google Translate drop down menu for exemple) in that box, that I want to be clickable without the box closing.
So, how do I make the box close (with CSS: ‘display: none’) when clicking OUTSIDE of that box? How can I implement that in the code below?
A simplification and demonstration of my setup: JSFiddle
JavaScript and HTML (cleaned out excessive data):
<div id="toggle-container">
<div id="toggle-text"> <p class="notranslate"><a href="#"
onclick="toggle_visibility('toggle-box');">TOGGLE BOX</a></p>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div id="toggle-box">
<div id="box-content">..with other divs...</div>
<div id="translate-box-close">
<a onclick="document.getElementById('toggle-box')
.style.display='none';return false;" href="">CLOSE BOX</a></div>
</div>
</div>
</div>
CSS (cleaned out excessive data):
#toggle-container {
}
#toggle-text {
}
#toggle-box {
position: ABSOLUTE;
display: NONE;
}
#box-content {
}
Try this:
add onclick="toggle_visibility('toggle-box');" to the <html> tag.
Or inside JavaScript:
$('html').click(function() {
toggle_visibility('toggle-box');
});
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>