Help me with a social site using Wordpress

Last Updated on Friday, 20 March 2009 08:26 Written by webguyatwork Friday, 20 March 2009 08:26

I need your help. I have a new project that will include features of Wordpress that I’m not that familiar with and I need some ideas on what plugins you’ve used in the past to accomplish these types of things.  The site is being built for a Chicago-based group of individuals who just want to get together and have fun by posting topics to the site, and displaying information on upcoming events in the area.  The owner of the site would like to see the following sections:

Streaming Music

Music files, likely in MP3 format, will be loaded dynamically into a player on the site where the visitor can turn it on or off at will.  The idea is to give the visitor a taste of Soca music from the Trini community.

Social Events Calendar

The events calendar, preferably a page on the site that displays upcoming events in the area, will be the highlight of the site and the events need to be advertised throughout the site in order to gain interest in attending them.  Site admins can enter the events through the WP admin.  An option to register for the event is a nice-to-have, but not necessary.

Photo Gallery

An easy-to-use section to visitors to upload photos to a gallery that can be displayed to all visitors.  This requirement is somewhat vague right now, but I imagine that each user who wants to submit photos will have to have a registered account on the site, and upload the photos after they’ve logged in, making them instantly visible to anyone who comes to the site.

Contacts

I’m thinking this list might be a directory of individuals who have chosen to allow their profiles to be publically available, showing their contact information at various social media sites like Facebook, Twitter, MySpace, etc.  The Media Page plugin does a nice job of displaying the media links of the site owner, but doesn’t break it down into individual user profiles. Possibly an extension of the user profile would work nicely here.

Check out my progress on the site as I update it to match some of the suggestions that you will provide here.  Visit Croiseepeople.com.

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>

jQuery for Absolute Beginners

Last Updated on Wednesday, 7 January 2009 11:20 Written by webguyatwork Wednesday, 7 January 2009 11:20

As part of my new year’s resolution for improvement of my web knowledge, I’m planning to teach myself how to use jQuery to improve the handling of Javascript functions in my websites.  I’m really excited to learn how and when to use jQuery as I’ve heard lots of really neat things about how others are using it.  To be honest, I don’t have a particular use in mind just yet, but once I go through some training I’m sure I’ll think of something.

There are many tutorial sites out there, but I’ve decided that I will first go through the video training sessions on Themeforest.  I’ve already reviewed the first one in the series and I can tell that it’s going to be just my speed to get me going.  At least I was able to build the sample from the first video without having to go back and review it a second time.

Learn along with me and report in on your progress!  Let me know what you think of the videos in this series, and if you have other helpful links handy, feel free to share them with me.