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.
Related
I have created a custom element named memory-game and I am able to create lots of them by clicking on the icon of the memory game. I want functionality so that when I click on a memory-game window, it appears on top of the other opened windows. I can't figure out how to do that.
Use z-index to control what order non-statically positioned divs appear on the page.
Aside from that, I'm not sure what you're trying to accomplish with the code you have provided.
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
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.
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 am trying to determine the actual viewPORT size of the current browser window. I've tried:
window.innerHeight/innerWidth
document.documentElement.clientHeight/clientWidth
document.body.clientHeight/clientWidth
All return the full page size and NOT the viewing area.
What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.
It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.
window.innerHeight/innerWidth
That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.
document.documentElement.clientHeight/clientWidth
That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.
document.body.clientHeight/clientWidth
That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.
I just need to compare that to the size of the viewing area
Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.
Try
document.getElementById("").offsetWidth
Fill the above code with different element ID's, try using the body tag, or a wrapper div.
Apparently by going to the parent document, I was able to get the correct value.
Thanks!