How do I disable the other onclick event once one of them has been activated. Both divs are set to display:none; in the CSS. This is probably really simple but I am new to programming.
HTML
<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>
Javascript
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
}else{
document.getElementById('greendiv').style.display = 'block';
}}
this should do the trick:
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}}
Like this for example:
function showDiv(id){
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('rightbutton').onclick = "#";
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = "#";
}}
Something along these lines:
function showDiv(id){
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if (id == "leftbutton"){
o.style.display = 'block';
}else{
g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}
Just set the onclick property of the other element to null;
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}
else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}
}
function showDiv(id) {
if ( showDiv.executed ) {
return false;
}
if ( id === "leftbutton" ) {
document.getElementById('orangediv').style.display = 'block';
} else {
document.getElementById('greendiv').style.display = 'block';
}
showDiv.executed = true;
}
showDiv.executed = false;
Doing it this way, you could always re-enable the showing by simply setting showDiv.executed to false.
You could test if the other element is displayed :
function showDiv(id)
{
if (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
{
document.getElementById('orangediv').style.display = 'block';
}
else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
{
document.getElementById('greendiv').style.display = 'block';
}
}
You can set the href attribute as id of div which should be visibled after you click.
showDiv function can get entire element as argument, then you have access to it attributes as well. Second argument can be a id of element you should hide,
<a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
<a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>
And in js:
var showDiv =function(el, toHide){
document.getElementById( el.href ).style.display = 'block';
document.getElementById( toHide ).style.display = 'none';
el.onclick = null; //remove onclick declaration from this anchor.
}
Related
I want to compress all this code into a single block instead of 5. It works perfect, but it is very bloated. Any other tips for improving this code would be greatly appreciated.
JS:
function vanish1() {
var el = document.getElementById('priceCheck1');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish2() {
var el = document.getElementById('priceCheck2');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish3() {
var el = document.getElementById('priceCheck3');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
HTML:
<div id="priceCheck1">
test1
</div>
<div id="priceCheck2">
test2
</div>
<div id="priceCheck3">
test3
</div>
You could do this:
function vanish(elementName) {
var el = document.getElementById(elementName);
if (el.style.display == "block") el.style.display = "none";
else el.style.display = "block";
}
Function call:
vanish('priceCheck1');
Hello you can add a class name for the HTML.
then you can get each HTML by classname..
Even smaller...
function vanish(style) {
style.display == "block" ? style.display = "none" : style.display = "block";
}
vanish(document.getElementById("priceCheck1").style);
or
function vanish(element) {
element.style.display == "block" ? element.style.display = "none" : element.style.display = "block";
}
vanish(document.getElementById("priceCheck1"));
var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.
In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}
try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}
I'm working on a new page and for the mobile version I'm going to make a navigation toggle in order to hide and to show the navigation.
HTML code :
<div id="toogleNavigation">
<a onclick="toggle_visibility('nav_header','nav_header_level2');">Navigation Einblenden</a>
</div>
Javascript code :
function toggle_visibility(id, id2) {
var e = document.getElementById(id);
var f = document.getElementById(id2);
if(e.style.display == 'block' ||
e.style.display == 'block' &&
f.style.display == 'block') {
e.style.display = 'none';
f.style.display = 'none';
document.getElementById('toogleNavigation').innerHTML = "Navigation 1einblenden";
} else {
e.style.display = 'block';
f.style.display = 'block';
document.getElementById('toogleNavigation').innerHTML = "Navigation 2ausblenden";
}
}
I've tried with :
document.getElementById('toogleNavigation').innerHTML = "Navigation 2ausblenden";
to change the text in text "Navigation Einblenden" when pressing on the link, but this doesn't work... Does somebody has an idea?
Moved the id from div to the a.
See it working in jsbin http://jsbin.com/eqeheb/5/watch
<div> <a id="toogleNavigation" onclick="toggle_visibility('nav_header','nav_header_level2');">Navigation Einblenden</a> </div>
Make change like this....
HTML code
<div id="toogleNavigation">
<a id="divInner" onclick="toggle_visibility('nav_header','nav_header_level2');">
Navigation Einblenden
</a>
</div>
And
JavaScript Code
function toggle_visibility(id, id2) {
var e = document.getElementById(id);
var f = document.getElementById(id2);
if(e.style.display == 'block' ||
( e.style.display == 'block' &&
f.style.display == 'block' ) ) {
e.style.display = 'none';
f.style.display = 'none';
document.getElementById('divInner').innerHTML = "Navigation 1einblenden";
}
else {
e.style.display = 'block';
f.style.display = 'block';
document.getElementById('divInner').innerHTML = "Navigation 2ausblenden";
}
}
This will work for you as its working fo
I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
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');
}
}
Thanks.
Uli
I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.
You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}