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.
Related
Is it possible to have multi-line in select option value
In the multi line option I would like show first line in bold and rest of lines in regular font.
Is there any possible approach using HTML/CSS and Java script or
Do we have any library in React which can achieve the above
It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.
Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article:
https://tympanus.net/Development/SelectInspiration/index.html
Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support.
A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.
As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with:
http://jedwatson.github.io/react-select/
which is pretty similar in functionality to Select2
I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
I am interested in making a tabbed display on a web page I am working on. I need to apply my own styles, so I would like to find a javascript library that provides very little styling out of the box and makes customization as easy as possible.
Features I would like:
Specify the Image used for the tab.
Tabs can re-size to fix the text inside of them.
Relatively easy to apply my own styles.
I looked at jQuery UI Tabs but it does not seem like it would be too easy to apply my own styles if I don't use their tools to do it.
I also looked at jQuery Tools, which seemed a little easier to customize, but appears to require that you use fixed length images for the tabs.
Can anyone recommend a good js library for creating customized tabbed navigation? Am I just making customization of the two libraries mentioned above harder than it needs to be?
This is a super easy walk-through to create custom tabs using jQuery, I followed it once and haven't used any other tabs since:
Custom jQuery Tabs | Soh Tanaka
I know it can be tempting to often use libraries for something like this, but it is very straightforward and you'll know all about how they work, which will allow you customize them far easier than nearly other plug-ins.
With jQuery-UI you can easily change the styles with css, you do not need any fancy tools ^_^
I'm a beginner WWW-developer and I'm wondering whether the dropdown menus should be written in CSS or JavaScript. What are the pros and cons between two techniques?
You'll need to use CSS for the styling. That is what it is for.
When it comes to the logic of when to show and hide them, then you need JavaScript unless you want:
The menus to be inaccessible to focused based navigation
Keyboard
Breath switch
etc
The menus to require precision mouse control
e.g. if you have a shaky hand (e.g. from arthritis) and you slip outside the edge of the menu, then a :hover based solution will cause it to vanish without giving time to get back inside
Personally, I'd avoid drop down menus for most situations.
I would like to recommend using just CSS as much as you can. As these will eliminate issues such as if someone got JS disabled and any other possible accessibility issues. Since menus are an integral part of you site navigation, it is important these are accessible to all the user segments. You can use this for pure CSS but also there are lots of tutorials online if you google "pure css menus". Also you can see here for jQuery & CSS menu example
They can be written using solely CSS. Check out this Pure CSS hover list.
JavaScript is often disabled by users, as a security measure, and the necessary code for drop-down menus can be quite involved. Also, a pure JavaScript menu is not available for browsers that don't support it, such as text-only browsers. CSS-based menus are always available, even with JavaScript disabled — browsers that don't handle it will just render a list.
With this technique, adding a menu to a page is as easy as creating an unordered list of links, with nested lists for the sub-menus, and including the appropriate style-sheet.
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.