Saturday, August 15, 2009

Red Alert!

Here's a tidbit we used in the jQuery and ColdFusion class. You can write your own functions to replace JavaScript functions. The example for this involved writing an alert() function that displays error messages in a nice jQuery-created popup div instead of the ugly old JavaScript alert box. When applied, alerts (including those thrown by ColdFusion-generated validation JavaScript) look like this:


Of course, you can style the message any way you like--it's just in the CSS. As with all class examples, this is intended as a launching point for your exploration, rather than a finished tool ready for production. Here's the code; we'll go through line by line tomorrow.

<html>
<head>
<title>Javascript Alert Test</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<style type="text/css">
#msgDiv {
height: auto;
width: 200px;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
background-color: #FFAAAA;
border: 1px solid red;
position: absolute;
top: 60px;
left: 50%;
margin-left: -100px;
}
#msgHeader {
background-color: red;
color: white;
font-weight: bold;
}
#msgText {
padding: 5px;
}
</style>
</head>
<body onLoad="alert('Hah!');">
<h2>CFFORM with Custom Alert</h2>
<cfform name="myForm" action="" method="post">
Full Name: <cfinput type="text" name="fullName" id="fullName" required="Yes" message="Enter your full name." /><br />
Email: <cfinput type="text" name="email" id="email" validate="email" required="yes" message="Enter your valid email address." /><br />
<cfinput type="submit" name="btnRegister" value="register" />
</cfform>
<script type="text/javascript">
function alert(msg){
if(title == undefined){
title = 'foo';
}
msgText = '';
if (msg.typeOf = "Array"){
for (i=0; i<msg.length;i++){
if (msg[i] == String.fromCharCode(10)){
msgText += '<br />';
} else {
msgText += msg[i];
}
}
} else {
msgText = msg;
}
alertHTML = '<div id="msgDiv"><div id="msgHeader">Error:</div><div id="msgText"</div></div>';
$("body").append(alertHTML);
$("#msgDiv").hide().fadeIn();
$('#msgText').html(msgText + '<br /><input type="button" value="OK">')
$('#msgDiv').click(function(){
$(this).remove();
});
}
</script>
</body>
</html>

Tuesday, August 11, 2009

A Good Time Was Had By All--

Today was the "jQuery and ColdFusion" class I taught as part of the offerings for CFUnited '09. I have to say the class was a great success, mostly because of the great bunch of students we had. Everyone who was there came with great curiosity and readiness to participate and discuss, so the day really flew by.

So my little post today is just a few sites we included in bookmarks for the class--from the jQuery site itself to some other nifty places to visit if you're jQuery-minded. I hope you get something out of them.

Have fun!

Friday, August 7, 2009

Class Prep Weekend

Not a whole lot going on today. I'm mostly spending time getting ready for the class I'm teaching on Tuesday: "jQuery and ColdFusion". Just a few last-minute things to wrap up before it's "show time". I think I'll take the weekend off from blogging, so Monday we'll meet again.

Have fun!

Thursday, August 6, 2009

Tooltips for Links Deconstructed

Yesterday's post introduced a way to add tooltips to links. Now let's go over the code and see how everything works. First, the HTML. It's very basic--just an unordered list and a couple of paragraphs of text, one of which has a link within its text. But we'll go through it just to make sure everyone's on board.

First off, the usual HTML and HEAD elements:

<html>
<head>


Then we have the lines that make jQuery, a jQuery plugin for drop shadows, the JavaScript file for this page, and the CSS file for this page available:

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.dropshadow.js"></script>
<script type="text/javascript" src="jqTooltips.js"></script>
<link type="text/css" rel="stylesheet" href="jqTooltips.css" />


And we close the head and the body:

</head>
<body>


Now an H1 element with the page's title:

<h1>jQuery Tooltips for Links</h1>


And a paragraph to describe what we're doing:

<p>This page shows how some simple jQuery code can set up popup tool tips for links. The premise is that this page will be used by web neophytes who might need some help to understand how everything works. So let's have a few links:</p>


Now we set up an unordered list that has a link in each list item:

<ul>
<li><a id="lnkProtonArts" href="http://www.protonarts.com">Proton Arts</a></li>
<li><a id="lnkThejQueryWebsite" href="http://www.jquery.com">The jQuery Website</a></li>
</ul>


Notice that there's nothing extra going on in the link tags--they're just plain old links. I have set and id attribute in each one, just to make them easier to identify. More on this when we get to the JavaScript file.

Next, just another paragraph with another link inside it. This is included just to show that any A tag added to the page will automatically get the same treatment. Try it--add your own links to the HTML and see what happens:

<p>Of course, if we just insert a stealthier link to <a href="http://www.youtube.com">YouTube</a> within some paragraph text, jQuery picks up on that one, too.</p>


And finally, the closing tags for the BODY and HTML:

</body>
</html>


Now let's get to the CSS, since it's not very inspiring... It's in the jqTooltips.css file.

We use the BODY element to set up the font family for the entire page.
body{
font-family: Verdana, Helvetica, sans-serif;
}


Then we use the tooltip class to style our little tips. Notice there is no width or positioning information--it's created in the HTML by the JavaScript code.

.tooltip{
padding: 5px 0px 0px 5px;
background-color: yellow;
height: 25px;
font-size: 75%;
font-weight: bold;
text-align: center;
border: 1px solid black;
}


Now for the real fun: the JavaScript. It's in the jqTooltips.js file. The first thing we do is build a couple of functions: one to create a tooltip and one to destroy a tooltip. I've added comments to the code to explain it:

function makeATooltip(atag){ //The function call includes the variable atag, which is a jQuery return set containing an A tag.
tipTop = atag.offset().top - 20; //We calculate the top position of the tool tip by adding 20 to the top of the A tag.
tipTop += "px"; //Now we append "px;" to the end of the tipTop variable.
tipLeft = atag.offset().left + 30; //We use the same technique to calculate the left position for the tooltip.
tipLeft += "px";
tipText = "Click on this link to visit ";
tipText += atag.text(); //The text that appears in the tooltip includes the text from inside the A tag.
tipText += ".";
tipWidth = tipText.length * 7 + "px"; //We use the length of the tip's text to calculate the width of the tooltip.
tipHTML = "<div class='tooltip' id='"; //And now we can build the HTML that describes the tooltip.
tipHTML += atag.attr("id"); //We use the A tag's id attribute to assign an ID to its tooltip.
tipHTML += "Tip' ";
tipHTML += "style='{position: absolute;; "; //The tooltip's position is specified on the fly.
tipHTML += "top: " + tipTop + ";; ";
tipHTML += "left: " + tipLeft + ";; ";
tipHTML += "width: " + tipWidth;
tipHTML += "}'>"
tipHTML += tipText
tipHTML += "</div>"
atag.after(tipHTML); //The HTML is injected as a new element after the A tag.
$("#" + atag.attr("id") + "Tip").dropShadow(); //And we use jQuery to add a pretty drop shadow.
}

function destroyTooltip(linkID){ //The function call includes the variable linkID, which is a string.
$("#" + linkID + "Tip").removeShadow().remove(); //We use jQuery to remove the shadow first, then remove the tooltip.
}

$(document).ready(function(){ //The ready method of the document element specifies a function to run after page load.
$("a").hover(function(){ //The hover method is assigned to all A elements. It has two arguments:
makeATooltip($(this)); // the first is called on mouseover
}, function(){
destroyTooltip($(this).attr("id")); // the second is called on mouseout
});
})

That's all there is to it. As usual, we can do quite a bit with just a little bit of jQuery-based code. The important points to take away from this exercise are: 1. You can use jQuery to extract information from page elements and customize added elements, like we did with the text in each tooltip; 2. Positioning of elements relative to existing elements is simple with jQuery; and 3. Plugins such as Dropshadow make it extremely easy to add professional polish to your jQuery-based applications.

Have fun!

Wednesday, August 5, 2009

Tooltips for Links

Today's tinkertoy explores how jQuery can provide enhanced interface experiences with very little code. It adds a popup tooltip to every link (<a> tag) on the page.
Now, there are plenty of jQuery plugins for doing tooltips. Please don't think my little effort is presented as a production-ready alternative to them; it's not. It's just a way to get you thinking about how jQuery can do very cool stuff for your users without causing you to write a ton of code.
That said, here's a screen shot of today's experiment in action:

Here's the code, as HTML, JavaScript, and CSS. Tomorrow we'll step through it.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.dropshadow.js"></script>
<script type="text/javascript" src="jqTooltips.js"></script>
<link type="text/css" rel="stylesheet" href="jqTooltips.css">
</head>
<body>
<h1>jQuery Tooltips for Links</h1>
<p>This page shows how some simple jQuery code can set up popup tool tips for links. The premise is that this page will be used by web neophytes who might need some help to understand how everything works. So let's have a few links:

<ul>
<li><a id="lnkProtonArts" href="http://www.protonarts.com">Proton Arts</a></li>
<li><a id="lnkThejQueryWebsite" href="http://www.jquery.com">The jQuery Website</a></li>
</ul>

<p>Of course, if we just insert a stealthier link to <a href="http://www.youtube.com">YouTube</a> within some paragraph text, jQuery picks up on that one, too.</p>
</body>
</html>

JavaScript:


function makeATooltip(atag){
tipTop = atag.offset().top - 20;
tipTop += "px";
tipLeft = atag.offset().left + 30;
tipLeft += "px";
tipText = "Click on this link to visit " + atag.text() + ".";
tipWidth = tipText.length * 7 + "px";
tipHTML = "<div class='tooltip' id='";
tipHTML += atag.attr("id");
tipHTML += "Tip' ";
tipHTML += "style='{position: absolute;; ";
tipHTML += "top: " + tipTop + ";; ";
tipHTML += "left: " + tipLeft + ";; ";
tipHTML += "width: " + tipWidth;
tipHTML += "}'>"
tipHTML += tipText
tipHTML += "</div>"
atag.after(tipHTML);
$("#" + atag.attr("id") + "Tip").dropShadow();
}

function destroyTooltip(linkID){
$("#" + linkID + "Tip").removeShadow().remove();
}

$(document).ready(function(){
$("a").hover(function(){
makeATooltip($(this));
}, function(){
destroyTooltip($(this).attr("id"));
});
})


CSS:

body{
font-family: Verdana, Helvetica, sans-serif;
}

.tooltip{
padding: 5px 0px 0px 5px;
background-color: yellow;
height: 25px;
font-family: Verdana, Helvetica, sans-serif;
font-size: 75%;
font-weight: bold;
text-align: center;
border: 1px solid black;
}

See you tomorrow!

Tuesday, August 4, 2009

Back (I Hope) on a More Regular Basis

To update, here's what's been happening in Jeffworld: So far this year, my wife and I have bought a new house, moved out of our old house, moved into the new house, helped her parents move out of their house and get it sold, renovated our old house, and now sold it as well. All while doing the usual work, teaching, conference prep, and helping my daughter with an Algebra II online class.

Fortunately, all that's behind us now (OK, one more week of algebra, but hey...), so I'm trying to refocus on things that I'd like to keep up with. That said, blogging is one of them.

I've tried to be a daily blogger in the past, and I never seem to do very well. So I'm going to try a different approach here on jQNaB. Instead of cooking up a big example for every post, I'm going to see if I can just post a little something every day. Nothing big--at least not every day--but something regularly. Hopefully that will help keep things a bit more lively around here, and you won't be nearly as bored with me.

So, on we go. For today's jQuery-related stuff, just a reminder that I'm going to be teaching that class next week, the day before the CFUnited conference begins (a week from today, in fact). I'm really looking forward to it, and may use some of my class examples for future posts here. If you're interested, I think there might still be room. Go over to www.CFUnited.com and look under "Classes".

And for tomorrow: a little piece of jQuery to make instant tool tips out of links. That should be fun and not too complex.