Ajax Updates |
- Litebox – Simple LightBox
- jTip – jQuery Tool Tip
- Semantic Horizontal Forms
- Custom Form Elements
- Latest HTML5 Visual Codes Cheat Sheet
| Posted: 17 Dec 2009 09:54 AM PST If you haven’t been to the front page in some time, check it out. I’ve started blogging about some tips and tricks. Expect some full featured scripts some time soon. Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand. Features:
Litebox is reverse compatible, you can drop the javascript files into your js folder without issues, WITH ONE EXCEPTION, you must add onload=”initLightbox()” into your body tag. But anyway, here’s a quick tutorial for those unfamilar. Paste this in your document < head > <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.lite.js"></script> <script type="text/javascript" src="js/moo.fx.js"></script> <script type="text/javascript" src="js/litebox-1.0.js"></script> Make your links as such <a href="images/image-1.jpg" rel="lightbox[example]" title="Horses"><img src="images/thumb-1.jpg" width="100" height="40" alt="Beautiful Horses" /></a> where example is your image set name.  Related Listings:
|
| Posted: 17 Dec 2009 09:44 AM PST Hot on the heels of ThickBox comes jTip, a jQuery tool tip solution. Of course, a tool tip type solution is anything but monumental; you don't have to tell me that. Regardless, given my keen liking for the great jQuery library, along with a legitimate need to provide one last solution before I left Albertson's, I have conjured up a tool tip solution using jQuery. So yup, it's just another tool tip, but maybe with a little more flexibility/customization than what you might currently be use to with similar solutions. jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It's nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip. Originally, I built jTip to be used on a web application UI that requires the explanation of several redundant form fields in multiple web applications with similar functionality. For example, as showcased in my example, a user can roll-over a question mark (?) and get a detailed explanation of the password's requirements. A single file can be used to keep these requirements consistent across an application as well as all applications that may require a password. Of course, the same thing could be done with a single HTML file and a pop-up window, but then it wouldn't be web 2.0 certified, would it? Seriously though, this solution could easily be used with a database instead of a static htm file. For instance the file I link to could contain php that would connect to a database for the tool tip text. And yes, that would make more sense then the example I am showing here. Unless of course using a database to store and update information is not an option. Ok, so all you really want to know is, exactly what does jTip do. At this point you can simply check out the demo, or read my quick and dirty definition of jTip below. What does jTip do: jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of "jTip" to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it's possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example. Related Listings:
|
| Posted: 17 Dec 2009 09:34 AM PST XHTML in a semantic way and positioned the form elements next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It's been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable) I've added a conditional comment to fix a padding error in IE but without this the form would still be legible and fully usable, it's just a small cosmetic adjustment. Features: Fixed questionable semantics by adding and hiding correct legend text, thanks Adam and Joe. Related Listings:
|
| Posted: 17 Dec 2009 08:46 AM PST This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists. Usage You are free to share, alter and use this script commercially. Just leave the title, my name and website in tact in the JavaScript script. This script is licensed under a Creative Commons license. In a nutshell, the JavaScript looks for any form element with class=”styled” declared; hides the real element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the stages when it is clicked. To get the checkboxes, radio buttons and select boxes to work properly, you’ll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. If you use the images I created, you won’t have to change the variables, but if you make your own, chances are you’ll have to. The checkboxes and radio buttons to the right are linked to transparent PNG images for you to use freely if you’d like. The frist two variables are the height of a single stage of the checkbox and radio button, and the third is the width of the select box. You may need to spend a little time tinkering with the checkbox and radio button images so they don’t twitch during different stages. var checkboxHeight = "25"; var radioHeight = "25"; var selectWidth = "190"; The CSS If you make your own images, you may need to change a few things in the cascading style sheet. In span.checkbox and span.radio, the height property should be one fourth of the height of the full size images. You also might have to change the width property in span.select selector. You probably won’t have to edit any other portions of the CSS, but regardless, this part is still straight forward. span.checkbox { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(checkbox.gif) no-repeat; display: block; clear: left; float: left; } span.radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(radio.gif) no-repeat; display: block; clear: left; float: left; } span.select { position: absolute; width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(select.gif) no-repeat; overflow: hidden; } The XHTML <input type="checkbox" name="a" checked="checked" class="styled" /> Sexy <input type="checkbox" name="b" class="styled" /> Boring <input type="radio" name="c" checked="checked" class="styled" /> Radical <input type="radio" name="c" class="styled" /> Poor <select name="d" class="styled"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> Related Listings:
|
| Latest HTML5 Visual Codes Cheat Sheet Posted: 17 Dec 2009 08:24 AM PST This new HTML5 Visual Cheat Sheet is an update of my HTML 5 Visual Cheat Sheet that I published for the first time. HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for. Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.