WebDesign & Such » Code Snippets

Create a .htaccess file to redirect to a 404.html page

ilz — Mon, 21 Jun 2010 13:45:29 +0000

A 404 error is what happens when you try to access a page on a website that doesn’t exist. We’ve all gotten them; due to typos, a moved file, whatever the case. As designers / developers we need to make sure we help the users of our websites should this happen to them. The last thing we want is for them to get an ugly 404 error, get discouraged, and exit your website.

Instead, you want to create a custom 404 webpage, and redirect the user to this page should the error happen to them. This is done by uploading a .htaccess page to the root of your website.

Simply create a text document named htaccess in any text editor, and copy past the following code.

RewriteEngine On
ErrorDocument 404 /404.html

What that code is doing is redirecting the user to 404.html. Obviously you can name the page anything, just make sure to change the code. Upload the file, put a dot in font of the name ( so it’s .htaccess ), and you’re all set. Go to your site and type in a page that you know doesn’t exist. You should be re-directed to your new 404.html page.

Speaking of your new 404.html page, make sure when you create it you help the user along. Check out the 404 page I made for my website, BeantownDesign.com

Beantown Design 404.html page

You can see it’s rather simple, but I point the user to the three things I consider to be the most important on my site: my home page, my portfolio, and of course my contact page. You can do whatever you want, just make sure you are making your user’s life easier.

Here is a htaccess file you can download and use.

Download File

How to test if your server supports / is running PHP.

ilz — Tue, 15 Jun 2010 12:45:02 +0000

If you’re going to use PHP on a website the server needs to be running PHP right? Well duuh! If you work on a variety of websites for a lot of clients, you’re going to deal with different hosts and servers. Before you hook up a form to PHP or whatever else you are planning on doing, you better make sure the server can run PHP if it isn’t.

The quickest way to test servers for PHP is to create a testing PHP file that you can upload to a clients website to see if PHP is running. The good thing about this is you can reuse it for every site. You simply upload this to the server, and try to open it in your web browser. If it works, you’ll see an html page with the info about the PHP running on the server. If it isn’t running PHP, well you won’t see anything!

Keep reading for the code to make your own. I also provide mine as a download to save you time.

If you want to create your own, just create a document called info.php. Within this file paste the following text:

phpinfo();
?>

Once you upload that, try to open it in your browser. If it works, it’ll show the info about the PHP running on the server. If it doesn’t work…well you better call the host.

Speaking of hosts, here’s the host I recommend to all my clients, and use for all of my personal websites, including WebDesignAndSuch.com and BeantownDesign.com

Anyway, back to the PHP topic, here is a info.php file like I mentioned above. Figured I’d save you some time. Happy coding!

Download info.php

Set the jQuery Moving Boxes Slider to Autoplay

ilz — Fri, 11 Jun 2010 16:45:58 +0000

I was making a product slider for a clients website; and was using the CSS-Tricks Moving Boxes slider. I chose this slider because it had an effect that most other jQuery sliders don’t have, the main image is larger than the images leaving or entering the screen.

The one problem I found with it was that there is no setting for autoplay, so the user always needs to manually press the arrow to navigate to the next photo. I wanted it to autoplay, so it starts to play as soon as you load the webpage. I found the code to make this work however, check out the demo to see the slider autoplay, and keep reading for the code / instructions.

View Demo

All you need to do to set the Moving Boxes jQuery slider to autoplay is add the following code right after line 110 in the slider.js file:

setInterval( function(){
if (curPanel == totalPanels)
{

}
else
{
$('.right').click();
}
} ,6000 );

So the above code goes right after the line: $(“.left”).click(function(){ change(false); });

Change the number to adjust the time of delay, and it will autoplay all the way to the end of the slider.

Make the words in a Form Input disappear or be selected on click / focus.

ilz — Wed, 09 Jun 2010 10:39:27 +0000

Recently I was creating a contact form for a client’s website. Due to the fact that the form was in a rather small area, I didn’t have very much room for the text and inputs. See my solution below.

Usually I would write the name of the input followed by the input like this:

First Name:

Since I didn’t have room for that I had to come up with a solution.

The first thing I thought was to add the name of the field as a value:

What I don’t like about that solution is that the user has to select the text manually, delete it, and then fill out the field. I wanted the text to disappear when the user clicked into the input. I looked around and figured it out; here’s how it looks / works finished:

All you need to do is add onfocus="this.value=''" to your input. So the code for this input looks like this:

Here’s one other similar technique that might come in handy. The following input selects the text on input, instead of clearing it.

Here’s the code for that technique:

How to refresh / reload a webpage with jQuery

ilz — Tue, 08 Jun 2010 02:01:21 +0000

I was coding a page the other day and needed to have a button that could refresh the webpage when pressed. Turns out jQuery can take care of this rather easily. Check out the demo below, and keep reading for the code.

View Demo

First hook your page to jQuery in the head of your page.

Then add the following code below that (still in the head of your document).

Hook your button up with the same id that you have in the above code.

That’s all there is to it!

How to set a YouTube video to Autoplay

ilz — Tue, 13 Apr 2010 23:08:56 +0000

So you know how to embed a YouTube video onto your site right? Well good for you! Copy and paste the code YouTube gives you, easy enough. But what if you want to set the video to autoplay? What I mean by that is have it start playing as soon as the user opens your webpage. By default the user would need to click Play on the video to start the play cycle. It’s easy enough to set the video to autoplay however, check out the demo and keep reading for the code.

View Demo

So all you need to do to set the video to autoplay is add the following:

&autoplay=1

Right at the end of the two URLs in the embed code that you copied from Youtube. So in the demo above, this was the original code:

After I added the above code to the end of the URLs the embed code looked like this:

And now the video will autoplay as soon as somebody opens the webpage.

Choose your State and Choose your Country form dropdown Select Snippets

ilz — Tue, 16 Mar 2010 22:20:24 +0000

I was laying out a form the other day and needed to have a drop down selection to choose your state, and another to choose your country. A very common thing on forms, but I didn’t have the code for this anywhere. So I decided to put it online for anyone else that needs this.

Here are the examples of the form dropdowns, keep reading for the code to create this in your form.

The following is the code to create the State dropdown select in your form.

The following is the code to create the Country dropdown select in your form.

Target the first paragraph on a page or section with CSS

ilz — Wed, 24 Feb 2010 13:40:41 +0000

So often I’ll be working on a website that somebody else coded and have to strip out junk styling. There are a lot of different ways to accomplish the same thing with CSS, but so many people have no idea how much time they are wasting by coding something in a “hacky” manner.

Example.
I was working on a site the other day and noticed that every single paragraph in the main content area of every page of the site had a class of “first-paragraph” on it. So I looked in the external sheet and saw that this was simply to remove the top margin on the first paragraph on every page. Ok, so that method worked..great. Except that manually adding a class to every paragraph tag is such a waste of time. Check out the demo where I show an example of targeting the first paragraph in a content area without adding any classes or IDs paragraph tag in the XHTML. Then keep reading to see how to properly code the example above.

View Demo

Here is the code to put in your external CSS sheet to select the first paragraph in a section (in this example a div called “content”). In this example I remove the top margin. If the coder in my example above had done this he wouldn’t have need to add any class to the paragraph tags in the XHTML. Don’t ya just love CSS?

#content p:first-child {margin-top:0px}

Add an auto-updating Copyright to your website with Javascript

ilz — Sat, 20 Feb 2010 14:23:46 +0000

Websites need to have the copyrights on them. Usually this is found in the footer of the site. As I was updating a client’s site the other day I noticed his copyright info was still 2009; so I updated it in the template, applied it to the pages, and re-uploaded everything to the live site.

One of the worst things you can do with your website is to not make updates once it’s live. Fresh content is the only thing that will keep your users AND search engines returning. One of the best ways to let users know that you never update your website (saaarcasm), is to have a copyright in the footer of your website from 2003. It really is a pain to have to go in at the first of every year to update all of your client’s websites though. Luckily, Javascript can save us. Using Javascript we can add a copyright to the webpage that will automatically update with the current year. Check out the demo, and then keep reading to grab the code.

View Demo

All you need to do is paste the following code right into the XHTML where you want the copyright to show up, Javascript does the rest!

How to create a Popup with CSS and Javascript

ilz — Sat, 26 Dec 2009 17:27:23 +0000

Popups suck.

The good thing is you don’t see that many of them any more. That’s because browsers recognize that they suck and are most likely spam or ads and so they block the popups. The old way of creating a popup was to force open a new browser window over the current browser window. So this is what browsers block. But what if you actually have a need to use a popup window for something useful and not spammy? This happened to me the other day. A client wanted a popup window on their homepage to wish everyone a Merry Christmas.

Knowing I couldn’t use the old popup method, I went searching. I knew it’d be easy enough to use CSS to put a floating div over the content of the site, which creates a popup effect. The problem was how do you close the popup once it’s open? Javascript would be needed for this. Check out the demo I setup which shows how the CSS popup can be set to open on pageload or by clicking on a link; and then how Javascript allows you to have a “close” button that shuts or hides the popup. Then continue reading for the code and downloadable files.

View Demo

If you check out the source code of the html file, you’ll see the following in the body. The “blanket” is the effect of putting the transparent black background behind the popup, which helps separate it from the rest of the content on the page. The “popUpDiv” is where you put the content of your popup.

Click to Open CSS Pop Up

If you want the popup to load on page load, put the following in your body tag.

Here is the CSS used to style the blanket effect and the popup div. You’ll see I turned the blanket effect off for Internet Explorer, since it doesn’t appear to support “opacity” (big surprise).

#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}

#popUpDiv {
position:absolute;
background:url(pop-back.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}

There is a Javacript file linked to the html file to make some of the magic happen. I’m going to make the demo files available so you can play with it and make your own. Enjoy!

Download Files

One last thing.. the original code for this was found here. I made some edits to make it work for my application.