background preloader

DdSlick - a jQuery plugin for custom drop down with images

DdSlick - a jQuery plugin for custom drop down with images
With traditional drop downs i.e. using <select><option></option></select> you are limited to only text and value. But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action. 1Basic Drop down using JSON Source: When using JSON to populate, the plugin requires the specific data format. 2Render from HTML select options //Make it slick! Use HTML5 data attributes data-imagesrc and data-description with your regular HTML select elements to add images and description. 3GET Selected Dropdown Option You may use jquery .data() with your selector to get data from plugin. selectedIndex (0 based), selectedItem (HTML 'li' element), selectedData (nested object with text, value, description, imageSrc) 4SET selected Dropdown Option Try an index between 0 to 4 5Callback Function on Dropdown Selection 6Dropdown with default selection Related:  HTMLUI

jQuery Selectbox/Drop-down Plugins Web developers and designers may need these very helpful jQuery plugins, so I’ve compiled a list of 10+ jQuery Selectbox/Drop-down Plugins. Enjoy! Update 12/12/2013: Added 16. Selectric.Update 25/05/2013: Added 14. bootstrap-select & 15. jQuery selectBox.Update 25/07/2012: Added 13. Related Posts: 10 jQuery Form Select Boxes Plugins 1. If you needed to develop a unique UI control that would allow users to select from a complex hierarchical tree of options, then this plugin is for you. Source + Demo 2. While there are many similar plugins, the key differentiator with the LinkSelect plugin is that is designed to fit in limited real estate. Source + Demo 3. If you tired with your old fashion selectbox try this one. Source Demo 4. jQuery Chained Select To chain combobox state to combobox country and combobox city to combobox state you must write the following code. Source Demo 5. Source + Demo 6. jQuery Selectbox Plugin Custom select box replacement inspired by jQuery UI source. Source + Demo 7. 9. 10.

Jcrop Image Cropping Demos Hello World! This is the most basic example of Jcrop implementation. Since no event handlers are attached, it's not very exciting, but displays the out of box functionality. Attach it to any image on your page with the simple code below, and start cropping! These demos have been adapted for display on this website. Creating a unique ListView layout using cell-spanning The ListView control makes it easy for you to organize content in a beautiful and meaningful way. The ListView control takes advantage of the Windows 8 grid system, a design tool that provides a structure for variation and maintaining user interest. Visual Studio’s Grid App Project Template showcases a simple usage of an HTML ListView that’s databound to hierarchical data. Figure 1: VS "Grid App" Project Template Our Sports and Entertainment inspiration samples takes the framework from the VS template to the next level by building on top of it and simply changing content size, spacing and content positioning. In this post, I’ll show you how easy it is to do so! Different is beautiful Just because our design tool is called the “Grid System” doesn’t mean your layout needs to be identical squares. You can see this in action in the Windows Store. Layouts that uses a variety of size and space are perceived as more crafted and professional. Cell spanning JavaScript: Step 1: Calculate cell size

internet explorer - IE 9 jQuery error: "Object doesn't support ... 'on'" jqPlot Charts and Graphs for jQuery manifestinteractive/jqvmap JavaScript image combobox v3.3 | Marghoob Suleman Are you tired with your old fashion dropdown? Try this new one. Image combo box. Preview: Feature at glance: Fully Skin-able Your original dropdown is safe, so your form post will not be messed.Can be created via JSON object. Image DropDown v3.3 Features Each dropdown can have own properties. Dependency: Jquery 1.2.6 or later. This jQuery plugin works perfectly without any modification. 1. 1.1 Have a look at original dropdown. <select name="webmenu" id="webmenu" onchange="showValue(this.value)"><option value="calendar">Calendar</option><option value="shopping_cart">Shopping Cart</option><option value="cd">CD</option><option value="email" selected="selected">Email</option><option value="faq">FAQ</option><option value="games">Games</option></select> Yes, This is a normal dropdown but I've added image path in "data-image" attribute. 2. 2.1 You need to add following code in "header". 2.2 One more step and you are done :) Add following code anywhere in the "body". You are done. Supported Browsers

The Latest jQuery Plugins And Tools That You Should Check Out - 35 Items You can never have too many tools to ease your work, especially because new ones substitute old ones, having better functionality and smaller sizes. In this article you will find a collection of various tools and jQuery plugins for each and everyone of you. I tried to gather tools for individuals who work as web designers and developers. This Is Responsive CSSFontStack SwipeView SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser. enquire.js: Awesome Media Queries in JavaScript TideSDK TideSDK formerly known as Titanium Desktop is the best way to create beautiful, unique desktop apps using your web development skills. Sitecake: Simple, drag and drop CMS for fast editing The JavaScript Database Have you ever noticed how JavaScript object literals look a lot like records? BrandColors Yeoman Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps. BigScreen ioDeck

OpenUI5 What is it? OpenUI5 is an Open Source JavaScript UI library, maintained by SAP and available under the Apache 2.0 license. OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It’s based on JavaScript, using JQuery as its foundation and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different models (JSON, XML and OData). View it! Check out our Explored application for controls running on phones, tablets and desktops, the interactive control playground for controls running on desktops as well as a number of sample applications Get it! It’s FREE. Get started! Try the Hello World, read the Developer Guide and refer to the API Reference. Contribute! You can help making UI5 better by reporting or analyzing bugs or by contributing bug fixes or new features.

Default text on input js A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create. min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){} A callback for when dragging stops. resize.enabled: false

Important Considerations When Building Single Page Web Apps Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser. Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. You're working with a SPA when each of these tasks take place on the same page (using AJAX for client/server communication, of course). Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. I will expand on each of the points above in the following sections. Picking an Application Framework

Meet Grunt: The Build Tool for JavaScript If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in. But what do you use if the project is primarily JavaScript? That’s the problem Ben Alman set out to solve when he created Grunt. What exactly is Grunt? Well, the README on Github says Grunt is a task-based command line build tool for JavaScript projects. Here’s the idea: when working on a JavaScript project, there are a bunch of things you’ll want to do regularly. That’s what Grunt aims to be. For more Grunt intro goodness, see Ben’s post on his personal blog and the Bocoup blog. Grunt is built on Node.js, and it’s available as a package via the Node package manager (npm). You’ll notice it installs quite a few dependencies; there are other npm packages that Grunt uses. You’ll notice a lot of initial output. Keep going and fill in the rest of the fields.

Related: