I need to determine the width and height of the current mouse cursor used on our webpage.
I need to show a div right under the cursor, and possibly to the right of it.
So I need to determine the offsets of my div from the exact pointer location, so the cursor do not cover up the div.
The mechanism will be used in intranet system, so it can be firefox-only solution.
Unfortunatelly some people here use weird cursors, anyway, big ones, so I cannot just hardcode eg, 16px right, 16px top offsets. Anyway, I don't want if I don't have to.
Thanks for your help.
You can't do it. Anyone can set their cursor to any arbitrary garbage, and there's no API for asking from the browser.
I don't think this it is possible to determine any more than the cursor center within the browser. It surely can be done using a custom-made Firefox extension but I doubt there are any around for this specific task.
While size is not possible, there are jQuery addons like SimpleTip and qTip that let you create fixed-position tool tips that don't close until something happens (like the user clicks on it). The content of the tool tips can be wrapped in divs.
Related
Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).
In XUL or JavaScript, is there a way to move the mouse cursor to specified position?
The only time that Gecko moves the mouse is on Windows for the snap-to-default-button effect. This is used by XUL dialogs and wizards. The backend code doesn't actually check that you're giving it a button; any XUL control works. The mouse is moved to the centre of the element, if that point is on-screen, and the window is active. Normally the code checks that the system cursor snapping is enabled, but there is a preference that overrides that.
No. you cannot move a mouse cursor using javascript.
But you can do this.
Hide the cursor. Load an image shaped like cursor. Animate the image.
You can use nsIDOMWindowUtils.sendNativeMouseEvent(x, y, 0, 0, null) to reposition the mouse cursor. Perhaps combined with window.screenX/Y to work out where you should move the cursor to, since sendNativeMouseEvent seems to treat the (x,y) as absolute screen coordinates.
I haven't tested this method very thoroughly, so there could be caveats. I can't think of any myself.
I know this is an old question, but I have not seen this solution suggested anywhere before, and it's not exactly obvious.
I've only tested with Firefox v48 on Windows 7. Here, sendNativeMouseEvent calls SetCursorPos to perform the actual repositioning.
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/
I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.
I have a big html page, like 4000x6000 px with images and text.
I'd like to have something like a map overview of this page in a small div. A scaled version of the whole page which i could use to navigate.
Does anyone know some js script or example how to do that? Thanks.
Here's the basic framework of how you would do it:
Find a way to take a screenshot of the whole page. Then, resize it down with a scaling factor (like 1/25th).
In the corner of the page, overlay an image. Create an event handler that reacts to where you click on the image. Inside of the event handler, find the location of where the image was clicked (ie x-coordinate, y-coordinate).
Use the reciprocal of the scale (perhaps x25 if the scale was 1/25th) to get the actual dimensions of the page. Use jQuery to scroll to that location.
If you need any help with one of these steps, let me know; this is just to get you started.
I can't think of a single way to do that in html/javascript, for am image sure, but for an entire page?. If the site was built in flash... but short of that, I think you may be S.O.L. sorry. Why is your site so big anyway? That is far beyond the avg users resolution, and violates about 15 usability rules.