The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Hidden/Visible Attribute + Toggle Switches, I'm trying to make kind of pop-up panel settings thingy
fllwxDumbian
post Jan 2 2022, 03:10 AM
Post #1





Group: Members
Posts: 6
Joined: 1-January 22
Member No.: 28,210



Hello, so i've once again, this time i have a different problem. As i said in description i'm trying to make a pop up settings menu, but when i click settings again (to close it) the toggle switches disappear stage-like

-> ABC -> AB -> A -> (nothing)

I'm not sure where is the problem, if its in the style of buttons or the fact that i use visible/hidden and not display: none, or any other factor i'm not aware of.
<script>
function bclick() {
if (document.getElementById('t1').style.visibility === "hidden") {

document.getElementById('t1').style.visibility="visible";
document.getElementById('t2').style.visibility="visible";
document.getElementById('s1').style.visibility="visible";
document.getElementById('s2').style.visibility="visible";
document.getElementById('s3').style.visibility="visible";
document.getElementById('t3').style.visibility="visible";
}
else
{
document.getElementById('t1').style.visibility="hidden";
document.getElementById('t2').style.visibility="hidden";
document.getElementById('s1').style.visibility="hidden";
document.getElementById('s2').style.visibility="hidden";
document.getElementById('s3').style.visibility="hidden";
document.getElementById('t3').style.visibility="hidden";
}
}
</script>
(visible/hidden)

<label class="switch" style="visibility: hidden; position: absolute; top: 75px; left: 170px;" id="s1">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="visibility: hidden; position: absolute; top: 125px; left: 170px;" id="s2">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="visibility: hidden; position: absolute; top: 175px; left: 170px;" id="s3">
<input type="checkbox">
<span class="slider round"></span>
</label>
(actual switches)
and the design is a bit too long...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fllwxDumbian
post Jan 2 2022, 06:33 AM
Post #2





Group: Members
Posts: 6
Joined: 1-January 22
Member No.: 28,210



Never mind, i found out why, its cause I had transition time set to 0.4s which caused it to disappear later!! Does anyone know, how to keep the transition time and still make it go away the same speed like the rest? I thought of setting all of the transition times to 0.4 or make the function set toggle switch's TT to 0.0

(Those are my two ideas I'm open to any better one)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 12:56 AM