Rip's Domain

Dave’s Jquery rewrite

Posted in Jquery by rip747 on 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&gt;
<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&gt;
</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>

3 Responses

Subscribe to comments with RSS.

  1. Dave Shuck said, on 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

  2. rip747 said, on 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.

  3. Dave Shuck said, on October 19, 2006 at 7:43 pm

    Great… I will stay tuned and take notes.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: