So in this little example I have a square (thumbnail) following the mouse around, in the final product it will be the place where the dragged item will be visible. I ran into a problem however that if I try to drag and drop a svg <image> in Firefox it bugs out and doesn't follow the mouse anymore.
http://jsfiddle.net/Lx7besrw/
Same applies if you have different mouseEvents, they all bug out and stop working until you unpress left mouse button and move again. I've tried e.preventDefault e.stopPropagation and return false to prevent weird behaviour but without luck.
Any help would be GREATLY appriciated.
This solved my problem:
$(document).on('dragstart', function(e){
e.preventDefault();
});
https://bugzilla.mozilla.org/show_bug.cgi?id=511188
Related
I'm having trouble getting the background color of a link using the following code and selenium stand-alone 2.53.0 and Firefox 50.0.2661.75 m or Chrome latest:
Although during the test I don't see the mouse moving, at the bottom of the browser's window in the status bar, I do see the URL change to the HREF of the link.
I cannot seem to trigger the hover event for any elements, so the background color is always the default color and not the hovered stated color. Any ideas around this?
browser.moveToElement('a[href="http://www.foo.com"]',2,2, function() {
browser.pause(2000)
.getCssProperty('a[href="http://www.foo.com"]', "background-color", function(results){
console.log('color: ' + results);
});
});
If I remove the getCssProperty from the callback, I'm still not getting the right background color for hover and not seeing the mouse pointer move:
browser.moveToElement('a[href="http://www.foo.com"]',2,2)
.pause(2000)
.getCssProperty('a[href="http://www.foo.com"]', "background-color", function(results){
console.log('color: ' + results);
});
You won't see your physical mouse pointer move. Selenium doesn't move your mouse it just simulates the events in the browser.
Also, if your physical mouse is in the window, it'll mess with the events being generated and you won't see colors change properly, etc.
The fix: What you are doing above is correct, but you need to move your actual mouse to the bottom right-hand corner of the screen before the test starts. Leave it there for the duration of the test.
I'm making something like MS Paint using jCanvas library. I've put a button OUTSIDE the canvas. The button rotates the selected layer clockwise but I can't see any change unless I hover the canvas with mouse. I want the layer to be rotated by the time I press the button.
I tried using restoreCanvas() function but it didnt't work. How can I make a canvas automatically refreshed when a button out of it is pressed?
Sorry for bad English.
Solved. This function refreshes the canvas: $('canvas').drawLayers();
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
Recently came through a problem, that is jqGrid is having a horizontal scroll bar in chrome, I have fixed this issue with the help of #Oleg comments here
My application is working fine now... Well
But now if I open my application in laptop, grids are having the horizontal scroll bar. I am able to reproduce this issue by Zoom-out on browser(Ctrl + minus symbol). But I don't know how to fix this.
Finally what I am trying to say is, Whenever I am zoom-out the application in browser, Grids are showing horizontal scroll bar. I tried autowidth: true but not working. Can any one help me on fixing this.
Here is a facetious cat site..
http://jsfiddle.net/Spunkgraffiti/ruxLs/embedded/result/
Go ahead and click on some blank space, stay clicked (mousedown), and drag your mouse down to the bottom of the window, it scroll's down! Every time!
The issue is that no matter what I do I can't disable scrolling when you click and drag to the bottom of the screen..
I have disabled the scroll wheels, tried to disable highlighting (cause I thought perhaps it was not "scrolling" per se but actually highlighting more and more content moving the page down), and tried a css disable of scrolling. Nothing works..
Overflow hidden doesn't help here either :/
How do I stop the scroll caused by clicking and dragging your mouse down to the bottom of the window (already fully expanded window).
I'm trying to write up a drag and drop bar at the bottom of the screen, but every time I drag a picture and try to drop it, the whole page moves.. I just want the whole page not to move when I begin to drag a picture..
Thank you everyone who takes the time to read this!
$(function() {
$(document).scroll(function() {
$(document).scrollTop(0);
});
});
See http://jsfiddle.net/ffy2x/5/
It is rock solid (doesn't scroll at all) on recent (as of this post's date) versions of Firefox, Chrome and WebKit in Qt. Internet Explorer scrolls a bit then bounces back. If it's for an embedded application using one of the first three, then this isn't a problem.