I am a fresh from XAML person. I am now building a HTML5 UI, where I need a dropdown box which will have items in a hierarchal view (need to have ul with li(s) inside dropdown). Each item also needs to have a check-box to its left. If this was XAML, I could've done it easily, because most elements are containers. But in HTML5, I've no idea what to do.
From my searching, what I've understood is that one way is to build a custom control using jQuery.
Is there a simpler way to achieve this in HTML5?
Thanks
I think the easiest way to do that is a jQuery (or any other JS UI Framework). You can also just use plain Javascript.
A combination of HTML and CSS is also possible. Just search "CSS Dropdown" and add some Checkboxes. I do not know a pure HTML5 solution.
Related
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
I'm currently redesigning an old web application that relies heavily on frames. I'd like to get rid of the frames because the painful javascript gyrations they require, but would still like the user to have a movable border between two parts of the screen (view and attributes).
What html element, or html element + javascript, can I use to replace frames?
I don't think there are any solutions that won't involve JavaScript. If you're OK with that, you could replace them with <div> elements and use JavaScript to make them resizeable.
I see no other solution than a div. But you would have to use JS again to allow the dragging of the border. Use of JQuery would be fine here as there is maybe a plugin for that, check the database.
Is it possible to style the option elements of a select list/dropdown beyond background and font? I'm specifically looking to add some padding/margins so the list isn't as cramped.
Not possible if you want broad browser support. At least IE doesn't support it. There's then no other option than to mimic and progressively enhance the dropdown with <ul><li> and a good shot of JavaScript. You can get here some ideas what's possible with JS (jQuery actually) based dropdowns.
#Alex: we were in the same predicament as you seem to be. We too wanted to control the UI of the dropdown. Unfortunately as others have already mentioned, you have no option with the system dropdown if you want to have cross-browser compatibility also.
so we came up with our own jQuery plugin which works like a system dropdown for most features. It also supports themeing as well as flexibility to provide customized list items by way of templates. You can see the running code samples from the following URLs listed and learn more about it. We are sure you will find it useful.
Sample and documentation - india.assigninfo.com/assignlabs/jaldropdown
Cascading dropdown sample code from coderun.com - coderun.com/ide/?w=GEXVey_kckKrAkLeoIfZNg
Sample code to configure jaldropdown from within scrollable DIVs - coderun.com/ide/?w=BiE5TbXdIEehDOxNk1oajw
It is possible however the functionality is not available in Internet Explorer
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.
Is there any sort of free control which does what the Occupation field does on http://monster.ca? That is allow for grouping of the options in a drop down box with expandable sections? I just learned about the optgroup tag which is close to what I want, but not quite.
It is just a mock up of a drop down control.
The down arrow is an image, all the remainder is made of divs, the drop down list itself being a big div with overflow containing lot of controls with JavaScript to manage all of this (like collapsing sections).
So you can do that yourself, with a bit of work, and lot of help from a good JavaScript framework...
Basically what the developers at Monster.ca are doing, is emulating a select-control using a div-element with scrollable content.
Take a look at the "overflow" CSS-property.
You can't do this with a traditional <select> control, and I doubt there are ready-made components that fit the bill. If you do want to make this yourself, and don't want to buy into a toolkit like extjs or dojo (which would probably make it easiest to build this), I can recommend the following tree library, as it is very simple to use and BSD licensed: http://www.silverstripe.com/tree-control/
Try this, not sure if the interface is any good for your purposes:
http://flooble.com/scripts/hier.php