I have build a website just to try out some off my ideas and to learn. I found a problem when I tested it in firefox. I made a scroll function which scrolls the page when an image reach a specific position. the image moves by arrow keys. It works great in IE9 and Chrome, but in firefox the page scrolls when I enter an arrow key. I thought it was becuase of the the page up, page down, home and end navigation on the arrowKeys, but if I disable the navigation by arrowkeys in firefox, the problem still ocures.
The scroll function:
function scrollPage() {
if(xpos > scrollPosX[scrolledX + 1]) {
scrolledX++;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(xpos < scrollPosX[scrolledX] - ufoWidth) {
scrolledX--;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(ypos > scrollPosY[scrolledY + 1]) {
scrolledY++;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
if(ypos < scrollPosY[scrolledY] - ufoHeight) {
scrolledY--;
window.scroll(scrollPosX[scrolledX],scrollPosY[scrolledY]);
}
info5.html('scrolledX: ' + scrolledX + '<br />scrolledY: ' + scrolledY + '<br />scrollPosX: ' + scrollPosX[scrolledX] + '<br />scrollPosY: ' + scrollPosY[scrolledY]);
scrollLoop = setTimeout(scrollPage, 100);
}
xpos and ypos are the left and top positions of the image.
scrollPosX and scrollPosY are arrays containing the positions to
scroll to.
scrolledX and scrolledY are for counting the scrolls.
Here is a demo I uploaded. for the full code please lookup the page source: http://www.mikeywebs.nl/
I hope someone can tell me how to solve this. Some commentary on my code is also welcome cause im still learning.
Thanx.
In your demo's code, there is nothing preventing the scroll event to fire. Try this near line 96 in the inline JS code:
$(document).keydown(function(e){
e.preventDefault(); // Add this
var code = e.keyCode;
switch (code) {
For further info here on SO about preventing scrolling:
How to disable scrolling.
Related
I have a problem with a specific use of javascript. On my development website https://famnabuurs.nl I prepared a simple page with three columns.
I manipulate the mousepointer... On the left and right side the cursor disappears by objective. When I move my mousepointer over the image in the center, the textblock should show up and then follow the mousepointer until the mousepointer leaves the image again.
The moving phase works fine as long as I move the mouse to the left side, but when I move the cursor from left to right over the image the mouse seems to get nervous. Also when I move from top to bottom it goes wrong. The textblock jumps from cursor-position to top of the image and back. I assume I made a mistake in the javascript, but no idea what causes this issue.
This is my relevant code, the part that follows the mousepointer:
function mousemovedimage(e) {
const imageItSelf = document.getElementById(objectnaam);
const titleblock = document.getElementById(objectnaam+'_id');
// on mouseover make the sheet visible
var imageOffset = imageItSelf.getBoundingClientRect();
let xpos = e.clientX - imageOffset.left ;
// do not shift too far to the right
if (xpos > imageItSelf.clientWidth) {
titleblock.style.setProperty('display','none', 'important');
} else {
if (xpos < 0) {
// do not shift too far to the left
titleblock.style.setProperty('display','none', 'important');
} else {
titleblock.style.setProperty('display','block', 'important');
titleblock.style.top = e.offsetY + 'px';
titleblock.style.left = (xpos) + 'px';
}
}
}
This function is added as an eventListener:
objectnaam = 'roel-image-twee-eiken-desktop-tablet';
document.addEventListener('mousemove', mousemovedimage);
The titleblock is the moving textblock.
Could someone give me a hint to solve this issue?
This is caused by the pointer going over the text. Try setting pointer-events: none to the title. Something like:
titleblock.style.setProperty('pointer-events','none');
In order to prevent mousewheel scrolling to scroll the entire page when reaching the top/bottom of an element with its own scrollbars, I'm using Brandon Aaron's Mousewheel plugin.
This works fine, as long as I don't scroll too quickly. It seems that when scrolling really quickly, two events will pass the "I haven't reached the top/bottom" check yet and will both be executed. However, one of them will then scroll the element to the top/bottom and the next one will then scroll the entire page, which was what I was trying to prevent.
I'm currently doing this
$('.popupContents').bind('mousewheel', function (e, d) {
var t = $(this);
if (d > 0 && t.scrollTop() === 0) {
e.preventDefault();
} else if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
});
(As posted in Prevent scrolling of parent element? )
How do I make it so that the function properly stops all events at the top/bottom even when the user scrolls quickly?
I ended up manually tracking the desired scroll position and disallowing the normal scroll event altogether.
var wantedScrollTop = 0;
$('.popupBody').bind('mousewheel', function (e, d) {
var t = $(this);
var scrollTo;
if (d > 0) {
scrollTo = Math.max(0, wantedScrollTop - 30);
} else if (d < 0) {
scrollTo = Math.min(t.get(0).scrollHeight - t.innerHeight(), wantedScrollTop + 30);
}
if (typeof scrollTo !== "undefined") {
wantedScrollTop = scrollTo;
t.scrollTop(wantedScrollTop);
//t.stop().animate({ scrollTop: wantedScrollTop + 'px' }, 150);
}
e.preventDefault();
});
d is the scroll direction, so I'm manually keeping track of the wanted scroll position here. In my case there is only one popup at a time, so I didn't bother sticking the wantedScrollTop in a data- attribute or something similar on the element, which could be useful when youdo have multiple elements that need to track their own scroll position.
It is not doing a fluent scroll like your browser would, but it will change the vertical scroll position by 30 pixels for each time the scrollwheel triggers the event. I left the commented out line in the code to show how that could be achieved. However, for me this resulted in scrolling which feeled very lagged when scrolling quickly.
i have a huge html form , with near 350 controls that take 5-6 times of the user screen height.
user starts completing each input field from the beginning of the page and goes on.
once the cursor rich near the bottom of screen user must be able to see some next input fields so here is the problem :
i want to avoid the scrollbar usage.
i want to set some "margines" ( say 200px for each page side )
if user clicks a control that is near the screen edge, here this mechanism must work also
i'm looking for a jQuery solution
playing around with jQuery.ScrollTo, but can't figure out how to embed my logic into code.
This should do it
http://jsfiddle.net/JsWnk/
$(document).ready(function() {
$('input').focus(function() {
var padding = 100; // Desired page "padding"
var lbound = $(this).offset().top - $(window).height() + padding;
var ubound = $(this).offset().top - padding;
if ($(window).scrollTop() < lbound)
$(window).scrollTop(lbound);
else if ($(window).scrollTop() > ubound)
$(window).scrollTop(ubound);
});
});
Something like this should work...
http://jsfiddle.net/q9QHQ/
$(document).ready(function() {
$('input').focus(function() {
if ($(this).offset().top > 100)
$(window).scrollTop($(this).offset().top + 100);
});
});
I'm using jquery/javascript to work with a hoverover that should follow the users mouse around over an image map. It works but one direction it's fine (to the left) but when you go to the right it's reallly really jumpy. I've made a video showing the problem here:
http://screencast.com/t/rnm1jUkvv8P
Heres my code:
if (sPage == "fireplan.aspx") {
jQuery('area').mousemove(function(e) { deshowtooltip(e, this) });
// jQuery('area').mousemove(function(e) { demovetooltip(e) });
jQuery('area').mouseout(function() {
jQuery('#tooltipwindow').empty();
delasturl = '';
});
}
function deshowtooltip(e, element) {
var url = jQuery(element).attr('tooltiphref');
if (delasturl != url) {
jQuery('#tooltipwindow').empty();
jQuery('#tooltipwindow').load('tooltip.aspx?soid=' + url);
delasturl = url;
}
var $this = jQuery(element);
$this.data('title', $this.attr('title'));
$this.removeAttr('title');
jQuery("#tooltipwindow").css("position", "fixed").css("top", (e.pageY - jQuery(window).scrollTop()) + "px").css("left", (e.pageX) + > "px").css("display", "none").show(); }
function demovetooltip(e) { jQuery("#tooltipwindow")
.css("top", (e.pageY - jQuery(window).scrollTop()) + "px")
.css("left", (e.pageX) + "px"); }
One other thing, the hyperlink clickthroughs seems to be disabled now i've done this hover over?
Tom
I worked it out... I just moved the hover over away from the mouse a little bit
I had a very similar issue to this. It turned out to be the math functions resulting in NaNs or negative values.
I'd check the maths in parts like this: e.pageY - jQuery(window).scrollTop()
So I have a toolbar that is on the left side of my page that I have animating when the user scrolls to stay focused on the top of the page. It works perfectly in every browser except IE. In IE, it appears to almost do it twice. It bounces around and is very strange. This is my code.
$(window).scroll(function () {
var windowScrollPosition = $(window).scrollTop(),
toolbarLocation = toolbar.offset().top + toolbar.height(),
canvasSize = formCanvas.offset().top + formCanvas.height();
//Give toolbar a new position relative to container
if ((toolbarLocation + windowScrollPosition) < canvasSize + toolbarLocation) {
toolbar.animate({'margin-top': (windowScrollPosition - 95) <= 0 ? windowScrollPosition : (windowScrollPosition - 95) + 'px'}, 65);
}
});
any thoughts on how to fix this in IE? Thanks!
Unless you want it to animate, i would use position: fixed to keep it there instead of animating it. That would probably fix your problem at least.