New Look at 4minds Blogs

Last Updated on Thursday, 5 February 2009 04:11 Written by webguyatwork Thursday, 5 February 2009 04:11

I’ve been testing out a new theme over the past week, converting all of my widgets as necessary to support the changes in the theme formats, and finally built up the courage to enable the new theme on the live website.  So, you’re looking at it.  It’s called “Illacrimo” and the link to download it can be found at the bottom of the site.

While I was working on the conversion, I noticed a couple of small bugs in my Twitter Visual Stats plugin, so I made those minor changes and the new version of the plugin is linked to the downloads page.  If you have previously downloaded the component, please grab a new copy for your blog.  If you haven’t tried it yet, take a look in my sidebar to see how it might look on your site.  As always, let me know if you run into any other bugs, or would like to suggest some improvements to the widget. Also, I could use someone’s assistance in publishing the download to the Wordpress site. I have the SVN account created, but have no clue how to upload my content off of my Windows workstation.

Test Your Wordpress Blog Offline

Last Updated on Thursday, 5 February 2009 01:56 Written by webguyatwork Monday, 2 February 2009 11:09

Are you testing a new Wordpress theme or plugin that you don’t want to release to the world until you’re completely ready?  Test your Wordpress blog offline by setting up a simple test site using actual content from your live blog site using the import and export features of Wordpress.

Setup

If you aren’t familiar with the process of setting up your own offline webserver with PHP and mySQL, you can check out some free resources on XAMPP, which according to the website:

“XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use – just download, extract and start.”

Find the XAMPP software at: http://www.apachefriends.org/en/xampp.html

Export Your Live Blog Posts

Your Wordpress blog (version 2.x) has a built-in feature that allows you to export your entire list of posts into an XML format that can then be read into another blog, which you will already have running offline.

On your live blog site:

• Open the Tools menu
• Click on “Export”
• Click the “Download Export File” button and save the XML file

Import Your Exported Blog Posts

Now, log into your offline site and import the file:

• Open the Tools menu
• Click on “Import”

You will see a list of options like the following (click to view full size):

To work with the above exported file, choose “Wordpress” from the list and continue below:

• Browse for the location of your exported file from the export steps above.
• You will have the option to download and import all of the linked images as well, which is a good thing to do ONLY if you have a small set of posts that you’re importing, otherwise this step could take quite a while to complete.

That’s it! Hopefully, you will now have a copy of your production blogs posts in a non-production blog site running on your local PC or laptop which you can then use to try out new code and themes without affecting the users who are currently on your site.  Happy Blogging!!!

JQuery: Resize DIV to Full Screen

Last Updated on Thursday, 29 January 2009 11:14 Written by webguyatwork Thursday, 29 January 2009 11:14

This post shows you how I resolved an “issue” where I wanted to take a component from my page and blow it up to full screen using JQuery.  Note: Full screen indicated the full browser window and not the actual screen.

The concept is simple, and I’ve represented the actual layout using the image below:

Building the Page Components

My project included an iFrame which contained contents from another website, so I’ll replicate that here by using an iFrame to load my twitter.com timeline (a simulation).  In my example below, I have wrapped the iFrame itself in a DIV with an ID of “container”, and added a button just inside of the DIV container to allow for the user to toggle between full screen and regular size.  The resulting code now looks like this:

<div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” align=”right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div>

The visual representation of what I’ve just done looks like this:

Next, Style the Container

The following styles will be applied to my container DIV.  The first class, named simply “container”, will be used to represent the DIV in its regular state while the second class, “container-fullscreen” will be used to represent the DIV when it is in full screen mode.  Again, full screen actually means the full size of the browser window and not the screen itself.

.container {
position: relative;
height: 500px;
width: 100%;
}

.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

Finally, Add the jQuery Code

The jQuery code now can be added, allowing the toggle button to do its job.  The code can be externalized into its own script file, which I strongly recommend in almost any situation, but for the purposes of this demo, I’ll add it inline.  The resulting jQuery code looks like this:

<script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});

</script>

Try it for yourself

Here is a complete view of a working html file that you can download and try for yourself.  I’ve swapped out the button image in favor of a standard input button in this example, but you can see how easy it is to use either and still have the same effect.

<html>
<body>

<script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
<style type=”text/css”>
.container {
position: relative;
left: 30px;
right: 30px;
height: 500px;
width: 80%;
}

.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style>

<script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});
</script>

<div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” style: “align: right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div>

</body>
</html>