So I have a div with 10 other divs inside. They have all display= “none”. Each div is linked with a image, when you click on the image, the linked div opens up. But the div only can be closed when I click on the image again. But if I click all 10 images, all 10 divs will open up & they overlap each other.
How can I fix that only 1 div can be showed at a time? So if one div is opened and I click on a new image; the old div disappears and the new div shows up?
function hideShowDiv() {
function showDiv() {
if(kledingInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv2() {
if(ewlInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv3() {
if(onderwijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv4() {
if(overigeInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv5() {
if(vrijeTijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
}
hideShowDiv();
so this is what i have tried but it doesn't work. All divs have the class info.
Base on the code you post
function hideShowDiv() {
function showDiv() {
if(kledingInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv2() {
if(ewlInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv3() {
if(onderwijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv4() {
if(overigeInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
function showDiv5() {
if(vrijeTijsInfo.style.display = "inline-block") {
document.querySelectorAll(".info").style.display = "none";
}
}
}
hideShowDiv();
There are several things, first of all, you are nesting the function. when you call hideShowDiv(), you are just defining 5 functions instead of executing anyone of them. to archive what you discribe, you just need to document.querySelectorAll(".info").style.display = "none"; first and then run all the if statement. like this:
function hideShowDiv(element) {
document.querySelectorAll(".info").style.display = "none";
element.style.display = "inline-block")
}
hideShowDiv(document.getElementById("whatevertheidis"));
Related
So I got this class to truncate text but it's fixed, I want to to make more dynamic. I want to pass the length of text I want to truncate and make it work with multiple elements. I'm a newbie in JS classes so it's a but confusing for me right now. thank you in advance.
class readMore {
constructor() {
const end = 300;
this.content = '.readmore__content';
this.buttonToggle = '.readmore__toggle';
}
initiate() {
this.setNodes();
this.init();
this.addEventListeners();
}
setNodes() {
this.nodes = {
contentToggle: document.querySelector(this.content),
};
this.buttonToggle = this.nodes.contentToggle.parentElement.querySelector(this.buttonToggle);
}
init() {
const { contentToggle } = this.nodes;
this.stateContent = contentToggle.innerHTML;
contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`;
}
addEventListeners() {
this.buttonToggle.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
const targetEvent = event.currentTarget;
const { contentToggle } = this.nodes;
if (targetEvent.getAttribute('aria-checked') === 'true') {
targetEvent.setAttribute('aria-checked', 'false');
contentToggle.innerHTML = this.stateContent;
this.buttonToggle.innerHTML = 'Show less';
} else {
targetEvent.setAttribute('aria-checked', 'true');
contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`;
this.buttonToggle.innerHTML = 'Show more';
}
}
}
const initReadMore = new readMore();
initReadMore.initiate();
I made this 2 functions based on different sessions, which displays/hides diffrent HTML code according to the session. Any idea on how this could could be simplified? If it possible at all to write it with less and better code?
// HTML / user interface for ADMIN view
function showAdminInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
btnSubscribeNav.style.display = "none";
}
/************************************************************************/
/************************************************************************/
/************************************************************************/
// HTML / user interface for USER view
function showUserInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
You can separate the shared style changes like this:
function initInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
function showAdminInterface() {
initInterface();
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
btnSubscribeNav.style.display = "none";
}
function showUserInterface() {
initInterface();
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
}
and you can create helper function for show and hide:
function hide(el) {
el.style.display = "none"; // you can do the same with show and flex
}
function showUserInterface() {
initInterface();
hide(btnEditUsersNav);
hide(btnEditProductsNav);
hide(btnViewSubscribersNav);
hide(btnCreateProduct);
hide(btnCreateUser);
}
or
function showUserInterface() {
initInterface();
[
btnEditUsersNav,
btnEditProductsNav,
btnViewSubscribersNav,
btnCreateProduct,
btnCreateUser
].forEach(hide);
}
Just for the example, but you get the idea.
function showInterface(isAdmin = false) {
lblDropdown.style.display = isAdmin ? "flex" : "none";
... // the rest
}
I am trying to make a button which when clicked will stop the execution of the automatic slideshow.
The clearTimeout() function isn't working for some strange reason. can someone please tell me how to make it work?
var button = document.getElementById("button");
button.addEventListener("click",stop);
function stop(){
**clearTimeout(t);**
}
window.addEventListener("load",finalResult);
**var t = setTimeout(function(){finalResult()},0);**
function finalResult(){
getFirstImage();
function getFirstImage(){
img1.style.display = "block";
setTimeout(getSecondImage,3000);
}
function getSecondImage(){
img1.style.display = "none";
img2.style.display = "block";
setTimeout(getThirdImage,3000);
}
function getThirdImage(){
img3.style.display = "block";
img2.style.display = "none";
setTimeout(getFourthImage,3000);
}
function getFourthImage(){
img4.style.display = "block";
img3.style.display = "none";
setTimeout(loopAgain,3000);
}
function loopAgain(){
img4.style.display = "none";
setTimeout(getFirstImage,0);
}
}
You have to clear all the timeouts present in the page.
Something like this:
var button = document.getElementById("button");
button.addEventListener("click", stop);
function stop() {
clearTimeout(t);
clearTimeout(a);
clearTimeout(b);
clearTimeout(c);
clearTimeout(d);
clearTimeout(e);
}
window.addEventListener("load", finalResult);
var t = setTimeout(function() {
finalResult()
}, 100);
var a, b, c, d, e;
function finalResult() {
getFirstImage();
function getFirstImage() {
img1.style.display = "block";
a = setTimeout(getSecondImage, 3000);
}
function getSecondImage() {
img1.style.display = "none";
img2.style.display = "block";
b = setTimeout(getThirdImage, 3000);
}
function getThirdImage() {
img3.style.display = "block";
img2.style.display = "none";
c = setTimeout(getFourthImage, 3000);
}
function getFourthImage() {
img4.style.display = "block";
img3.style.display = "none";
d = setTimeout(loopAgain, 3000);
}
function loopAgain() {
img4.style.display = "none";
e = setTimeout(getFirstImage, 0);
}
}
My working code:
if (new Date() < new Date(2013,3,25)) {
document.getElementById("StatusOn").style.display = "block";
document.getElementById("StatusOff").style.display = "none";
} else {
document.getElementById("StatusOn").style.display = "none";
document.getElementById("StatusOff").style.display = "block";
}
How do I add this check interval to the code above?
// call the "check ..." function every 10 seconds.
//setInterval("check_if_it_is_some_date_today()", 10000);
Wrap it in a function, which is what you should be passing to setInterval anyway:
setInterval(function() {
if (new Date() < new Date(2013,3,25)) {
document.getElementById("StatusOn").style.display = "block";
document.getElementById("StatusOff").style.display = "none";
} else {
document.getElementById("StatusOn").style.display = "none";
document.getElementById("StatusOff").style.display = "block";
}
}, 10000);
I created this site which uses a simple javascript function to show images based on the user mousing over or clicking numbered boxes on the right. Now after testing it's been determined that an automatic slideshow should be added on top of this, so that next image will show after a few seconds.
http://www.philippedollo.com/photo/fineart/f_amw.htm
Is there a way to amend this code easily to make it happen easily? --
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
Use setInterval().
function getNextPic()
{
// ???
}
setInterval(function ()
{
showPic(getNextPic());
}, 3000); // 3 seconds
There's no need for the if(document.getElementById) check, since the function is 100% cross-browser.
function showPic(whichpic)
{
document.getElementById('placeholder').src = whichpic.href;
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ?
whichpic.title : whichpic.childNodes[0].nodeValue;
return false;
}
The following should work for you, I tested it and it works fine on my end.
var curPic,
gallery,
pics;
function cyclePic(){
if(curPic < pics.length){
showPic(pics[curPic]);
}
curPic++;
setTimeout(cyclePic,5000);
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
window.onload = function(){
curPic = 0,
gallery = document.getElementById("gallery"),
pics = gallery.getElementsByTagName("a");
cyclePic();
}