We Keep Coding

loop through wordpress articles and add a css class with js

I hope you have a good day :)
I am working on a plugin currently. I would like to loop through all the articles: on click => open a popp-up, when the pop-up closes => show this content ... My code only works for the first article. Sorry if that seems trivial to you, if you have links or tutorials to advise me, I am interested :)
Thank you !
function socialLocker() {
let sl = document.querySelector(".ws-sl-container");
let slc = document.querySelector(".ws-sl-content");
document.querySelectorAll(".ws-sl-box-for-social-medias a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
sl.style.display = "none";
slc.style.display = "block";
}
}, 1000);
e.preventDefault();
};
});
};

It seems to be a problem with selecting the elements in the document.
You can use next selector: https://api.jquery.com/next/ instead of selecting all and looping with foreach. With next, you will get the closest element.
Suppose all the posts in your list have a button with the class trigger and when clicked it shows a popup with the class of popup.
<script>
jQuery(document).ready(function(){
jQuery(".popup").hide(); /* hide all popups */
jQuery(".trigger").click(function(){ /* when button is clicked */
jQuery(this).next(".popup").slideToggle(); /* toggle the closest popup */
});
});
</script>
This way the click / action (you want to have it when closed) on (this) element will affect nearest element.

html scroll to flickers page

Why when a user clicks a link in the list does it cause the browser to flicker? This seems to be very apparent when a user clicks the same 'link' twice. Is there a way for me to remove this from happening?
It also appears to happen if you click a link that scrolls upwards instead of down. To test this click the list item 'Test' and then click 'Why'
https://jsfiddle.net/JokerMartini/9vne9423/
Here is the main JS bits which are doing all the work...
JS
function scroll_to_element(element) {
$('html, body').animate({scrollTop: $(element).offset().top}, 500);
}
$(window).ready(function() {
$(".nav-title").click(function() {
var target = $(this);
// get data-filter text
var title = target.data('title').toLowerCase();
// collect section titles
sections = $( ".section-title" );
// loop through and scroll to valid section
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var section_title = section.data('title').toLowerCase();
if (section_title === title) {
scroll_to_element(section)
// console.log(target);
}
}
});
});

You should prevent the default behavior of the anchor tag before invoking your custom functionality:
$(".nav-title").click(function(e) {
e.preventDefault();
});
Updated Fiddle

put href="javascript:void(0);" instead of href="#" attribute in your "What is", "Why" and "Test1" links
jsfiddle

Is it possible to click through a movable div?

I am working on some jQuery/JavaScript that makes it possible to drag a div around and simultaneously be able to manipulate other divs (specifically images) on the page. The movable div is basically a transparent rectangle that is meant to simulate a lens. The problem I am having is that I cannot figure out how to pass clicks through to the images below the movable div. I have read up on the pointer-events CSS property and tried setting that to none for the movable div, but that makes the movable div no longer movable. Is there a way for me to pass clicks through this movable div while keeping it movable?
EDIT: To all those asking for my current code, here is the JavaScript that I have so far:
<script>
$(document).ready(function(){
$('img').click(function(e) {
$(document).unbind('keypress');
$(document).keypress(function(event) {
if ( event.which == 115) {
$(e.target).css('width', '+=25').css('height', '+=25');
};
if ( event.which == 97) {
$(e.target).css('width', '-=25').css('height', '-=25');
};
});
});
//code to drag the lens around with the mouse
$("#draggableLens").mousemove(function(e){
var lensPositionX = e.pageX - 75;
var lensPositionY = e.pageY - 75;
$('.lens').css({top: lensPositionY, left: lensPositionX});
});
});
</script>

I created a demo that is proof of concept using document.elementFromPoint to locate the nearest image the moveable element is over. I used jQueryUI draggable to simplify event handling.
The trick with using document.elementFromPoint is you must hide the element you are dragging just long enough to look for other elements, or the draggging element is itself the closest element.
Adding an active class to the closest element allows clicking on the viewer to access the active element
Demo code uses LI tags instead of IMG
var $images = $('#list li');
timer = false;
$('#viewer').draggable({
drag: function(event, ui) {
if (!timer) {
timer = true;
var $self = $(this);
/* use a timeout to throttle checking for the closest*/
setTimeout(function() {
/* must hide the viewer so it isn't returned as "elementFromPoint"*/
$self.hide()
var el = $(document.elementFromPoint(event.pageX, event.pageY));
$('.active').removeClass('active');
if ($el.is('li')) {
$el.addClass('active')
}
$self.show()
timer = false;
}, 100);
}
}
}).click(function() {
if ($('.active').length) {
msg = 'Clicked on: ' + $('.active').text();
} else {
msg = 'Click - No active image';
}
$('#log').html(msg + '<br>');
})
DEMO: http://jsfiddle.net/nfjjV/4/
document.elementFromPoint is not be supported in older browsers. You could also use jQuery position or offset methods to compare coordinates of elements with the current position of the viewer for full browser compatibility

How to disable scrolling in outer elements?

I have a vertically-scrolling div within a page that also scrolls vertically.
When the child div is scrolled with the mouse wheel and reaches the top or bottom of the scroll bar, the page (body) begins to scroll. While the mouse is over the child div, I'd like the page (body) scroll to be locked.
This SO post (scroll down to the selected answer) demonstrates the problem well.
This SO question is essentially the same as mine, but the selected answer causes my page contents to noticeably shift horizontally as the scrollbar disappears and reappears.
I thought there might be a solution that leverages event.stopPropagation(), but couldn't get anything to work. In ActionScript, this kind of thing would be solved by placing a mousewheel handler on the child div that calls stopPropagation() on the event before it reaches the body element. Since JS and AS are both ECMAScript languages, I thought the concept might translate, but it didn't seem to work.
Is there a solution that keeps my page contents from shifting around? Most likely using stopPropagation rather than a CSS fix? JQuery answers are welcome as is pure JS.

here's what i ended up with. very similar to #mrtsherman's answer here, only pure JS events instead of jQuery. i still used jQuery for selecting and moving the child div around, though.
// earlier, i have code that references my child div, as childDiv
function disableWindowScroll () {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", onChildMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = onChildMouseWheel;
}
function enableWindowScroll () {
if (window.removeEventListener) {
window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
function onChildMouseWheel (event) {
var scrollTgt = 0;
event = window.event || event;
if (event.detail) {
scrollTgt = -40 * event.detail;
} else {
scrollTgt = event.wheelDeltaY;
}
if (scrollTgt) {
preventDefault(event);
$(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt);
}
}
function preventDefault (event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
i've noticed the scrolling doesn't match normal scrolling exactly; it seems to scroll a bit faster than without this code. i assume i can fix by knocking down wheelDeltaY a bit, but it's odd that it would be reported differently by javascript than it's actually implemented by the browser...

I usually do it with a small hack listening to the scroll event on the document: it resets the scroll height back to the original one - effectively freezing the document from scrolling but any inner element with overflow: auto will still scroll nicely:
var scrollTop = $(document).scrollTop();
$(document).on('scroll.scrollLock', function() {
$(document).scrollTop(scrollTop);
});
and then when I'm done with the inner scroll lock:
$(document).off('scroll.scrollLock');
the .scrollLock event namespace makes sure I'm not messing with any other event listeners on scroll.

Although this is an old question, here is how I do it with jQuery. This allows you to scroll a list within an outer list, or you can change the outer list to the document to do what the OP asked.
window.scrollLockHolder = null;
function lockScroll(id){
if (window.scrollLockHolder == null){
window.scrollLockHolder = $('#' + id).scrollTop();
}
$('#' + id).on('scroll', function(){
$('#' + id).scrollTop(window.scrollLockHolder);
});
}
function unlockScroll(id){
$('#' + id).off('scroll');
window.scrollLockHolder = null;
}
And you can use it like this:
<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')">
<li>...</li>
<li>...</li>
</ul>

what about this:
div.onmousemove = function() { // may be onmouseover also works fine
document.body.style.overflow = "hidden";
document.documentElement.style.overflow = "hidden";
};
div.onmouseout = function() {
document.body.style.overflow = "auto";
document.documentElement.style.overflow = "auto";
};

Mouseover - mouseout - Javascript

what i'm trying to do:
When a user hovers over an image, a little x (image) should appear in the top right corner. If the user clicks on this little x the image should be deleted and when the user does a mouseout the little x should dissapear. I've tried several things:
html structure is an ul with li's and an image in it
Javascript:
//On all the li's in the ul
$("li",$flickrKeyUlPreview).mouseover(addExternalImage);
var addExternalImage = function(){
//Get the offset of the image the user is hovering over
var offset = $(this).offset();
//Move the little x button to the image
$flickrDetailButton.offset(offset);
//Set it visible
$flickrDetailButton.css("visibility","visible");
//Bind the event for the mouseout
$flickrDetailButton.mouseout(removeExternalButton);
};
var removeExternalButton = function(){
//Hide the little x
$flickrDetailButton.css("visibility","hidden");
};
The reason this doesn't work: When the user hovers over the little image the mouseover is triggered.
I've also tried:
$("li",$flickrKeyUlPreview).mouseover(addExternalImage);
var addExternalImage = function(){
$(this).unbind('mouseover');
var emptyObject = {};
$(this).append($.TemplateRenderer($flickrDetailButton,emptyObject));
$flickrDetailButton = $('#flickr_detail_button',rootel);
$(this).mouseout(removeExternalButton);
};
var removeExternalButton = function(){
$(this).unbind('mouseout');
$flickrDetailButton = $('#flickr_detail_button',rootel);
if ($($flickrDetailButton, $(this))) {
$($flickrDetailButton, $(this)).remove();
}
$(this).mouseover(addDelBtn);
};
This doesn't work that well, the little x starts flickering.
Tried this too:
$("li",$flickrKeyUlPreview).mouseenter(addExternalImage);
var removeExternalButton = function(){
$flickrDetailButton = $('#flickr_detail_button', rootel);
if ($($flickrDetailButton, $(this))) {
$($flickrDetailButton, $(this)).remove();
}
$(this).mouseenter(addExternalImage);
};
var addExternalImage = function(){
var emptyObject = {};
$(this).append($.TemplateRenderer($flickrDetailButtonTemplate,emptyObject));
$flickrDetailButton = $('#flickr_detail_button',rootel);
$(this).mouseout(removeExternalButton);
$flickrDetailButton.mouseleave(removeExternalButton);
};
This gave the same effect, it was still flickering
Does anyone have another idea how to do this (don't need specific codes, concepts are appreciated too ;) ) ?

$('selector').hover(addExternalImage, removeExternalButton);

Replace mouseover and mouseout with mouseenter and mouseleave.