I am using jQuery to track the movement of my cursor on screen (Both for X & Y),
I am creating a border of 100px by 100px on a div with an id, and I am making the border change position so it can follow the cursor. I know I can change the cursor to an image in CSS, but I believe there are size restrictions on that.
Basically, for the end product, I would like for the cursor to stop moving after a certain point in the window. (for example if you look at the fiddle below, and quickly move your cursor out of the 'result' window, you will see the border box is not at the edge of the window) So I am looking for a way to make this more responsive, and have the box at the edge of the window when scroll out of the window.
The Fiddle below should help you understand what I need help with.
http://jsfiddle.net/tygbkvyr/1/
The JS I am using is as shown.
jQuery(document).on("mousemove", function(event) {
jQuery('#theImage').css({left: event.pageX, top: event.pageY});
});
Thank you for all the help
Do you have to use jQuery? see this SO post regarding changing the cursor with CSS: Using external images for CSS custom cursors
Related
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
i am trying to achieve an effect in angularjs/ionic, that
handles an image resize upon scrolling beyond the content ("bounce effect").
I.g. a header-image is under the header-bar, that should adjusts in height, when
the the scroll area is pulled down
Here is an Example of what i'm looking for.
I was trying to achieve this by using the $ionicScrollDelegate method getScrollPosition(), since that gives me scroll position. But the main problem is, that the image is inside the scroll area and that bounce box outside. So i cannot access the height of this image.
Anyone tried something similar?
I was searching on here and everywhere i could think of, but couldn't find a solution.
I'm creating a web application where I need to do some design tweaks. Here is the sample feature code: http://jsfiddle.net/rkumarnirmal/FSDPH/
The black movable box shown there should not be moved out of the page(not even a bit), but if you check there, You can move the box and place it somewhat out of the page. How can I control it?
One more thing, I'm going to implement jPicker tool http://www.digitalmagicpro.com/jPicker/ in that box. If we click the color box, the jPicker tool will be popped out and then if the box is moved the jPicker tool must have to arranged itself according to the page.
I know asking question like this is not fair, but I have no chance :( Could anyone guide me?
Thanks!
You can use the containment property on draggable to keep the draggable element inside one of its parents.
For example:
$("#box_bg").draggable({scroll: false, cancel: "div#box", containment: 'document'});
Doing the whole code is not possible now. I'm giving you the logic. You can do it easily.
You have to track the overlay's drag event. Then in the event handler you have to check the left and top position of the overlay. If it goes beyond your limit then set left/top to 0 (or some offset).
On the other side if it goes beyond the extreme right (or bottom) you have to set the window's width (or height) minus the overlay's width (or height) accordingly.
same goes for the Color Picker. But instead of drag event you have to perform repositioning when the color picker is displayed.
I have an issue, I am using jquery ui resizable. When I rotate the element in chrome, the controls get rotated too but when i resize the div with handles, they are inverted. I mean if i am using sw control, it acts in weird way i.e. i move towards top and the image gets bigger while in actual it should get smaller. This is the problem with rotated divs only not the normal ones.
Here is the js fiddle
http://jsfiddle.net/fahadnabbasi/2FLuf/11/
You will see two images, one rotated and one normal. Normal works fine for resizing while rotated one resizes as well but in opposite direction. Try to resize the rotated image from the bottom right control and you will see the problem.
I think you need jQuery UI Rotation http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ (it's Russian). Here is a direct download: http://vremenno.net/examples/jquery-ui-rotation/jquery.ui.rotation.zip
Here is a fiddle I made up that implements the plugin: http://jsfiddle.net/MadLittleMods/4Vfm5/
After including the plugin just add. You can also add a parent div and apply it to that with .parent():
$('.resizable').rotatable();
Here is another topic that talks about rotating: jquery rotation plugin - that works like jquery ui resize
Good day.
I need script that will follow the mouse and will scroll content depending on what side mouse is. If left then left, if right then right.
I need it for cases when line of hrefs will exceed width of block, like here http://cloud.ignatynikulin.com/45121918090s3R15193i
If the width is exceed then you will be able to scroll it when you put your mouse to right.
Something that will do that: http://codecanyon.net/item/jquery-mouse-slider/full_screen_preview/143061
I tried that script, but the problem with it is that it needs to rely on some width that I don't have.
Any plugin or ideas suggestion?
Thank you!
Check out the answer here from StackOverflow - it's a perfect solution:
Continuous scroll on hover [performance]
Make the containing div positioned absolute. Then in jQuery, catch the onMouseMove event, calculate the mouse position relative to the containing div (using .width() this works even with dynamic width), and change the left/right property of your containing div according to this.
Reference: jQuery get mouse position within an element