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.

Javascript hiding and showing dynamic content of a div

Currently I hide and show the content of a div like this:
var header = null;
var content = null;
var mainHolder = null;
var expandCollapseBtn = null;
var heightValue = 0;
header = document.getElementById("header");
content = document.getElementById("content");
mainHolder = document.getElementById("mainHolder");
expandCollapseBtn = header.getElementsByTagName('img')[0];
heightValue = mainHolder.offsetHeight;
header.addEventListener('click', handleClick, false);
mainHolder.addEventListener('webkitTransitionEnd',transitionEndHandler,false);
function handleClick() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
mainHolder.style.height = "26px";
content.style.display = "none";
}
else
{
mainHolder.style.height = heightValue + "px";
}
}
function transitionEndHandler() {
if(expandCollapseBtn.src.search('collapse') !=-1)
{
expandCollapseBtn.src = "expand1.png";
}
else{
expandCollapseBtn.src = "collapse1.png";
content.style.display = "block";
}
}
This is fine if the content is static, but I'm trying to populate my div dynamically like so.
This is called from an iphone application and populates the div with a string.
var method;
function myFunc(str)
{
method = str;
alert(method);
document.getElementById('method').innerHTML = method;
}
I store the string globally in the variable method. The problem I am having is now when I try expand the div I have just collapsed there is nothing there. Is there some way that I could use the information stored in var to repopulate the div before expanding it again? I've tried inserting it like I do in the function but it doesn't work.
Does anyone have any ideas?
to replicate:
Here is the jsfiddle. jsfiddle.net/6a9B3 If you type in text between
here it will work fine. I'm not sure
how I can call myfunc with a string only once in this jsfiddle, but if
you can work out how to do that you will see it loads ok the first
time, but when you collapse the section and attempt to re open it, it
wont work.
If the only way to fix this is using jquery I dont mind going down that route.

is it working in other browsers?
can you jsfiddle.net for present functionality because it is hard to understand context of problem in such code-shoot...
there are tonns of suggestions :) but I have strong feeling that
document.getElementById('method')
returns wrong element or this element not placed inside mainHolder
update: after review sample in jsfiddle
feeling about wrong element was correct :) change 'method' to 'info'
document.getElementById('method') -> document.getElementById('info')

I think you want to use document.getElementById('content') instead of document.getElementById('method') in myFunc.

I really see nothing wrong with this code. However, a guess you could explore is altering the line
content.style.display = "none";
It might be the case that whatever is displaying your html ( a webview or the browser itself) might be wiping the content of the elemtns, as the display is set to none

Displaying the content of an external file within jQuery modal

I work with a simple modal to understand how jQuery modal works. With this process
var load = 'alert.html'; // THE PURPOSE OF THIS QUESTION IS TO CHANGE "alert.html" to "image.jpg"
$(this).click(function(e) {
e.preventDefault();
$('body').append('<div id="overlay" />');
$('#overlay').fadeIn(300, function() {
$('body').append('<div id="alertModalOuter"><div id="alertModal"></div></div>');
var outer = $('#alertModalOuter');
var modal = $('#alertModal');
var defWidth = outer.outerWidth();
var defHeight = outer.outerHeight();
modal.load(load + ' #alert', function() {
var alertBoxContent = $('#alert');
var alertWidth = alertBoxContent.outerWidth();
var alertHeight = alertBoxContent.outerHeight();
var widthCombine = -((defWidth + alertWidth) / 2);
var heightCombine = -((defHeight + alertHeight) / 2);
modal.animate({width: alertWidth, height: alertHeight}, 200);
outer.animate({marginLeft: widthCombine, marginTop: heightCombine}, 200, function() {
alertBoxContent.fadeIn(200, function() {
});
});
});
This appends the content of an external file come (from load) to the modal windows; but this only works for the content within tag of id="alert". How can I remove the role of "alert" to display the entire content of external file. For example, I want to load an external image (which is an image file and not between "alert" tag).

You don't have to specify the #alert selector and it'll load the whole page. It's worth noting that if you don't specify a selector, then load calls .html() and processes all the scripts before removing them. You may have some scripts running giving you unexpected results. The .load() docs

Javascript: open & close new window on image's onMouseOver & onMouseOut, but only if new window onMouseOver = true

thank you all for helping me previously with my Javascripting problems. My current problem is that I need to open & close a new window on an image's onMouseOver & onMouseOut, respectively, but if the new window onMouseOver == true then I don't want the new window to close.
I am sure there is a simple solution, but I can't seem to figure out a way to cancel the image's onMouseOut="closeDetails();" if the user hovers over the New Window. Below is most of the code I am dealing with. Thanks in advance for your help.
<body>
<img name="img1" id="img1" onMouseOver="windowDelay(this);"
onMouseOut="closeDetails();" src="images/127.jpg" height="240" width="166"/>
</body>
<script language="JavaScript" type="text/javascript">
// This opens the movie details pop-up after an
// half second interval.
function windowDelay(thatImg)
{
winOpenTimer = window.setTimeout(function() {openDetails(thatImg);}, 2000);
}
// This is the function that will open the
// new window when the mouse is moved over the image
function openDetails(thatImg)
{
// This creates a new window and uses the hovered image name as the window
// name so that it can be used in the that window's javascript
newWindow = open("", thatImg.name,"width=400,height=500,left=410,top=210");
// open new document
newWindow.document.open();
// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
newWindow.document.write("<html><head><title>Movies</title>");
newWindow.document.write("<script src='myDetails.js' type='text/javascript'>");
newWindow.document.write("</script></head>");
newWindow.document.write("<body bgcolor='white' onload='popUpDetails();'>");
newWindow.document.write("... SOME OTHER HTML....");
newWindow.document.write("</body></html>");
// close the document
newWindow.document.close();
}
// This is the function that will call the
// closeWindow() after 2 seconds
// when the mouse is moved off the image.
function closeDetails()
{
winCloseTimer = window.setTimeout("closeWindow();", 2000);
}
// This function closes the pop-up window
// and turns off the Window Timers
function closeWindow()
{
// If popUpHover == true then I do not want
// the window to close
if(popUpHover == false)
{
clearInterval(winOpenTimer);
clearInterval(winCloseTimer);
newWindow.close();
}
}
function popUpDetails()
{
// This will be used to prevent the Details Window from closing
popUpHover = true;
// Below is some other javascript code...
}
</script>

I would recommend against using a new browser window for this task. Try something like this:
var popup = {
open = function () {
if (this.element == null) {
// create new div element to be our popup and store it in the popup object
this.element = document.createElement('div');
this.element.id = "myPopup";
// you don't need a full html document here. Just the stuff you were putting in the <body> tag before
this.element.innerHTML = "<your>html</here>";
// Some bare minimum styles to make this work as a popup. Would be better in a stylesheet
this.element.style = "position: absolute; top: 50px; right: 50px; width: 300px; height: 300px; background-color: #fff;";
}
// Add it to your <body> tag
document.body.appendChild(this.element);
// call whatever setup functions you were calling before
popUpDetails();
},
close = function () {
// get rid of the popup
document.body.removeChild(this.element);
// any other code you want
}
};
// The element you want to trigger the popup
var hoverOverMe = document.getElementById("hoverOverMe");
// set our popup open and close methods to the proper events
hoverOverMe.onmouseover = popup.open;
hoverOverMe.onmouseout = popup.close;
That should do it. It's much easier to control than a new browser window. You will want to tweak the CSS yourself.
EDIT:
Here are instructions to do this with an actual window. To reiterate, using an actual window is not the best way to accomplish this task. A stylized div tag to look like a window is better because it offers more control, as well as standardized functionality across browsers. However, if you must use a window, here it is:
// You can use many principles from the example above, but I'll give the quick version
var popup;
var hoverOverMe = document.getElementById("hoverOverMe");
hoverOverMe.onmouseover = function () {
popup = window.open("path_to_content", "popup");
};
hoverOverMe.onmouseout = function () {
popup.close();
};
It works, but not very well (IMHO). If the user has their settings such that new windows open in new tabs (as I do), then a tab will open up. Javascript has no control over that. In Firefox, the new tab will open and gain focus, at which point it immediately closes because hoverOverMe had its onmouseout event fired (which obviously closes the window). I imagine you'd have this same problem with an actual window, too.

Replace the surround of an html element with another document

I have an html page with (among other things) a Unity3D window. I would like to replace everything on the page without causing the Unity window to reload. I have tried the following jquery-tastic
function replaceSurround(keepElem, newElem)
{
keepElem.siblings().remove();
keepElem.prepend(newElem.prevAll());
keepElem.append(newElem.nextAll());
var keepParent = keepElem.parent();
var newParent = newElem.parent();
if (keepParent && newParent)
{
replaceSurround(keepParent, newParent);
}
}
where keepElem is an element in the original document and newElem is the corresponding element in the new document, but it did not work very well.

Here is what I've got, it seems to work...
jQuery.fn.rewrap = function(newWrap){
var $parent = jQuery(this).parent();
var $clone = jQuery(this).siblings().clone()
var $newParent = $clone.wrap(newWrap).parent().clone();
$parent.replaceWith($newParent);
}
$('#header').rewrap('<div class="container" style="background-color:blue;" />');
I tested it on the Stackoverflow website. One small problem though, it seems to be refiring some onX events...?
[edit]
On second thought, that is not what you meant at all....
Can't you just do something like:
$('#result').load('ajax/test.html #result');
?