What I suspected occurred but after adding some more tests to the line up I was amazed to find plain ol’ javascript (the stuff that jQuery is built on) ran about 40-50X faster in some browsers depending on what browser you were testing in. This really makes me question about how heavily dependent we are all on jquery and other libraries for some tasks.

Here are some pros and cons I could boil it down to.

jQuery Pros

• It is easier to write and you don’t have to know that much to learn how to use it.
• It is consistent across all browsers for the most part.
• After the initial jq script download your js files stay pretty small in weight and in length

jQuery Cons

• heavy library initial file download (I know most gzip it so it compress 20k or so)
• It chugs compared to plain javascript.
• some time work arounds have to be in place and you can become lazy and dependent.
• It’s Well documented and tested.
• the quickest way to type a command isn’t always the fastest speed wise for example http://jsperf.com/jquery-selector-perf-right-to-left/59

javascript in nude Pros

• No middle man so your talking straight to the browser or server.
• A lot quicker then jQuery
• You understand more whats actually going on (as a developer)

javascript in nude Cons

• Lengthy to write and heavy in file size.
• browser support inconsistencies for different parts of js. (end up killing 1 bird with 3 stones type of deal… jQ does this for you)
• Tons of research from many sources.
• super lengthy production time due to buggy-ness of multiple browser support.

That being said you could mix the two but that gets kind of messy. Especially when you are making HUGE scripts or applications. But is it worth the pay off? maybe. User experience wise. Yes! Development Time. Not so much! So really it comes down to your resources..

1. How much time… sometimes money do you have.

2. How knowledgeable or willing to research is/are the developer(s) building your script there are many things that make a script chug not just a library.

3. are you ready for a long term relationship because maintenance is going to be crazy if you go the js nude route.

it’s kind of a hard choice because 1 developer’s preference vs 10,000,000+ users experience can really make a huge impact on the whole product. makes you wonder how fast your heavily dependent js app would run if you went with js in the nude as opposed to your library of choice.

I wanted to experiment with jquery 1.4.1 so I started building a tool tip and just kept going with it. A few things before we get started.

DOWNLOAD THE DEMO AND FILES

• Uses the wonderful jQuery 1.4.1
• It does not use code in the bottom of your content
• hoverIntent (not the jquery plugin) NEW
• can set feature to stay open
• Can utilize JSON to insert code snippets for fancy tips NEW
• It use the rel and rev attributes
• works in all the popular browers (even ie6) NEW
• Can add plain text to the rev attribute.
• It’s w3c valid
• It’s SUPER easy!

Here are some examples:

Top Left
Top Right
Bottom Left
Bottom Right
Center Right
Center Left

OMG WAIT…

I forgot to tell you… You can put just about anything you can code into this tool tip (I tried an iframe and it worked great!) It is pretty powerful for a tool tip eh?

Live Links
Or Dead Links
Here is an img
Here is a vid
(you can link images to a tool tip too)

DOWNLOAD THE DEMO AND FILES

The Tricks

Basic Use

• add rel=”mytip” to any link you want the tip to work on.
• Just add your text/code to the rev attribute.

Advanced Use

• to set the width and location would look like this you can set all, some, or only one of these values: rel=”mytip [width:500px; height:300px; center right leaveopen get]” possible values here
• using get will cancel out the rev tag so make sure your id=”tip1″ has the same value as your JSON object ie ‘tip1′.
• to leave the tab open and insert a .closebutton just add leaveopen in the brackets
• you can add classes and attributes like you would in normal code.
• You can change the offset from the mouse in the JS
• You can modify the span wrapper to auto include something more if you want to do something fawn-cay.
• You can change the css on the .mytip class

experiment… what can you not do? Let me know your feedback or if you find some bugs. PLEASE because I don’t want to pollute the web.

Blessings,
Richard Lee

DOWNLOAD THE DEMO AND FILES

I decided to try and create a custom tool tip and it worked out pretty well. I had to utilize a funny attribute to make it work (the rev attribute… WHAT??? that’s what I said. go ahead check w3c ( ; )… But it Does. I just need to work on customizing the positioning. so if the browser isn’t wide enough or to pop out to the left instead of the right etc.

I am using a Google hosted jQuery 1.4 take a look below.

This is some Anchor Text Hover over it

you can make the link do nothing too! but I have a tip! just set the href to #

This is out it works

You must be careful with quotes ” ” you must make sure you use ‘ ‘ instead of ” ” use the opposite of what you are using for your attributes.

It works in all the browsers as far as I know… (I haven’t tested in chrome or opera though)

With this solution all you have to do is set the rel=”mytip” and then put whatever you want in the rev=”" attribute for your tip. It requires jquery 1.4, the code I wrote to make it happen, and then a .mytip class for css

you can view the source below this sentence to cut and paste the .js and .css (all of it i’m linking to googles jquery)

Blessings,
Richard Lee

• Functionality:
• + Fading Transition
• + Screen Navigation (Next, Previous, Close, or the Actual Image)
• + Key Board Navigation (Left & Right Arrow, Space, Esc.)
• + Loop Through Images (after last image goes back to first image vice versa)
• + Insert Onscreen text descriptions below the image via link title attribute text
• + Insert title of the image via thumbnail alt attribute.
• + Customizable
• + NEW OPTIMIZED VERSION – brought to you by Frédéric MADSEN

I started searching for a light weight light box script that did not rely on a script library or frame work in order to help it function. I was not able to find one at the time that did not rely on a library… So I made my own. I have an economy host that does not support gzip so any large scripts I use my users will have to download them which can cause multiple seconds of page display delay.

The idea was obviously derived from light box2 and it works essentially the same way in all modern browsers ie6, ie7, ie8, safari, chrome, and firefox.  When JavaScript is off it degrades gracefully in that the photo is still accessible the experience just isn’t enhanced.

The Light weight File Sizes
8 kb – lighterbox.js
3.2kb – load.gif
0.9kb – lighterbox.css
0.3kb – overlay.png
0.2kb – prev.gif
0.2kb – next.gif
0.2kb – close.gif

It’s around 14kb – total!

The orignal “light box 2″ with scripts alone is 190kb…ouch. Remember your users are downloading multiples scripts on your server and every kb here and there adds up and people start leaving your site/content because your site is the one with the loading bar always half full. lol one script isn’t that big a deal but several scripts add up. Then there’s g-zip that’s another story.

Here is an example of How Lighter Box2 works.

below you will see the script along with several examples of how you can pick and choose to include or not include titles and descriptions.

Text works too…

1. The first thing you will do is download LighterBox2 Original and take the folder you extract from the zip file and drop it in the root directory where the files your users will be browsing are (where your index.html file is or index.php whatever you are using).

Also Try out the NEW even MORE OPTIMIZED version LighterBox2 brought to by Frédéric MADSEN (Succesfully tested on Chrome 5/6, Firefox 3, IE 7/8/9, Opera 10 and Safari 4/5)

* 4 files instead of 7 (-40%)
* 6.03Ko instead of 12.3Ko (-50%)
* JavaScript file less than 100 lines, 94 lines instead of 195 (-50%)

Also feel free to check out his other links w3c.html5.free.fr and My Tool Tip JS

2. Next you will insert a link to the Style Sheet right before the closing head tag like this


<link rel="stylesheet" type="text/css" href="lighterbox2/lighterbox2.css" /> </head>



3. then you will insert a link to the script right before the closing body tag like this. (It doesn’t have to be exactly before the body tag just make sure it is below the content where you are using the script or else it will not work.)


<script type="text/javascript" src="lighterbox2/lighterbox2.js" ></script> </body>



4. Lastly you will insert the “rel” attribute with a value of “lighterbox” on the anchor tags that you want to use lighterbox2 on and fill the “title” attribute with your descriptions that are linking to your larger image files like this, and for your thumbnails use the alt attribute of the thumbnail to store the title of the image.


<a href="images/bigPicture.jpg" title="Short description here" rel="lighterbox" >

<img src="images/thumbnailPicture.jpg" border="0" alt="us" />

</a>



YAY…Test it out!

If you find and bugs that I haven’t caught please let me know.

Blessings,
Richard Lee

You can also download
LIGHTER BOX 2!
NEW Both onscreen and keyboard navigation for galleries. Descriptions (AS MUCH AS YOU WANT) that will be displayed to the viewer… check it out.

I started searching for a light weight light box script that did not rely on a script library or frame work in order to help it function. I was not able to find one at the time that did not rely on a library… So I made my own. I have an economy host that does not support gzip so any large scripts I use my users will have to download them which can cause multiple seconds of page display delay.

The idea was obviously derived from light box and it works essentially the same way in all modern browsers ie6, ie7, ie8, safari, chrome, and firefox.. When JavaScript is off it degrades gracefully in that the photo is still accessible the experience just isn’t enhanced.

The Light weight File Sizes
4.4kb – lighterbox.js
2.4kb – loader3.gif
0.5kb – lighterbox.css
0.1kb – closebutton2.gif
0.3kb – overlay.png
7.7kb – total!

The orignal “ligh box” with script and all its friends are 16kb. So what? You wont say so what when your users are downloading multiples scripts on your server and every kb here and there adds up and people start leaving your site/content because your site is the one with the loading bar always half full. lol one script isn’t that big a deal but several scripts add up. Then there’s g-zip that’s another story. (with gzip compression on lighter box is like 1.093kb)

Here is an example of How Lighter Box works.
Text works too…

1. The first thing you will do is download the files and take the files from the folder you extract and drop them in the root directory. (not the folder but the files in the folder)

2. then you will insert a link to the script right before the closing body tag like this. (It doesn’t have to be exactly before the body tag just make sure it is below the content where you are using the script or else it will not work.)


<script type="text/javascript" src="lighterbox.js" ></script>

</body>



3. Next you will insert a link to the Style Sheet right before the head tag like this


<link rel="stylesheet" type="text/css" href="lighterbox.css" />

</head>



4. Lastly you will insert the “rel” attribute with a value of “lighterbox” on the anchor tags that are linking to your larger image files.


<a href="images/us.jpg" rel="lighterbox" >

<img src="images/ust.jpg" border="0" alt="us" />

</a>



YAY…Test it out!

If you find and bugs that I haven’t caught let me know please let me know.

If for some reason you can’t get it working, download these files and there is a test page in there and you can see how it is set up.

Blessings,
Richard Lee