$(this).attr('src')

..and even using some JS code to try and work out if the image was a relative, absolute, or full URL… but that prooved very messy (and probably buggy). After some research I came across this option:

$(this).get(0).src

This works perfectly with stuff like:

<img src="../images/foo.gif" />
<img src="../../images/foo.gif" />
<img src="/images/foo.gif" />
<img src="http://www.site.com/images/foo.gif" />

An example of it running would be:

$('img').each(function() {
		alert("Full URL of image found is: " + $(this).get(0).src);
});

Copyright secured by Digiprove © 2012

©2012 My Website Designers Blog. All Rights Reserved.

.

sub hex2rgb {
	my @rgb = map {hex($_) } unpack 'a2a2a2', $_[0];
	return "rgb(" . join(",", @rgb) . ")";
}

Then call with:

my $rgb = hex2rgb('ff00ff');

This would convert the above into rgb(255,0,255)

Enjoy!

©2012 My Website Designers Blog. All Rights Reserved.

.

function checkPrice(the_value) {
		var regtest = /^([\d]+|[\d]+\.[\d]{2})$/;
		if (regtest.test(the_value)) {
			return true;
		} else {
			return false;
		}
}

…simply call with:

if (checkPrice(your_value) == false) {
   alert("invalid price!");
}

It will accept the format of:

1
10
10.99
10.50
9.99
etc

.,..it WONT accept stuff like:

10.1

Enjoy

©2012 My Website Designers Blog. All Rights Reserved.

.

You can see an example of it here:

http://www.mywebsitedesignersblog.com/examples/abookmark/index.html

You can download the plugin from here

Ok, so now let look at how you call it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.abookmark.min.js"></script>

Now, you have 3 ways to call this plugin:

• The current page (no options passed)
• A custom page + title, passed in from the plugin paramaters)
• A link, which you want to offer as a bookmark

Here is how you call it in each of these instances:

1) The current page: This is the simplest. You just create a link like so:

<a href="#" class="abookmark">Add Bookmark</a>

..and then add the following jQuery code:

$(document).ready( function() {
		// Add this current page to their bookmark
		$('.abookmark').abookmark( );
});

This example will show a link (it can also be done using images, or whatever else … as long as that class exists)

2) A custom page: This will let you show a “Bookmark” link to people, even if its not the page they are currently on:

<a href="#" class="abookmark">Add Bookmark</a>

..and then add the following jQuery code:

$(document).ready( function() {
    $('.abookmark').abookmark( {
    	'type': 'custom',
        'url': 'http://www.mywebsitedesignersblog.com',
        'title': 'My Site'
    } );
});

This example will show a link (it can also be done using images, or whatever else … as long as that class exists)

3) A custom page: This will let you show a “Bookmark” link to people, even if its not the page they are currently on:

<a href="http://www.mywebsitedesignersblog.com" title="foo bar" class="abookmark_link">Add this links as Bookmark</a>

..and then add the following jQuery code:

$(document).ready( function() {
    $('.abookmark').abookmark( { 'type': 'link' } );
});

The values in the href=”" and title=”" value get grabbed, and then used whensomeone clicks to add a bookmark

I’ve tested this in IE 8 and 9, Safari 5, Chrome and Firefox 10 (it should work in ALL versions of FireFox though)

If you come across any problems with it / suggestions for enhancements – please let me know (the easiest way is to post a comment on this page, or on my forum.

If you find this plugin useful, please consider giving me a small donation to show your thanks. This will encorage me to write more plugins in the future too

Copyright secured by Digiprove © 2012

©2012 My Website Designers Blog. All Rights Reserved.

.

View the example

Its pretty simple to setup:

1) Add in the jQuery library (if you don’t already have it!):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

2) Add the following Javascript code into your page:

	jQuery.noConflict();
	jQuery(document).ready(function() {
		jQuery('#searchbox').attr("autocomplete", "off");

		jQuery('#searchbox').keyup( function() {
			inputString = jQuery(this).val();
	        if(inputString.length < 2) {
				jQuery('#suggestions').fadeOut();
	        } else {
				jQuery('#searchbox').addClass('load');

				jQuery.post("/cgi-bin/suggest.cgi", { query: escape(inputString) }, function(data) {
					if(data.length > 0) {
						jQuery('#suggest').fadeIn();
						jQuery('#suggestions').fadeIn();
						jQuery('#suggestionsList').html(data);
						jQuery('#searchbox').removeClass('load');
					}
				});

	        }
	    });

		jQuery('#suggest').mouseleave( function() {
			jQuery('#suggest').fadeOut();
		});

	});

	function fill(thisValue) {
		jQuery('#searchbox').val(thisValue);
		setTimeout("jQuery('#suggestions').fadeOut();", 200);
		jQuery('#searchform').submit();
	}

3) Add the following CSS:

#suggest {
	position:relative;
}
.suggestionsBox {
	margin-left: 0px;
	display: none;
	position:absolute;
	z-index: 100;
	width: 200px;
	padding:0px;
	background-color: #7A7476;
	border-top: 3px solid #000;
	color: #fff;
}

.suggestionList {
	margin: 0px;
	padding: 0px;
}
.suggestionList ul li {
	list-style:none;
	margin: 0px;
	padding: 6px;
	border-bottom: 1px dotted #666;
	cursor: pointer;
}
.suggestionList ul li:hover {
	background-color: #FC3;
	color:#000;
}
#suggest ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFF;
	padding:0;
	margin:0;
}

.load{
	background-image:url(/examples/autosuggest/suggest_loader.gif);
	background-position:right;
	background-repeat:no-repeat;
}

To make it align correctly to your input, you will probably need to play around with the bit highlighted (line 5), so that it correctly indents from the left margin.

4) Download the following files and upload them into your chosen directory.

5) CHMOD the suggest.cgi script to 755, and then open it up in your prefered editors (NotePad++, NotePad, WordPad, etc) … then edit the following values:

	my $database = "database_name";
	my $host = "localhost";
	my $port = "3306";
	my $user = "yourusername";
	my $pass = "the_db_password";
	my $debug = 0;

6) Run the following mySQL query in your database, to add create the table and also add in a couple of test entries:

CREATE TABLE IF NOT EXISTS `Suggestions` (
  `suggestion_id` int(11) NOT NULL AUTO_INCREMENT,
  `suggestion_query` varchar(255) NOT NULL,
  PRIMARY KEY (`suggestion_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO `Suggestions` (`suggestion_id`, `suggestion_query`) VALUES
(1, 'testing'),
(2, 'testing more'),
(3, 'testing something else');

7) The final part is to add in the HTML for where the suggestions will show up:

	<input id="searchbox" type="text" name="s" />
	<div id="suggest">
		<div class="suggestionsBox" id="suggestions" style="display: none;">
			<div class="suggestionList" id="suggestionsList"> &nbsp; </div>
		</div>
	</div>

Thats pretty much it. You need to make sure the “loader” image in the CSS is setup correctly (to point to the URL on your site), as well as the line in the JS code, which points to suggest.cgi:

jQuery.post("/cgi-bin/suggest.cgi", { query: escape(inputString) }, function(data) {

Any questions, please ask

Copyright secured by Digiprove © 2011

©2012 My Website Designers Blog. All Rights Reserved.

.

As always, using jQuery this is VERY simple to do

1) Include jQuery into your page:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

2) Add the following JS code into your page:

$(document).ready(function() {

	$('#search_input').focus( function() {
		var existing_string = "Enter your query...";
		if ($(this).val() == existing_string) {
			$(this).val("");
		}
	});

});

3) Then for the input field you want this to be the case for, make sure it has id=”search_input” as its ID (or change the above javascript to use the ID you have given yours)

For example:

<input name="s" id="search_box" type="text" value="Enter your query..." >

Thats it! Hope you enjoy

Copyright secured by Digiprove © 2011

©2012 My Website Designers Blog. All Rights Reserved.

.

©2012 My Website Designers Blog. All Rights Reserved.

.

http://www.mywebsitedesignersblog.com/examples/3-col-fluid.html

As you can see, I’ve added background colors to the page, so you can see the different “blocks” Obviously you can remove those.

The main thing to take into consideration with a “fluid” design, is that you need to have margin: auto set..i.e:

#wrapper {
	width: 850px;
	margin: auto;
}

You can change the width of this to whatever you want(800px, 1000px, or whatever) and it will automatically align the left/right margins into the center of the page.

Now you have the “wrapper” in place, we can setup the other blocks. The header/footer are the same (100% width), but I’ve done them as seperate div’s so that you can assign different classes/font styles etc that are different for each of them. For example:

#header {
	width: 100%;
	font-size: 14px;
}
#header: a:link, #header: a:visited {
	color: green;
	text-decoration: none;
}
#header: a:hover {
	color: red;
	text-decoration: underlin;
}

#footer {
	width: 100%;
	font-size: 11px;
	color: orange;
}

Hopefully that gives you an idea

If you wanna just get rid of one of the columns, you can simply remove the div from the page… for example, you would remove this to get rid of the left column:

#left_col {
....
}

..and then this part in the HTML:

		<div id="left_col">
			left column
		</div>

If you remove one of the columns, you need to be sure to update the width: xx% parts for the remaining middle_col and right_col (or left_col , depending on which one you removed). They need to add up to 100%. With the main example I showed you we have:

Left Col: 20%
Middle Col: 80%
Right Col: 20%

BE AWARE: If you add borders/padding to those divs, you may find it better to set the width of those in px (instead of %), cos the borders add extra pixels (and may cause your design to “drop” down below the main design!)

I hope that has been of some help (I know it took me a while to get used to fluid CSS designs, but its pretty simple once you know how )

Enjoy!

©2012 My Website Designers Blog. All Rights Reserved.

.

I decided to actually put together a proper christmas countdown script for you

Here is an example of what we are creating: http://www.mywebsitedesignersblog.com/examples/countdown/christmas.html

1) First of all, download this file: http://keith-wood.name/countdown.html (near the top of the page)

2) Upload these files to your website

3) Open up jquery.countdown.css, and change:

.hasCountdown {
	border: 1px solid #ccc;
	background-color: #eee;
}

..to:

.hasCountdown {
	background-color: #eee;
}

4) Add the following CSS to that file as well:

#imageLayoutWrapper { width: 350px; }
#imageLayout2 span { display: block; float: left; width: 29px; height: 50px; background: url(christmas1.jpg) no-repeat 0px 0px; }
#imageLayout2 span.image0 { background-position: -0px 0px; }
#imageLayout2 span.image1 { background-position: -29px 0px; }
#imageLayout2 span.image2 { background-position: -58px 0px; }
#imageLayout2 span.image3 { background-position: -87px 0px; }
#imageLayout2 span.image4 { background-position: -116px 0px; }
#imageLayout2 span.image5 { background-position: -145px 0px; }
#imageLayout2 span.image6 { background-position: -174px 0px; }
#imageLayout2 span.image7 { background-position: -203px 0px; }
#imageLayout2 span.image8 { background-position: -232px 0px; }
#imageLayout2 span.image9 { background-position: -261px 0px; }
#imageLayout2 span.imageDay { background-position: -290px 0px; }
#imageLayout2 span.imageSep { background-position: -319px 0px; }
#imageLayout2 span.imageSpace { background-position: -348px 0px; } 

5) Add the following into the <head></head>> part of your page:

<style type="text/css">
@import "jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
	var austDay = new Date();
	var thisYear = austDay.getFullYear();
	austDay = new Date(thisYear,11,25);
	$('#imageLayout2').countdown({until: austDay, compact: true, format: 'YDHMS' ,
    layout: $('#imageLayout2').html()});

});
</script>

6) Now add the following HTML to where ever you want the countdown to show:

<div id="imageLayoutWrapper">
	<img src="christmas_border.jpg" /><br />
	<span id="imageLayout2">
		<span class="image{d10}"></span>
		<span class="image{d1}"></span>
		<span class="imageDay"></span>
		<span class="imageSpace"></span>
		<span class="image{h10}"></span>
		<span class="image{h1}"></span>
		<span class="imageSep"></span>
		<span class="image{m10}"></span>
		<span class="image{m1}"></span>
		<span class="imageSep"></span>
		<span class="image{s10}"></span>
		<span class="image{s1}"></span>
	</span>
	<br /><br /><br /><img src="christmas_border.jpg" />
</div>

7) Download the below images :

(or download the ZIP file with all of these in)

Thats it – you should now have a working countdown clock Enjoy!

IMPORTANT: When using the christmas4.gif image, please be sure to use this CSS (slight tweak with some of the widths, due to the snowman font being a little wider than the others

#imageLayout4 span { display: block; float: left; width: 29px; height: 50px; background: url(christmas4.gif) no-repeat 0px 0px; }
#imageLayout4 span.image0 { background-position: -0px 0px; }
#imageLayout4 span.image1 { background-position: -29px 0px; }
#imageLayout4 span.image2 { background-position: -58px 0px; }
#imageLayout4 span.image3 { background-position: -87px 0px; }
#imageLayout4 span.image4 { background-position: -116px 0px; }
#imageLayout4 span.image5 { background-position: -144px 0px; }
#imageLayout4 span.image6 { background-position: -174px 0px; }
#imageLayout4 span.image7 { background-position: -200px 0px; }
#imageLayout4 span.image8 { background-position: -229px 0px; }
#imageLayout4 span.image9 { background-position: -258px 0px; }
#imageLayout4 span.imageDay { background-position: -290px 0px; }
#imageLayout4 span.imageSep { background-position: -319px 0px; }
#imageLayout4 span.imageSpace { background-position: -348px 0px; }
#imageLayout4 { overflow: hidden; }

Copyright secured by Digiprove © 2011

©2012 My Website Designers Blog. All Rights Reserved.

.