We Keep Coding

How to Show/Hide element on specifict url/endpoint

Can we make a script that allows to hide certain elements when endpoints are loaded in our website URL???
For example, when someone clicks on a currency option, it creates an endpoint "/?wmc-currency=USD". Or if implemented into the web like this https://www.yoursite.com/product/?wmc-currency=USD.
I want a div or any element to be hidden when "/?wmc-currency=USD" is added to the url.
Any help would be very valuable to me. Thanks very much

function checkEndpoint() {
if(window.location.search=="?wmc-currency=USD") {
document.getElementById('testid').style.width = 0;
}
}
checkEndpoint();
// you can also delete the div if you want but with this, you can always bring
// it back without having to remake it
make sure you change the id for the div you want

This is the code I ended up using, because style.width doesn't hide the text.... So I use display none
function checkEndpoint() {
if(window.location.search=="?wmc-currency=USD") {
document.getElementById('testid')style.display = 'none';
}
}
checkEndpoint();.
But still, I thank you very much

Reverse list and delay display

I have a simple script on my site to reverse the display of a list.
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
});
It works great, but the reversal of the list occurs after / during page load — and thus the list (which is largely imagery) appears and then snaps into reverse order, which looks a little clunky.
Is there a way to delay the display of the list until after it has reversed?
Thanks in advance.

Set the visibility to hidden until you finish your flip.
Do not use display:none because it will mess up the rest of your screen.

You could use the style display: none in your HTML, something like:
<ul style="display:none">
..and then during the loading of the page you show the list at the end:
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().show();
})

As already suggested well by O_Z
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().css('opacity', '1');
})

Javascript Display/hide pictures

How to remove(hide) pictures when a certain picture is displayed based on their IDs. This is what I got so far:
function setImageinVisible(id) {
var img = document.getElementById(id);
img.style.visibility = 'visible';
}

First of all, the good practice says, you shouldn't mess with object's styles directly but rather toggle it's classes (because of https://en.wikipedia.org/wiki/Separation_of_concerns). My advice is to create a state class like
.is-hidden {
display: none;
}
and then just toggle this class on particular element with jquery, pure JS or something else, for ex.
$('.my-image').addClass('is-hidden') // to hide
$('.my-image').removeClass('is-hidden') // to show
with pure JS:
document.querySelector('.my-image').classList.add('is-hidden')
document.querySelector('.my-image').classList.remove('is-hidden')
UPDATE:
To reset previous state (set all images as hidden), before showing one:
// to add.is-hidden from every image (to hide all the images)
[].map.call(document.querySelectorAll('img'), function(el) {
el.classList.add('is-hidden');
});
// to show choosen image
document.querySelector('.my-image').removeClass('is-hidden')

Note: toggle-vader-button, ("#Vader"), and ("#Palpatine") are all based on a project I'm working on. Substitute the IDs of your photos in
$ (document).ready(function() {
$("#toggle-vader-button").on("click", function () {
$("#Vader").toggle();
$("#Palpatine").toggle();
});
});
As one is toggled off, another is toggled on. Also note that I have Palpatine's display as "none" in my CSS so it switches on whilst Vader switches off. Both will occupy the same space also.

Change elements/classes in/with jquery

I'm new in jQuery and used it right now for a navigation, that slides in and out in mobile or small views. That works fine and correct, but I'm using a plus-icon to open a submenu, that changes into a minus-icon, when the submenu is opened.
But it doesn't change back into the plus-icon, when the submenu is closed.
The code is the following:
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$(this).next('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
});
});
I think the "interesting" part might be the second function, the first is still for a hamburger-icon, that opens the navigation, that works (okay, it doesn't show a sliding animation, what the second one do... no idea, why it don't works...).
So the second part is for the plus. When I click on the plus, the submenu slides in and the plus changes to the minus, but when I click back to the the minus it doesn't change back to the plus.
Has somebody any idea why it doesn't work or can explain me, how I can do it work?
Regards,
Markus

The problem is that your selector is trying to find a span with both plusicon and vertical classes but after the first call to this:
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
wich removes said classes, it is not able to find your target span.
To work around this you could assign an id (iconId on the next example) or another class to your icon so it can be allways found
$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
...
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('#iconId').toggleClass('plusicon vertical');
});

Do this :
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
$icon.removeClass("CLASS YOU WANT TO GET RID OF");
$icon.addClass("THE CLASS YOU NEED");
else{
$icon.addClass("THE CLASS YOU WANT TO ADD");
}
});
I am at work now so pardon any typing errors.
You basically need to check whether the class that changes the icon to a MINUS symbol is still active - if so you change it back.

I hope it will help.
Points:
to find element good to use find();
better toggle 1 class to show hide element like "show" in example;
With elements inserted with js code better use .on() (for future);
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).find('.plusicon').toggleClass('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.plusicon {display:none}
.show {display:block!important}
</style>
<ul>
<li id="menu-toggle" class="level_2">Toggle</li>
</ul>
<ul id="navigation-main">
<li>test</li>
</ul>

Trying to override a dynamically generated inline style

I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element that shows up in two different sections on the page. The first is a post-status form, the second time it shows up is in a comment-add section that repeats indefinitely on the page. The block of code works on the comments, but doesn't work on the status form, so I wan't to simply hide it until I figure out how to A) find where the heck the code is being generated, B) fix the issue.
The element has a style that is being dynamically applied (assuming javascript) at load of the element. It starts off hidden, then something somewhere down the pipe shows it.
Here is what my code looks like, first the element that works:
<div class="activity-comments">
<div class="audio_controls fresh" style>
....
</div>
</div>
The block that is broken:
<div id="whats-new-post-in-box">
<div class="audio_controls fresh" style="display: block;">
...
</div>
<div>
So in that first block the code sits without a style in it, which for some odd reason whoever wrote it left the style tag in anyway without any style to apply (completely stupid and malformed code). But in the second element, the one that's broke, it has a display:block dynamically written in at run time. I'm trying to figure out how to force it to display:none. I've tried js, but I'm somehow not calling it correctly (not sure how to call nested elements, I only want the audio_controls within that nested ID but not the other class).
Anyone have any ideas for me?

You can do it with CSS:
#whats-new-post-in-box > .audio_controls.fresh {
display: none !important;
}
An !important style rule can override an inline style rule (unless the inline style rule is also !important).
Alternately, with JavaScript on any modern browser:
var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
list[n].style.display = "none";
}
For older browsers it's more of a pain:
var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
if (elm.className &&
elm.className.match(/\baudio_controls\b/) &&
elm.className.match(/\bfresh\b/)) {
elm.style.display = "none";
}
elm = elm.nextSibling;
}
Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...

Pretty sure you can write a CSS rule for #whats-new-post-in-box .audio_controls and mark it with !important.

Another way to hide the inner div, and this requires jQuery:
$('div.audio_controls', $('#whats-new-post-in-box')).hide();
This code select all div elements with an audio_controls class that are inside the element with an id of whats-new-post-in-box, and hides them.