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/
Related
see this gwt Panel
http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwSplitLayoutPanel
The user can shrink or expand to make the space holding the text smaller or bigger depending on their need.
My question is:
Does javascript or jQuery have any technique to create a holding object that end user can shrink or expand like that?
There's no easy native method to do this in javascript or jQuery, but jQuery UI has a re-sizable component.
https://jqueryui.com/resizable/
This does't replicate the behaviour of the google web toolkit example. This is quite complicated behavior. If you open the DOM inspector in chrome, you can see each section has an inline style with the width height and position. These are then recalculated and updated when you drag the bars.
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I'm looking for JS or jQuery (core dependecy only) code that allows you to resize any html element, or just divs - could use div container for content.
The problem I'm having with jQuerys resizeable() function is it's dependencies with UI and the bloat that would bring to my rather slimmed codebase. Also it only uses a corner handle for resizing where I'd like an interface more along the lines with how table and image resizing works in TinyMCE.
That is, a dashed border around the element to be resized, with 8 points to drag from. If you try the TinyMCE demo on their site you'll see what I mean. It allows for both aspect ratio to be kept and distorted based on dragging point.
Most hits I get on resizing is for a one time resize of images to fit the page width, but I'd love to be pointed in the right direction in case there is a snippet or jquery plugin out there that I've missed.
I got the same "problem" a couple months ago, did not want to use the jquery UI but wanted to resize... I came across this "custom event" plugin. Very light and does the job.
threedubmedia jquery.event.drag
You can see a resizing demo at the bottom of the page.
Hope it helps!
You can use CSS3's resize.
http://jsfiddle.net/BramVanroy/uAzVY/
Not as much functionality as you want, though.
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.
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.