A blog about my findings in IT, progamming, design, art, surfing and anything else that makes the world go 'round!

I recently found myself needing to design a vertical menu that makes uses of the CSS :hover selector.
In this particular case I also wanted the last item that was in a hover state to stay in that state. In other words: if I was half way down the menu with my mouse then moved it away, I wanted that item to stay changed until the mouse was returned to perhaps another item in the menu.

What I ended up with was a mix of CSS and Javascript (but mostly Javascript). Please note that I’m no Javascript expert, so there may very well be a better way to do this. Having said that, I’ve successfully tested this in IE8, Firefox 4 beta, Safari 5.

Edit: I’m aware that this could be done quite easily with jQuery but I wanted to have a go at doing it without using the library.

The Javascript placed between the head tags

<script type="text/javascript">
	function trig(elid) {
		//Change the bg image for element with the current mouseover
		document.getElementById(elid).style.background = 'url(images/click.png) center left no-repeat';

		//List of all the element ids (Perhaps this can be generated dynamically?)
		var names = ["bb", "trc", "mb", "ch"];

		//Need this because indexOf is incompatible with IE8
		if (!Array.prototype.indexOf) {
			Array.prototype.indexOf = function(obj, start) {
			     for (var i = (start || 0), j = this.length; i < j; i++) {
			         if (this[i] == obj) { return i; }
			     }
			     return -1;
			}
		}

		//Find the index of the element currently triggered by the mouseover
		var idx = names.indexOf(elid);

		//Remove the element from the array
		if(idx!=-1) names.splice(idx, 1); 

		//For each element still left in the array make sure it's got the default background
		for (i=0;i<names.length;i++)
		{
			document.getElementById(names[i]).style.background = 'url(images/dot.png) center left no-repeat';
		}
	}
</script>

The HTML

<div id="locations_menu">
	<ul>
		<li class="first" id="bb"><a href="#" onmouseover="trig('bb')">MENU ITEM 1</a></li>
		<li id="trc"><a href="#" onmouseover="trig('trc')">MENU ITEM 2</a></li>
		<li id="mb"><a href="#" onmouseover="trig('mb')">MENU ITEM 3</a></li>
		<li id="ch"><a href="#" onmouseover="trig('ch')">MENU ITEM 4</a></li>
	</ul>
</div>

The end result with a bit of styling

CSS and Javascript hover with a memory

The live version
CSS and Javascript hover with a memory

In some of my code I need to use mysqli_fetch_assoc on the same result set more then once.

However the second time I fetch the associative array it returns 0 rows. Turns out this is because each time you use mysqli_fetch_assoc it moves the result pointer. You therefore have to reset the pointer.

Here’s an example:
This code will loop through the entire result set and the result pointer will be left pointing at the end

while($row = mysqli_fetch_assoc($result)) $this->grand_total += $row['total'];

To reset the pointer:

mysqli_data_seek($result,0); //Reset the result pointer

I’m currently programming the update part of a simple CRUD user interface. This form loads up data relating to a product we’ve previously entered and lets you update its attributes. One of the fields required a dropdown box with a selection of available options with the current selected options being the first default selection.

While I know this isn’t rocket surgery, I took sometime to code it as efficiently as I could using a shorthand if/else statement embedded in the echo.

The final code

//$product_locations is 2d array pulled from the database, each row has two associations: id and title
//$product is another array pulled from the database that contains current attribute settings for the product

<select name="product[location_id]">
	<?php
	foreach($product_locations as $product_location) :
		echo "<option value=\"".$product_location['id']."\" ".($product_location['id'] == $product['product_location'] ? "selected=\"yes\"" : "").">".$product_location['title']."</option>";
	endforeach;
	?>
</select>

Here is the embedded shorthand conditional statement pulled out of the final code

<?php
.($product_location['id'] == $product['product_location'] ? "selected=\"yes\"" : "").
?>

This could possibly be done more efficiently so if you have idea or comments, please share!

Reference
PHP Shorthand If / Else Example

I recently had to purge about 100’000 photos from a Photostore site and doing it using the manager control panel is very time consuming. I developed a little plugin that will delete all photos not associated to a category and clean up DB entries. Worked great for me but use at your own risk.

<?php

/********************************************************/
/*   Photostore mass photo purge                        */
/*   Author: Trevor Wistaff                             */
/*   Site: http:/www.madproject.com						*/
/*	 Email: easycoatgmaildotcom							*/
/*   Date: 17.11.2010                                   */
/*													    */
/* This little chunk of code was developed out of       */
/* necessity. I needed to purge large amounts of        */
/* photos and I had no quick way of doing it.           */
/*													    */
/* How to use: Delete the categories containing the     */
/* photos you wish to purge. Manager->Categories.       */
/* The photos will then be listed in the Batch Edit		*/
/* section of the manager control panel. Upload this	*/
/* file in the manager folder of your photostore then 	*/
/* run it directly from you browser:					*/
/* http://www.yoursite.com/photostore/manager/purge.php */
/*                                                      */
/* Legal mumbo jumbo: Use this tool at your own risk.   */
/* I've only tested it on my own site and can't say how */
/* it might work on a different server and version.     */
/* 														*/
/* This plugin was developed for:						*/
/* Ktools.net PhotoStore Version 3.8.3					*/
/*														*/
/* Thanks and stay classy 								*/
/********************************************************/

// SETTINGS
// DATABASE
define('DBHOST','localhost'); //HOST
define('DBUSER','user'); //USER
define('DBPASS','password'); //PASSWORD
define('DBNAME','database_name'); //NAME

// IMAGE PATH
define('IMAGE_PATH','../stock_photos/');  //SHOULDN'T NEED TO BE CHANGED

// CONNECTION
$link = mysqli_connect(DBHOST, DBUSER, DBPASS);

if (!$link) {
	echo 'Unable to connect to the database server.';
	exit();
}
if (!mysqli_set_charset($link, 'utf8')) {
	echo 'Unable to set database connection encoding.';
	exit();
}

if (!mysqli_select_db($link, DBNAME)) {
	echo 'Unable to locate the ' . DBNAME . ' database.';
	exit();
}

// START PURGE

// SELECT ALL CATEGORIES NOT ASSIGNED TO CAT
$result_1 = mysqli_query($link, "SELECT id FROM photo_package WHERE gallery_id = ''");
if (!$result_1) {
	echo mysqli_error($link);
	exit();
}

while($photo_package = mysqli_fetch_assoc($result_1)) {

	// SELECT PHOTO MATCHING PHOTO_PACKAGE.ID == UPLOADED_IMAGES.REFERENCE_ID
	$result_2 = mysqli_query($link, "SELECT id, filename FROM uploaded_images WHERE reference_id = '{$photo_package['id']}'");
	if (!$result_2) {
		echo mysqli_error($link);
		exit();
	}

	while($uploaded_images = mysqli_fetch_assoc($result_2)) {

		// ECHO IMAGE DETAILS
		echo IMAGE_PATH . $uploaded_images['filename'] . "<br />";
		echo IMAGE_PATH . "PhotoID: " . $uploaded_images['id'] . " - PackageID: " . $photo_package['id'] . "<br />";

		//DELETE PHYSICAL PHOTOS
		if(file_exists(IMAGE_PATH . $uploaded_images['filename'])){
			if(unlink(IMAGE_PATH . $uploaded_images['filename'])) {
				echo "<div style=\"color: #00cc33\">image deleted successfully</div>";
			} else {
				echo "<div style=\"color: #ff0000\">image deleted unsuccessfully</div>";
			}
		}
		if(file_exists(IMAGE_PATH . "i_" . $uploaded_images['filename'])){
			if(unlink(IMAGE_PATH . "i_" . $uploaded_images['filename'])) {
				echo "<div style=\"color: #00cc33\">i_ image deleted successfully</div>";
			} else {
				echo "<div style=\"color: #ff0000\">i_ image deleted unsuccessfully</div>";
			}
		}
		if(file_exists(IMAGE_PATH . "s_" . $uploaded_images['filename'])){
			if(unlink(IMAGE_PATH . "s_" . $uploaded_images['filename'])) {
				echo "<div style=\"color: #00cc33\">s_ image deleted successfully</div>";
			} else {
				echo "<div style=\"color: #ff0000\">s_ image deleted unsuccessfully</div>";
			}
		}
		if(file_exists(IMAGE_PATH . "m_" . $uploaded_images['filename'])){
			if(unlink(IMAGE_PATH . "m_" . $uploaded_images['filename'])) {
				echo "<div style=\"color: #00cc33\">m_ image deleted successfully</div>";
			} else {
				echo "<div style=\"color: #ff0000\">m_ image deleted unsuccessfully</div>";
			}
		}

		//DELETE DATABASE ENTRIES
		$result_3 = mysqli_query($link, "DELETE FROM uploaded_images WHERE id = '{$uploaded_images['id']}'");
		if(!$result_3) {
			echo "<div style=\"color: #ff0000\">" . mysqli_error($link) . "</div>";
			exit();
		} else {
			echo "<div style=\"color: #00cc33\">image delete successfully from uploaded_images table</div>";
		}
		$result_4 = mysqli_query($link, "DELETE FROM photo_package WHERE id = '{$photo_package['id']}'");
		if(!$result_4) {
			echo "<div style=\"color: #ff0000\">" . mysqli_error($link) . "</div><br />";
			exit();
		} else {
			echo "<div style=\"color: #00cc33\">image delete successfully from photo_package table</div><br />";
		}
	}
}

?>