animate scrollTop not working on IE and Firefox - javascript

I have a button with an href attribute and when i click on it, it will scroll to the div with id="buttonhref_value" ...I need some extra space before the div so that people can view my fixed menu bar on top..so its top - 60...it works fine in chrome, and safari..in IE no matter how much extra space i give ,it always scroll to the top of the div..i mean the div is now below the menu bar..can anyone help ?
$.fn.smoothScrollOnClick = function () {
return this.each(function () {
$(this).on('click', function (event) {
if (this.hash !== '') {
var hash = this.hash;
if ($('' + hash + '').length > 0) {
var stop = ($('' + hash + '').offset().top - 60 );
$('html, body').animate({ scrollTop: stop
}, 200, function () {
window.location.hash = hash;
});
event.preventDefault();
}
}
});
});
};

Related

Why is "scrollTop" function not working correctly on live site but works on local host?

This is a #id link to one page:
This is the #id link to another:
I have WP Rocket Installed, have tried to disable the JS settings but it didn't work either.
I am a novice so your advise is much appreciated.
// PAGE SCROLLER
// PUSHES ANCHOR BELOW DEPTH OF NAVBAR
(function($){
$(document).ready(function () {
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");
if (screen.width <= 320) {
var fromTop = 120;
} else if (screen.width <= 768) {
var fromTop = 124;
} else {
var fromTop = 90;
}
// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
if(href.indexOf("#") == 0) {
var $target = $(href);
// Older browser without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}
}
// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);
// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);
});
})(jQuery);
First you need to check the error $ is not a function (https://prnt.sc/12ald0n) and need to solve it. For better example you can take reference from here https://api.jquery.com/scrolltop/ to scroll top functionality.

mouseenter bubbling when mousehover multiple times

how to prevent bubbling or "out of control" when user hover(mouseenter) multiple times . When user hover i'm using slideDown and slideUp for mouseleave and delay i set 250. I can only fix this if delay i set to 1 ms. Below is my script :
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
You can check my JsFiddle here
Reproduce a Problem
Hover Catalogue multiple times and stop hover(but point your cursor at Catalogue), you will see the dropdown will hide but actually it should slide down.
I think your issue is caused by the is_opened flag and then the animation being run along side changing the left css property
If you change your mouse enter and leave js to the following
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
it should work: Example

if statement and popup case

I have a textbox. its name is PhoneNumber. I want to do a popup if len(input value)=0.
When I do a tag it doesn't work. (I looked in debug mode)
When I do it in an another Jq script which is already works. it works but popup window stay screen only a few mil seconds so I can not do anything.
I am new in programming and I am still learning. İf you help me I will be happy. Thanks.
<script type="text/javascript">
$('#PhoneNumber').bind('keypress', function (e) {
if (e.keyCode == 13) {
var test = $('#PhoneNumber').val().length;
if (test == 0) {
alert('At Least');
/* $('a.login-window').one(function () {
var loginBox = $(this).attr('href');
//Fade in the Popup and add close button
$(loginBox2).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function () {
$('#mask , .login-popup').fadeOut(300, function () {
$('#mask').remove();
});
return false;
});*/
}
else
{
alert('At Least');
$("#PhoneNumber").val("");
$('#PhoneNumber').focus();
}
}
});
</script>
Always put your jquery code into:
$(document).ready(function() {
//Your code
});
This makes sure that the DOM is loaded when you attach event handlers to elements.
And for me it looks like the return false of your one callback function is killing the fadeIn before it's finished.
You could add the event object e as a parameter of the function and then use e.stopPropagation() and e.preventDefault() instead of return false; like that:
$('a.login-window').one(function (e) {
e.stopPropagation();
e.preventDefault();
//Your code
});

mouseenter and document click blinks first li element always

I just created a ribbon style menu the problem is in FireFox and Google Chrome browsers when you mouseenter and document click the first element in the list always blinks I dont have this problem in IE could someone check out my page and view the source and have a look at my jquery code and see if you can find whats causing this small glitch - the page is here
It must be todo with my mouseenter function I pass in this selected_slide(this)
mouseenter:
function select_slide(element) {
if($(element).hasClass('.nav_divider_before')) return
$('.nav_browse_ul li')..removeClass('active');
$(element).addClass('active');
if($(element).attr('data-id') != null) {
var current_content = $('#' + $(element).attr('data-id'));
selected_slide = current_content;
$('.ribbon_slides').show();
rotate_ribbon_slides(element);
if(isAnimating) return;
if(!isOpen) {
isAnimating = true;
$('.ribbon_slides').animate({'width': '+=' + (current_content.width() + 20).toString() })
$('.ribbon_panel').animate({'width': '+=' + (current_content.width() - 14).toString()}, function(){
isOpen = true;
isAnimating = false;
})
}
}
}
document click
$(document).click(function(e) {
/**/
if(!$(e.target).closest('.ribbonmenu').length) {
if($('.nav_browse_ul li').hasClass('active')) {
$('.nav_browse_ul li').removeClass('active');
}
$('.ribbon_slides').animate({'width': '-=' + ($(selected_slide).width() + 20).toString()});
$('.ribbon_panel').animate({'width': '-=' + $(selected_slide).width()}, function() {
$('.nav_browse_ul li.nav_divider_before').css('margin-right', '0px');
$('.ribbon_slides').hide();
});
isOpen = false;
}
})

Smooth Scrolling Interferes with Hash Mark

EDIT (12/26/2012)
I found the following code which does exactly what I want, except now when a page's URL has a trailing slash (e.g. example.com/page/), the page doesn't scroll. Works fine if the page's URL ends with '.php' or '.html', etc. Any thoughts on how to get the following script to work with the trailing slash in a URL?
jQuery('a[href*=#]').bind('click', function(e) {
// Get the target
var target = jQuery(this).attr("href");
// prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
// perform animated scrolling by getting top-position of target-
// element and set it as scroll target
jQuery('html, body').stop().animate({
scrollTop: jQuery(target).offset().top
}, 500, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
I've been using a script successfully for the last couple of years, but have recently run into some issues with it. Basically what the script does is scroll the page to a specific point. This happens with link anchors. For example, if one link is:
anchor link
The page will smoothly scroll to that anchor on the page:
<a name="anchor"></a>
Or:
<a id="anchor"></a>
The issue that occurs arises when some other JS is being used in the page which requires a link to be formatted as such:
other link
When this "other link" is clicked, the page will smoothly scroll, BUT to the top or bottom of the page where there is NO anchor.
What should happen when this "other link" is clicked? The other JS action should occur (which it does), but the smooth page scrolling script should not occur.
Here's a working example from where I got this script:
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html
Here's the JS in full:
Scroller = {
// control the speed of the scroller.
// dont change it here directly, please use Scroller.speed=50;
speed: 10,
// returns the Y position of the div
gy: function (d) {
gy = d.offsetTop
if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
return gy
},
// returns the current scroll position
scrollTop: function (){
body = document.body
d = document.documentElement
if (body && body.scrollTop) return body.scrollTop
if (d && d.scrollTop) return d.scrollTop
if (window.pageYOffset) return window.pageYOffset
return 0
},
// attach an event for an element
// (element, type, function)
add: function(event, body, d) {
if (event.addEventListener) return event.addEventListener(body, d,false)
if (event.attachEvent) return event.attachEvent('on'+body, d)
},
// kill an event of an element
end: function(e){
if (window.event) {
window.event.cancelBubble = true
window.event.returnValue = false
return;
}
if (e.preventDefault && e.stopPropagation) {
e.preventDefault()
e.stopPropagation()
}
},
// move the scroll bar to the particular div.
scroll: function(d){
i = window.innerHeight || document.documentElement.clientHeight;
h = document.body.scrollHeight;
a = Scroller.scrollTop()
if (d>a)
if(h-d>i)
a += Math.ceil((d-a)/Scroller.speed)
else
a += Math.ceil((d-a-(h-d))/Scroller.speed)
else
a = a + (d-a)/Scroller.speed;
window.scrollTo(0,a)
if (a==d || Scroller.offsetTop==a)
clearInterval(Scroller.interval)
Scroller.offsetTop = a
},
// initializer that adds the renderer to the onload function of the window
init: function(){
Scroller.add(window,'load', Scroller.render)
},
// this method extracts all the anchors and validates then as # and attaches the events.
render: function(){
a = document.getElementsByTagName('a');
Scroller.end(this);
window.onscroll
for (i=0;i<a.length;i++) {
l = a[i];
if (l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
Scroller.add(l,'click',Scroller.end)
l.onclick = function(){
Scroller.end(this);
l = this.hash.substr(1);
a = document.getElementsByTagName('a');
for (i=0;i<a.length;i++) {
if (a[i].name == l){
clearInterval(Scroller.interval);
Scroller.interval = setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
}
}
}
}
}
}
}
// invoke the initializer of the scroller
Scroller.init();
I would think that there is a way to write the script so that if the href is equal to just the hash mark # without any text after the hash, that the scroller wouldn't be triggered.
Does anyone have any better ideas?
Thanks in advance!
I can't help you with your jQuery function, but there are two simple solutions to your original script. The first is a small modification to tell the script to ignore the special case where an anchor's URL is only the hash tag.
In the render function, change the line:
if (l.href
&& l.href.indexOf('#') != -1
&& (l.pathname == location.pathname
|| '/' + l.pathname == location.pathname)
) {
To:
if (l.href
&& l.href != '#' // <<< Added this conditional >>>
&& l.href.indexOf('#') != -1
&& (l.pathname == location.pathname
|| '/' + l.pathname == location.pathname)
){
This will tell the script to ignore the special case, but won't prevent the browser from reacting normally to the link, so the browser may still jump to the top of the page. The special case you've mentioned is almost always used in javascript constructions to provide an anchor tag with an href attribute, because some older browsers would ignore the tag without one. The '#' was used as the URL to prevent the link from leaving the page.
Instead of the '#', you could use an empty javascript call in your link, like so:
other link
This will avoid your issues with the scrollers completely.
Thanks again, Jarred, for your help! I did come across a script that does just what I want. Here's the better script I found:
jQuery('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = jQuery(this).attr("href"); //Get the target
// perform animated scrolling by getting top-position of target-element and set it as scroll target
jQuery('html, body').stop().animate({ scrollTop: jQuery(target).offset().top }, 1000, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});

Categories