I have a procedural feed within my website which loads in data every time the user scrolls to the bottom of the page; the usual stuff.
The pagination itself works fine; however, the clicking of buttons which utilize JavaScript do not work. At all.
This is the JavaScript trigger for the buttons which is not working:
var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons
modal;
document.onclick = function(e){ // document on click
for(var i = 0; i < modalTrigger.length; i++){ // iterate through each button
if(e.target == modalTrigger[i]){ // if target clicked was button
e.stopPropagation(); // stop dom event from bubbling
modal = document.getElementById(modalTrigger[i].getAttribute("data-activemodal"));
document.body.style.overflow = "hidden"; // disable scroll on page
modal.style.display = "block"; // display modal
}
}
}
As far as I'm aware, this should be working (with the use of stopPropagation()), but alas, it does not.
I was going to use Inline JS, but I feel like it's extremely unnecessary and could be done it just a couple of lines of separate JavaScript, instead of adding extra HTML into the mix for no reason.
So any, and all help is appreciated,
Thanks. :)
Fiddle: https://jsfiddle.net/xhp4cesr/
EDIT: I noticed that after removing the span within the button, it would work, but as soon as it was added back, it would not.
One way you can do this is to remove e.stopPropogation and also target the children
var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), // the buttons
modal;
document.onclick = function(e) { // document on click
for (var i = 0; i < modalTrigger.length; i++) { // iterate through each button
if (e.target == modalTrigger[i] || modalTrigger[i].children) { /* <- added children as target */
modal = modalTrigger[i].getAttribute("data-activemodal");
console.log(modal);
}
}
}
a {
background: red;
padding: 40px;
}
span {
color: yellow;
}
<a class="ts-modal__trigger" data-activemodal="ts-main-feed_status-comments-overlay">
<span>11</span>
</a>
Related
So, I am writing a code for my webpage that if you have one of two boxes open (registration, login) you can't open another one. I'm stuck with the following problem: once you close the box with pressing the mouse out of the box, value changes to 1 and you should be able to open the box again but all of a sudden it sets itself to 0 and you can't open the box anymore.
IF you close the box with CLOSE button, you CAN open the box again but not with pressing outside the box.
At the start of JS file I declare var openable and set value to 1.
var openable = 1;
Code for closing with CLOSE button:
$("#closeReg").click(function(){
openable = 1;
console.log(openable);
$('#register').css('display','none');
$("#register").siblings().css("opacity", "1");
});
Code for pressing out of box:
var subject = $("#register");
if(e.target.id == subject.attr('id')){
subject.fadeOut();
subject.siblings().css("opacity", "1");
openable = 1;
console.log(openable);
}
Code for opening the box:
$("#regButton").click(function(){
console.log(openable);
if(openable == 1){
$("#register").fadeIn();
$("#register").siblings().css("opacity", "0.5");
openable = 0;
console.log(openable);
}
});
Whole code:
https://pastebin.com/vC461VGy
var openable = 1;
$("#closeReg").click(function() {
openable = 1;
console.log(openable);
$('#register').css('display', 'none');
$("#register").siblings().css("opacity", "1");
});
$("#regButton").click(function() {
console.log(openable);
if (openable == 1) {
$("#register").fadeIn();
$("#register").siblings().css("opacity", "0.5");
openable = 0;
console.log(openable);
}
});
$('body').click(function(e) {
if ($(e.target).closest('#register').length <= 0 && !$(e.target).is('#closeReg') && !$(e.target).is('#regButton')) {
$('#closeReg').trigger('click');
}
});
#register {
background-color: #FFAAAA;
}
body {
height: 200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="closeReg">Close</button>
<button id="regButton">Open</button>
<div id="register">
register box
</div>
Here, try this sample.
Your code for hiding when clicking outside was not working correctly, mainly because e is undefined and even if we consider it to be a click event your test was wrong.
The main difficulty is to detect the click outside the box without detecting the click that opens it, or you will end up opening and closing at the same time. Hence why I added the two tests to make sure the targets aren't buttons that handle specific behaviors.
Also, instead of doubling the code to close the modal, I have made it so when you click anywhere, it triggers a click on the close button, that way only one event is to be kept up to date. Note that this could also be do-able by creating your own event instead but meh...
I have this simple dropdown faq system, I only want one content div to be open at a time, so I tried to use an if / else condition, but I can only make it work halfway.
I'm checking if the content div next to the trigger div has class is-visible — if not, add that class (this works)
But if the previous content div has (contains) class is-visible, I want to remove it, so only one content div is open at a time.
I've tried so many different conditions but I think I'm overcomplexifying it, this should be simple enough right?
https://jsfiddle.net/notuhm05/1/
var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
for (var i = 0; i < faqTrigger.length; i++) {
faqTrigger[i].addEventListener('click', function() {
if (!this.nextElementSibling.classList.contains('is-visible')) {
this.nextElementSibling.classList.add('is-visible');
} else if (this.previousElementSibling.classList.contains('is-visible')) {
this.nextElementSibling.classList.remove('is-visible');
} else {
console.log("doesn't work");
}
});
}
Would greatly appreciate some pointers here! :-)
Here is a working solution:
Toggle the class is-visible on the clicked node
Iterate through all triggers and remove the class is-visible if the id of the href tag does not match the clicked nodes id. NOTE: I had to add an id property to the trigger href tag like <a id="1" href="#" class="mm-faq-trigger">Trigger</a>
Source Code:
var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
for (var i = 0; i < faqTrigger.length; i++) {
faqTrigger[i].addEventListener('click', function() {
this.nextElementSibling.classList.toggle('is-visible');
for (var i = 0; i < faqTrigger.length; i++) {
var trigger = faqTrigger[i];
if (trigger.nextElementSibling !== null && trigger.id !== this.id) {
trigger.nextElementSibling.classList.remove('is-visible');
}
}
});
}
I have DOM elements with :active CSS styling. If a user makes a click, but never releases the click, I want to be able to cancel the :active styling through Javascript.
I have tried doing document.activeElement.blur() but that doesn't work when the user does not release the click. (See fiddle here.)
How can I force blur an element if the user doesn't release their click?
#bobdye's example doesn't work because <div> elements aren't "focusable" by default.
You can force this behaviour by assigning a tabindex property to the div, here is a fiddle.
HTML
<div class="defocus">.::.:.:.::.</div>
<div class="defocus">:..:.:.:..:</div>
<div class="defocus">.::.:.:.::.</div>
You add the class="defocus" attribute to any element that needs to blur after x seconds.
CSS (relevant)
div:active {
color:lightcoral;
}
JavaScript
(function () {
window.addEventListener("load", function () {
var seconds = 0.15 * 1000;
var defocused = document.getElementsByClassName("defocus");
for (var i = 0, l = defocused.length; i < l; i++) {
var el = defocused[i];
el.style.outline = 0; //optional
el.setAttribute("tabindex", -1);
el.addEventListener("mousedown", blur);
}
function blur(e) {
var el = e.target;
setTimeout(function (el) {
el.blur();
}, seconds, el);
}
});
})();
First we wrap this function in a seaf just as a commodity (it will prevent the blur function and variables from being accessible).
Then we get all the elements with a defocus class.
Then we iterate over them.
First we eliminate the focus outline some browsers use because it looks ugly in a div, but it's up to you.
Then we set a tabindex="-1". Using -1 as an index prevents it from acting as a tab break point but allows it to recieve focus and blur events.
Finally we add the blur() function to the mousedown event which will defocus de element after x seconds.
Then we define the blur() function which will take care of defocusing the element with a setTimeout().
That's it, hope it helps!
Note: I don't particularly care for the bounty, keep your rep!
Note: Thanks to #Adam for pointing out that seaf's variables need the var prefix to prevent them from being global.
This Fiddle a simple example of canceling the active state if the user holds the mouse down for more than 500ms.
It uses a link:
<a id="testlink" href="#">Click this</a>
styled to be red if active, and this Javascript:
var lnk = document.getElementById('testlink');
var mousedown = false;
var timerId = null;
lnk.addEventListener('mousedown', function(e) {
mousedown = true;
timerId = window.setTimeout(function() {
if (mousedown) {
lnk.blur();
}
}, 500);
});
lnk.addEventListener('click', function(e) {
mousedown = false;
window.clearTimeout(timerId);
});
Obviously not customized for your particular case, but a "proof of concept".
to be added to other answers, you may use a transition (delayed or not):http://codepen.io/anon/pen/LEXZGB
*:active {
background: red;
filter:blur(5px);
transition: filter 3s 1s;
}
<script src='http://s.codepen.io/assets/libs/prefixfree.min.js'></script>
see me blured if you click too long.
My goal is to have my div menu disappear when I click anywhere else on the page. Below is the code that opens and closes my code when clicking on the two divs themselves.
var content_nav = '';
var content_select = '';
window.onload=function(){
content_nav = document.getElementById("content_nav");
content_select = document.getElementById("content_select");
content_nav.addEventListener("click", show_or_hide);
}
function show_or_hide()
{
if(content_select.style.display!="block") content_select.style.display="block";
else content_select.style.display="none";
}
You should listen to the click event on the whole page and hide the menu if the click was outside content_nav, try this (you might need to tweak it to make it work, I do not know your HTML):
$(document).click(function(e){
if (! $(e.target).closest('#content_nav').length )
$('#content_nav').hide();
});
i have made a calculator. i have uploaded it on the following webpage.
www.vipulshree.com
i want to highlight a button on clicking it and remove highlight from it when another button is clicked. when the next button is clicked, it should change color/disable/highlight and the previous button comes back to normal. Please help me ive searched all over the net for this and could not find anything. Help me im desperate.
Thank You.
You can define a class for your buttons and then using the click event you can change its color, and when you click on any button save it in variable say "previous".
So when you click any other button you again change the color of the saved button variable
and assign the current button to that variable.
var previous;
document.getElementsByClassName("className").onclick = function (){
// change the color of the previous element
previous = this;
// change the color of this button
}
Use the :focus CSS pseudo-selector. It will match the element currently having focus. Seems to not work on buttons
Use JavaScript to add a class .focused on click, and remove it on all other elements. Use event delegation on the common parent of all buttons (in this code, it's assumed to be #container).
<script type="text/javascript">
setFocus = function(e) {
if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = '';
if (e.target.tagName.toLowerCase() == 'button') {
e.target.className = 'focus';
}
};
document
.getElementById('container')
.onclick = setFocus;
</script>
My HTML markup looked like this:
<div id="container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
Working Example
here is a little jsfiddle working example, it's using jQuery only for the dom ready loader and a CSS class to do the highlight effect.
http://jsfiddle.net/t6bJ3/
var buttons = document.getElementsByTagName('button'),
buttonsLength = buttons.length,
selected,
i = 0,
reset = function() {
for (i = 0; i < buttonsLength; i++) buttons[i].className = '';
},
highlight = function(ev) {
reset();
ev.target.className = 'highlight';
};
for (; i < buttonsLength; i++) buttons[i].onclick = highlight;