Archive for November 28, 2011

SleePy | November 28, 2011
No comments

jQuery getting value of select with mulitple values

I have been dipping into learning jQuery. Very powerful and useful. But as I am just learning it, I am taking a learning curve to figure it out. Today I came across the need to get the values of a select that had multiple values. I needed to take the name attribute from the option as it contained a filename that I was going to use to display the image. Further more I wanted to separate those images based on their dimensions.

After some thankless google searches, I came up with code that accomplishes this task easily.

jQuery(function(){
	$('#banners').change(function(){
		$('#images_preview_loader').empty();
		$('#images_preview_box').empty();
		$('#images_preview_tower').empty();

		$('#banners :selected').each(function(i, selected){
			id = $(selected).attr('value');
			filename = $(selected).attr('name');
			$('#images_preview_loader').append("<img id='bp_" + id + "' src='/images/banners/" + filename + "'/>");

			height = document.getElementById('bp_' + id).height;
			width = document.getElementById('bp_' + id).width;

			if (width < height)
			{
				$('#images_preview_tower').append("<img id='bp_" + id + "' src='/images/banners/" + filename + "'/>");
			}
			else
			{
				$('#images_preview_box').append("<img id='bp_" + id + "' src='/images/banners/" + filename + "'/>");
			}
		});
		$('#images_preview_loader').empty();
	});
});

As for the HTML, I have my select box with multiple=”multiple” in it. Each option has a value attribute that I use for the database and a name attribute containing the filename. They also contain the friendly name. I then have 3 divs setup like so:

<div id="images_preview_loader" style="display: none;"></div><br /><div id="images_preview_box"></div><br /><div id="images_preview_tower"></div>

The loader lets me simply get the image loading, once it has the height and width of the image it moves it to the correct box. I keep the loader div hidden so there is no moving around showing as it does its work. Does the job for what I need it to do. Which is a simple previewer of the images being selected. I need the bigger ones to be separate as these are usually tower based images and would make a ugly looking layout otherwise.

Tags: ,
SleePy | November 20, 2011
No comments

WordPress templates on non wordpress pages

I have a couple pages such as my password generate that are non wordpress templates. However I want these to be styled as if they where from my wordpress. So after some google searches, I came up with very little information. I decided to dive into the code and came up with something that works for what I need it to do and requires little code edits to any of my pages to work.

This does also require a template edit to your wordpress templates. Sadly I couldn’t avoid this, I looked around and tried to see if I could modify the_content(), however it doesn’t look very pleasant to do so. I might in the future look into doing this. If somebody has a better solution that requires no wordpress template edits, please let me know. Back on topic, I modified page.php in my template and changed:

					< ?php the_content(); ?>

To this line:

					< ?php if (isset($specialPageContent)) echo $specialPageContent; else the_content(); ?>

Next I will just dump a file I named wp-ssi.php and explain how it works at the end.

< ?php
// Change the default template to use.
define('WP_SSI_DEFAULT_TEMPLATE', 'page');

// Register a shutdown function (DOES THE ACTUAL WORK!)
register_shutdown_function('do_wp_ssi_wrap');

// Don't output anything yet.
ob_start();

// Get WordPress going.
require_once('./wp-blog-header.php');

// The shutdown function that does the actual work.
function do_wp_ssi_wrap()
{
	global $specialPageContent;

	// Simply get all contents.
	$specialPageContent = ob_get_clean();

	// Allow some over rides.
	$theme = defined('WP_SSI_THEME') ? WP_SSI_THEME : get_template_directory();
	$template = defined('WP_SSI_TEMPLATE') ? WP_SSI_TEMPLATE : WP_SSI_DEFAULT_TEMPLATE;

	// Pass it on as if it was a page.
	require($theme . '/' . $template . '.php');
}

Now for all my files I add at the very top. Of course, you need to substitute the path to match yours.

require('/path/to/wordpress/wp-ssi.php');

As for wp-ssi.php, I will can explain more about how that works.
Read more

Tags: , , ,
SleePy | November 20, 2011
No comments

New theme

It was time for a new theme. So here it is. A bit modified from the original version I downloaded. Including some css edits and the ability to fully work with mobile devices (I only have a andriod to test though).

Interesting note on the mobile features though, both Android and iOS have a issue where they can’t use the css overflow. iOS at least lets you scroll the content, but none of them will show a scroll bar of some sort.

Tags:
 
Highslide for Wordpress Plugin