PHP Reference Book by Mario Lurig

“This is a great quick reference book that presents content and examples in a way that it serves both beginners and intermediate users alike. A must buy book!”

- Rak Shekhar, Founder, PHPCatalyst.com

If you didn't win the book, you can still download a PDF version of it for free on the website!

BeCreative Magazine

BeCreative Magazine is an online design/social media magazine. It's also a blog for people who want to learn how to design, code and write online. Whether you need to know how to design a website from scratch, start developing themes or maybe even want to learn how to write properly for the web we've got it.

HiddenPearls Web Development Services

HiddenPearls is a web development service who specializes in PSD to HTML conversions. Get in touch with them today!

Envato

I can't say enough great things about Envato. I owe so much of my success to them. They've provided me with an amazing job, great work environment, and wonderful people who have mentored me over the years. Thank you Envato for all you've given me.

PacktPub

Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks.

DigWP

Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.

Are My Sites Up?

Your clients and/or customers don’t care that a hamster chewed through a network cable somewhere in Northern California. They want their website up. You need to find out before they do so you can react fast!

Apress Publishing

Apress is a technical publisher devoted to meeting the needs of IT professionals, software developers, and programmers, with more than 700 books in print and a continually expanding portfolio of publications. Apress provides high-quality, no-fluff content in print and electronic formats that help serious technology professionals build a comprehensive pathway to career success.

A special thank you to Simon of Apress for his extreme kindness and patience with me while I got everything sorted out, you've been amazing Simon!

Thanks again to our sponsors!

Review Overview

• Book Summary
• Who is this book for?
• Subject Matter
• Notable content/features
• Final Thoughts

Book Summary

The main focus of AJAX and PHP: Building Modern Web Apps is to get you up and running using raw Javascript and php to build practical and useful applications. I was happy to see the book mentions Javascript libraries, but really teaches the reader how to do things with plain old Javacript while accounting for all browsers. It was actually fun learning how to create your own AJAX cross browse compatible objects, which is something I never though I'd say.

To quote the books description and give you a better idea of the subject matter:

This book is a step-by-step, example-driven AJAX tutorial, featuring complete case studies. Each chapter contains a friendly mix of theory and practice, so that your journey through the book will be pleasant, yet efficient. You’ll be coding your first AJAX application at the end of the first chapter, and with each new chapter you’ll develop increasingly complex AJAX applications featuring advanced techniques and coding patterns.

Who is this book for?

In my opinion this book is great for beginners to web development, intermediate web developers looking to polish their AJAX and php skills, or advanced users who may have not had much experience using raw Javascript in web applications.

Anyone wanting to learn how php and Javascript can integrate asynchronosuly together will probably find this book behooving.

Subject Matter

I can't reveal all the details, but there are some seriously awesome applications and tutorials used in this book.

You are first introduced and walked through the basics of everything you'll need to get started, there is also a great primer on Javascript and even OOP style of Javascript, which is a nice bonus.

After that, you jump right in to building example AJAX applications, taking advantage of different web services and API.

Both XML and JSON formats are covered, which is essential.

Notable Content/Features

The section dealing with JSON vs XML is just awesome no matter which side of the fence you happen to stand on. Truth is, both data formats are in wide use, so it's helpful to know how to use them both when it relate to AJAX and PHP.

Another feature of the book I really enjoyed was the bonus on "Design Patterns" where common JS and PHP design patterns are evaluated and explained, it's very helpful for anyone trying to improve their application workflow.

Lastly, I'm very happy with how thorough of a job the authors did when it came to handling and dealing with cross browser issues. This isn't the most fun thing in the world, but any developer knows it's vital that their app work seamlessly across all common browsers.

Final Thoughts

As with nearly every single book from Packt, AJAX and PHP: Building Modern Web Applications is absolutely worth the price. It's a book to keep on your shelf when you're done reading to resort back to anytime you want to get your hands dirty with AJAX, and want things explained in a clear and precise manner.

As Always...

As always, I like to show all of you that I do in fact read all of these books I talk about and review, so here is my wonderfully extremely good looking self rocking the book:

Drew approves; he needs a haircut too!

Get It Now!

You can pick up the book directly from PacktPubs website and get started with AJAX and PHP today

UPDATE!

As of January 14, 2010 I will be picking and emailing the random winners and ensuring those who won are eligible to receive the prize. Please check your inbox and make sure no messages get caught in your spam filter over the next few days. More updates shortly!

The Giveaway Items/Products

We have 11 amazing items and products to giveaway to our readers, they are as follows.

PHP Reference Book (Print Edition)

Courtesy of Mario Lurig - Author

A collection of over 250 PHP functions with clear explanations in language anyone can understand, followed with as many examples as it takes to understand what the function does and how it works. One of the best PHP books to keep around as a PHP reference.
This PHP reference includes numerous additional tips, the basics of PHP, MySQL query examples, regular expressions syntax, and two indexes to help you find information faster: a common language index and a function index.

2 Spotify Invites for the Free to Use Version!

Courtesy of BeCreativeMagazine

Millions of songs - instant and simple
Discover and share music with your friends

Not available in all countries

$25 Amazon Giftcard

Courtesy of BeCreativeMagazine

BeCreative Magazine is an online design/social media magazine. It´s also a blog for people who want to learn how to design, code and write online. Whether you need to know how to design a website from scratch, start developing themes or maybe even want to learn how to write properly for the web we´ve got it.

FREE PSD to XHTML Conversion ($123 value)

Courtesy of HiddenPearls

HiddenPearls is offering a free PSD to HTML conversion for one homepage and one contact page, a $123 value, absolutely free to one lucky winner! Be sure to follow him on Twitter!

FREE 3 Month TUTS+ Subscription

Courtesy of Envato

From graphics to web development, audio to video and more, get the skills you want from our family of tutorial and resource sites. Need more? We also offer a Plus program where you can access source files and bonus tutorials.

$50 Credit to any one of the Envato Marketplace

Courtesy of ActiveDen, AudioJungle, ThemeForest, VideoHive, GraphicRiver, 3dOcean, and/or CodeCanyon.

The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, stock audio, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 300,000 users, authors and buyers and everyday hundreds of new files are added.

AJAX and PHP: Building Modern Web Applications 2nd Edition (paperback)

Courtesy of PacktPub

This book is a step-by-step, example-driven AJAX tutorial, featuring complete case studies. Each chapter contains a friendly mix of theory and practice, so that your journey through the book will be pleasant, yet efficient. You’ll be coding your first AJAX application at the end of the first chapter, and with each new chapter you’ll develop increasingly complex AJAX applications featuring advanced techniques and coding patterns.

Digging Into WordPress the Book (pdf)

Courtesy of DigWP

Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.

One Standard Premium Account for Are My Sites Up?

Courtesy of Chris Coyier

Your clients and/or customers don’t care that a hamster chewed through a network cable somewhere in Northern California. They want their website up. You need to find out before they do so you can react fast!

Beginning Zend Framework (print edition)

Courtesy of Apress Publishing

The Zend Framework is one of today’s most popular PHP–based web application development frameworks. Beginning Zend Framework is a beginner’s guide to learning and using the Zend Framework. It covers everything from the installation to the various features of the framework to get the reader up and running quickly.

Beginning Python From Novice To Professional, Second Edition (pdf)

Courtesy of Apress Publishing

Gain a fundamental understanding of Python’s syntax and features with the second edition of Beginning Python, an up–to–date introduction and practical reference. Covering a wide array of Python–related programming topics, including addressing language internals, database integration, network programming, and web services, you’ll be guided by sound development principles. Ten accompanying projects will ensure you can get your hands dirty in no time.

Updated to reflect the latest in Python programming paradigms and several of the most crucial features found in the forthcoming Python 3.0 (otherwise known as Python 3000), advanced topics, such as extending Python and packaging/distributing Python applications, are also covered.

How Do I Enter?

Simple and takes merely seconds! Follow these steps:

1. Tweet about this post on twitter using any text you like. Nothing fancy. Here is a link you may use http://bit.ly/6kzEwQ
2. Leave a comment below about which items you would like to win. Please list at least three (please add more if you can!) in case your desired item is already taken if you win.
3. That's it, I told you it was simple!

As the comments grow larger, you will want to consider requesting choices that haven't been requested as much, to improve your chance of getting your first choice if you win.

How are the winners determined?

Random. All Random. We will choose random winners when the contest is over and try to give them their first item choice, if available. There will be 11 total winners, so be sure to follow the above steps to enter!

Please Support Our Sponsors!

This contest just would not have been possible without some amazing and very generous people and companies. Please take a minute of your time to give one of them a browse when you have the chance. Special thanks to:

• Mario Lurig
• BeCreativeMagazine
• HiddenPearls
• Envato
• PacktPub
• DigWP
• Chris Coyier
• Are My Sites Up?
• Apress Publishing

Once again, please join me in saying a huge "thank you!" to our sponsors!

Support Dev-Tips

We've grown a lot in one year, and we're hoping to continue to see that trend in the year 2010. If Dev-Tips has helped you out in anyway in the past year, I ask you to please consider making a small donation to help us offset the cost of hosting and running the site. Any and all donations are very much appreciated.

Follow @Dev_Tips and @DrewDouglass on Twitter!

Enter now!

Read through the contest steps above, and enter your comment now for a chance to win one of the 11 items!

When Will the Winners be Picked?

We will be picking a winner around January 13th. We may extend this a bit to give everyone a fair chance to enter.

Introducing "Minerva"

Minerva is a fresh and clean site template that works great as a portfolio, personal, blog, or corporate site. Minerva comes packed with features and is ready to go out of the box. It even comes with a working AJAX & PHP contact form w/ spam protection!

Screenshots

Home Page

Footer

Contact Page

Blog Comments

Theme Features

• Working AJAX & PHP Contact form.
• Nice jQuery effects in the Footer and ‘Share This’ section.
• Easy to use jQuery Slider in the header.
• Custom Font Embedding with Cufon, falls back on awesome font stacks and still looks great.
• 5 Different page types included.
• Supported in all major browsers, including IE6!
• Valid XHTML
• Custom and in depth online and offline documentation and support.
• Clean, elegant, and semantic code aids in good SEO .
• Minimal use of images and creative use of sprites to save loading times.
• Special attention paid to elements and typography, see demo page.

Demo, Documentation, & Support

http://designthirst.net/themes/minerva/ – Live Demo

http://designthirst.net/docs/minerva/ – Online Documentation

http://twitter.com/DesignThirst – DesignThirst on Twitter

Get Minerva now!

You can get Minerva right now, available exclusively through ThemeForest.

Feedback, Updates, and Feature Requests

If you didn't know, once you buy a theme on ThemeForest, you can download any updates made to that item for free at anytime! That said, we're about to release Minerva version 1.1 version 1.1 has been released!, which comes with some small enhancements, so no matter when you buy it, you'll forever have access to upgrades for free!

I'd love to hear any feedback or feature requests, let me know what you think!

Below are the items that have been kindly donated so far.I will update the list below as they (hopefully!) continue to come in.

• PHP Reference Book by Mario Lurig (Print Edition).
• Spotify Invites (for the free version, no monthly fees!) and a $25 Amazon Gift Card. donated by BeCreativeMagazine.
• FREE PSD to XHTML Conversion (Homepage and one contact page!) a retail price of $123 by Hidden Pearls.
• 3 Month TUTS+ Subcription courtesy of Envato.
• $50 Credit to any one of the following Envato Marketplaces: ActiveDen, AudioJungle, ThemeForest, VideoHive, GraphicRiver, 3dOcean, or CodeCanyon courtesy of Envato.
• Paperback Edition of AJAX and PHP: Building Modern Web Applications 2nd Edition courtesy of PacktPub
• PDF Edition of Digging into WordPress courtesy of DigWP
• One standard premium account for Are My Sites Up? courtesy of Chris Coyier.
• Hard copy of Beginning Zend Framework courtesy of Apress Publishing.
• PDF Version of Beginning Python: From Novice to Professional, Second Edition courtesy of Apress Publishing

Giveaways

We've had some amazing success in the past with book and web development related giveaways, and we'd love to do it again this year! We've been contacted by some great people and are planning on having frequent book reviews and giveaways for the next year on Dev-Tips.

Giveaway Items Needed!

If you have any kind of web development related product or item that you'd like to contribute to the giveaway, please get in touch with us! We are in desperate need of giveaway items, and we'd love to give you some free traffic, so if you have anything at all let us know!

Some items we are looking for (but not limited to):

• Web Dev or Design Books
• Software or Scripts
• Templates or Designs
• Discounts to web apps or memberships to programs

If Dev-Tips has helped you out in anyway at all, please consider donating an item to the giveaway, or making a donation below. We don't ask often, and donations and a small amount of advertisements are what keeps us going.

Submit an Item/Product for the giveaway

To submit an item for the giveaway, please contact us through this form with the subject line of "One Year Giveaway".

All persons who donate an item or product to the giveaway will receive full credit and promotion on Dev-Tips.

Make a Donation

To make a donation to Dev-Tips, simply use the donation button below.

If you make a donation and don't mind me letting me know, I will be sure to credit and link everyone who does this also, as it's the least I can do. If you'd rather stay anonymous that's fine too.

A Giant Thank You!

A big thank you to all of the readers who stuck with us throughout our first year, we've seen solid growth every month and have bigger and better things planned for 2010! Have a wonderful New Year!

The Big Winner!

Congrats to Montana Flynn, the randomly selected winner for the PHP book giveaway. Montana will be receiving an absolutely free copy of the book in the mail shortly. Montana will be using the book to:

I want the book because I need to learn how to write better PHP!

And hey, that's a good enough reason for us.

Congratulation Montana, and thanks to all who entered!

Future Giveaways

This giveaway was so successful, I have been contacted by a few publishers and we will be running frequent book reviews and giveaways! Be sure to subscribe to our RSS Feed to be one of the first to enter the next contest!

P.S. Dev-Tips turns one year old in January! We'll be posting more about this soon and looking for giveaway sponsors, get in touch with us if you are interested, we'd love to chat!

Live Demo

First, the scenario

We have a standard form with 4 radio button groups. Each group has 4 radio buttons labeled from "1" to "4". Now, when the user selects "option 1" in "group 1", all the remaining "option 1" items need to be disabled. To see an example in action, you can view the demo here.

The problem

When I first started, I thought that it's simply a matter of giving each "option" (regardless of group) a common class name - then just disabling all other options with the same class name. That works, to a point, but what if the user changes his mind and selects another option ? Now I had to find all previously disabled options, re-enable them and start all over again.

The solution

Essentially what I came up with was a basic nested loop to handle setting and unsetting the relevant "disabled" attributes. To achieve this, first we assign all "option 1" a class of "number1", "option 2" a class of "number2" and so on.

Next, we run a basic for loop, and go through each "number" class (i.e. number1 to number4). For each class, we call a function. Inside this function is another loop - this time iterating over each radio button assigned the current class name. Using this loop, we remove any "disabled" attributes which may have been assigned previously.

We also find out which item in that group is currently selected (if any) - this is so we can run a second loop to disable all those options not currently selected. Confused ? Now might be a good time to go through the code.

The code

$(function(){
		// fire our code when a radio button has been selected
		$("input[type=radio]").change(function(){
			var name = $(this).attr("name"); // get the current button's group name
			$("input[name="+name+"]").removeAttr("selected"); // first we deselect "all" radio buttons within the same group
			$(this).attr("selected","selected"); // make sure our currently "changed" button is selected
			for(i=1;i<=4;i++){ // go through the 4 radio classes
				processRadio(".radio"+i);
			}
		});
		/**
			Loops through each item with same "class" name and disables/enables where appropriate
		**/
		function processRadio(myclass){
			var empty;
			var id = "";
			var buttons = $(myclass); // read all buttons with the specified class name into a jQuery object
			buttons.each(function(){ // loop through each item
				var me = $(this);
				var isSelected = me.attr("selected"); // bool value, based on whether the "selected" attribute is present or not
				me.removeAttr("disabled"); // clear the disabled attribute if present
				me.siblings("label").removeClass("disabled"); // same with the associated label element
				if (isSelected != empty &amp;&amp; isSelected != ""){
					id = $(this).attr("id"); // set our tmp id var to our currently selected item
				}
			});
			// make sure we have an id, otherwise we'll get an error
			if (id != empty &amp;&amp; id != ""){
				buttons.each(function(){ // loop through each radio button once again
					if ($(this).attr("id") != id){ // set the disabled attributes if id attribute doesn't match our tmp id var
						$(this).attr("disabled", "disabled").siblings("label").addClass("disabled");
					}
				});
			}
		}

	});

I've commented as best I could, which hopefully makes more sense than my rambling above. Once again, there is a working demo available for you to play with. Be sure to have a look at the markup as well, might clear up a few questions.

I strongly suspect that there's a more efficient method for achieving the same result - so if you have a better suggestion, tweak or link please let me know - I'd greatly appreciate it.

Live Demo

Editors Note - PHP Book Giveaway

I'll be announcing the winner for the PHP For Absolute Beginners book giveaway on monday, so now is your last second chance to get your comment in for a chance to win. See here for more details and to enter.

Tutorial Details

• Program/Language: CSS
• Language Version: 2.1
• Difficulty: Beginner/Intermediate
• Estimated Completion Time: 30 minutes

Below you will find a list of the different advanced CSS techniques we will shortly discuss in this article.

1. Scaling the background image to browsers' window size (e.g.Twitter).
2. Text & image indentation.
3. Z-index in object elements.
4. CSS shadows.
5. CSS user interface enhancements

Scaling the image background to browsers' window size (e.g.Twitter)

If you take a look at the way Twitter handles user backgrounds, you will notice that there is a sort of scaling effect going on. This helps ensure that the page displays in an aesthetically pleasing way. A few months ago, I had to scale an image to the size of the browser. I tried many solutions, both with and without JavaScript, but they never fit the screen properly. I desired for the background to stay fixed and stretch across the windows size just like Twitter. Finally, I came up with a solution, and I'm going to share that solution with you today.

Let’s begin with the XHTML markup below:

		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>scaling the background image to browsers window size</title>
		</head>
		<body>
			<img src="images/picture.jpg" id="background" />
		</body>
		</html>
    

The above code should be pretty self-explanatory. It is an XHTML document with an inline image in the body, this will serve as the background image for the page.
Now, for the content and markup, let's create some DIV elements/sections as seen in the code below:

		<div id="scroller">
			<div id="container">
				<div id="text-content">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ligula sapien, imperdiet non egestas quis, tristique commodo augue. Nunc vehicula, lacus ac sagittis auctor, sem mauris laoreet neque, sit amet imperdiet enim felis ut enim. Proin vitae ipsum sapien. Donec placerat consequat est, eu dapibus diam vulputate non. Nam ultricies augue in urna aliquam vel posuere nulla tincidunt. Curabitur lectus augue, congue eget sodales vel, elementum eget lectus. Sed eget lobortis elit. Cras vitae rutrum quam. Curabitur eget turpis sit amet ante dignissim auctor ut posuere leo. Vivamus vitae gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non purus urna. Nunc sit amet sem non est lobortis euismod sodales in ante. Phasellus et nunc nisl.
					</p><p>
						Nulla porta velit et libero venenatis ornare. Nam adipiscing interdum libero ac commodo. Proin lacinia elementum ornare. Sed sapien lectus, euismod vitae porta in, iaculis non dolor. Morbi vulputate tincidunt sollicitudin. Morbi sit amet fringilla felis. Nulla vitae tortor et massa convallis dictum quis at ipsum. Vivamus a mi vitae justo aliquam volutpat. Nulla sit amet enim libero. Praesent suscipit, erat in consectetur pretium, ipsum urna hendrerit lorem, sit amet placerat nisi lacus pharetra sem. Proin nec felis vitae lectus hendrerit vestibulum. Sed ullamcorper nunc nec turpis molestie ac semper urna accumsan. Pellentesque eget massa arcu. Vivamus vitae quam ut felis vehicula bibendum et vel sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis, sem vitae vulputate pharetra, elit felis aliquet diam, in sagittis enim dui eu justo. Nullam bibendum tincidunt dui eget sollicitudin. Praesent purus orci, suscipit eget sollicitudin in, scelerisque sed sem. Pellentesque et magna neque. Donec vestibulum venenatis arcu, quis pellentesque ipsum laoreet quis.
					</p><p>
						Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada nisi a tellus gravida blandit. Integer id quam ante. Cras non facilisis dui. Phasellus porttitor rhoncus consectetur. Duis nec orci nisi, pulvinar interdum libero. Nulla vel mi volutpat nisi aliquam dapibus sed id velit. Sed commodo pellentesque vulputate. Ut hendrerit orci sit amet mi pellentesque vitae rutrum sapien feugiat. Integer imperdiet quam a massa hendrerit sit amet egestas massa fermentum. Curabitur at massa risus. Mauris aliquet elit id nunc auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lorem magna, dapibus id volutpat id, pretium id tortor. Morbi pharetra elit lectus, quis semper ipsum. Mauris pulvinar consectetur elementum. Nam ullamcorper nisl et est consequat euismod.
					</p><p>
						Maecenas lacus massa, malesuada a pulvinar quis, convallis vel lacus. Sed velit lacus, sodales a accumsan nec, convallis nec justo. Donec vitae orci eu ligula semper tincidunt. Pellentesque facilisis urna et nisl tempus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut interdum erat. Pellentesque rutrum justo eu lectus molestie dictum. Pellentesque scelerisque pulvinar metus sit amet sollicitudin. Nullam nisi elit, hendrerit ut tempor id, volutpat et mauris. In hac habitasse platea dictumst. Phasellus elementum pharetra interdum. Phasellus vel velit vel felis vestibulum interdum a ut turpis. Cras facilisis nisl vel elit rutrum in blandit magna pharetra. Integer nec justo in risus fringilla ornare. Praesent ut erat quis orci fermentum placerat sit amet id purus. Proin nec nulla ligula. Ut nibh elit, pulvinar a porttitor sed, pulvinar id justo. Quisque est dui, facilisis non commodo sed, molestie volutpat justo. Nunc ligula purus, tincidunt et varius sit amet, vehicula vel tortor.
					</p><p>
						Duis ut ligula ut augue iaculis porta sed id metus. Duis ultricies tempor orci dapibus convallis. In hac habitasse platea dictumst. Aenean at velit magna, ac hendrerit lorem. Nam facilisis leo in nulla ullamcorper tempus. Duis odio orci, fringilla sed suscipit vel, luctus nec lorem. Maecenas convallis sagittis ultricies. Cras consectetur tristique metus nec tristique. Integer ultricies sem velit, et pulvinar odio. Maecenas quis sollicitudin eros. Ut eget justo non velit tincidunt rhoncus ac eget nunc. Proin quis urna turpis. Pellentesque id mauris diam, id aliquam metus. Curabitur vitae semper mauris. Morbi fringilla pharetra lectus. Ut diam nisl, egestas ac lacinia sed, sodales quis felis. Integer ante enim, interdum eu dictum vitae, sagittis vel tortor. Maecenas dignissim, nisl sed scelerisque molestie, tellus justo fermentum ligula, sit amet venenatis quam turpis quis diam.
					</p>
				</div>
			</div>
		</div>
	

There are three separate id containers: scroller, container, and text-content. The 'scroller' is used to move everything inside of it. In this case, the divs and content inside it.

See the preview of your code in your favorite browser.

Scroll down and you will see that the text is below your image, as demonstrated below:

We will now add the necessary CSS that will stretch the image to fit the screen. The image will be stationary and the text will move around if needed.

<style type="text/css">
html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
#background {
	position:absolute;
	z-index:1;
	width:99%;
	height:100%;
}
#scroller {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	overflow:auto;
	z-index:2;
}
#container {
	margin-left:25%;
}
#text-content {
	background-color:#CCC;
	width:600px;
	padding:10px;
	margin-top:60px;
}
</style>

Let’s go through the above CSS code step by step.

html, body {
	margin:0;
	padding:0;
	width:100%;
 	height:100%;
	overflow:hidden;
}

The margin and padding is set to 0 to overwrite the default browser CSS settings. We set the width and height of the image to 100% and set overflow to hidden. After applying this above CSS, your page should look like the following:

You will notice that there are no scrollbars at right side and all of the text is hidden; This is because of the use of the overflow:hidden property.

#background{
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
}

Now, we set both the width and height of the image to 100% for the background to fully stretch to the size of the screen. We will get to why we are using z-index shortly. Using the above snippet, our page now looks like:

Now our background image is fixed to the screen.

#scroller{
	position:absolute;
	width:100%;
	height:100%;
	top:0
	left:0;
	overflow:auto;
	z-index:2;
}

Styling the scrolling div is pretty simple, z-index is used to place the scroller on top of the background image - the overflow:auto property makes it scrollable when the contents of the scroller take up more room than provided. In other words, the content will be moving while the background is fixed. Let's take a look at the page now:

#container{
	margin-left:25%;
}

#text-content
{
	background-color:#CCC;
	width:600px;
	padding:10px;
	margin-top:60px;
}

In the CSS code above, I've applied some basic styling to the content. The page will now look like:

You are free to use any of this code according to your needs. It is a nice example to demonstrate how you can stretch an image to the browser's size.

View Scaled Background Demo

Images and text-indent

As web developers, we are very used to using multiple images on our websites to achieve certain effects or outcomes.. If you want a professional CSS style, and improved SEO with images, you should write CSS in a separate file instead of via inline-css. Our HTML file will be smaller and search engines will crawl it faster and recognize them better. Let's see an example of using images with CSS in a better way.

Basic HTML markup:

	<div id="map">This is the map of Pakistan, indicating my city Sialkot. </div>

Preview of above markup:

First, we shall apply some CSS to the above DIV:

#map{
	position:relative;
	background-image:url(images/map.jpg);
	background-repeat:no-repeat;
	width:382px;
	height:296px;
}

After applying the CSS style, this is what the page looks like:

There is some text on top of the image, which will be crawled by search engines. We need to hide this from the user, though. You may be thinking about using the display:none; property, but, our purpose is to show the text when search engines crawl our webpage. Here is the updated code:

#map{
	position:relative;
	background-image:url(map.jpg);
	background-repeat:no-repeat;
	width:382px;
	height:296px;
	text-indent:-9999px;
}

text-indent:-9999px; is the property used to move the text away from the screen, rather than removing it completely. Click here to see more details on text-indent.

Your page will now look something like this:

Try the web developer Firefox plug-in to disable the CSS style and then see your website preview

You may know about CSS sprites, that they improve load times and decreases the number of HTTP requests that are made. But using the text-indent property with sprites makes the navigation even more fascinating for SEO as well. If you don't know about CSS sprites then take a look at some of the links below
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/
http://css-tricks.com/css-sprites/

In your CSS, you can set the background images and text-indent accordingly.

View Text Indent Demo

Z-index in an object tag.

What is z-index?

Elements have 3 positioning dimensions - X (horizontal), Y(vertical) and Z(depth). z-index is how deep down an element is - an element with a higher z-index is placed above an element with a lower z-index. Z-index must be an integer and can only work on elements that have explicitly been given a position property (absolute or relative).

One of my previous issues was fixing the z-index position in an object tag. The solution was very interesting, so let's it now!

Z-Index doesn't work with the object tag. So, after some research and several attempts, I reached a solution which I'll show you here:

<object width="425" height="355">
  <param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw&rel=1&color1=0x2b405b&
    color2=0x6b8ab6&border=1&fs=1"></param>
  <param name="allowFullScreen" value="true"></param>
  <embed wmode="transparent" src="http://www.youtube.com/v/u1zgFlCw8Aw&rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1&fs=1"
    type="application/x-shockwave-flash"
    width="425" height="355"
    allowfullscreen="true"></embed>
	</object>

In the embed tag, you will notice that I used the wmode="transparent" property. This sets the video into transparent mode. For flash files, see the below snippet:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="660" height="95">
    <param name="movie" value="Flash-banner.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="swfversion" value="8.0.35.0">
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf">
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="Flash-banner.swf" width="660" height="95">
      <!--<![endif]-->
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="swfversion" value="8.0.35.0">
      <param name="expressinstall" value="Scripts/expressInstall.swf">
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
		<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
		<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>

This part of the code is quite interesting, so I would suggest that you try viewing the page with and without these tags.

  <param name="wmode" value="opaque">

View Z-Index Object Demo

CSS Shadows

If your job is to convert PSD to XHTML/CSS you must be dealing with shadows of images in the PSD that you are going to work on. You must be looking some solution to apply the shadows in CSS instead of taking the images from PSD. Applying shadows to images/text via CSS is a good way to reduce your file size.

There are two CSS3 properties to give shadows in web pages:

1. Text-shadow

2. Box-shadow

Text-shadow:

If you want to give shadow to your Text in webpage then use the text-shadow css3 property.Let's move step by step to achieve this goal.

1. Wrap the text with a DIV, as seen below:

            <h2>Text Shadow</h2>
            <div class="txt_shadow">
                            Envato - Nettuts+
            </div>

2. Here is the css style that is used to give shadows to above text:

h2{
color:#FF0000;
text-decoration:underline;}
.txt_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999;  /*x-axis y-axis color*/
}

Above css style is pretty simple to follow, text-shadow property is used for styling the text shadows. It takes 2 arguments. 1st is x-axis that scales the shadow to right side. 2nd is the y-axis that scales the shadow to down. If we set the negative value to x-axis it will scale the shadow to left and if we set the y-axis to negative it will scale the shadow to up.After applying the above html/css your text shadow will look alike below:

3. Let's make this more attracting by adding the blur to shadow.

<h2>Text Shadow with blur</h2>

<div class="txt_blur_shadow">
	Envato - Nettuts+
</div>

.txt_blur_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 2px 5px #999;  /*x-axis y-axis blur color*/
}

See the text-shadow property clearly. We added 4 arguments now. 3rd one is new that is used to blur the shadow. After applying the above styling the resulting text will be

Looks pretty clean with blur Isn’t it ?

4. You can add even multiple shadows to your text. Its CSS style will be

.txt_multiple_shadow{
font-size:38px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-shadow:2px 12px #999,5px -5px #999;  /* 1st style[x-axis y-axis color], 2nd style[x-axis y-axis color] */
}

See the text-shadow property; we used multiple styles of shadows separated by commas. You can even use blur with it too. After adding the above style it will look alike this

Click here to view the demo

Box-shadow:

The great way to give a shadow to an image in your webpage is use box-shadow property. Let’s see how to style the image shadows.

1. Take a picture of which you want to apply drop shadow. I selected a picture of my son

2. Wrap the image with a DIV, as seen below:

<h2>Image Shadow</h2>

<div class="img_blur_shadow">
	<img src="http://dev-tips.com/post_img/adnan/11.jpg" alt="" width="540" height="380"   />
</div>

3. CSS style to apply shadow to above markup

.img_blur_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999;  /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999;
-webkit-box-shadow:1px 1px 10px #999;
}

Box-shadow property cannot be recognized by every browser. So, we used –moz-box-shadow for Firefox and –webkit-box-shadow property for chrome/web kit engines. Arguments for box-shadow are same like text-shadow. Output of above html/css markup will be

4. Even, you can drop multiple shadows, like we have seen previously for text, for images also.HTML/CSS will be

<h2>Multiple Image Shadows</h2>

<div class="img_multiple_shadow">
	<img src="images/174955.jpg" alt="" width="540" height="380"   />
</div>

.img_multiple_shadow{
width:540px;
height:380px;
border:1px solid #000000;
padding:2px;
box-shadow:1px 1px 10px #999,1px 1px 10px red;  /*[x-axis y-axis blur color]*/
-moz-box-shadow:1px 1px 10px #999,1px 1px 10px red;
-webkit-box-shadow:1px 1px 10px #999,1px 1px 10px red;
}

The above code is pretty easy to understand if you have followed how to multiple shadows with text. It has same number of arguments and you can use number of multiple shadows separated by commas.

View CSS Shadows Demo

CSS UI Enhancements

While working on my latest project, I had a few strange issues I was running into. First of all, when I try to select the text in Firefox it didn't turn blue like in IE Browsers. Secondly, when the user clicks on a link, an dotted outline appears around the link. This was especially annoying because I was using text-indent with the links.

Text Selection Highlight Color

To create a highlight color when text is selected, I use the following code:

/*Mozilla browser selection*/
::-moz-selection{
	background: #69f;
	color:#fff;
}
/*Other browsers selection except IE */
::selection {
	background:#69F;
	color:#fff;
}

Remove Border Outline around links

I went over some popular websites and was shocked when I saw they had the same problem - an outline appears around the link. A few of the popular websites are listed below with their screen shots.

Even the BBC website is facing this issue.

So the solution for removing this outline is:

a:link, a:hover, a:visited{
	outline:none;
}

Attribute-Specific Icons

Do you want to have file icons next to your links? Add PDF icons next to your .PDF links, MS WORD icons next to your .doc links, so on and so forth. This is a great way to make links describe what they're pointing to.
The code for specifying the attribute icons is:

a[href$='.pdf']{
	padding:0 20px 0 0;
	background-image:url(images/Print.ico);
	background-position:right;
	background-repeat:no-repeat;
}
a[href$='.doc']{
	padding:0 20px 0 0;
	background-image:url(images/docs.ico);
	background-position:right;
	background-repeat:no-repeat;
}

View UI Demo

Conclusion

In this tutorial, we have learned the advanced techniques of CSS that can solve some tricky issues. Luckily, most if not all of these techniques are easy to understand and implement. If you know of any other techniques to solve these problems, please share them with the world and post them in the comments area.

View Demo

Authors Note:This plugin has now been given the name of NudgeIt and has had a lot of new features added! Please see the two updates at the bottom of this page for more information.

The Plugin Javascript

Creating the plugin is simple and is as easy as creating any other jQuery plugin. I'll try to comment the source code some so you can get an idea of how it all works.

jQuery Link Nudge Plugin
Posted by DrewDouglass on August 5th, 2009
Plugin Source.

Usage

$(function(){
		$('ul li:even').linkNudge({
			elapseTime: 500
		}).css('list-style-type', 'circle');//Plugin allows for chaining, as seen with the css call.
	});

Documentation

To use the plugin, simply include the plugin and jQuery library on your page and make a call to the linkNudge function. You can include three optional parameters, as discussed below.

1. padding - Allows you to set how far the link should be nudged. Defaults to 20px.
2. elapseTime - The time, in milliseconds, over which the nudge should occur. Default to 300.
3. returnPadding - Optional padding to return to when the element is no longer being hovered. Defaults to 0.

Terms of Use

You can't sell it. Otherwise, use it how you would like in your projects, a credit to this page in the notes or documentation would be appreciated. Donations even more so.

View Demo

jQuery Link Nudge Plugin (772) - 19.9 KB

Feed Me

If you have used or enjoy this plugin, I urge you to consider making a small donation so I can buy some Chinese food.




Update:

David Walsh has modified the flexibility of the plugin in a new post on his blog. I encourage all of you to give it a look and download and see how they differ. You can find Davids plugin on his website. Thanks for adding on to and improving the plugin David!

Update Two!

David and I have decided to collaborate on this plugin and host it on a GitHub so everyone can easily keep track of any updates or changes. We are now also calling the plugin, quite appropriately, NudgeIt.

]]> http://dev-tips.com/featured/link-nudge-jquery-plugin/feed 13 http://dev-tips.com/featured/showing-code-on-wordpress-posts-with-snipplr http://dev-tips.com/featured/showing-code-on-wordpress-posts-with-snipplr#comments Sun, 12 Jul 2009 05:03:31 +0000 Drew Douglass http://dev-tips.com/?p=471 If you haven't used Snipplr yet, or are unsure what Snipplr is, it is basically a code pasting/sharing site on the surface. I recently signed up for an account, after looking at a lot of different places to store small snippets (bigger projects get stored GitHub) and found Snipplr to be a really excellent application. Today, I'm going to go over how to display code on your WordPress site using a Snipplr plugin and a snippet of your choice, I'll also be talking about some of the cooler features of Snipplr.

A Quick Note

Before I continue, I want to note that I am in no way shape or form in business with or getting paid at all by snipplr or anyone else for this post. I just found Snipplr to be a cool application and decided to share some things with you all /end disclaimer

What does Snipplr do?



A simple look at the about page will answer that question for you:

With Snipplr you can keep all of your frequently used code snippets in one place that's accessible from any computer. You can share your code with other visitors and use what they post, too. Did we mention that Snipplr works with TextMate? Yeah, we rock.

Notable Features

• Tons of programming languages to choose from, all with slightly different syntax highlighting.
• The ability to add the original URL you found the snippet (if one exsists), you can also add the original author and any comments about the source code. Giving credit where it's due FTW!
• Ability to tag and favorite any snippet you wish for easy organization.
• Features integrate into TextMate. Furthermore, there are quite a few applications Snipplr integrates with.
• Ability to download a backup copy of all of your snippets. I thought this was an especially cool feature.
• Add others to your 'watchlist', which is other peoples snippets that interest you (much like Twitter, if you find someones snippets to be awesome, you can follow and keep track of them). By the way, you guys can follow me on snipplr anytime
• An API key and available API. In addition, a Snipplr WordPress plugin that we will be using later in this article

Hopefully, the above features will convince you to give Snipplr a look. Let's move on and get to displaying code snippets on our blog using the Snipplr plugin.

Download the plugin



The first thing you will need to do is download the WordPress Snipplr plugin, which will allow you to display any snippet you want, anywhere on your blog using WordPress short codes.

Grab your API key



Next, you will need to grab your API key on the settings page. You will need to register an account to receive an API key, which should take all of 3 seconds or so. Navigate to the bottom of the settings page and copy your API key to your clipboard.

Add a snippet

Add whatever code it is you are wanting to display on your blog by clicking new snippet. Fill in the appropriate fields and click 'Post'. Now you can forever go back to that snippet if you need quick access to it or have any issues with your blog. Moving on...

Activate the plugin

After installing the plugin, activate the plugin and go to the Snipplr configuration page in your admin panel. Paste in your API key and set your Snipplr preferences.

Using the shortcode

We're nearly there. Now when you go to write a new post, use the snipplr shortcode [ snippet = id ] without spaces and replace id with the snippets ID number. You can find the snippet ID number in the URL of the snippet you wish to share.

Example below

Below you will find an example of the Snipplr plugin in use. The snippet is getting pulled from my Snipplr account and displayed according to the settings I have set for the plugin.

GPC Magic Quotes Runtime Stripping
Posted by DrewDouglass on July 11th, 2009
All credit for this code goes to the all mighty Fou-Lou of codingforums.com (link given).

if (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc())
{
    function GPCStrip($arr)
    {
        if (is_array($arr))
        {
            foreach ($arr AS $arrKey => $arrVal)
            {
                $arr[$arrKey] = GPCStrip($arrVal);
            }
        }
        else if (is_string($arr))
        {
            $arr = stripslashes($arr);
        }
        return $arr;
    }
    $_GET = GPCStrip($_GET);
    $_POST = GPCStrip($_POST);
    $_COOKIE = GPCStrip($_COOKIE);
    if (is_array($_FILES))
    {
        foreach ($_FILES AS $key => $val)
        {
            $_FILES[$key]['tmp_name'] = str_replace('\\', '\\\\', $val['tmp_name']);
        }
    }
    $_FILES = GPCStrip($_FILES);
}
if (function_exists('set_magic_quotes_runtime'))
{
    set_magic_quotes_runtime(0);
}

Check out the functions links!

I didn't even notice this until I was previewing this post, but if you hover over the functions in the above code, you will see that they all link to the functions in the php manual! That's a very user friendly feature of this plugin.

Follow me on Snipplr!

Feel free to follow me on Snipplr. If you're already on, leave your Snipplr link in the comments and I'll try to keep you on my watch list if I find it interesting. Have fun and use it responsibly, always give credit where it is due!

]]> http://dev-tips.com/featured/showing-code-on-wordpress-posts-with-snipplr/feed 3