This is my code:
var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
if (cross_one.style.display == "") {
cross_one.style.display = "none";
works_navigation.style.display = "block";
} else {
cross_one.style.display = "";
works_navigation.style.display = "none";
}
}
);
Included is a toggle function which works very well. But additionally, I need a command like this:
If a <a> link inside the construction gets clicked, it should not toggle.
My idea would be something like this:
var allLinks = document.links;
allLinks[i].onclick = function () {
cross_one.style.display = "none"; };
But I don't know who to indclude it.
Not sure i understood your question, but you might be looking for something like this :
In your HTML, add your link like
My Link
and in your JS
var toggle = true;
function doNotToggle() {
toggle = false;
}
var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
if (toggle) {
if (cross_one.style.display == "") {
cross_one.style.display = "none";
works_navigation.style.display = "block";
} else {
cross_one.style.display = "";
works_navigation.style.display = "none";
}
}
});
and clicking your link will stop your eventListener function from doing anything.
Related
Yesterday I was trying to make a slider on radio buttons with JavaScript and after few hours finished with code cited below. I'm quite new to JavaScript but know that repeating actions should be placed in a loop. So is there any chance to do that?
var slide = document.getElementsByClassName('slide');
var radio = document.querySelectorAll('.slider-form [type="radio"]');
var x = function () {
for( var i = 0; i < slide.length; i += 1) {
if(radio[i].checked === true) {
slide[i].style.display = "flex";
}
}
}
x();
radio[0].addEventListener('change', function () {
slide[0].style.display = "flex";
slide[1].style.display = "none";
slide[2].style.display = "none";
});
radio[1].addEventListener('change', function () {
slide[0].style.display = "none";
slide[1].style.display = "flex";
slide[2].style.display = "none";
});
radio[2].addEventListener('change', function () {
slide[0].style.display = "none";
slide[1].style.display = "none";
slide[2].style.display = "flex";
});
And the second question is, can I somehow bind my radio[number] with slide[same number], so I could just change classes like in this example:
$("input[type=radio]:not(:checked)").addClass("hiddenRadio");
Again, I'm interested in minimizing my code (because there could be ten or more buttons), so is there any way to apply changing of the class in 1-2 lines of code or in a loop.
Try below solution. I think this will solve your problem.
var slides = document.querySelectorAll('.slide');
var radios = document.querySelectorAll('.slider-form [type="radio"]');
function hideAllSlide() {
slides.forEach(function(slide) {
slide.style.display = 'none';
});
}
radios.forEach(function(radio, index) {
if(radio.checked){
slides[index].style.display = 'flex';
}
radio.addEventListener('change', function() {
hideAllSlide();
slides[index].style.display = 'flex';
});
});
My problem right now is that I have to write every variable and every if clause manually to get every button to work, which is obviously way too much work and it's very limited.
The example code I have works as intended but will get too long very quick...
<script>
window.onclick = function(event) {
var modalEdit1 = document.getElementById('MODAL_EDIT1');
var modalEdit2 = document.getElementById('MODAL_EDIT2');
var modalEdit3 = document.getElementById('MODAL_EDIT3');
var modal = document.getElementById('MODAL_ADD');
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modalEdit1) {
modalEdit1.style.display = "none";
}
if (event.target == modalEdit2) {
modalEdit2.style.display = "none";
}
if (event.target == modalEdit3) {
modalEdit3.style.display = "none";
}
}
function closeModal(target) {
var view = document.getElementById(target);
view.style.display = "none";
}
function showModal(target) {
var view = document.getElementById(target);
view.style.display = "block";
}
EDIT: Isn't there a way to do it by increments?
If the event.target is the element you need:
window.onclick = function(event)
{
var modal = document.getElementById('MODAL_ADD');
if (event.target == modal) {
modal.style.display = "none";
}
event.target.style.display = "none";
}
function closeModal(target) {
var view = document.getElementById(target);
view.style.display = "none";
}
function showModal(target) {
var view = document.getElementById(target);
view.style.display = "block";
}
Give common class to all modals, then if target has this class all target has parent with this class, hide target/target's parent
You can add class to specifying this behaviour.
Here is example with "hideable" class.
window.onclick = function(event) {
if (event.targed.className == 'hideable') {
event.target.style.display = 'none'
}
}
This works fine at all times except for the first time tab_toggle(0) is called.
when the first time this function is called the #box_home has display:block; so the function shouldn't do anything but whats happening is #box_port(the next div) is getting display:block; and #box_home remaining display:block as before. why is this happening. is it because when the function is called the variable has value undefined so doing some random thing.
Please answer this in javascript only, dont answer in jquery.
i couldnt make it work just this part in jsfiddle so i am sharing the entire webpage code
http://goo.gl/dhTUDH
<!-- Javascript -->
<script>
function tab_toggle(x) {
console.log("tab_toggle");
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home,port,about,contact];
switch (x) {
case 0:
if (home.display == "block") {
console.log('end');
} else if (port.display == "block") {
box[0].display = "block";
box[1].display = "none";
} else if (about.display == "block") {
box[1].display = "block";
box[2].display = "none";
} else {
box[2].display = "block";
box[3].display = "none";
}
break;
default:
if (home.display == "block") {
box[0].display = "none";
box[1].display = "block";
} else if (port.display == "block") {
box[1].display = "none";
box[2].display = "block";
} else if (about.display == "block") {
box[2].display = "none";
box[3].display = "block";
} else {}
break;
}
}
<!-- HTML -->
◀
▶
<div id="box_home"></div>
<div id="box_port"></div>
<div id="box_about"></div>
<div id="box_contact"></div>
<!-- CSS -->
#box_home{display:block;}\
#box_port{display:none;}
#box_about{display:none;}
#box_contact{display:none;}
You can't access a style directly as a property, as in
home.display
Instead, use the getComputedStyle() method
getComputedStyle(home).display
element.style will get the element's inline style. Try getComputedStyle or add a class.
getComputedStyle(box[0]).getPropertyValue("display")
Not sure what would you achieve, but this should work:
var currentElement = 0;
(tab_toggle = function (x) {
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home, port, about, contact];
if (currentElement + x < 0 || currentElement + x > box.length - 1)
return;
currentElement += x;
console.log("toggled " + currentElement);
for (var i = 0; i < box.length; i++) {
box[i].display = "none";
}
box[currentElement].display = "block";
})(0);
I've been studying javaScript for two weeks now and I know there must be a better wayf doing what is shown bellow.
This is what happens:
The function myId() call another function and receives back a parameter that can be mk-prod06, mk-prod05, mk-prod04, mk-prod03. But I was wondering if I can make this function more flexible by accepting any parameter (mk-prod0x) where x can be any number. I don't' want to hand write every "if" for it. Is that even possible in this case? Thank you.
//Hides and shows product boxes
function myId() {
adjustStyle();
var showProduct6, showProduct5, showProduct4, showProduct3, hideProduct6, hideProduct5, hideProduct4, hideProduct3;
if (oProdId === "mk-prod06") {
showProduct6 = document.getElementById("mk-prod06");
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct6.style.display = "inline";
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod05") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct6.style.display = "none";
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod04") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod03") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
showProduct3 = document.getElementById("mk-prod03");
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod02") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct3 = document.getElementById("mk-prod03");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
hideProduct3.style.display = "none";
}
}
Well, you basically have written out a loop. And it's quite trivial to formulate that loop explicitly:
function myId() {
adjustStyle();
var x = // the number, wherever you got it from. Maybe:
// parseInt(oProdId.slice(7), 10)
for (var i=6; i>2; i--) {
var product = document.getElementById("mk-prod"+("0"+i).slice(-2));
product.style.display = i > x ? "none" : "inline";
}
}
Something like this should work:
function hideShow(id) {
var upTo = id.match(/md-prod0(\d)/)[1];
for (var i = 3; i < 6; i++) {
var element = document.getElementById('md-prod0' + i);
if (i <= upTo) element.style.display = 'inline';
else element.style.display = 'none';
}
}
You have to adjust it slightly if more elements will be added.
Basically it loops over 3 to 6 and checks whether the current element is less than or equal to the given ID. In that case it shows the element. Otherwise it hides it.
I have a javasccript function that shows or hides "spans" when I click an input to show hints when a user fills out forms:
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
My problem is that when I try to add a link to the hints text, the user cannot click it because it registers first with the onblur event and the hint dissapears, so I would like to know how to modify this function so that it does not hide when I click the hint.
You can use a boolean var to test if the user is with mouse over your hint, then if onblur and not mouseOver you hide your hint.
Something like this inside your loop:
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
(function(i) {
// Let the code cleaner :)
var span = inputs[i].nextElementSibling;
span.onmouseover = function() { this.isOver = true; }
span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.isFocus = true;
span.style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.isFocus = false;
if(!span.isOver) span.style.display = "none";
}
})(i);
}
I put a self executing function just to keep the var i scope, you don't have troubles onmouseout function.
EDIT: Updated the example
Your code for get the next span will not work, so I changed to nextElementSibling, because the example you put in the jsfiddler.
This is the new working code:
$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
(function(i) {
// Let the code cleane
var span = inputs[i].nextElementSibling;
if(span instanceof HTMLSpanElement) {
if(span.className == "hint") {
span.onmouseover = function() { this.isOver = true; }
span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus) inputs[i].onblur(); }
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.isFocus = true;
span.style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.isFocus = false;
if(!span.isOver) span.style.display = "none";
}
}
}
})(i);
}
});