So, I made some interaction that are triggered every click, I could've used switch too but I wanted to make it more readable.
All these transitions have something in common and that is they finish in an instant, so I tried to use css * { transition: all 0.5s; } and even body {
transition: all 0.5s; } but the transitions don't seem to smooth. Not even the background change is not smooth. And every time the innerHTML changes it happens instantly and I am trying not to mess myself fading in span after span. So the question is, how do I make all transitions smooth? Thanks in advance :D
var text = 0;
function changeText() {
text += 1;
if (text === 0) {
document.getElementById('secHeader').innerHTML = "Click anywhere to begin.";
}
else if (text === 1) {
document.getElementById('secHeader').innerHTML = "Are you ready?";
}
else if (text === 2) {
document.getElementById('secHeader').innerHTML = "Let's begin then...";
}
else if (text === 3) {
document.getElementById('secHeader').innerHTML = "You're about to experience a journey you'll never forget.";
}
else if (text === 4) {
document.getElementById('ImageBox').style.display = "none";
document.body.style.background = "black";
}
else if (text === 5) {
document.getElementById('thHeader').style.display = "block";
}
else if (text === 6) {
document.getElementById('thHeader').innerHTML = "You must be very curious then..."
}
else if (text === 7) {
document.getElementById('thHeader').style.visibility = "hidden";
document.getElementById('ftHeader').style.display = "block";
}
else if (text === 8) {
document.getElementById('ftHeader').innerHTML = "We can show you something..."
}
else if (text === 9) {
document.getElementById('ftHeader').style.visibility = "hidden";
document.getElementById('ffHeader').style.display = "block";
}
else if (text === 10) {
document.getElementById('ffHeader').innerHTML = "Let's see..."
}
else if (text === 11) {
document.getElementById('ffHeader').style.visibility = "hidden";
document.body.style.background = "linear-gradient(to right, #0f2027,
#203a43, #2c5364)";
}
}
If you use 'display: none' and then 'block' the transition property won't work. The element should be in the DOM, and 'display: none' deletes element from the DOM.
There are some CSS properties which can being affected by transition's effect.
Related
anchorArrows is an element that if I click the checkbox it must be shown and if it's not checked it must be hidden. The classList hidden and show are CSS classes with opacity 0 and 1
let q = document.getElementById("Q").value;
let q2 = document.getElementById("q2").value;
const anchorArrows = document.getElementById("anchor");
if((chkQ.checked == true) && (chkQ2.checked == false)){
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if(q > 0){
flechas(0,"x");
}else{
flechas(180,"x");
}
}else{
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
if((chkQ2.checked == true) && (chkQ.checked == false)){
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if(q > 0){
flechas(0,"y");
}else{
flechas(180,"y");
}
}else{
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
CSS:
.hidden{
opacity: 0;
}
.show{
opacity: 1;
}
You need to use else if and one else. The issue you have is the first if can be true, but the second else will wipe away the class.
if (chkQ.checked && !chkQ2.checked) {
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if (q > 0) {
flechas(0, "x");
} else {
flechas(180, "x");
}
} else if (chkQ2.checked && !chkQ.checked) {
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if (q > 0) {
flechas(0, "y");
} else {
flechas(180, "y");
}
} else {
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
And to get rid of repeated code
let isValid = false;
if ((!chkQ.checked && chkQ2.checked) || (chkQ.checked && !chkQ2.checked)) {
isValid = true;
const num = +q > 0 ? 0 : 180;
const code = chkQ.checked ? "x" : "y";
flechas(num, code);
}
anchorArrows.classList.toggle("show", isValid);
anchorArrows.classList.toggle("hidden", !isValid);
Personally, I wouldn't use classes to change opacity, as multiple variables can affect the outcome of it. Instead, I would put opacity in the original Id/Class in the CSS, and use .style.opacity to change it.
For Example:
CSS:
#box {
opacity:1;
}
HTML:
<div id="box"></div>
Javascript:
document.getElementById('box').style.opacity = .5;
In your code, it would be anchorArrows.style.opacity = 1; for show, and anchorArrows.style.opacity = 0; for hidden.
I'm trying to hide a particular element on my browser game.
When it reaches the point of being visible it has to stay visible.
At the moment I've tried a few approaches but none of them seem to do the last part which is keeping it visible when the number of clicks goes back under the amount needed to make it visible.
CSS:
upgrade3 {
display: none;
}
js1(which completely doesn't work):
function showPerk() {
if (clicks >= price3reached || totalupgradeperk3 > 0) {
do{
document.getElementById("upgrade3").style.display =="block";
}
while(document.getElementById("upgrade3".style.display === 'none'));
}
update();
}
js2 (works but hides the element when going under the amount needed):
if (blnhideperk = true) {
if (clicks >= price3reached || totalupgradeperk3 > 0) {
document.getElementById("upgrade3").style.display = "block";
blnhideperk === false;
} // use === its something wierd about js = / == / === all do different comparisons
else {
document.getElementById("upgrade3").style.display = "none";
}
}
upgrade
Try
document.getElementById("upgrade3").style.display = "none";
Note the 1 equal sign, not 2 or 3, as those have other uses.
if (blnhideperk = true){
if (clicks >= price3reached || totalupgradeperk3 > 0){
document.getElementById("upgrade3").style.display = "block";
blnhideperk === false;}}
and moving
document.getElementById("upgrade3").style.display = "block";
out of the loop istead of in the else statement
seemed to do the trick
I was using jquery script like below for hiding and showing a div with a delay in milliseconds:
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
How can i achieve this result in pure javascript? This is the code i have at the moment:
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
The jQuery slideDown effect is not as simple in plain Javascript, but you can set any CSS property with ease.
display: none will make it appear as if box does not exist, and its width and height will be equal to 0. If you want there to be a blank space where the box is, you can use visibility: hidden or opacity: 0. If you use the latter and add the CSS transition: opacity .2s ease to the element, you can make it fade in.
function showOnlyOne(theChosenOne) {
var newBoxes = document.querySelectorAll('div.newboxes');
for (var i = 0, len = newBoxes.length; i < len; ++i) {
var box = newBoxes[i];
if (box.id === theChosenOne) {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
}
}
I'm trying to write a menu bar on the left side of the screen which is already set as a div with the id blur. I set another image which has the id menuImage which is actually a gear icon which should open the menu bar, however it simply won't respond and I can't figure out why. Please help me I'm stuck with this. Here is the code:
var state = false;
var opacity = 0.0;
var menuImage = document.getElementById("menuImage");
var blur = document.getElementById("blur");
var blurAppearence = function(){
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
}
if(state == false){
var disappearence = function(){
if(opacity <= 0.4){
blur.style.opacity = opacity;
} else {
clearInterval(timer)
}
opacity += 0.1;
}
var timer = window.setInterval(appearence, 50);
} else {
if(state == true){
var appearence = function(){
if(opacity >= 0.0){
blur.style.opacity = opacity;
} else {
clearInterval(timer2);
}
opacity -= 0.1;
}
var timer2 = window.setInterval(appearence, 50);
}
}
menuImage.addEventListener("click", blurAppearence);
It looks like you close your blurAppearance function block too early.
The closing brace that is right above the line
if(state == false){
should actually go right before the line
menuImage.addEventListener("click", blurAppearence);
also your first window.setInterval should call the disappearance function.
see https://jsfiddle.net/orndorffgrant/cfrc5b55/
You can also replace your
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
block with:
state = !state;
I'm making a register page using HTML, CSS and JS and Java servlet etc. I have a monitorer() function which checks if the user has finished inputting everything before making the register button visible. But now everything works, but somewhere am getting screwed over and the button never comes back..
my button in reg.html :
<input type="submit" value="Register" class="btnSub" id="btnReg" style="visibility:hidden;"/>
javascript function monitorer()
function monitorer() {
var btnReg = document.getElementById("btnReg");
btnReg.style.visibility = "hidden";
var flag = true;
if (document.getElementById("fname").value.length >= 3) {
if (document.getElementById("lname").value.length >= 3) {
if (valiDate(document.getElementById("dob"))) {
if (document.getElementById("USN").value.length == 10) {
if (document.getElementById("passw").value.length > 5) {
var ticks = document.getElementsByClassName("checker"), i = 0;
for (i = 0; i < ticks.length; i++) {
if (ticks.item(i).innerHTML == "✔") {
alert("i val = " + i);
continue;
} else {
flag = false;
break;
}
}
}
} else {
flag = false;
document.getElementById("USN").focus();
}
} else {
flag = false;
document.getElementById("dob").focus();
}
} else {
flag = false;
document.getElementById("lname").focus();
}
} else {
flag = false;
document.getElementById("fname").focus();
}
if (flag == true) {
btnReg.style.visibility = "visible";
} else if(flag == false) {
btnReg.style.visibility = "hidden";
}}
And to help you get as good a picture as you can, a screenshot
See - all the ticks are there, the first name, last name etc are having value.length >=3 but still the register button doesn't show..
Also, I have put the monitorer() method in every input's "onBlur", "onChange" events.
Here is a link to my html file >>> reg.html
and please let me know if i can improve anything?