Continue reading »]]> We all love the look and feel of vignettes on websites, however short of using CSS3 to display them as a background image, we are stuck using “hackish” CSS2 styling to achieve a 100% width vignette. Since my customers usually demand cross browser compatibility, I have developed a CSS2 compliant way of achieving a 100% width vignette. To do this, you’ll need to break up your vignette into 3 images. The left, middle, and right.

Left Vignette

Middle Vignette

Right Vignette

Once you have your vignette properly broken up, time to insert your vignette into your CSS.

body {
     background: url('images/bg/Header_Left.gif') no-repeat 0 0, 
	         url('images/bg/Header_Right.gif') no-repeat 100% 0,
	         url('images/bg/Header_Middle.gif') repeat-x 30% 0;
}

Your website should have a vignette similar to this:

This is only required if utilizing multiple background images. If your vignette is the only background image you need, simply use CSS: body { background: url(‘my-vignette.gif’) no-repeat; }

Tested on Internet Explorer 9+, Firefox 5+, Chrome 12+, Safari 5+
For IE8 and lower, sorry folks your stuck only using the “hackish” absolute/relative positioned <img /> tags.

Comments/questions please reply.

Continue reading »]]> I recently was in need of replacing URLs to SEO friendly ones, the only hiccup was I wanted to maintain the PHP $_GET params in the source code. As this is tried and true, and mod_rewrite can have its hiccups now and then. So after some research I found a solution that fit me perfectly. Using PHP’s output buffer I can utilize a callback function and a few preg_replace() functions to achieve all the necessary rewrites. And if for some reason I do not want to have rewrites enabled, I can comment out the callback and all my PHP URLs are back in place with no need for code editing. Here’s my example.

<?php
 
// initialize output buffer to compress page.
// note: I recommend using 'ob_gzhandler' for pages >5kb. Any smaller its not worth it.
ob_start('ob_gzhandler');
 
// call the rewrite function.
HandleRewrite();
 
// do your page stuff...
echo '<a href="index.php?subpage=MYPAGE">Hello World!</a>';
 
// handle the URL rewriting
function HandleRewrite()
{
	// rewrite URLS from output buffer
	// note: it is IMPERATIVE this function is ABOVE the ob_start('rewrite') callback.
	function rewrite($buffer)
	{
		// this preg_replace changes "mysite.com/index.php?subpage=TEST to mysite.com/TEST
		$buffer = preg_replace('/index.php\?subpage=(\w)/is', "$1", $buffer);
		return $buffer;
	}
 
	// start the output buffer for rewriting ('rewrite' being the callback function)
	ob_start('rewrite');
}
 
?>

Utilizing this method makes it so your entire page can be re-written to any mod_rewrite (or whatever SEO utility you use) without search/replace of every link in your code.

As always, if you have any questions or comments, please reply.

Continue reading »]]> Tired of the fluid-less jumps when going to a URL with a #hashtag? You can replace this using jQuery’s .scrollTo() method in the document.ready of your javascript. Here’s an example:

$(document).ready(function() {
	if(window.location.hash)
	{
		$('html, body').animate({
			scrollTop: $(window.location.hash).offset().top
		}, 1000);
	}
});

Now on page load this will fluidly scroll to the DOM element you’ve requested. I have not added error handling if say, the hashtag does not exist in the DOM, but you get the general idea.

Continue reading »]]> I found myself in the position of needing jQuery UI’s tabs plugin to have the option of being renamed while still maintaining the tab. I came up with this function to easily rename a tab by passing the tab’s id selector and desired value.

function renameTab(selector, value)
{
	$('a[href="' + selector + '"').text(value);
}

Keep in mind you should be using jQuery UI’s example of adding tabs template

<div id="tabs">
	<ul>
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
	</ul>
</div>

This will work even if you are calling the href to load remote content via AJAX since the tabs use a unique identifier for those (i.e. #ui-tabs-1, #ui-tabs-2, etc.).

Simply rename “Tab 1″ to “Tab 1337″

renameTab("#tab-1", "Tab 1337");

Any questions/insight feel free to reply.

Continue reading »]]> Want to move rows with a click of a link and not have to worry about text boxes with position ID’s in them? Use this script/query to achieve this. Basically the idea is to have in your items table where it contains all the records you potentially want to move. In that table add a column named “position” with a unique integer for each new item you insert (do this by using a MAX(position) query when inserting the new item. It is imperative you have this unique integer or your results will not be fluid. Once that’s done copy and paste the following code to your website, filling in the proper variables indicated in the code. My method takes the previous (or next) record found from the current record (depending on whether you want to move it up/down, and swaps the position columns with each other. Then all you need to do for your table listing is “ORDER BY position” to have your items neatly sorted based on user or administrative preference.

// Variables -- Fill these out from the results of your page. (i.e. what item id to move up or down)
$id_item = 1;	// ID of item you want to move up/down
$isUp = true;	// Change to false if you want to move item down
 
// MySQL structure -- Fill these out to execute your queries without needing to update my code
$table_name = "tbl_items";	// Name of table with your items in it
$col_position = "position";	// Name of column with position ID (Remember, this must be UNIQUE to all items)
$col_id = "";			// Name of column containing the items id (most likely the auto_incremented column)
 
if ($isUp)
{
	$operator = "<";
	$order = "DESC";
}
else
{
	$operator = ">";
	$order = "ASC";
}
 
// Get row we are moving
$request = mysql_query("
	SELECT '.$col_position.', '.$col_id.' FROM '.$table_name.'
	WHERE '.$col_id.' = '.$id_item.'
	LIMIT 1");
 
// Save data for row we are moving
if(mysql_num_rows($request) > 0)  {
	$isPos1 = true;
	while($row = mysql_fetch_assoc($request)) {
		$position1 = $row[$col_position];
		$id_item1 = $row[$col_id];
	}
}
 
// Get row we want to swap with
$request2 =  mysql_query("
	SELECT '.$col_position.', '.$col_id.' FROM '.$table_name.'
	WHERE '.$col_position.' '.$operator.' '.$position1.'
	ORDER BY '.$col_position.' '.$order.' LIMIT 1");
 
// Save data from row we want to swap with
if(mysql_num_rows($request2) > 0)  {
	$isPos2 = true;
	while($row = mysql_fetch_assoc($request2)) {
		$position2 = $row[$col_position];
		$id_item2 = $row[$col_id];
	}
}
 
// If both rows exist (indicating not top or bottom row), continue
if ($isPos1 && $isPos2)
{
	$query_update = mysql_query("
		UPDATE '.$table_name.'
		SET '.$col_position.' = '.$position2.'
		WHERE '.$col_id.' = '.$id_item1.'");
 
	$query_update2 = mysql_query("
		UPDATE '.$table_name.'
		SET '.$col_position.' = '.$position1.'
		WHERE '.$col_id.' = '.$id_item2.'");
}

Any questions or issues with this method please reply.

Continue reading »]]> For those interested in implementing a list of category items into a select box, here is a simple method for doing so. This will require only 1 query (assuming you store the category id and the parent id in the table).

Organize your categories into a set of arrays

function OrganizeCategories()
{
	$refs = array();
	$list = array();
 
	$sql = mysql_query("SELECT id_category, id_parent, name FROM tbl_categories	ORDER BY name");
 
	if(mysql_num_rows($sql) > 0)  {
		while($row = mysql_fetch_assoc($sql)) {
			$thisref = &$refs[ $row['id_category'] ];
 
			$thisref['parent_id'] = $row['id_parent'];
			$thisref['name'] = $row['name'];
 
			if ($row['id_parent'] == 0) {
				$list[ $row['id_category'] ] = &$thisref;
			} else {
				$refs[ $row['id_parent'] ]['children'][ $row['id_category'] ] = &$thisref;
			}
		}
	}
 
	return $list;
}

Create the option values from the organizational array

function toSelect($list, $count = 0){
 
  $html = "";
  $count += 2;
  $spacers = "";
 
  for ($i = 0; $i < $count - 2; $i++)
  {
	$spacers .= '=';
  }
 
  if (!empty($spacers))
  {
	$spacers .= '&gt;';
  }
 
  foreach ($arr as $k => $v){
    $html .= '<option>' . $spacers .' ' . $v['name'];
    if (array_key_exists('children', $v)){
      $html .= toSelect($v['children'], $count);
    }
    $html .= '</option>'.PHP_EOL;
  }
 
  return $html;
}

Sample PHP code using the previous functions

$categories = OrganizeCategories();
$options = toSelect($categories);
 
echo '<select name="cat">'.$options.'</select>';

Assuming we have a full database of categories, it will output something like this

Continue reading »]]> So you may wonder how to get a return value from a function that requires you to Invoke(). It’s actually quite simple. You’ll need another delegate type, here is an example of returning the key of a tabControls selected tab:

public string CurrentTabKey()
{
    if (tabControl.InvokeRequired)
    {
        return (string)tabControl.Invoke(
          new Func<String>(() => CurrentTabKey())
        );
    }
    else
    {
        return (string)tabControl.SelectedTab.Name;
    }
}

Continue reading »]]> You may have noticed you cannot pass jQuery functions to content loaded using AJAX technology simply. One way is to use the jQuery .live() event. This can be used with a number of handlers and events to automatically pass functions to dynamically loaded content. The example below shows how you can add fancybox to a dynamically loaded container with class name “fancify”.

1
2
3
4
5
6
7
8
9
10
11

$('.fancify').live('click', function(){ 				
	$(this).fancybox({
		'width'			: '40%',
		'height'		: '70%',
		'autoScale'		: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'			: 'iframe'
	}); 
	return false;
});

Continue reading »]]> If your looking to use C#’s web browser control but don’t want links to open in the same browser control (i.e. open them in a real browser like Chrome or Firefox), simply change the navigating handler to process the URL and fire the link in the diagnostics (which will open the URL in the user’s default browser). Here is what I used.

private void browser_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
     System.Diagnostics.Process.Start(e.Url.ToString());
     e.Cancel = true;
}