HTML scrolls simultaneously in page and Flash object - javascript

I have a flash object inside a div, that will zoom it's content when I scroll over it. the problem is that my page also scrolls and I don't know how to fix this problem. I need the page to stand still when I scroll over the flash.
I tried adding this
flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
but because of preventDefault, the flash object won't zoom anymore.
Do you have any suggestions?

may be this could work for you:
$("element").hover(function(){
var scrollT = $(document).scrollTop();
$(document).on("scroll", function(e){
$(document).scrollTop(scrollT);
});
}, function(){
$(document).off("scroll");
});
http://jsfiddle.net/ZFsDY/3/

I stumbled on this issue a few months ago (the old method we used to manage scrolling didn't work on the most recent browsers).
I'm not allowed to publish the code for it, but here a few note on how we did it.
Like in reyaner's answer, we use event listening and preventDefault() to disable the browser auto scrolling, and get the scroll value (but without scrollTop()).
Once we have the value, we send it to the Flash via ExternalInterface.
For it to be possible, the flash object must beforehand add a Callback, a Flash method that can be called by Javascript.
We added a couple of additional interaction between Flash and JS so that the scroll is locked only when the Flash has the focus.
A warning : all browser don't have the same scale for the wheelDelta, and you may find that the zoom speed can vary. To fix this we decided to always use a fixed step each time the event is dispatched, instead that using the delta as-is.

another try:
$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
var d = e.wheelDelta || -e.detail;
var s;
if(d < 0) s = 1;
else s = -1;
this.scrollTop += s * 30;
e.preventDefault();
});
http://jsfiddle.net/ZFsDY/5/

Related

Vertical scroll bug in Google Chrome

jsFiddle
Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?
With jquery you can disable the overflow when mouse is over the child div.
This way works on Firefox 24 for Mint, and Chromium 28...
http://jsfiddle.net/JcUxs/2/
$('.child').on('mouseover',function(){
$(this).parent().addClass('fixoverflow');
});
$('.child').on('mouseleave',function(){
$(this).parent().removeClass('fixoverflow');
});
css:
.fixoverflow{
overflow: hidden
}
I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):
I used flag variable to keep the scroller position.
I used jquery and I noticed just now from the comments that you asked for pure javascript.
Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.
Just confirm that it's good enough for you and i'll translate it.
JavscriptCode:
var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;
$(".child").on('mousewheel', function (event) {
clearTimeout(stopWheelTimer);
event.stopPropagation();
isCanceled = true;
currentPos = $(".parent").scrollTop();
stopWheelTimer = setTimeout(function(){
isCanceled = false;
}, 250);
});
$(".parent").on('mousewheel', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
$(".parent").on('scroll', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
Working Example:
jsFiddle

Disable brower's auto scroll after a page refresh?

Is there a way to disable the behavior where some modern browsers (Chrome and Safari) remember your scroll position on a page refresh?
For browsers that support history.scrollRestoration, the auto scroll behavior can be turned off:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
source: https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
Have you tried firing this after document is ready?
$(document).ready(function(){
window.scrollTo(0, 0);
});
if that does not work...
$(document).ready(function(){
setTimeout(function(){
window.scrollTo(0, 0);
}, 1);
});
Which will push this to the bottom of the call stack
not just for chrome,but for all i think this will work well.
window.onload = function () {
window.scrollTo(0, 0);
};
After update of your question:
I think its better if we use some cookies or session storage.
Instead of hoping a setTimout ends up at the bottom of the stack - I rather enforce it that we hit the scroll position we want. I still consider this a hack, I was hoping for some kind of browser event we bind to.
var scrollToYPos = 100;
var interval = setInterval(checkPos, 0);
function checkPos() {
if ($(window).scrollTop() == scrollToYPos) {
clearInterval(interval);
} else {
window.scrollTo( 0, scrollToYPos );
checkPos();
}
}
I encountered this same issue. Here's the basic solution I came up with:
// scroll the user to the comments section if we need to
wt = win.scrollTop();
wb = wt + win.height();
// if scroll position is 0, do this (it's a fresh user), otherwise
// the browser is likely to resume the user's scroll position, in
// which case we don't want to do this
yab.loaded().done(function() {
// it seems that browsers (consistently) set the scroll position after
// page load. Accordingly wait a 1/4 second (I haven't tested this to the lowest
// possible timeout) before triggering our logic
setTimeout(function() {
// if the window top is 0, scroll the user, otherwise the browser restored
// the users scroll position (I realize this fails if the users scroll position was 0)
if(wt === 0) {
p = self.container.offset().top;
if(wb != p) {
win.scrollTop(p - th - 20);
}
}
}, 250);
});
I think the easiest way would be to trick the browser into a reload that it thinks is a new page.
window.location = window.location
All the browsers I've tested this in it works consistently. I would personally stay away from onload callbacks as they can cause jumps during load that aren't too visually appealing.

Draggable Not Working in Chrome/Safari

I'm building this site in which I was asked to have the photographers images randomly sized, ordered and positioned with the capability to click and drag them around. All of this is going pretty smooth except for this one major issue.
Although everything works great in Firefox, when opened in Chrome or Safari (possibly other browsers) any image that isn't visible int the window on immediate load seems to disappear when you attempt to drag it. If you scroll back up after it "vanishes" you'll notice the image is actually being sent to the top of the page while still following your click and drag movements.
I had this error once before and I believe it was fixed by removing some javascript that was no longer necessary. But this time I seemed to have tried every combination of removing certain JS or links to jQuery libraries and still can't find a cure.
Anyone know how this problem can be resolved?
You can view the issue and the code I have in place here: http://www.coreytegeler.com/jb/oddfuture/
EDIT Seems to be solely reliant on the Draggable function. I removed all of the JavaScript codes other than the below and issue still occurs
$(function() {
$( ".vert" ).draggable();
$( ".horiz" ).draggable();
});
EDIT This just looks like it has to have something to do with the issue
var imgInit_x, imgInit_y, mouseInit_x, mouseInit_y, elem;
document.addEventListener('mousedown', startDrag, false);
document.addEventListener('mousedown', drag, false);
document.addEventListener('mousedown', endDrag, false);
function startDrag(e)
{
if (e.target.tagName.toUpperCase == "IMG")
{
elem = e.target;
imgInit_x = elem.style.left;
imgInit_y = elem.style.top;
mouseInit_x = e.layerX || e.offsetX;
mouseInit_y = e.layerX || e.offsetX;
}
}
function drag(e)
{
try
{
currMouse_x = e.layerX || e.offsetX;
currMouse_y = e.layerY || e.offsetY;
elem.style.left = imgInit_x + currMouse_x - mouseInit_x;
elem.style.top = imgInit_y + currMouse_y - mouseInit_y;
}
catch (err){}
}
function endDrag(e)
{
elem = null;
}
When I try to bug your code I get:
Uncaught ReferenceError: detector is not defined
The detector variable does not seems to have been initialized when the issue happens. Could you specify its usage? Also I skimmed through your last Javascript script and couldnt find any purpose to it? Try removing the Javascript, it might resolve your issue.

disable address bar and back and forward button of browser

how can I disable or hide address bar and back and forward buttons in ie and firefox
i tried lots of links and solutions but non of them worked
for example for disabling back button:
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
but it seems that it goes to previous page then it returns
and i trid :
window.scrollTo(0, 0); // reset in case prev not scrolled
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
nViewH -= 250;
$('BODY').css('height', nViewH + 'px');
}
window.scrollTo(0, 1);
}
for disabling menu bar but it didnt work
what can i do
Instead of disabling the back button, try to make your page that supports users to going back. It will increase the usability of your application.
Even you can impliment it for the ajax activities also.
Don't think you can disable buttons on browser. I mean, otherwise, we'd seen it on spyware infected sites...
In terms of hiding them, I've seen banks use a full screen popup without those buttons (but hardware button on mouse or hitting backspace still works).
Not tested but you can bind to the window's hashchange event.
For example, in jQuery it very easy to do:
$(window).bind('hashchange', function(e)
{
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
return false; // stop event
});
The result is that the back button not changes the page when an anchor is in the url. But i agree with the first answer also (it is not a real answer i think, it is an advice).
You can also override the last entry in window.history, so user can't go back.

Pass mousewheel event through fixed content

The best way to understand this is to look at this fiddle.
Notice how mouse wheel over the fixed content in the red box does nothing. I would like the scrollable div to scroll.
In case the fiddle dies - basically I have a scrollable div with a fixed element over it. Typically when you mouse wheel over a scrollable div it will of course scroll. But if you are over the fixed element instead then no scroll happens. Depending on your site layout this could be counter intuitive to a user.
jQuery solutions are okay.
A much, MUCH simpler, but much less widely supported, answer is the following:
#fixed{ pointer-events:none; }
jsFiddle
Doesn't work in IE at all though unfortunately! But you could use modernizr or somesuch to detect whether it was supported and use the jQuery as a stop-gap where it isn't.
Courtesy of Mr. Dominic Stubbs
I had this problem and this works for me (using jquery):
$(document).ready( function (){
$('#fixed').on('mousewheel',function(event) {
var scroll = $('#container').scrollTop();
$('#container').scrollTop(scroll - event.originalEvent.wheelDeltaY);
return true;
});
});
Works on Safari and Chrome: http://jsfiddle.net/5bwWe/36/
I think this does what you're asking for!
$('#fixed').bind('mousewheel', function(e){
var scrollTo= (e.wheelDelta*-1) + $('#container').scrollTop();
$("#container").scrollTop(scrollTo);
});
EDIT: Updated the jsFiddle link to one that actually works
DOUBLE EDIT: Best to dispense with the .animate() on further testing...
jsFiddle Example
TRIPLE EDIT:
Much less pretty (and will probably be horribly slow with a lot of elements on the page), but this works and I owe a lot to this stackoverflow answer.
$('#fixed').bind('mousewheel', function(e) {
var potentialScrollElements = findIntersectors($('#fixed'), $('*:not(#fixed,body,html)'));
$.each(potentialScrollElements, function(index, Element) {
var hasVerticalScrollbar = $(Element)[0].scrollHeight > $(Element)[0].clientHeight;
if (hasVerticalScrollbar) {
var scrollTo = (e.wheelDelta * -1) + $(Element).scrollTop();
$(Element).scrollTop(scrollTo);
}
});
});
function findIntersectors(targetSelector, intersectorsSelector) {
var intersectors = [];
var $target = $(targetSelector);
var tAxis = $target.offset();
var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
$(intersectorsSelector).each(function() {
var $this = $(this);
var thisPos = $this.offset();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if (t_x[0] < i_x[1] && t_x[1] > i_x[0] && t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
intersectors.push($this);
}
});
return intersectors;
}
UPDATE (August 2016): It seems the browser implementations have changed and it's no longer possible to re-dispatch a WheelEvent on a different target. See the discussion here.
For an alternative solution that should work across platforms, try this:
var target = $('#container').get(0);
$('#fixed').on('wheel', function (e) {
var o = e.originalEvent;
target.scrollTop += o.deltaY;
target.scrollLeft += o.deltaX;
});
Working example: https://gist.run/?id=6a8830cb3b0564e7b16a4f31a9405386
Original answer below:
Actually, the best way to do it is to copy the original event. I've tried #Tuokakouan's code but scrolling behaves strangely (too fast) when we use a multitouch touchpad that has inertia.
Here's my code:
var target = $('#container').get(0);
$('#fixed').on('wheel', function(e){
var newEvent = new WheelEvent(e.originalEvent.type, e.originalEvent);
target.dispatchEvent(newEvent);
});
You can try it here: http://jsfiddle.net/NIXin/t2expL6u/1/
What I'm trying to do now is also to pass the touch events, without much success. Since mobile phones and touch screens are now more popular, some people might want to scroll using their fingers instead - neither of the answers offered solves that.
Well,all solutions with js are kind of delayed when scrolling on it. if the fixed element you use is just for display, then I have a good css tricks to achieve that.
make the fixed element z-index:-1 and the container element background-color:transparent
here is the jsfiddle you can see: https://jsfiddle.net/LeeConan/4xz0vcgf/1/

Categories