Ajax Updates |
- Fullsize – A new IMG Tag Attribute
- mParallax – Mootools Plugin
- jParallax – Stunning Animation Effects
- Facelift – Image replacement
- Detect the Social Sites Your Visitors Use
| Fullsize – A new IMG Tag Attribute Posted: 28 Sep 2009 12:07 PM PDT Fullsize is an attempt to get a new Please vote for Fullsize at the bottom of this page and add your name to the list of those who support the Fullsize idea. Update: Many thanks to Ian Hickson for being kind enough to email back and forth with me about Fullsize being added into HTML 5. In the end he said he would not add it into HTML 5, but encouraged me to have the different browser vendors add native support for it in the actual browsers. So if any of you know anyone who works on Safari, Firefox, Opera, etc. Please let me know There are MANY fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. So many solutions in fact that it is rare to visit a website with a photo gallery that does not already utilize one of these solutions. So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? I propose adding a fullsize attribute to the Example of fullsize in action: <img src="me.jpg" alt="Me" fullsize="me-big.jpg" /> Fullsize FAQs Please watch the second video at the bottom of this page and visit the Fullsize Google Group for answers to your questions or concerns. - Why do would you want to add a fullsize attribute, can’t you just use Javascript? - If Javascript is turned off would fullsize be broken? - I would not want this kind of thing controlled by the browser, because then I would have no control over how it looks. The minified version of Fullsize is just 12kb! The commented version is just 16kb! <link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script> To attach Fullsize to all the images on your page, all you need to do is: $("img").fullsize(); Fullsize will only attach itself to images that have a longdesc attribute on the <img /> tag. Example: [code lang="html"]<img src="me.jpg" alt="me" longdesc="me-big.jpg" />  Related Listings:
| |||||
| Posted: 28 Sep 2009 11:06 AM PDT mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”. How to use ? new mParallax(myElement [, options]); Do not forget to declare the doctype ! new mParallax($('parallax'),{triggers:$$('a.goto'),triggerExposesEdges: true}); mouseResponse (boolean) true Download: http://www.piksite.com/downloads/mParallax.zip Related Listings:
| |||||
| jParallax – Stunning Animation Effects Posted: 28 Sep 2009 10:08 AM PDT jParallax has had a major overhaul in readiness to be released as version 1.0! Layers are now freezable – the last feature I wanted to implement – and the code is more j and compact. I’ve been really encouraged by all the great comments, so thank you everyone! I just need you to road test the demos and tell me that it’s still working in your browser, and then I’ll stick a 1.0 on it. Diagram of parallax layers. jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. The diagram on the right illustrates what Parallax does to the html <ul id="parallax"> <li></li> <li></li> </ul>
Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the parallax ‘window’. When the mouse is moved to the extreme left-hand side of the parallaxed window the left-hand side of the layer meets it, and when the mouse is moved to the extreme right-hand side of the parallaxed window the right-hand side of the layer arrives at the right hand-side of the window. The simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and thus appear closer, and unless a layer is smaller than the viewport, its edges are never seen. The Colour Drops Demo was made in exactly this way, with jParallax in its default state, and the ’speed’ of the layers controlled simply by making the images different sizes. No options have been passed in. However, we all want tweaky-tweaky. I also give you tweaky-tweaky… jQuery('#parallax').jparallax(options, layer_options); Clearly the parallaxed element(s) can be selected any way you like. For the sake of simplicity for the rest of this guide I refer to the parallaxed element as ‘#parallax’. In most cases, you should set the following CSS on the parallaxed element: #parallax {position:relative; overflow:hidden; width:npx; height:npx;} Children of a parallaxed element become layers, and are automatically given position:absolute; in order to start moving them around, but the parallaxed element itself needs position:relative; or position:absolute; or the layers will move relative to the document rather than the viewport. overflow:hidden; stops layers displaying outside of the bounds of the viewport, and width and height should be set to prevent the viewport collapsing. In addition, jParallax needs to know how big layers are, and if there is anchored content inside a layer it needs to know where and how big it is. It uses jQuery’s height(), width() and offset() methods to find out. However, if you experience trouble with the range of motion of a layer you should consider setting all dimensions (height, width, top and left) explicitly via CSS to make life easy for those methods. Related Listings:
| |||||
| Posted: 28 Sep 2009 09:31 AM PDT Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (< h1 >, < h2 >, etc.) to < span > elements and everything in between! This page is written entirely with plain text. No graphic editor was used at all. Don’t believe me? Turn off your images or click here to see this page without applying facelift. Related Listings:
| |||||
| Detect the Social Sites Your Visitors Use Posted: 28 Sep 2009 09:13 AM PDT If you could detect which social bookmarking sites your reader uses, on a per-reader basis, you could display only the badges they care about. But you can't know that because the browser secures the user's history, I know that you visit: Digg, Reddit, StumbleUpon, Yahoo Buzz, Facebook, Technorati, Newsvine, Furl, Diigo, Blogmarks, Blogger, Last.fm, N4G, Faves, Kirtsy, and Google Bookmarks. It's a bit scary, I know. I'll come back to how I know in a second. We can use this information to only display one or two badges that we know the reader uses. It solves the which-badges-to-display problem. Today I'm releasing SocialHistory.js, code which enables you to detect which social bookmarking sites your visitors use. Here's an example of how to use it: <script src="http://aza.googlecode.com/svn/trunk/SocialHistory/SocialHistory.js"></script> <script> user = SocialHistory(); var visitsDigg = user.doesVisit("Digg"); var visitsSlashdot = user.doesVisit("Slashdot"); var listOfVisitedSites = user.visitedSites(); </script> SocialHistory.js cannot enable you to see all of the user's history. It has to ask, 20-questions style, if the user has been to a particular URL: It's hit or miss. SocialHistory.js has a big list of the most popular social bookmarking sites which it checks against. To see the list of sites, you can do: moreSites = { "Aza": ["http://humanized.com/weblog", "http://azarask.in/blog"] }; user = SocialHistory( moreSites ); alert( user.doesVisit("Aza") );
How does SocialHistory.js know? By using a cute information leak introduced by CSS. The browser colors visited links differently than non-visited links. All you have to do is load up a whole bunch of URLs for the most popular social bookmarking sites in an iframe and see which of those links are purple and which are blue. It's not perfect (which, from a privacy perspective, is at least a little comforting) but it does get you 80% of the way there. The best/worst part is that this information leak probably won't be plugged because it's a fundamental feature of the browser. 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.