Division Overlay Blog » javascript http://blog.divisionoverlay.net Wed, 13 Jan 2010 05:35:06 +0000 en hourly 1 http://wordpress.org/?v=3.0 Dynamic content plug-in http://blog.divisionoverlay.net/dynamic-content-plug-in http://blog.divisionoverlay.net/dynamic-content-plug-in#comments Thu, 07 Aug 2008 05:31:40 +0000 Tyler http://blog.divisionoverlay.net/?p=125

Today we are building a “plug-in” mainly for WordPress, but you we will show you how to use it on a regular site as well.

You will need to know a certain degree of how to make a website from scratch. It would be to your best advantage to know PHP, jQuery, CSS and XHTML to fully understand what is actually happening.

Things you will need to complete this plug-in:

The latest version of jQuery

You will need this file block.php (right-click / save-as)

The top graphic that.png

The content background this.png

Adding the scripts

First we must add the jquery script to the page

<script type=”text/javascript” src=”jquery-1.2.6.js”></script>

Now we must add the jquery that will take the elements and hide them, and give the function to show, hide and toggle

<script type=”text/javascript”>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$(‘#recent, #archiv’).hide();
// shows the slickbox on clicking the noted link
$(‘a#arc-s’).click(function() {
$(‘#archiv’).show(‘slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(‘a#arc-h’).click(function() {
$(‘#archiv’).hide(‘fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(‘a#arc’).click(function() {
$(‘#archiv’).slideToggle(700);
return false;
});
// shows the slickbox on clicking the noted link
$(‘a#rec-s’).click(function() {
$(‘#recent’).show(‘slow’);
return false;
});
// hides the slickbox on clicking the noted link
$(‘a#rec-h’).click(function() {
$(‘#recent’).hide(‘fast’);
return false;
});
// toggles the slickbox on clicking the noted link
$(‘a#rec’).click(function() {
$(‘#recent’).slideToggle(700);
return false;
});
});
</script>

Adding the links to show the content

This step is fairly simple, all we need to do is make a simple link, but give it a couple of unique attributes. Let’s also place the links inside a div so it can be easily styled.

<div id=”mini-nav”>
<a href=”#” id=”arc” onclick=”$(‘#recent’).slideUp(‘slow’);”>Topics</a>
<a href=”#” id=”rec” onclick=”$(‘#archiv’).slideUp(‘slow’);”>Recent Posts</a>
</div>

We added the id=”" which has the name of the link and the onclick=”" will hide the the div opposite of the one clicked.

Now lets add the block

The block, as i refer to it as, is the content that will be displayed when you click on one of the two links above. By now I hope you have downloaded block.php

<?php include(“block.php”); ?>

Further details on the Block

In the block file, I have it coded to Work on WordPress. This will not work on anything else but wordpress. So to change that, we need to open up the block.php file and edit a few parts.

Inside the div “archiv”

<?php wp_list_categories(‘show_count=1&title_li=’); ?>

Take out that, which will list all the categories in WordPress and add whatever text/code you wish.

Inside the div “recent”

<?php
global $post;
$myposts = get_posts(‘numberposts=5&offset=1&category=1′);
foreach($myposts as $post) :
?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>

Change that, which get your recent posts in WordPress, to whatever text/code you want.

Now to style it

Add this either to your stylesheet (.css), or to the local file between the <style> tags.

#mini-nav {
position: absolute;
top: 0px;
left: 45%;
width: 150px;
height:20px;
background: url(that.png);
}
.doit li{
display: inline;
padding-right: 10px;
}
#archiv, #recent {
margin-top: 35px;
margin-bottom: 10px;
padding-top: 6px;
width: 600px;
height: 54px;
background: url(this.png);
}

This will put the two links at the top of the page on top of the black button. And it will create the padding and margins for the rest of your content that you can add.

Wrapping up

So, this will create dynamic content on any site, and is a great little plug-in for WordPress. If you have any questions or comments, please leave them in the comment field below. I hope you enjoyed it.

]]> http://blog.divisionoverlay.net/dynamic-content-plug-in/feed 5