I have an interesting but probably simple problem. I am creating a nav bar insert that has 4 JS buttons that toggle hide a division each, I would like each button to hide the other three divisions while showing the one its own division. Currently each button is only attached to it's own division, I am asking for help that would toggle the other three divs.
Upon further thought I also would like to have the spades, hearts and clubs divs toggled off while the hearts on when a viewer first enters the page.
If you think that there is a better method, I am open to that too, my framework is django jfyi.
Cheers!
JS:
// Card Navigation Bar
function dhide() {
var x = document.getElementById("diamonds");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function chide() {
var x = document.getElementById("clubs");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function hhide() {
var x = document.getElementById("hearts");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function shide() {
var x = document.getElementById("spades");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
html
<button onclick="dhide()">Diamonds</button>
<button onclick="chide()">Clubs</button>
<button onclick="hhide()">Hearts</button>
<button onclick="shide()">Spades</button>
<div id=diamonds>...</div>
<div id=clubs>...</div>
<div id=hearts>...</div>
<div id=spades>...</div>
what about a function that hides them all, then shows the one you want?
js:
function toggleDivs(idToShow){
document.getElementById("diamonds").style.display = 'none';
document.getElementById("hearts").style.display = 'none';
document.getElementById("clubs").style.display = 'none';
document.getElementById("spades").style.display = 'none';
document.getElementById(idToShow).style.display = 'block';
}
toggleDivs('hearts');
html:
<button onclick="toggleDivs('diamonds')">Diamonds</button>
<button onclick="toggleDivs('clubs')">Clubs</button>
<button onclick="toggleDivs('hearts')">Hearts</button>
<button onclick="toggleDivs('spades')">Spades</button>
https://jsfiddle.net/rhoteL4t/
You could give all of the elements to show/hide the same class. Then you could do
document.getElementsByClassName
to get all of the dom elements you want. You can then loop through each one and turn it off unless it was the selected id.
Related
In my Asp MVC program I can toggle a div with a button.
cshtml:
<button onclick="ShowPubs()"> Click to show or hide</button>
JScipt:
function ShowPubs() {
var x = document.getElementById("myPubs");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
and this works fine,
however, when trying to use links as in this code:
cshtnl:
<div id="AboutShow" style="display:block">
Show the hidden piece Show ▼
</div>
<div id="AboutHide" style="display:none">
Hide these details Hide ▲
A lot more stuff
</div>
using this JavaScript:
function ShowAbout() {
var x = document.getElementById("AboutShow");
var y = document.getElementsById("AbourHide");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "b;pck";
}
return false;
}
The page url adds the # to the url and nothing else happens, what am I doing wrong here, please?
In else you use y.style.display="b;pck" which is not correct way. it must be block;
You need something like this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
Try it
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Let me know if this works for you
change getElementsById to getElementById
change AbourHide to AboutHide
change b;pck to block
Code:
function ShowAbout() {
var x = document.getElementById("AboutShow");
var y = document.getElementById("AboutHide");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
return false;
}
result:
I am using this code to hide a div whenever I click a button. I am trying to activate this function not on 'onclick' but whenever the button gets the class 'active'.
Is that possible?
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Though, not sure how the element's class is changing, you can try calling the function if element has the class using classList.contains().
The following example demonstrate that along with MutationObserver and setInterval():
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block" || x.style.display === '') {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
var elem = document.getElementById("tryBtn");
let observer = new MutationObserver(mutationRecords => {
if(elem.classList.contains('active')){
myFunction();
}
});
// observe attributes
observer.observe(elem, {
attributes: true
});
// test
setInterval(function(){
if(elem.classList.contains('active')){
elem.classList.remove('active');
}
else{
elem.classList.add('active')
}
}, 1000);
<button id="tryBtn">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
What you probably want to do is to use the MutationObserver API
<div id="myDIV">
This is my DIV element.
</div>
<button id="myButton" onclick="changeClass()">Change class</button>
<script>
function changeClass() {
document.getElementById("myDIV").classList.add("active");
console.log("Changed class to active")
}
function myFunction() {
var x = document.getElementById("myDIV");
console.log(x.style.display);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
const config = {attributes: true};
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.attributeName === 'class') {
if(mutation.target.className.includes("active")){
myFunction(); // Or you can put function code here.
}
}
}
}
//Set the target node you want to observe
const targetNode = document.getElementById('myDIV');
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
</script>
I used the changeClass function so you can see how this works. Since I suppose you already have some way of setting the class to "active"
When the user clicks a div an image appears and then they click the image to hide it. What I'm trying to do is disable all clicks on the page after the div is clicked for a couple seconds so the user doesn't accidentally close the image while they're waiting for it to appear.
I'm using javascript to show/hide the image
function showCard(ele) {
var id = ele.id;
var x = document.getElementById(id);
var y = document.getElementById("cards");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "block";
} else {
x.style.display = "none";
y.style.display = "none";
}
}
I've done this before for a button but I'm not really sure how to disable the click when it's not a button.
Thanks in advance for any advice.
You can have a boolean variable on the click handlers that you want to disable.
And then check the variable to check if it will be possible to click or not.
Like in the example below, were you can only click once a second in the red box to change its color.
let allowClicks = true;
document.getElementById('main').addEventListener('click', (e) => {
if(allowClicks) {
e.target.style.background = e.target.style.background === 'red' ? 'blue' : 'red';
allowClicks = false;
setTimeout( () => allowClicks = true , 1000 );
}
});
html, body, #blo {
height: 100%;
}
#main {
width: 100%;
height: 100%;
}
<div id="main" style="background: red"></div>
I'm having trouble making an image disappear while using an onmouseover event not on it, but on a button element. I need it to appear while onmouseover and disappear while not onmouseover. Heres my code:
<script>
function sfunc1() {
var x = document.getElementById('imgSWTCH1');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc2() {
var x = document.getElementById('imgSWTCH2');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc3() {
var x = document.getElementById('imgSWTCH3');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc4() {
var x = document.getElementById('imgSWTCH4');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc5() {
var x = document.getElementById('imgSWTCH5');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc6() {
var x = document.getElementById('imgSWTCH6');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc7() {
var x = document.getElementById('imgSWTCH7');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
This is the javascript to make it appear on mouseover, and the html is
<img id="imgSWTCH1"src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" width="100" height="100"/>
<img id="imgSWTCH2"src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" width="100" height="100"/>
<img id="imgSWTCH3"src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" width="100" height="100"/>
<img id="imgSWTCH4"src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" width="100" height="100"/>
<img id="imgSWTCH5"src="http://poiemaweb.com/img/socketio-logo.png" width="100" height="100"/>
<img id="imgSWTCH6"src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" width="100" height="100"/>
<img id="imgSWTCH7"src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" width="100" height="100"/>
<center>
<br />
<br />
<table >
<tb id="tab" onmouseover="sfunc1()" onmouseout="this.className='BO';">C</tb>
<br />
<tb id="tab" onmouseover=" sfunc3()" onmouseout="this.className='BO';">Java</tb>
<tb id="tab" onmouseover=" sfunc2()" onmouseout="this.className='BO';">HTML</tb>
<tb id="tab" onmouseover="sfunc4()" onmouseout="this.className='BO';">CSS</tb>
<tb id="tab" onmouseover="sfunc5()" onmouseout="this.className='BO';">Socket.io/Node</tb>
<tb id="tab" onmouseover="sfunc6()" onmouseout="this.className='BO';">Angular.js</tb>
<br />
<tb id="tab" onmouseover="sfunc7()" onmouseout="this.className='BO';">Javascript</tb>
<tb id="tab" onmouseover=" this.className='BC';" onmouseout="this.className='BO';">and much more!</tb>
</table>
</center>
The onmouseout for all of these just makes the background orange but I want it to make the image corresponding to it disappear, which I'm having trouble with since you cant assign multiple ID's to an element. A jquery solution would work too, and so would one in angular.
https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview
heres the pnlkr link, stetch the html portion out to see the whole thing too.
Here is a simple example using JQuery:
https://jsfiddle.net/ztuf96dg/4/
$(document).ready(function() {
$('li').hover(function(e) {
var imageID = $(e.currentTarget).attr('data-img-id');
var $image = $('img[data-img-id="' + imageID + '"]');
$image.show();
},
function(e) {
var imageID = $(e.currentTarget).attr('data-img-id');
var $image = $('img[data-img-id="' + imageID + '"]');
$image.hide();
});
});
Try doing it with one function for mouseover and one for mouseout. Also use the visibility property of the img instead of display to prevent the elements jumping.
See it here:
https://plnkr.co/edit/YeOgtFeEmNhRCgdQ0Mlp?p=preview
EDIT
So the point is:
function sfuncOver(imgId) {
var x = document.getElementById(imgId);
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
function sfuncOut(imgId) {
var x = document.getElementById(imgId);
x.style.visibility = 'visible';
}
...in js and in html:
<td id="tab1" onmouseover="sfuncOver('imgSWTCH1')" onmouseout="sfuncOut('imgSWTCH1')">C</td>
...and so on. BUT doing this with jQuery would be 10 thousands better :) This is the coding style of the 90s :)
You have 7 functions doing the same exact thing. A better approach may be to create one function and bind what element you want to hide to it. Here is a fiddle with an example: https://jsfiddle.net/83drj2rs/1/
Here is the corresponding JavaScript:
function toggleVisibility(element){
if(element.style.display === "none") {
element.style.display = "inline-block";
} else {
element.style.display = "none";
}
}
Array.prototype.slice.call(document.getElementsByClassName('tab')).forEach(function(element){
element.onmouseover = toggleVisibility.bind(this, document.getElementById(element.getAttribute('data-hide')));
});
Also note that I removed all of your onmouseover attributes on the html elements themselves and replaced them with a data-hide attribute instead. This tells the function which element to hide on the mouseover event.
Try something like this:
HMTL:
<table >
<tb id="tab1">C</tb> //make sure id is unique for each <tb>
<br />
(...)
</table>
Javascript:
(*)make sure you wrap javascript on document ready.
$(function() {
$('#imgSWTCH1').hide();
$('#tab1').mouseover(function (e) {
//e.stopPropagation();
$('#imgSWTCH1').show();
});
$('#tab1').mouseout(function (e) {
//e.stopPropagation();
$('#imgSWTCH1').hide();
});
});
var change=function(){
if(document.getElementById("image").style.visibility == "visible"){
document.getElementById("image").style.visibility = "hidden";}else{document.getElementById("image").style.visibility="visible";}
}
function enter(){
document.getElementById("image").style.visibility = "hidden";
}
function leave(){
document.getElementById("image").style.visibility="visible";
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<img onmouseover="enter();" onmouseout="leave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="change();" >ClicMe</button>
</body>
</html>
Run the code snnipet
Hope it does it...Good Luck
I am able do this functionality with different button. but i am not able achieve this on click of same button.
Any help/suggestions
Thanks
Toggle the current element using ternary-operator
Use Element.style.display to set the display css
property
var btn = document.getElementById('btn');
var curr = 'div2';
btn.onclick = function() {
document.getElementById(curr).style.display = 'none';
curr = curr === 'div2' ? 'div1' : 'div2';
document.getElementById(curr).style.display = 'block';
};
div {
display: none;
}
<div id="div1">#div1</div>
<div id="div2">#div2</div>
<button id='btn'>Change</button>
Anything like this?
function divchange(){
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
if(div1.style.display == "none"){
div1.style.display = "block";
div2.style.display = "none";
}else{
div1.style.display = "none";
div2.style.display = "block";
}
}
<button id="divchangebutton" onclick="divchange();">test</button>
<div id="div1">asdf</div>
<div id="div2" style="display:none;">qwert</div>
Problem - If "display:none" sets in css, we cannot get value. "elem.style.display" return empty string.
We can solve it, using Computed Style.
var btn = document.getElementById("btn-toggle");
btn.addEventListener("click", function(){
var one = document.querySelector(".one");
var tow = document.querySelector(".tow");
one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none';
tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none';
});
// get real value of 'display' property
function getRealDisplay(elem) {
if (elem.currentStyle) {
return elem.currentStyle.display;
} else if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(elem, null);
return computedStyle.getPropertyValue('display');
}
}
.one, .tow{
width:200px;
min-height: 200px;
background-color:burlywood;
}
.tow{
display: none;
background-color:cadetblue;
}
<div class="one">1</div>
<div class="tow">2</div>
<button id="btn-toggle">show hide</button>