My JQuery .animate() function seems to not working on IE. Could You please help me transform it to a pure JS solution?
var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');
navLinks.eq(0).click(() => {
$('html, body').animate({
scrollTop: pageTop.offset().top
}, 500);
});
As You can see this is used for scrolling page to propper section/page-top in One page website.
Can someone explain why animate() doesn't work on IE?
Quick shot, try:
var brandLink = $('#brand');
var pageTop = $('#page-top');
var navLinks = $('.nav-link');
var offerSection = $('#offer');
var techSection = $('#tech');
var portfolioSection = $('#portfolio');
var contactSection = $('#contact');
var moreBtn = $('.more-button');
navLinks.eq(0).click(function(e) {
e.preventDefault(); // to prevent native behaviour of the thing you press
$('html, body').animate({
scrollTop: pageTop.offset().top
}, 500);
});
Depending on the version of IE you need to support, have a look at this site. You will find some generic turnarounds that might help.
Also have a look at this (adding a preventDefault(); to make sure the script is working properly).
Related
Building a new site and trying to reuse a JavaScript from the current site that change image on hover. I have a hard time to understand JavaScript so I hope someone can help me to see what I'm missing or doing wrong.
The current site (where I copied from) has many more script running and I don't know if some other script is missing. I have tried to change the initializing part of the script to fit the new site. Please have a look at the puzzlepiece on the current page. http://www.collyfiltreringsteknik.se.
I have got the script running to a point where it adds the four "quad" divs but the mouseover and click function does not work.
This is the html code
<div id="companyvalues" class="clearfix">
<div class="valueimage"></div>
</div>
The jQuery part
(function($){
$.fn.extend({
companyvalues: function(kwargs) {
var defaults = {
static_base:''
};
var options = $.extend(defaults, kwargs);
return this.each(function() {
var obj = $(this);
var div = $('div', obj);
var topleft = $('<div class="quad topleft" data-image="i0000" data-href="/grundpelare/tillganglighet/"></div>');
var topright = $('<div class="quad topright" data-image="i0003" data-href="/grundpelare/konkurrenskraft/"></div>');
var bottomleft = $('<div class="quad bottomleft" data-image="i0002" data-href="/grundpelare/miljoforbattring/"></div>');
var bottomright = $('<div class="quad bottomright" data-image="i0001" data-href="/grundpelare/kostnadsreducering/"></div>');
obj.prepend(bottomright);
obj.prepend(bottomleft);
obj.prepend(topright);
obj.prepend(topleft);
var divs = $('div.quad', obj);
$([ '/uploads/pages/varden_0000_yellow.png',
'/uploads/pages/varden_0001_red.png',
'/uploads/pages/varden_0002_green.png',
'/uploads/pages/varden_0003_blue.png'
]).preload({base_url:options.static_base});
divs.mouseover(function(event) {
var item = $(this);
var data_image = item.attr('data-image');
div.addClass(data_image);
event.preventDefault();
event.stopPropagation();
});
divs.mouseout(function(event) {
var item = $(this);
div.removeClass('i0000');
div.removeClass('i0001');
div.removeClass('i0002');
div.removeClass('i0003');
event.preventDefault();
event.stopPropagation();
});
divs.click(function(event) {
var item = $(this);
var href = item.attr('data-href')
document.location.href=href;
event.preventDefault();
event.stopPropagation();
});
});
}
});
})(jQuery);
Initializing the script.
$(document).ready(function() {
$('#companyvalues').companyvalues();
});
We have a smooth scroll script that fails on some Mac machine (latest chrome).
We tweaked the script a little bit and it appears to be working on all Macs now.
But we have no idea why.
Can someone help?
Before (That fails to smooth scroll correctly for some Mac/Chrome test machine):
var topID = (ua("safari")) ? "body" : "html";
$(".SmoothScroll").unbind().click(function(){
var link = $(this).attr("href");
if(link.charAt(0)=="#" && link.charAt(1)!="") {
var offset = $(link).offset();
var tid = setTimeout(function() {
$(topID).stop().animate({scrollTop: offset.top}, 800, "easeInOutCubic", function() {
location.href = link;
});
}, 10);
return false;
}
});
After fix (works on all machine)
//var topID = (ua("safari")) ? "body" : "html";
var $root = $('html, body');
$(".SmoothScroll").unbind().click(function(){
var link = $(this).attr("href");
if(link.charAt(0)=="#" && link.charAt(1)!="") {
var offset = $(link).offset();
var tid = setTimeout(function() {
$root.stop().animate({scrollTop: offset.top}, 800, "easeInOutCubic", function() {
location.href = link;
});
}, 10);
return false;
}
});
Basically changing $(topID) to $('html, body') appears to working. But why? What is happening and what could be the reason that the previous script fails on some Mac+Chrome?
You probably do not have the same version of safari on both macs
Got a question about the Anchor point.
I have a URL like domain.tld/sub/#point1/#point2 and I also using tabs which is triggered by the first #point1. So if someone opens the link the browser is detecting the first tab on that page and then it needs to find the second #point2 which is a anchor point like <div id="point2"></div>.
But now comes te question, since it is not possible to use multiple anchor scrolldowns when the pages is loaded, I have to find a other option. But offcourse didn't have that much experience. Who could help me out?
Regards Martijn
$(document).ready(function() {
goToUrl();
});
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("#");
var newUrlArrLength = newUrlArr.length;
if (newUrlArrLength>0) {
var last = parseInt(newUrlArrLength) -1;
var lastUrl = newUrlArr[last];
var lastItem = $("#"+lastUrl);
$('html, body').animate({
scrollTop: lastItem.offset().top
}, 1000);
}
}
Ok I changed the answer from Stavros a bit like underneath:
$(function() {
goToUrl();
function goToUrl() {
var newUrl = document.URL;
var newUrlArr = newUrl.split("?target=");
var defUrl = newUrlArr[1].slice(0, newUrlArr[1].indexOf("#"));
var newUrlArrLength = defUrl.length;
if (newUrlArrLength>0) {
var tag = $("#"+defUrl+"");
$(window).scrollTop(tag.offset().top);
}
}
});
This does the job for me! Thanks Stavros.
I have two problems on my website.
There is a menu, and if you click on a link then the browser scrolls to the point (id) of the link. A few days ago everything worked fine, but not now. I didn't work on the webpage, so I don't know where the problem is.
Here is my Code:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1000
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top - 135;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
//window.location.hash = elementClick
});
return false;
})
})
};
$(document).ready(function() {
$("li.anchorLink a").anchorAnimate();
});
Can you help me?
Make sure you load JQuery library first and then your jquery plugin. Basically it doesn't recognize your current file, because Jquery wasn't loaded / wasn't found.
I found many questions regarding the cross bowser behaviour of $('html, body').animate();, but for some reason I couldn't find an answer for this one:
I want to (finally) remove $.browser, but at the same moment don't want the scroll event to be triggered twice again, which will happen in some browsers if the selector is $('html, body)
// animte page scrolling
pageScroll : function( scrollTo, speed, callback ) {
var rootElem;
scrollTo = scrollTo || 0;
speed = speed || 800;
if ( $.browser.webkit ) {
rootElem = $('body');
} else {
rootElem = $('html');
}
rootElem
.stop()
.animate(
{
scrollTop: scrollTo
}, speed, callback
);
}
I've looked into this for quite a while and haven't found a real solution other than a check on doc ready :
http://codepen.io/anon/pen/yyddER?editors=011
var mainelement;
$('html, body').animate({scrollTop: 1}, 1, function() {
if ($('html').scrollTop()) mainelement = $('html'); // FF and IE
if ($('body').scrollTop()) mainelement = $('body'); // Chrome, Safari and Opera
mainelement.scrollTop(0);
});
Assuming here the content is high enough to create a scrollbar...
Tested on the major browsers and works without a hitch.
Edit - a variation to make sure the trigger to scroll the page back is only acted upon a single time if the browser uses <html> as the main element for overflow :
var mainelement, tested = false;
$('html, body').animate({scrollTop: 1}, 1, function() {
if ($('html').scrollTop()) mainelement = $('html');
else if ($('body').scrollTop()) mainelement = $('body');
if (!tested) {
tested = true;
mainelement.scrollTop(0);
}
});
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
And later came up with this approach as well (which seems to be the most efficient) :
http://codepen.io/anon/pen/NPQNEr?editors=001
var mainelement;
$(window).scrollTop(1);
if ($('html').scrollTop()) mainelement = $('html');
else if ($('body').scrollTop()) mainelement = $('body');
mainelement.scrollTop(0);
This is the code I use in production; works just fine:
function ScrollPage(TheTop) {
TheTop = parseInt(TheTop, 10);
if (!$.isNumeric(TheTop)) {
return;
}
$('html,body').animate({ scrollTop: TheTop }, 400);
}
If the problem is that the event handler is firing twice then it means the function is somehow called twice, and that the bug is therefore elsewhere. On another note, the $.browser() function has been deprecated for a while.