My blog has moved
Please update your bookmarks and feeds for my site.
I now have a Mango Blog at:
http://www.andyjarrett.com/blog
Feed URL: http://feeds.feedburner.com/andyjarrett
Creating a new DOM element with jQuery
I've been using jQuery for a while now keep meaning to blog about the little bits I use often. One is creating a DIV object on the fly and loading content in to it.
$(document).ready(function(){
// Your URL of the page to be loaded
u = "/index.cfm?event=contactme";
// We're creating a div element to load the URL contents into
div = $("<div>");
// When the element is displayed at first we could leave it blank
// or a loading image, or in this case the wording loading......
div.html("Loading......");
// We now load our file and inject it into the DOM.
div.load(u);
// With the DIV getting its content we need to put the DOM on the page
// and in to the body. $.prepend will put our content at the top of
// of the <body>
$("body").prepend(div);
})
Instead of having "Loading...." being displayed you can delay showing the content of the DIV until loading is completed.
// Your URL of the page to be loaded
u = "/index.cfm?event=contactme";
// We're creating a div element to load the URL contents into
div = $("<div>");
// We now load our file and inject it into the DOM.
div.load(u);
// By default we're going to hide the DIV until the content is loaded
div.hide();
// Before the DIV gets its content we need to put the DOM on the page
// and in to the body. $.prepend will put our content at the top of
// of the <body>. But this will be hid.
$("body").prepend(div);
// Now we load the content into the DOM and as a CALLBACK function
// we SLIDEDOWN the div. This could be FADEIN or something else.
div.load(u, {limit: 25}, function(){
div.slideDown();
});
Both sets of code will load on document ready. Usually I tie this kind of process to a click event to load in a page dynamically when needed.
Also don't forget you can chain these methods too and cut down on code. Taking the first example it could be written as:
u = "/index.cfm?event=hermes.contactSeller";
div = $("<div>").html("Loading......").load(u);
$("body").prepend(div);
jQuery FAQ Expand/contract
I've seen some code out there for this, but I've not managed to Google anything I like. My version uses HTML's Definition Lists. <DL>, <DT> and <DD>. Click on one of the questions below to see it in action.
N.B. Thanks to Peter Boughton's comment. Though I try using next() and it wasn't working for me, hence the ID hack I did have. Anyway, thanks Pete.
- Question 1
- FAQ Answer 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 2
- FAQ Answer 2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 3
- FAQ Answer 3: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 4
- FAQ Answer 4: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
- Question 5
- FAQ Answer 5: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.
Here's the code. I've put remarks in the comments on how it works
<script src="/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("dt").click(function () {
$('dd:visible').slideUp('fast');
$(this).next('dd').slideDown('fast');
});
});
</script>
<style>
/* Hide all DD's at the start*/
dd{display:none;}
</style>
<!-- Some FAQ Questions -->
<cfoutput>
<dl>
<cfloop from="1" to="5" index="i">
<dt class="q#i#">Question #i#</dt>
<dd id="q#i#">FAQ Answer #i#: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam malesuada urna non ipsum. Integer quis pede. Nulla tincidunt. Sed venenatis semper justo.</dd>
</cfloop>
</dl>
</cfoutput>
jQuery, it really is simple
I've started playing around with jQuery along with the rest of the world it seems and all I can say is WOW. Working with it has been straight forwards and simple.
There's a couple of things out of the box that I like about it, but mainly the fact it comes as one .js file so doesn't matter what affect you want its there. In regards to it's simplness here some quick examples to get going:
Feed
Twitter
Recent tunes