Posts Tagged jQuery
JavaScript Rounded Corners
Posted by admin in Web design & development on November 27th, 2009
Rounded corners with CSS and graphics is OK – but a pain to set up – requiring custom images and plenty of extra markup. JavaScript – particularly when helped by jQuery comes to the rescue and makes it fairly trivial. Requiremtents: must work with IE6, IE7, iE8, FF and Safari (note about IE8 below).
Main contenders:
- for jQuery: jquery.corner.js from rc.rctonline.nl
- for jQuery: jquery.corner.js from malsup.com
- for jQuery: cornerz
- stand alone: curvycorners
Using #1 at the moment. Would like to try them all again in the light of the IE8 workaround below. Gotta say I now think #3 (cornerz) looks most promising in terms of size and ability. Going to have another look to see which ones look to CSS first (for those browsers that are modern – and not Internet Explorer) before turning to JavaScript.
Problem with most of these is IE8 doesn’t play nice… fix seems simply to add the behave like IE7 meta tag: <tt><meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /></tt>
First impressions:
- good, non-transparent outside corner
- good,
- throws errors in IE7, non-transparent outside corner
- slow in IE,
Keeping your sites optimised
Posted by admin in Web design & development on June 11th, 2009
The sites I’ve been working on had been suffering from flab. A JavaScript library here (jQuery of course), a plug-in there, another, another, another… then a large plug-in that loads it’s own plug-ins (Shadowbox v3 – I’m talking to you).
It took a kick form outside to realise things were going downhill.
So – with the help of the good folk at Yahoo YSlow and the new copy-cat-kid on the block (Google Page Speed) with their plug-ins for a plug-in(firebug) for Firefox [oh the irony]… I’ve started to get things in line again.
Both YSlow and Page Speed have helpful links and information once called – and now I can pat myself on the back for having improved my YSlow scores from an ‘F’ to a ‘B’. Wetware heh.
Main issues I was able were too fix were too many HTTP requests and a lack of explicit caching direction from the web server. Nextly I’ll be looking at getting interface elements into a sprites for future jobs. (Must take this sprite/CSS creation tool for a spin. Looks absolutely fab.)
Reduce HTTP requests
While combining CSS files is trivial, combining a bunch of disparate JS files into one is not painless – I’ve had to drop a jQuery tooltip plug-in as it wouldn’t play nice when bundled up with its playground compatriots.
Server side caching and compression
is achieved the following htaccess rules:
##Cacheing static components FileETag none Header unset Etag # Far future 1 YEAR <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch> <FilesMatch "scripts.inc.php$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch> # Past last modified <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$"> Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT" </FilesMatch> <FilesMatch "scripts.inc.php$"> Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT" </FilesMatch> #Compress <IfModule mod_deflate.c> <FilesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
Shadowbox woes
I now may be on the lookout for a replacement to Shadowbox. Shadowbow v2 was great – it came with lots of build options and could be explicitly launched by jQuery on Document Ready. v2 wasn’t IE8 compatible however – forcing an upgrade to v3 – still in beta… Ho hum. This required an updated version of the JW FLV media player which I’m not mad keen on – and that needs a new licence. While Shadowbox is now very clever and can automatically find it’s own dependencies – it has many of these – each one with an HTTP request. While it is easy to combine the whole bundle into a single file its something I’d rather not have to do/keep track of – I’ve already got a rod for my back with the other jQuery plugins…
jQuery in anger
Posted by admin in Web design & development on April 17th, 2009
[notes to self]
Shadowbox
Tooltip
highlightFade
http://jquery.offput.ca/highlightFade/old.php
jquery.validate.js
Lovely, lightweight carousel:
http://www.gmarwaha.com/jquery/jcarousellite/
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
http://www.jasonbradbury.com/
Options for “hybrid modal” lightbox display of images
Posted by admin in Web design & development on May 29th, 2008
[Update 2009 - OK now I'm not the total newbie anymore and would have to recommend Shadowbox on top of jQuery for it's versatility and power. Slimbox is still great though.]
The Contenders
Slimbox
The true successor to the king (Lightbox). This is the chosen one. Very lightweight, simple instructions, does what it says on the tin. Simple instructions for when I’ve forgotten in two weeks are further down…
Shadowbox.js
This one seems to be the current best in breadth of options but too much to read for a low level webdev monkey like me.
Lightbox
The original – but perhaps no longer the beast.
Thickbox
Could have been a contender but I balked at the heavy graphic design.
FancyZoom
The one that started the search thanks to seeing it in action at this FontFeed article. Great tool – but as a webdev guerilla [read chimp] the commercial licence stopped me. Need a bit of slack before I can convince anybody to pay…
Slimbox walk-through
Upload css and js files – add these three lines of code to the head of the HTML:
<script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/slimbox.js"></script> <link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
(The last slash there may want removing according to your doctype. Are you strict enough for it?)
Then craft the images links like this for single images
<a href="" rel="lightbox" title=""><img src="" alt="" /></a>
or, for sets, like this (where the rel attribute has the set name’s suffix)
<a href="" rel="lightboxset" title=""><img src="" alt="" /></a>