I've figured how to get a div to follow a mouse, but how can I get it to reposition when the div comes close to the edge of the browser window?
For example, on Youtube, if you hover over the video makers name the div will always stay in the browser and never go off screen.
Click here, hover over Lindsey Stirling and resize your browser a few times for a live example.
Does anyone know how to do this?
Use the "title" property. This example should work fine. http://jsfiddle.net/8vj3k7zo/
<div title="no, I am 100% serious, please look at me! Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>
Of course, you can't style the title tooltip, as it's part of the native browser implementation. If you'd like to get a styled div to peek over the edge of the browser, you can't do that.
On the other hand, if you would like to make sure that the entirety of the custom CSS tooltip is always inside the browser when the mouse is close to the edge (and not partially outside the bounds of the window), check out this excellent library: https://github.com/HubSpot/tooltip
Related
I am aware that in most browsers (newest generation), the mouse cursor gets hidden when you type in any key like 'A' or Space. This is to let the user see what he types in.
The cursor gets back visible as soon as you move the mouse for a pixel.
Now here comes the problem -- This happens everywhere in a browser, even when I've focused a non-input element like a div or the such. I do, however, not want the browser to hide my cursor after the user has pressed a key as I'm using keys as shortcuts.
So the question is -- is there any way or trick or anything to prevent this from happening and/or letting the cursor auto-appear again after key-up?
I've tried various "hacks" over the web like invisible divs etc. but everything without success.
EDIT: As questioned, I am experiencing this behavior on every Browser (Chrome latest, Firefox latest, Safari latest) on latest MAC-OS-X.
This is not browser behavior but operating system behavior, and specifically Mac behavior. The cursor will not only hide if you type in the browser, but in any application on your Mac.
This means that the browser has no knowledge or control over the cursor, because it's hidden from a higher level. You can change the cursor with CSS or JavaScript for example, but it still won't show until you move it. You can't actually move the cursor using JavaScript, but even if you could I still doubt it'd help because the operating system didn't receive a signal of the cursor moving.
Also refer to this question on apple.stackexchange.com:
How do I disable hiding of the mouse pointer while typing text?
I just thought of a possible solution to this, but it's going to be really hard to do this in a way that is not annoying the user:
Whenever the cursor moves, save it's position
When the document observes a keyup, show an image of a cursor at the exact coordinates of where the actual cursor was seen last (it's still there, but hidden)
When the actual cursor moves again, hide the image (actually, merge this function with 1.)
The problem here is going to be knowing what cursor image to show. You would first have to detect if the user is on a Mac (or another OS that hides the cursor), but also what cursor should be shown depending on what you're hovering. It means that for every element you're hovering you would also have to detect which cursor is being shown and show an image of the same cursor.
You can cover the basics/defaults by adding some css rules that cover hovering of links and inputs (pointer and text respectively), but what if the user uses custom cursors defined in his OS?
I haven't tried any code yet, this is just a concept that should work in theory so let me know if you need more help with it, but honestly I'd advise against trying to accomplish this. It's going to bring more trouble than it solves, imo.
-edit-
Here's a Proof of Concept: http://jsfiddle.net/4rKMx/2/
I have some objects that I need to place outside of the main window then move them with CSS3 transition effect inside the window. I want to be sure if these objects are in their special positions visually. Here is a screenshot of how I think it could look like:
White rectangle represents browser window and the area filled with gray color is the 'outside' area that contains some objects I work with.
You could try to see what's outside with Firefox Developer Toolbar.
Right click on any element in Firefox and choose "Inspect Element (Q)"
Than select the 3D-view. It's a small button in the top right corner of the panel.
With this, you'll be able to explore the layers of your site, as well as stuff that is not in the normal viewing context.
You can use Screenfly. This allows yo to set any screen size you desire. You could set a huge screen size to see if your text is in right position.
I'm trying to let a user select an element on a page using their mouse, like you see in chrome's dev tools. (yes, I know it's open source and already js)
The problem arises when trying to detect when the mouse moves from a parent element to a child element. As you can see right now I'm getting around that by resetting the element_hover div, but this creates a terrible flashing effect.
Any idea how I can emulate webkit's inspector with a bare minimum amount of code?
http://jsfiddle.net/Atked/
Don't hide the red div while the mouse is over the red div. Temporarily hide the red div while you work out which element to highlight, you can work out which element to highlight using getElementFromPoint.
You could try something like this: (not perfect, but better than what you had, and a start at least) http://jsfiddle.net/Atked/1/
How do I remove that yellow box? It stays in the same spot regardless of where I move the cursor. If I am not using an external monitor, that yellow box took up half of my screen :(
Thanks!
PS: I am asking here because there does not seem to be a good forum to ask the official webkit/safari crowd or I just miss it but it is not webkit.org
Are you sure that it stays in the same spot no matter where you move the cursor? What should happen, and what does happen for me, is that it appears when you mouseover a particular variable,
but disappears when the mouse is moved off the variable (and off of the "tooltip") after about a second.
Stick your mouse in the upper right corner of the screen for a second and it should be gone. I'm assuming that, as large as your tooltip was, you moved the mouse over the tooltip itself (and we just can't see it since the OS X screen capture does not include the cursor).
It's been a long-lasting bug in the Web Inspector code. Some work has been done towards fixing it. Please give a try to a more recent version of the browser, and if you still can come up with a reliably reproducible case, please add a comment to http://crbug.com/95189 with the case description.
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/