Develop Reference

Why is jQuery not working in IE and Edge?

I made a button that toggles classes using jQuery and it saves the states to keep its class after refresh but, anyway. I tried this on IE and Edge and everything but the button works just fine. Is this an issue with the code below or IE and Edge that I will need to use Vanilla JS to fix?
Note: I am using jQuery 2.2.4 min if that helps any
//Stores the active and inactive classes appended to the toggle switch
function toggleHandle() {
$('.handle').toggleClass('slide');
}
if (sessionStorage.getItem('switch-state') && sessionStorage.getItem('switch-state') === "true") {
$('.toggle-theme-cont').addClass('color-swap');
toggleHandle();
}
$('.toggle-theme-cont').click(function() {
let el = $('.toggle-theme-cont');
toggleHandle();
el.toggleClass('color-swap');
sessionStorage.setItem('switch-state', el.hasClass('color-swap'));
});
});
Thanks in advance!
Update: I tried jQuery 3.3.1 and now it is pulling an internal error within jQuery itself at (2,30140)

Toggle script: change from jQuery to "normal javascript" code

I've been using a toggle script (open/close text container when clicking on a certain link) for a website that uses jQuery. In order to clean up the website I want to get rid of jQuery completely but have some problems converting the existing jQuery code into "normal javascript".
Here is the existing code:
jQuery(function($){
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
});
Which corresponds to this HTML source code:
<h4 class="trigger toggle-transparent ">Click to show more</h3><div class="toggle_container ">
Hidden Text
</div>
I've tried the following code which doesn't give me an error but just doesn't do anything when clicking on the trigger:
var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
el[i].addEventListener('click', function () {
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
}.bind(this));
}
The only thing I really need for the code is: clicking on the class "trigger" should toggle some HTML class "active" to both the trigger element as well as the toggle_container element. The rest I'm able to change with just CSS.
The hard part of the code is that it should work for multiple toggle areas on one page separately (therefore using a class, not an id).
Any idea where my code has a problem or any (completely) different suggestions?
I have very limited experience with javascript/jQuery and feel more at home with HTML/CSS.
Thanks,
Patrick

The this.classList.toggle("active") doesn't return the element back again, but just a boolean to inform if the action was successful. Chaining happens only in jQuery and not in vanilla JavaScript.
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
You should be using something like this instead of the above:
this.classList.toggle("active");
this.nextSibling.classList.toggle("toggle_container-active");

Determine if an Arbitrary Element is Using CSS3 Animation

I'm working on a widget for a web application. When the user selects something in the widget, I use a CSS animation to hide it, then change something in the page based on the selection. I use the animationend event to wait before proceeding.
The widget can have multiple themes, meaning someone might choose not use a CSS animation. I would like to separate logic and presentation as much as possible, so I would prefer to avoid making other themes use JS.
How can I handle the fact that I don't know if an animation is present?
I was hoping to do something like the following, but I can't find anything like isAnimating in documentation.
elem.classList.add('hide');
if(elem.isAnimating()) {
elem.addEventListener('animationend', callback);
} else {
callback();
}

You can use the animationstart event.
var anmtn = false;
, switcher = function(){anmtn = !anmtn})
elem.addEventListener('animationstart', switcher);
elem.addEventListener('animationend', switcher);
//Poll for animation.
var e = setInterval(function() {
if( anmtn )
//code
},62)
That should work. Untested!
For a more dapper polling use:
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
MDN: https://developer.mozilla.org/en-US/docs/Web/Events/animationstart.

Javascript hide/show toggle works both ways in Opera, but only one way in other browsers

I have a customized show/hide toggle script that I'm using along with CSS3 transitions for the effects.
The script shows the content when clicked, and hides it when the 'HideLink' link is clicked, complete with CSS3 transistions - but only in Opera.
In other browsers the script only works for showing the content, clicking the hide link doesn't work.
See this JSfiddle: http://jsfiddle.net/xte63/

These days with show / hide javascript, I prefer to use HTML5's data-* attributes.
This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.
I've quickly tried it against IE7, Chrome and Opera and it seems to work.
http://jsfiddle.net/ThJcb/
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
This allows you to determine the state of the div without having to check for CSS values.
EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn't. At least not exactly as I made an error in the logic, setting the "data-visible" to false instead of true.
Here's an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)

Hyperlinks delayed in working?

This page is using jQuery to modify the links and then perform the page slide.
If you click on the 'Next' button a couple of times, then try to click the 'Prev' button, it does not do anything until you click the 'Prev' button around 3 times.
Can anyone suggest a reason why and how to make it instant?

The problem here is you're changing the href in the click event, if you want to navigate to these, you need to change it in something earlier, say mousedown, like this:
$(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll({offset:-250});
var LinkCounter = 0;
$('#prev').mousedown(function(){
PrevCounter = LinkCounter--;
this.href='#box' + LinkCounter;
$('#next').attr({href: '#box' + PrevCounter});
});
$('#next').mousedown(function(){
PrevCounter = LinkCounter++;
this.href='#box' + LinkCounter;
$('#prev').attr({href: '#box' + PrevCounter});
});
});
You can test it out here - or test a full screen version here.

have you tried changing jquery version to latest to match other jquery elements.
is the cufon affecting the links ?

I'm not especially familiar with the ScrollTo plugin, but have you tried modifying the click functions to return false at the end?