Rip's Domain

jQuery: Accordian Menu in 10 lines

Posted in Jquery by rip747 on November 30, 2006

John has started to create more screencasts demostrating the power of using jQuery. In this one he creates an accordian menu in just 10 lines of jQuery code. Pay close attention to how he does his selection and chains. Joen has stated that he will create more screen casts. I can’t wait for him to pulish them.

Accordian menu in 10 lines

jQuery cheat sheets.

Posted in Jquery by rip747 on November 30, 2006

UPDATE: Scott has a link to the 1.2 cheat sheets. Link below.
I recently just ran into these and never even knew they existed. Note to John: Put these in the footer of the jQuery site. Here are two links to the jQuery cheat sheet that you can download (PDF Format). In just two sheets, it pretty much covers almost everything you could want to know about the jQuery syntax and chaining methods. I would suggest downloading and printing them out. Then hang them next to your computer like a true jQuery geek!!!

Cheat sheet

Need some locale advice.

Posted in ColdFusion by rip747 on November 9, 2006

Need to reach out to the community here for some help.

My current project coming up involves taking a couple of websites and merging them so that run off one centralized database and site. This kinda like what Instantspot and about 1000 other websites do (including wordpress!). The issue is that the current sites are all over the country so obviously I’m going to have to display the date and time for that site’s current timezone.

The question is how would take the timestamp that is currently stored in the database and convert it to UTC time? What is the best way to go about doing this. Are there any CFCs out there that could take care of this for me.

Jquery newest plugin: Star Rating

Posted in Jquery by rip747 on November 8, 2006

Like I keep saying to myself, I can’t believe how fast JQuery’s plugin support is growing. Every week there are more and more plugins that make my life easier and JQuery stronger.

Today a new plugin was announced and this is one to watch real closely: Star Rating. With all the Web 2.0 crap going on right now, the rating systems are being used more and more. The problem is the code to create these puppies can sometime be very complex, well no more. Follow the link to see this newest plugin in action. This plugin takes an ordinary select box and transforms it into a star rating instantly and degrades beautifully. Excellent, excellent work Wil!

JQuery: datePicker Plugin bug with IE and table cells *Solution*

Posted in Jquery by rip747 on November 3, 2006

I submitted the following code to the JQuery discussion list claiming that there was a problem with the datePicker plugin and using it in a table cell with IE. The code below will show the problem.

BIG Sorry for the hot linking in the code below but I wanted to make sure that I was using the exact same code the author of the plugin is using.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>test</title>
<link href=”http://kelvinluck.com/assets/jquery/datePicker/styles.css” rel=”stylesheet” rev=”stylesheet”/>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/jquery.js”></script>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/dom_creator.js”></script>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/datePicker.js”></script>
<script type=”text/javascript”>
$.datePicker.setDateFormat(‘mm/dd/yyyy’);
$(function(){
// bind datePicker
$(“.jquery-datePicker”).datePicker();
});
</script>
</head>
<body>
<h1>Date Picker test</h1>
<form action=”#”>
<fieldset>
<legend><strong>Table Cell Test:</strong></legend>
<table>
<tr><td>From: <input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></td></tr>
<tr><td>To: <input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></td></tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><strong>Table Cell with inner DIV Test:</strong></legend>
<table>
<tr><td>From: <div style=”position:fixed;”><input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></div></td></tr>
<tr><td>To: <div><input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></div></td></tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><strong>Div Test:</strong></legend>
<div>From: <input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></div>
<br style=”clear:both;”>
<div>To: <input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></div>
</fieldset>
</form>
</body>
</html>

Trying to code above, you will see that when you click on the calendar icons, the pop-up calendar will not display in IE in the first two examples.
For some reason this didn’t sit right with me because I kept browsing the internet and found that the author of the plugin was following the solution into getting absolute position divs working in a table cell with IE. Basically this involves having a wrapper div with a position:relative around the div with the position:absolute (shown below).

<div style=”position:relative”><div style=”position:absolute”></div></div>

So since he was using this, I knew that there had to be something else I was missing and the internet was telling me. After jerking around I found the problem.

Turns out that in order to actually get this trick to work (WHICH NO ONE MENTIONS) in IE, any tables that are parents of the div need to have a the WIDTH defined. So using the code above, all I had to do is add a width:”100%” to the tables and the plugin worked.

After I found this out, I quickly canceled my posting to the JQuery discussion list. This will teach me to jump to conclusions and the rest of the world to document fully any work arounds or fixes they come up with.

JQuery Expressions: making life easy

Posted in Jquery by rip747 on November 2, 2006

The great thing about JQuery is the way it makes accessing elements of the DOM extremely easy. Keeping with that, JQuery has some really nifty expressions built into it that means it even easier. For instance:

You have a form and in that form you have a pair of radio button named “makechoice” with the value 1 and 0. Now you want to hide a section of the form if they choose 0 and show the section if they choose 1. We’ve all done this before, you have to loop through the radio button array collection, see which radio button was checked, get the value of the checked radio button, determined whether you should hide the region based on the value retrieved and finally toggle the visibility of the region. Not too hard 🙂

You could probably do that in about 30 lines of code and 15 minutes to spare. With JQuery you can do this in 1 line of code. This is made possible using the wonderful expressions that JQuery has built into it. For example, to do the old show / hide based on a radio button selection (for readability I put the code on 3 lines…. sue me):

$(“input[@name=’makechoice’]”).click(function(){
$(“input[@name=’makechoice’]:checked”).val() == 0 ? $(“#HideMe”).hide(‘slow’) : $(“#HideMe”).show(‘slow’);
});

The expression used to accomplish this is the “checked” expression. Basically all it does is limit the JQuery selection to the radio button that is checked. So now instead of looping over the radio button array to figure out which one was checked, I let JQuery do the work for me.

JQuery has many of these expressions built right into it. Some of the most often used ones are:

:visible – select the elements who display is set to visible

:hidden – select the elements who display is set to none

:enabled – select the elements that are enabled

:disabled – select the elements that are disabled

There are many more that I’m not going to get into. However if you want to explore them all, you can download the JQuery source and take a look.

Also in true JQuery fashion, here’s how you can add your own.