I'm looking for a javascript/css tooltip that can do the following:
Shows up when you hover over some page element (such as a help icon.)
Repositions itself based on the browser window (for example if it's on the far right of the page, it will show itself to the left of the page element, otherwise it'll show to the right of it. That way it won't go off of the page.)
You can hover over the tooltip and it won't disappear. This way you can select text or click on a hyperlink within the tooltip.
I'm using dojo but their dijit tooltip seems to be very inflexible, as it can only spawn off of another dijit element, most commonly a dijit button. I'd rather not having to reference a whole other javascript framework like jquery or prototype so hopefully someone has a way to do this using just one basic script.
Unfortunately for you, the tooltip style plugins available for Dojo are nowhere near the other frameworks (namely: jQuery). Because of this, you have three options:
Reinvent the wheel. Take what you learned from other tooltip scripts and build your own from scratch. This option takes the longest development time (and in the inevitable maintenance of cross-browser bugs).
Extend an existing plugin. You can take a current tooltip plugin for dojo (or perhaps a library agnostic plugin) and extend its functionality by adding your own scripts to it.
Use jQuery. This has already been said twice by others, but let me say it again. jQuery has a thriving plugin ecosystem, and if development/maintenance times are truly important to you, then jQuery should definitely be considered.
Again, assuming that you don't mind using jQuery (it's awesome!!) I played around with a few tooltips and found this one the best: http://flowplayer.org/tools/tooltip/index.html
Extensible with good documentation. Check out the 'position' config option and see if that does what you need.
Good luck!
If you do decide to use jQuery, qTip is a nice jQuery plugin that is very configurable and will probably meet your needs. http://craigsworks.com/projects/qtip/
I have been using several jQuery plugins, including jQuery TOOLS, Beauty Tips and Cluetip. I think all three meet your requirements.
If instead of a black box you want to know what's going on, I recommend this tutorial:
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
(and take a look at the comments section)
The dijit.Tooltip documentation gives two simple examples, the first attaching a tooltip to simple DOM nodes seems to meet your needs. The second happens to wire up the tooltip to another dijit-based widget (a button). Note that the property connectId takes a dom node reference or string id. Note that dijit may be used either programmatically or using a markup-based declaration.
Different tooltip implementations may have different functionality. Among other things, dijit.Tooltip provides ARIA accessibility for screen readers, keyboard access, bidi enablement, and automatic positioning around a node but within the boundaries of the screen.
Related
I was practicing some jQuery when I found this tutorial. It does the exact same thing as I was trying with JavaScript but uses pure CSS3. I figure it is best to learn what's right then to have to relearn, so that is why I am asking if there is a benefit of one to another or is it just preference?
The CSS solution may be easier and will probably be more efficient, but it produces a much more basic solution.
For example, with the pure CSS solution, as soon as you move the mouse outside of an item, it loses focus and closes. This can be annoying for users if the menu has many levels or the items are small enough that the mouse may accidentally stray outside.
Using javascript, it is possible to keep menu items open even if the mouse moves outside. It also allows for more customization of options like animations and delays. There are plenty of jQuery plugins that make dropdown menus easy.
Always use CSS when given the opportunity except in cases where you need to use logic/arithmetic.
A similar question was asked here: Responsive design method for collapsing a div
I'm trying to figure out how layers in Ext work. The documentation is very concise and I can't find a lot about them anywhere else, other than a forum thread where Jack Slocum says they're very simple.
I have a working tree panel, and what I'm now trying to do is put that in a layer so it floats over the page (it's meant as a helper dialog that pops up next to a form element). I've only gotten as far as creating a simple layer with a <div> element in it, but can't get it to contain more advanced stuff. Looking at the Combo source, which uses a Layer for the option list, also didn't make me much wiser.
So, can someone with a little more experience on this subject please tell me: how are you really supposed to use Ext.Layer? Or am I "doing it wrong"? :)
An Ext.Layer is an extension of Ext.element, rather than being an extension of Ext.Component.
Ext.Element doesn't benefit from all the component config options and methods that say an Ext.Panel does, and so you're going to have a much harder time adding a tree panel to an Ext.Layer than if you added the tree panel to an Ext.Window which already benefits from shim and shadow (the two main reasons you would want to use an Ext.Layer).
But before I would resort to using Ext.Window to wrap the tree panel, I would take a look at the shadow config option in tree panel which should provide the 'floating' effect you want...
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Ok on meebo.com there is instant messages that when you click at the top you can move around i wanna make something like that?
So how do I make Movable forms in JS?
I recommend the jQuery UI plugin called Draggable.
You first need to create your form. Your form will most likely be a div (with solid color or image for the background). Within the div, you have all your form content. The div will also need to be position absolutely (i.e. style="position:absolute")
The JavaScript is fairly straight forward; however, I would personally use something like jQuery to do the work. I'm not sure how familiar with JavaScript you are, but even for an advanced user, using something like jQuery just makes sense. There is a library of tons of already built forms etc with great instructions on how to use them. Let me know if you need more info on how to use a library like jQuery (you can find it here:
http://jquery.com/
You can see all the plugins here:
http://plugins.jquery.com/ (look at 'windows and overlays' - lots of them!)
Click on one that looks interesting, and click on 'demonstration' to see if you like it. For example, the third link down - (mb)ConteinersPlus, a jQuery component for fully customizable and featured container layout (DIV box model) - would let you do this (with almost no work on your end)
http://pupunzi.com/ (this is the example link)
Obviously, if you want to learn how to script it by hand, let me know.
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.
I want to build a dynamic floating window with close button at corner. Is it possible, and also i want to add some content dynamically into that window.
Please help me.. It should be in javascript.. Better without AJAX..
Thanks in Advance
jQuery UI has an awesome floating window. What's cool about the jQuery UI version is that you can also package it with the UI theme manager, which means less time styling.
Check it out here : jQuery UI Dialog examples
All it takes is creating a container (probably a div), and one line of code. Something like this:
<div id="example">I'm in a dialog!</div>
$("#example").dialog();
Here's the documentation: jQuery UI Dialog documentation
What you are looking for is called a "lightbox" technique.
Here is a comparison of many lightbox techniques.
Many exist out there on the web, here are some for jquery and prototype libs:
Jquery: Thickbox, Lightbox
Plugin
Prototype: Lightbox 2,
Leightbox
Also, check out the
wikipedia article on lightbox.
My favourite has always been Scriptaculous, which lets you do all sorts of interesting visual things. The new kids on the block use jquery. One of these two should do the trick for you.
There are lots of samples on both sites that do what you want.
Well at the most basic just create a div and inject content by setting innerHTML to an HTML string. Positioning it can be tricky since you have to worry about scrolling and different browsers have different means of controlling this. You may also want to position relative to some originating element in the page which you can do by digging the element and it's position out of the event object your javascript function receives when the originating element is clicked.
Google hover popup - first link is http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html
There are lots of different libraries out there for making windows. I have found that Livepipes has a very well rounded and customizable javascript library that includes a window control along with a variety of others. http://livepipe.net/control
One that I haven't used but looks promising, is prototypeui. It is based on the prototype and scriptaculous javascript libraries. jqModal is another I have used that is based on JQuery.
take look at fancybox http://fancybox.net/