Posts Tagged ‘jquery’

jQuery UI 1.9 Boilerplate

Wednesday, October 17th, 2012

jsbin has made having to remember some of these links less important. However, with jQuery UI 1.9 coming out, there are some CDN links that aren’t working. Here is the updated boilerplate I use to quickly test out a jQuery UI project. If all goes well, you should have a dialog that you can drag around and resize.

<!doctype html>
<html>
<head>
  <title></title>
 
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
 
  <style type="text/css">
    #modal {
	 background: orange;
    }
  </style>
 
  <script type='text/javascript'>
    $(function() {
        $("#modal").dialog({ title: "It works" })
    });
  </script>
</head>
 
<body>
<div id='modal'>jQuery UI!</div>
</body>
 
</html>

As a bonus, here is the markup in jsbin.

Expanding Textareas jQuery Plugin

Thursday, April 19th, 2012

Ever want a textarea to expand based on the size of the input that someone types? I made a jQuery plugin to handle expanding textareas! The basic technique is based off of a cool article called Expanding Text Areas Made Elegant. Check out the Expanding Textareas Demo and play with the Expanding Textareas Source Code.

I think it’s a pretty cool plugin that is a lot nicer than using the standard hacks for keeping textarea heights up to date. And it works really well with proportional widths, custom fonts, and min/max heights!

Here is a screenshot (which also links to the demo):


Expanding Textareas jQuery plugin

Input Type=Color Polyfill

Friday, April 6th, 2012

My jQuery Colorpicker – Spectrum now has a mode that acts as a polyfill to input type=color.

What this means

Now that the color input is supported in Chrome nightlies, along with Opera, people may want to start using this cool new form element.

While you can still customize the colorpicker and bend it to your will, if you’d like to use this new mode just include the HTML:

<input type='color' value='#4499f0' />

Along with a reference to spectrum.js and spectrum.css:

<link rel='stylesheet' href='spectrum.css' />
<script type='text/javascript' src='spectrum.js'></script>

Demo

See the color input polyfill demo page for more info!

UI Anglepicker

Tuesday, April 3rd, 2012

I created a jQuery UI Widget for picking angles.

Demo: JavaScript Angle Picker Demo
Source Code: https://github.com/bgrins/ui.anglepicker

Big thanks to Original JavaScript and CSS based on: https://github.com/mrflix/LayerStyles

AjaxQ jQuery Plugin

Saturday, February 25th, 2012

At Foliotek, we have a lot of components we have built (and are in the process of building) for our various projects.

We are open sourcing some of these, and the first one is the AjaxQ jQuery Plugin. The purpose of this plugin is for managing sequential ajax requests.

It is designed to follow the $.ajax, $.get, and $.post interfaces and return values, only taking one extra parameter (the queue name). Here is a brief sample of the functionality:

$.ajaxq ("MyQueue", {
        url: 'http://jsfiddle.net/echo/jsonp/',
        type: 'post',
        dataType: "jsonp"
});
 
$.postq ("MyQueue", 'path/to/your/resource', onsuccess);
 
$.getq ("MyQueue", 'path/to/another/resource', onsuccess);

In this case, each request would only run once the other finished. See the AjaxQ demo to see it in action with multiple queues.

All the source code is available on Github, available under the MIT License. I hope to have more projects to report on in the future!

jQuery UI CDN Boilerplate

Tuesday, December 13th, 2011

I always forget these links, and they are surprisingly hard to find. Here is a quick markup skeleton to throw together for prototypes using jQuery UI.

<!doctype html>
<html>
<head>
  <title></title>
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
 
  <style type="text/css">
    #draggable {
		background: orange;
		width: 100px;
		height: 100px;
	}
  </style>
 
  <script type='text/javascript'>
	$(function() {
		$("#draggable").draggable().resizable();
	});
  </script>
</head>
 
<body>
<div id='draggable'>drag!</div>
</body>
 
</html>

Keep Aspect Ratio With HTML and CSS

Wednesday, September 28th, 2011

When working on my javascript colorpicker, one of the things I thought would be really cool is if you could resize it and have the colorpicker automatically respond to different widths. When I first made it, I had basically defined static widths with the thought that there could be different themes (small, normal, large) which defined different widths.

This turned out to be a pain, since you had to manually figure out what each width needed to be for the total size. To complicate things further, I wanted to have a different percentage width when accessing the colorpicker via an iPhone. I found that the hue slider was a little too small to accurately slide with the touch interface, so I wanted it to take up more of a percentage of the total width. I’m can be lazy about calculating widths in CSS, so I went off looking for a different way to do this.

Aspect Ratios

Why couldn’t I just use percentage widths? Because the left portion of the colorpicker needs to be a square – or else the gradients for saturation and value just look weird and don’t really map up 1:1. I did some searching and found a CSS workaround to keep the aspect ratio of a fluid element by ansciath. The meat of this trick is that according to the spec for margin-top, a percentage refers to the width of the containing block, not the height. This post got me much of the way there, but I had to include a couple of fixes for IE and ways.

The really nice part about using this technique is that it makes spectrum extremely easy to skin in your own CSS. Check out ColorStash for an example of this. Using media queries and max-widths, I can change the width of the colorpicker as the browser resizes to get some really responsive behavior on a UI control (colorpicker) that has typically been very static.

Demo

See the demo of the aspect ratio and media query. Try resizing your browser window to under 480px width to see the switch happen. Here is the full source code for the demo.

Below is a snippet showing the basic HTML/CSS needed for this technique:

<div class='container'>
    <div class='outer'>
        <div class='fill'></div>
        <div class='inner-top'>
            <div class='square'>Always a square</div>
            <div class='right'>% width</div>
        </div>
    </div>
    <div class='bottom'>
        Bottom
    </div>
</div>
.outer {
  position:relative; 
  width: 100%;
  display:inline-block;
}
.inner-top {
   position:absolute; top:0; left:0; bottom:0; right:0;
}
.square {    
    position: absolute;
    top:0;left:0;bottom:0;right:20%;
    background:orange; 
}
.right {
    position: absolute;
    top:0;right:0;bottom:0;left:83%;
    background: purple;
}
.fill { 
    *height: 80%;
    margin-top: 80%;  /* Same as square width */
}
@media (max-width: 480px) {
    .square { right: 51%; background: blue; }
    .right { left: 51%; }
    .fill { margin-top: 49%; } 
}

What I want in a JavaScript colorpicker

Sunday, September 4th, 2011

I have been wanting to add colorpickers in a couple of projects recently, and was not happy with the options. Just search JavaScript Colorpicker and you’ll see what I mean. It got me thinking about what I wanted out of a colorpicker.

No Images!

It is pretty well known that you should limit the number of images that your web page requests for performance reasons. Some of these, including the eyecon.ro picker, which is the first that shows up when searching ‘jQuery colorpicker’, require a ton of images (27, in fact). This is overkill. Why can’t it be skinned with HTML/CSS?

Reasonable defaults

I found myself having to dig through the source code of various colorpickers in order to get them to act how I wanted. Maybe my experience on this is unique, but once I wanted to actually script behavior to go along with the picker (think – a template editor for an online portfolio), it became painful quickly.

Browser Support

It needs to support all major browsers (even IE). Ideally it could also support mobile devices.

Drop in

Didn’t want to have to download zip folders, place a bunch of images in my project and modify css files to point to the correct image path, etc. I just want to include a single JavaScript file, and a single CSS file, and be done.

Anything Like This?

I did find the nifty FlexiColorPicker, which accomplishes the no images goal with SVG and VML. It seems very nice, but didn’t have some of the features I wanted (dragging around the hue slider and picker didn’t actually work). I’m glad I found it, as I did use some of the gradients as a starting point with my CSS gradients.

Spectrum – My JavaScript Colorpicker

I have done a fair amount of color manipulation work while building a color scheme generator in a theme editor. I also have made a JavaScript color micro framework for parsing and conversion, called TinyColor. This is designed to allow a wide range of input and output (named colors, hex, rgb, hsl, hsv).

So, I decided to try my hand at this, and made the spectrum JavaScript colorpicker.

It works in all major browsers (tested in Safari, Chrome, Firefox, IE 7+, iOS, Opera). It uses IE’s propriety gradient filter (with some hacks for the hue slider – see .spectrum-ie-1 through 8 in spectrum.css. It should even work in iPhone and iPad – let me know if you have one and can double check that for me over on the demo page :). It is still in early stages, but I would love if I could get some feedback on the UI and desired functionality.

Demo

Head over to the current project page to try out the demo and see the docs.

It currently requires jQuery, but I have been trying to write the code to make it possible to remove that dependancy.

bindWithDelay jQuery Plugin – Now With Throttling

Friday, May 13th, 2011

I decided to add in throttling functionality to the jquery bindWithDelay plugin. This is a nice feature that didn’t require very many changes to the code (see the: diff).

What is throttling?

Imagine you are scrolling down a long page for 3 seconds and you have bindWithDelay running with a timeout of 1000ms. By default, your event will only fire a second after you have completely finished scrolling. If you have the optional throttling on, it will fire once per second during the scrolling – a total of 3 times instead of 1.

Checkout the throttling demo to see what it is doing.

filereader.js – A Lightweight FileReader Wrapper

Sunday, November 14th, 2010

I am working on project that needs to read local files. This relies on the FileReader interface, and I couldn’t find any JavaScript libraries to help out with common usage for this, so I made one.

View the project page and demo for the FileReader.js JavaScript FileReader Plugin!

FileReader is a JavaScript interface that allows you to read local files as binary. This is available in supported browsers when a user drags and drops files into a browser window or selects files from an input with a type of file. See the FileReader specification for more information.

filereader.js is a wrapper for accessing this functionality. It can be called using:

FileReaderJS.setupInput(fileInput, opts);
FileReaderJS.setupDrop(dropbox, opts);

If you use jQuery, you can access these calls with:

$("#fileInput").fileReaderJS(opts);
$("#dropbox").fileReaderJS(opts);

To see the full range of options and functionality, view the readme.

filereader.js is available under the MIT License. See the full filereader.js code or the single file raw javascript source on github.

You can see an example project using filereader.js on Instant Sprite, a browser based CSS Sprite Generator that I am working on. Try dragging images onto the body, or clicking to add multiple image files to see what is possible.