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';
}
}
}
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've been trying to create a mobile navigation menu with HTML and javascript.
So I created four links, a checkbox and a function that can hide the links when the checkbox is unchecked and unhide them when it is checked, it works fine, the only problem is I do not want the function to execute if the screen width is more than 516px.
Here's what I've got so far ("toggle" is the ID of the checkbox and "links" is the ID of the links):
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
Here is my updated code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (document.body.clientWidth <= 516) {
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
It still isn't working.
Here is the whole thing in jsfiddle...
You can use window.matchMedia(). See Receiving query notifications
if (window.matchMedia("(min-width: 516px)").matches) {
/* The viewport is at least 516 pixels wide */
} else {
/* The viewport is less than 516 pixels wide */
// do stuff
}
The if statement checks the document.body.clientWidth as recommended here: https://developer.mozilla.org/en-US/docs/Web/API/Document/width
document.querySelector('#test').addEventListener('click', test);
function test(event) {
let target = document.querySelector('#content');
target.innerHTML = `screen width ${document.body.clientWidth}px`;
if(document.body.clientWidth <= 516) {
target.innerHTML = Date.now().toString();
}
}
<button id="test">Test</button>
<div id="content"></div>
you can use below code to add a condition in your code.
if (window.screen.width > 516 ){
// do stuff
}
Here is link for more info.
use $(window).width() in if statement to get the width of the user window, then check if it is greater than 516px
JQUERY Code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if ($(window).width() > 516) {
//if width is greater than 516px
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
JS Code:
document.body.clientWidth use this instead for pure js, you're missing an end bracket } in function togglemenu()
function togglemenu() {
alert(document.body.clientWidth);//to check the current client width
if (document.body.clientWidth <= 516) {
alert("working");//just to check if it really works
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
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.
I am trying to make a simple slide show to cycle through my images. The problem I'm having is when trying to select only the images in the "image_wrapper" div using document.getElementById("image_wrapper").getElementsByTagName("img")
is that it also selects the images from a sibling div. I only want to cycle through the images in the image_wrapper div.
The html onclick calls addOne() when the right arrow is clicked, and takeOne() when the left arrow is clicked
var x = 0;
var hideImage = document.getElementsByClassName("profile_image");
function displayOne() {
for(i = 0; i < hideImage.length; i++) {
if(i == 0) {
hideImage[0].style.display = "inline-block";
}
}
}
function addOne() {
var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
if(x < profileImg.length ) {
x++;
} else {
x = 0;
}
for(i = 0; i < profileImg.length ; i++) {
if(x == profileImg.length) { x = 0;}
if(x == i) {
profileImg[i].style.display = "inline-block";
} else {
profileImg[i].style.display = "none";
}
}
}
function takeOne() {
var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img");
if(x > 0 ) {
x--;
} else {
x += profileImg.length - 1 ;
}
for(i = 0; i < profileImg.length ; i++) {
if(x == -1) { x = profileImg.length; }
if(x == i) {
profileImg[i].style.display = "inline-block";
} else {
profileImg[i].style.display = "none";
}
}
}
Have you tried;
document.querySelectorAll('#image_wrapper img');
document.querySelectorAll() and document.querySelector() can take css selectors.
I would like to fade out some elements on my page with javascript but without jquery. How should I do this onclick?
After our small discussion in the comments of your question you mentioned you were primarily targeting mobile devices. CSS transition, therefore, might be your best option as it's supported by all versions of iOS and Android and doesn't perform any expensive JavaScript loops.
Here's a fiddle of a working minimal implementation.
HTML:
fade
<div id="toFade">...</div>
CSS:
#toFade {
-webkit-transition: opacity 2s;
opacity: 1;
}
#toFade.faded {
opacity: 0;
}
Javascript:
document.getElementById('doFade').addEventListener('click', function() {
document.getElementById('toFade').className += 'faded';
});
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
taken from http://vanilla-js.com/
I guess you'd make your own fadeOut function?
function fade(element, speed) {
var op = 1,
timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, speed);
}
FIDDLE
If you're only targeting browsers that support CSS3 fade options, go for CSS3, but if not you'll want something like:
function addEvent(obj,event,func)
{
if(typeof func !== 'function')
{
return false;
}
if(typeof obj.addEventListener == 'function' || typeof obj.addEventListener == 'object')
{
return obj.addEventListener(event.replace(/^on/,''), func, false);
}
else if(typeof obj.attachEvent == 'function' || typeof obj.attachEvent == 'object')
{
return obj.attachEvent(event,func);
}
}
addEvent(elem,'onclick',function(e) {
var target = e.srcElement || e.target;
target.style.opacity = 1;
var fadeOutInt = setInterval(function() {
target.style.opacity -= 0.1;
if(target.style.opacity <= 0) clearInterval(fadeOutInt);
},50);
});
JSFiddle
CSS
.fade{
opacity: 0;
}
JavaScript
var myEle=document.getElementById("myID");
myEle.className += " fade"; //to fadeIn
myEle.className.replace( /(?:^|\s)fade(?!\S)/ , '' ) //to fadeOut