In some apps, when a user focues on a certain element, a tooltip will float at the bottom of the page which displays information about that element. For example:
Does anyone know of a good way to achieve this effect (preferably using Angular, although jQuery is also fine)?
Note that I'm NOT looking for the tooltip that hovers nearby the actual element itself, like so:
Instead, I'm interested in the tooltip that floats at the bottom of the page.
The control you are NOT looking to use is called a popover. A popover and a tooltip are both tied to an element on the DOM that has to be interacted with to be shown.
If you want to something in between that shows up in a fixed position on the window, use something like the angular port of Toastr and configure it to show up when and where you want.
Maybe you are looking for a plugin like the famous ToastrJS which can position a toast in the middle of the screen.
Related
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
Lets say I had a website full of pictures posted vertically. As a scroll down, I want to use javascript/jquery to load in their description (and have the previous description hide). How would I go about doing this?
Please let me know. Thanks.
An example would be this page here.
https://stackoverflow.com/about
As you scroll, many jquery events take place.
Using something like scroll to etc that you can then find the co-ordinates / location and then perform the script you require etc
Could try something like the jquery appear plugin
It fires when the element comes into view.
Could do it manually as well, when scrolling, check all the container elements holding your hidden description to see if they fall within the viewable browser and show their description elements if so.
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
I have a div, that I'm using JavaScript to position, so that when someone hovers over an image, it displays a tooltip message that follows along with the pointer. (Using tooltip-0.2.js )
The problem is that when a user goes to the page in IE6, a disabled dropdown box on the page is showing through this absolutely positioned tooltip when it tries to hover over it. How can I get this dropdownlist to know its proper place? ;)
You can put an iframe element behind your layer to block such things from showing through. It will also block Flash objects from showing through. It's messy, but works.
You better use another tooltip lib.
The "shining-through" effect is well known and other tooltips work around it.
I can't name a specific other tooltip lib.
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.