Dave’s Jquery rewrite
October 19, 2006
I can’t resist. Dave Shuck just did a cool blog post use the DOM to insert or remove content. Once I saw this, I just couldn’t resist rewriting his code in JQuery!
<html>
<head>
<title>js stuff</title>
<script type=”text/javascript” src=”http://jquery.com/src/jquery-latest.pack.js”></script>
<script type=”text/javascript”>
$(function(){
// say hello
$(‘a.sayhello’).click(function(){
$(“#DisplayContainer”).html($(“#divHelloWorld”).html());
});
// smile
$(‘a.smile’).click(function(){
$(“#DisplayContainer”).html($(“#divCassidy”).html());
});
// closeme
$(‘a.closeme’).click(function(){
$(“#DisplayContainer”).html($(“#divCloseMe”).html());
});
});
</script>
<style type=”text/css”>
.link{padding: 20px;float: left;}
.contentdiv{border: 1px dashed #cccccc;padding: 20px; clear: both;}
</style>
</head>
<body>
<div id=”HoldingContainer” style=”display:none;”>
<div id=”divHelloWorld”>Hello World</div>
<div id=”divCassidy”>
<div>Here is a picture:</div>
<div><img src=”http://www.instantspot.com/userfiles/073006/91/100_7776.JPG”></div>
</div>
<div id=”divCloseMe”>
<input value=”bye!” type=”button” onclick=”wwwClearElement(document.getElementById(‘DisplayContainer’))”>
<div>(kills this div until page refresh rather than putting back into the holding div)</div>
</div>
</div>
<div class=”link”><a class=”sayhello” href=”javascript:void(0);”>Say Hello</a></div>
<div class=”link”><a class=”smile” href=”javascript:void(0);”>Smile</a></div>
<div class=”link”><a class=”closeme” href=”javascript:void(0);”>Self-loathing Div</a></div>
<div class=”contentdiv”>
Here is where we will show our dynamic content:
<div id=”DisplayContainer”></div>
</div>
</body>
</html>
October 19, 2006 at 3:35 pm
OK, that is just too cool! I was just looking through the 1st issue of the JQuery mag this morning and commenting that I want to hop on that bandwagon. Thanks for the nudge!
ps. Can I assume that you could have done the same thing with the input button in the 3rd div that you did with the (‘a’) tags?
~Dave
October 19, 2006 at 6:15 pm
@Dave
Oh yes. That’s the beauty and the ease of JQuery. You can do almost anything to any element or collection of elements in the DOM. Also the language is chainable which makes it really easy to some monsterous thing.
I’m on such a kick with this language. I’ll probably be blogging more about JQuery in the coming posts then CF.
October 19, 2006 at 7:43 pm
Great… I will stay tuned and take notes.