Expanding the skill set: JavaScript and CSS Background Changer
Once again I find myself confronted with having to use Javascript for a project. This time a dynamic background changer was needed (aka skin toggle). Using my feeble JavaScript Skills and a bit of copy and pasting I manage to put together a working template.
Here is an example. You can change the background of this site by clicking on the following thumnails:
How it works:
Firstly the background images are created/selected and placed in a folder together. Next name them the same with a just changing a number/letter/word at the end that. I recommend numbering them sequentially.
In an image editor crop small area of the image you will use as a button for it. You can of course use text buttons instead. In this case I have chosen to make the area around the buttons to change background to match the background image. If you want this effect then crop the large background images into smaller ones that match the size of the area you want to skin. Name the small background images the same as their larger counterparts adding a letter/number to the end. In the example I have used letter ‘a’.
Filed under Ask the Guru, CSS, Newsflash, Tutorials, case study, expanding the skillset | Comments (4)Ask the Guru: Custom 404 (and other error) pages
What happens when a user is sent a link to your site (or manually types your URL) there’s a typo? What happens if you have a broken link on your site? What happens when a search engine brings up results for your site but it’s for a page you’ve removed?
The visitor is presented with their browsers (or webhosts) ghastly 404 page with no link to the correct page. The chances are the visitor may not bother to try and strip the URL down to your domain and search for the page, they’ll just close you page and look else where.
What can be done to avoid this? A custom 404 page! And example can be seen at MyPetsite.co.uk/ - enter anything random at the end and the custom 404 page will appear.
The .htaccess technique.
This method is designed to work on an apache server with html pages.
This technique can also be used to create different error pages for 403 - forbidden, 401 - unauthorised, 501 - Unable to connect to server etc. However, if simplicity is what you are after than you can have all such errors can be directed to the same page.
Filed under Ask the Guru, Tutorials | Comment (0)Ask the Guru: How do I make text flow around complex images
In the the first of FFE’s (From the Front End’s) “Ask the Guru” features we look at shaping text so it flows nicely around images, even if the user is viewing your page with a different text size or browser than you.
Guru: Well a valid question asked have you!
Here we see an example (click any of the example images to view the XHTML page):
Download the example files here
There is not 1 but 3 possible solutions!
Continue reading »
