Posts Tagged 'CSS'

I recently had the need for some client side form validation and happened to find the jQuery Ketchup plugin. It’s a simple and flexible plugin that can be modified and styled for your own needs, plugin modifications are encouraged although the ‘out of the box’ code will work just fine for your basic needs. You’ll need to download the plugin files to get started. once download follow these simple steps to implement it into your application.
Step 1
include the files in the plugin as shown …

I’ve been meaning to do something sporadic and creative for a while now but have never got around to it until now. I decided to challenge myself to build a site (wedeliver.papermashup.com) in under 24hrs from concept and design through to development. The site is a silly idea based on a simple delivery website with the twist of allowing users to deliver their precious package by an animal of their choice, much like we did in the war with carrier pigeons. I started by working …

Every couple of weeks I seem to find myself checking 9rules.com to see if they’re accepting new submissions as I’d like to submit this site. Any how on this occasion I couldn’t help but notice the browse by community section at the top of the page. Clicking the button reveals a section that contains a list of category names. I thought this would be a good example to base this post on, and to show how simple it is to achieve this effect. I’ve …

I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support …

There are some great JavaScript graph libraries out there and one that’s recently come to my attention is Highcharts.com which is compatible with both the jQuery and Mootools frameworks. To get started point your browser here where you can download all the files you need including examples. Highcharts features include slick tooltips to reference points on your charts, it’s compatible with all standard web browsers, the setup for a graph as demonstrated below is simple and uses the JSON data type, there are also …

“Easy PHP Websites with the Zend Framework” shows you how to use the powerful Zend Framework to build websites with amazing speed and efficiency. Embracing a teaching strategy of learning by doing, showing you how to build website features you’ll actually want to use within your own websites. Among other topics you’ll learn how to manage data submitted through web forms, send e-mail through your website (both text and HTML), manage the user registration, login, and password recovery processes, and even create a simple social …

If you think you can just build a website and expect it to perform well you can think again. Getting a website to the top of search results is every marketing managers goal. Im going to run through five key points that will put you in good stead to getting the results your site deserves. SEO is often percieved as a dark art. If you start out well and get the basics done the quality of your content should speak for itself. However …

Inline editing as it’s known, or being able to edit content directly on a page is a great tool have under your belt. I’m going to run through exactly how it works as well as how to POST the updated text content through to a PHP script for server side processing to put in the database.
The Code
It looks a little complex so i’m going to quickly run through exactly what’s going on.

When you visit the demo page are presented with a block of text. …

API Knowledge
A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more …

In this tutorial we’re going to take an RSS feed from the top videos page on MySpace and make a widget to display the latest videos using jQuery pagination, ajax and a spot of PHP to parse the feed. The basic logic of what is going on is simple. We parse an XML file echo all the results, then we use the quick paginate plugin to display a select number of results with the option to browse pages.
Lets first take a look at the PHP …

The average web page contains over 50 elements each of which has to be downloaded from a web server. The HTTP 1.1 specifications recommend that a web browser or server should only typically make two simultaneous downloads per domain or hostname. So most web browsers are effectively restricted by this limit on parallel downloads if the objects in the web page they download are hosted on one server. However there are two ways around this limitation:

You can serve your page elements from multiple servers each …

Following on from yesterdays little article about adding a simple JavaScript print link to a page, today I’m going to cover adding the functionality with jQuery for the user to adjust the text size on a page. It is important from an accessibility point of view to give your users the ability to re-size the text, and its also a handy trick that could become useful for building stand alone JavaScript applications. You will also need to include the jQuery JavaScript framework.
The Code

<script type="text/javascript">
$(document).ready(function(){
…

How many times have you booked that holiday or purchased a new gadget and been presented with a button that says ‘Print your receipt’? Users generally have to be pushed into executing a physical action such as printing a receipt or confirmation letter. So to do this we can use a simple line of JavaScript that goes in the href of our link to open the print page prompt window.
It’s also worth pointing out that to get the best results, its best to create a …

Over the past few years I’ve had the opportunity to work on a few personal projects. This allowed me to experiment more with techniques that I wouldn’t have normally used on client sites. During this time I was building a blogging platform, I soon found that it was difficult to present the data and make it look interesting to the user, this is where i discovered web thumbnails to achieve this.
There are a variety of web thumbnail services out there but the best and easiest …

Here’s a quick CSS tip. Firefox likes to put a dotted border around any links that you click as shown below, but there’s an easy way to fix it simply add the code below to your ‘a tag’ style either in the head of the page on in an external style sheet.

a{ outline: none;
-moz-outline-style: none;
}

I’ve never written a jQuery tooltip script before so i thought i’d give it a go and write my own. Its very much in the experimental stage but i thought i’d open it up to see what the community has to say about it. I had the most trouble with the ajax tooltip and getting the content to display in the tip. I know there are plenty of jQuery tooltip scripts out there but i really wanted to see how they were made, and the …

This tutorial looks into creating a really simple tabbed interface using just plain HTML and CSS with the functionality and interface manipulated using jQuery. Tabbed interfaces are great for maximizing the amount of space you have on your site.
Lets take a look at whats going on. We start with the document ready function. The first line of code hides all the tab containers, we then show the first one, and add the class ‘active’ to the first ‘li’ in the tab headers. …

Minimising the time a user has to wait for a web page to load is crucial. Using Gzip and PHP we can minimise file sizes of CSS files. This technique is a powerful and simple way to reduce page download size and speed up your site that will work with most PHP installations, even those on shared hosting that don’t have mod_deflate turned on in their Apache configuration.
Just add the code below at the top of your page. You then need to change the links …

It’s a good idea at the start of writing your CSS code to reset the CSS across all browsers to ensure that your page renders more or less the same. By default different web browsers use different values for margins, padding, or line heights. A CSS reset script will ensure that most browsers will render your site identically, without the need to individually bug fix incorrect CSS properties.

# html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
# …

Here’s an easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page. Here’s the demo.
First you need to copy the CSS below into the head of your page, you can style this to suit your needs once we have the PHP in place to render our graph.

.clear{
clear:both;}

.graphcont {
padding-top:10px;
color:#000;
font-weight:700;
float:left
}

.graph {
float:left;
margin-top:10px;
background-color:#cecece;
position:relative;
width:280px;
padding:0
}

.graph .bar {
display:block;
position:relative;
background-image:url(images/bargraph.gif);
background-position:right center;
background-repeat:repeat-x;
border-right:#538e02 1px solid;
text-align:center;
color:#fff;
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em
}

.graph .bar span {
position:absolute;
left:1em
}

I used this graph on a project that required …