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)

bootstrap scrollspy bug when resizing browser

Hello Stackoverflow bootstrappers!
I don't see that this question has been asked before, and I am really interested to see the outcome.
How to duplicate the bug:
Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
Resize the page down to a tablet
Use the navbar
(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.
NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.
Thank you, looking forward to your responses.
Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.
The only Javascript I have on my page is the following:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The code above closes the toggle after a selection is made in mobile.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
The code above (based on screensize) will offset the scrollspy
Edit #2
The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.
Help is much appreciated.

Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.

To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.
So the solution looks like this:
var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};

setInterval not working in Opera

I am trying to make an element blink (by toggeling visibility of the element) but its not working in Opera for whatever reason. Works fine in Firefox and Chrome.
Here's a fiddle with a working sample: http://jsfiddle.net/UDWkK/2/
I don't think I have made any obvious errors.
Tested in Opera 12
Code:
var blinker;
function blink(elem) {
clearInterval(blinker);
blinker = setInterval(function() {
if ($(elem).css('visibility') === 'hidden'){
$(elem).css('visibility', 'visible');
} else {
$(elem).css('visibility', 'hidden');
}
}, 500);
}

As #nevermind noted in the comments above the problem is not with Opera. The problem is with the jsFiddle iframes. Note that jsFiddle is still in alpha stage. Hence there are bound to be some quirks. Hopefully the developers will fix it soon.
Nevertheless the code you provided doesn't really need jQuery, and setInterval works perfectly fine in Opera 12. For example this is what I did, and it blinks away nicely: http://jsfiddle.net/XwEhj/

I think you are in a corner buggy case.
When it's comes to user interface, it's not a good practice to rely on the state of the graphic objects to find out the state of the view. In other terms, you don't want to "read" the state of the view in the HTML elements, but rather in a variable or a set of variables called a view model.
I suggest that you rewrite your code this way, and I think there's a good chance to work around the bug:
var blinker;
function blink(elem) {
clearInterval(blinker);
var visible = false;
blinker = setInterval(function() {
visible = !visible;
$(elem).css('visibility', visible ? 'visible' : 'hidden');
}, 500);
}

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)

jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position

I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
window.onbeforeunload = function () {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.
I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
$('a.lockscrollbar').click(function() {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.
Any ideas?

This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:
$(window).on('load', function(){
$('html body').scrollTop(0);
});

Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)
var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);

Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.

This is the code I use (tho the site I'm working on is still in build stage, but this works):
$(document).ready(function(){
$(window).scroll(function(){
var posY = $(document).scrollTop();
$('#trigger').click(function(){
if($.browser.webkit){
$('body').stop().animate({scrollTop:0},'slow');
}else{
$('html').stop().animate({scrollTop:0},'slow');
}
});
});
});
Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).