Posts tagged with jQuery

Adding CSS Opacity Using JQuery

February 24th, 2010

I recently read about using rgba values for the background CSS property, it’s very easy to apply using JQuery, for example.

$("#element").css("background","rgba(255,63,73,0.5)")

The last value of 0.5 is just the opacity. Of course this doesn’t work in IE so you need to use.

$("#marker").css("filter","alpha(opacity=50)")

Finally to get the RGB values from the hex colour codes you can use these functions I found here.

function HexToR(col) {return parseInt((cutHex(col)).substring(0,2),16)}
function HexToG(col) {return parseInt((cutHex(col)).substring(2,4),16)}
function HexToB(col) {return parseInt((cutHex(col)).substring(4,6),16)}
function cutHex(col) {return (col.charAt(0)=="#") ? col.substring(1,7):col}
Google BookmarksEvernoteGoogle GmailHotmailWordPressLinkedInFacebookDeliciousShare

jQuery Lightbox

May 5th, 2009

I’ve just tried out a lightbox plugin for jQuery, it’s called jQuery Lightbox Plugin (balupton edition) and despite the rather long title it’s very easy to use.

One of the main advantages I can see over other libraries is that you only need to create one link to the main JavaScript file, all the other links are handled by the code. This makes including the script much easier as there’s only one line to add in the document head

<script type="text/Javascript" src="/lightbox/js/jquery.lightbox.min.js"></script>

The only problem I experienced is that using the constructor crashes IE6, so using this code doesn’t work:

$(function(){$.Lightbox.construct({
          show_linkback: false
          });
});

Fortunately there’s a workaround by appending the options to the script link so it looks like this:

src="/lightbox/js/jquery.lightbox.min.js?show_linkback=false

Online RegEx Tool

I also ran across this online regular expression tester, it’s done in Flash but you can also download it to your computer if you have Abobe Air installed. It makes for a very handy tool on your desktop.

Google BookmarksEvernoteGoogle GmailHotmailWordPressLinkedInFacebookDeliciousShare

Javascript Libraries

April 29th, 2009

First I should say that I’ve been very busy lately, hence the lack of posts on my blog, but I hope to rectify that situation soon.

I’ve been working on a new Intranet site at work and for the first time I decided to try using a JavaScript Library. I may be a bit behind the times but I’ve always preferred to code things from scratch myself. This is not from any purist point of view but just because I prefer to understand exactly how a site works and using a library abstracts away a lot of the underlying workings, of course I understand that this is the whole point of using a library.

Anyway there’s many libraries to choose from but I picked jQuery, mainly because it’s fast, small and easy to implement. I’ve been very impressed so far just how easy it is to learn and will definitely use it in future projects.

I’ve also added some charts using the Flot library in combination with jQuery, again it’s easy to use and creates great looking charts in JavaScript.

Flot Chart

Google BookmarksEvernoteGoogle GmailHotmailWordPressLinkedInFacebookDeliciousShare

Switch to our mobile site