Papermashup.com » CSS

jQuery form titles

Ashley — Wed, 07 Jul 2010 09:10:14 +0000

I thought I’d share a little technique that I occasionally use when coding forms with a limited amount of space. It’s a simple effect that allows you to contain the form input or textarea title within the form allowing the user to click inside the form input to remove it. You often see this used on search fields

The JavaScript

firstly we assign a class of ‘form-field’ as well as adding the attribute ‘defaultVal’ with the text that we want to display in our input field.

The code below simply adjusts the input value attribute depending on if the user click in the field and types text so we have a state of change for ‘focus’ and ‘blur’.

$(document).ready(function(){

  $('.form-field').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'#ccc'});
      });

  $('.form-field').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'#000'});
    }
    });
  $('.form-field').blur(function(){
    if ($(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'#ccc'});
    }
    });

});

The HTML

Using CufÃ³n font replacement

Ashley — Tue, 06 Jul 2010 17:26:42 +0000

I’d never used CufÃ³n font replacement until a few weeks ago when I was sifting through some code that another designer had written and noticed that he was using CufÃ³n. Not that many people seem to know about CufÃ³n though. CufÃ³n uses a blend of font generator tools and JavaScript to create a custom font renderer in canvas and VML. Hereâ€™s how to use CufÃ³n to render the Junction font for all your headers.

Generate the font

first of all you’ll need to head here and convert your font ready for cufÃ³n. There are plenty of options to adjust how the font renders, you can include different fonts for weights as well as italic etc.

Include the JavaScript

Once you have your font converted in the CufÃ³n format you’ll need to include the CufÃ³n JavaScript file which you can find here as well as the font file that you converted above.

Specify your elements

	Cufon.replace('h1, h2, h3', { fontFamily: 'Junction' });

Building an animated 3D poll

Ashley — Thu, 10 Jun 2010 13:11:22 +0000

Regular readers of Papermashup will have seen the post that I wrote last week on Easy Poll, the personal project that I launched a few weeks back that allows you to create a simple 2 answer poll that you can share and gather feedback on. You can read the post about it and check out easypoll.papermashup here I’d love to hear your feedback.

I thought i’d cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.

The Code

I don’t usually do this but here’s the complete code snippet so you can see the JavaScript CSS and HTML all in one space. most of the configuration is achieved thought the CSS but you’ll notice that on page load the bars animate to the correct height using the jQuery animate function which we’re passing a percentage height into.

Build a jQuery content feature like MailChimp

Ashley — Tue, 08 Jun 2010 15:00:03 +0000

I was scouring the internet for inspiration the other day and revisiting some interesting sites and noticed that MailChimp had changed their homepage integrating a slick full page slider. After a little investigation I noticed that they were using the jQuery Cycle plugin which allows you to rotate, paginate or cycle a set of images. I’ve been looking for a full sized slider for a while now and was about to write a tutorial on building a plugin that does the same job.

The Code

Getting started with this plugin is really simple, you first need to include the cycle.js plugin you can find more info about the plugin including all the settings available here. This div structure allows you to assign different background images to each slide.

You can easily change the effect of the image transitions by replacing fx:’scrollVert’ with ‘fade’ for a simple transifion between frames, or ‘scrollHorz’ for the images to slide in horizontally.

Setup of the cycle plugin is simple with the settings below. you can adjust the speed, the initial timeout for when the page loads that the first frame is seen for and the delay between transitions.

  $(document).ready( function($) {

    $('#slider').cycle({
      fx: 'scrollVert',
      speed: 1000,
      pause: 1,
      timeout: 7000,
      delay: 500,
      prev: '#slider_next',
      next: '#slider_prev'
    });

  });

The HTML

  
    
    
      iPhone 4 coming soon
    
    
    
      Macbook Get One
    
    
    
      The new iPad
    
  
  
    
      Previous
      Next

The CSS

#slider {
	width: 100%;
	overflow: hidden;
	height: 301px;
}
.slider {
	height: 301px;
	width: 100%!important;
}
.slider_content {
	width: 1020px;
	height: 301px;
	margin: 0 auto;
	display: block;
	text-indent: -9999px;
}
#ipad {
	background: url('images/ipad-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#ipad .slider_content {
	background: transparent url('images/ipad.jpg') no-repeat top left;
}
#iphone {
	background: #000000 url('images/bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#iphone .slider_content {
	background: transparent url('images/iphone.jpg') no-repeat top left;
}
#macbook {
	background: #000000 url('images/macbook-bg.jpg') repeat-x 50% 0;
        width: 100%;
        height: 301px;
}
#macbook .slider_content {
	background: transparent url('images/macbook.jpg') no-repeat top left;
}

#slider_controls {
	width: 958px;
	position: relative;
	margin: 0 auto;
	height: 1px;
}
#slider_controls ul {
	background: transparent url('images/nav.png') no-repeat bottom center;
	display:block;
	height:32px;
	position:absolute;
	right:0;
	text-indent:-9999px;
	top:-31px;
	width:164px;
	z-index:9998;
}
#slider_controls li {
	float: left;
	width: 82px;
	height: 32px;
}
#slider_controls li a {
	display: block;
	height: 32px;
}

This slider is both elegant, simple to maintain and easy to code as well as being lightweight on the browser.

easypoll a side project

Ashley — Wed, 26 May 2010 16:45:51 +0000

I was sat in the sun at the weekend and sporadically decided to do a little project like wedeliver you can read about the adventure I had building the 24hr project here. This project on the other hand probably took about 24hrs to complete but I built it over a few days. It’s basically a site where you can create a simple 2 answer poll, you then take the link to the poll and share it on your networks allowing other users to participate check it out here. I wanted to make the whole experience as simple as possible with a basic interface so users can quickly create polls to share with friends. Naturally there are parts of the site i will improve in time small pieces of functionality. Each time a user creates a new poll it sends it to a custom twitter page here @easypoll which shows all the latest polls created.

Each poll has its own page, for example here’s a poll i created: Visit Poll the bar graph is generated using basic CSS and PHP to determine the percentages for the number of votes. Here’s a tutorial I wrote a while back on how to implement a similar graph

The Design

Much like wedeliver I wanted to create an appealing interface that’s easy on the eye, simple to navigate as well as containing all the functionality needed.

Visit the site

You can visit the site here and create a poll yourself. As I said in my post about wedeliver as a designer and developer it’s really important to do personal projects as well as freelance work you learn so much more building small applications in your own time.

Get started with jQuery Tools

Ashley — Thu, 20 May 2010 13:55:59 +0000

It’s so easy to go on the hunt for a plugin for a project and end up with multiple plugins all doing different things maintained and managed by separate developers, but wait there’s a common solution to this problem with jQuery Tools. jQuery Tools packages up some commonly used functions which are relatively easy to manipulate and use in any project.

What’s in the Package

jQuery Tools puts together some of the key user interface components in an easy to use package. They even make it easy to get started by including the latest version of jQuery minified alongside the Tools plugin all in one link, and you can hot-link to their CDN link so you don’t need to even host the plugin code.

20 Complete scripts to download

Ashley — Wed, 07 Apr 2010 22:01:20 +0000

I’ve put together a nice little collection of scripts over the past year or so, and have decided as it’s approaching summer in the UK (sorry winter in Australia!) to do a download bundle of 20 assorted scripts where you can get the lot in one click for free! Although donations are also much appreciated. Check out the list below for all the details of the package. This collection is based on a variety of different techniques, from CSS, PHP jQuery to MySQL.

What’s in the bundle?

jQuery Drag & Drop

Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo
jQuery Delete

Delete items using PHP jQuery using an AJAX request demo
PHP jQuery and MySQL Autosuggest

A powerful autosuggest script that searches a MySQL database to return you result demo
jQuery & PHP username checker

Checks the database to see if a chosen username exists in the database and returns true or false demo
CSS3 Buttons

Styling elegant buttons using CSS3 demo
Feedburner Stats

Using PHP and CURL to get your feedburner subscriber count demo
jQuery & PHP username checker

Checks the database to see if a chosen username exists in the database and returns true or false demo
jQuery image Zoom

create a simple gallery with a hover image effect demo
jQuery PHP & MySQL inline editing

Edit page content directly in the browser inline using jQuery AJAX requests demo
jQuery Gallery

Animated jQuery gallery with title and description demo
Highlighting form inputs

Highlight any input field using JavaScript demo
jQuery JSON & PHP

Create a simple product gallery using JSONP PHP and MySQL demo
jQuery Tabs

Simple tabs rendered using jQuery demo
jQuery XML

build a product gallery parsing XML using jQuery demo
jTruncate

Using the jTruncate plugin to truncate text with a ‘more’ link demo
PHP Page scrape

Scrape page contents using PHP and CURL demo
AJAX Check

Check to see if a normal GET or POST request was made or if an AJAX request was made demo
PHP Pagination

A useful and raw PHP pagination script that could be adapted in to a class demo
jQuery Sliding Menu

jQuery drop down slide in / out menu inspired by 9rules.com demo
jQuery Tooltips

An experimentation into building jQuery tooltips with AJAX requests, images etc demo

Building a fancy jQuery header feature

Ashley — Mon, 05 Apr 2010 06:30:59 +0000

I’ve recently been working on a project where a client came to me with an idea to create a feature on their homepage which shows three sections of dynamic content, this lead me to think about writing a tutorial on how to create a jQuery feature such as this. I remember a few years back seeing a similar technique on a website but back then I had no idea how to create such a thing. You can check out the demo here.the photo’s used in the demo are via flickr and are credited to Floridapfe an amazing photographer from South Korea.

The JavaScript

This might not be the best way to structure the JavaScript and I’m sure you hard core coders will pick up on this however one of the purposes of this tutorial is to show newcomers to jQuery exactly how flexible and easy it is to create something that on the outside looks quick complex. The code used in this tutorial is relatively simple to understand.

we start with out document ready function, you should be familiar with this by now. If you’re not you can read about it here. We now have an event handler, in our case its a ‘hover’ event meaning that when our cursor hovers over the div ‘.holder’ it will execute the function. When our mouse exits the div ‘.holder’ it will run the handler out function, which in our case will revert the div back to how it was originally.

You can see that we’re using ‘(this)’ to reference our element. this is used to specify the element that the mouse is hovered over at that moment as we’re specifying the class holder, if we didn’t use ‘(this)’ regardless of which element we hovered over all of them would animate, so ‘(this)’ specifys that specific element to animate.

Lets look at what happens when we hover over one of the divs ‘.holder’.

For the element our mouse is over we remove the class ‘notactive’
We then animate the width of the divs with a class of ‘notactive’ this is to compensate for the expanding width of the selected element as you’ll see in the next step
Now we increase the width of the current ‘.holder’ div to 380px
Next we slide the image up to make way for the text.
We then change the background color of the span header to black to highlight it.
And finally over 300 milliseconds fade in the ‘.text’ div.

Because the animations aren’t chained they happen all at the same time.

When you’re mouse leaves the div the function below it is run to revert the contents back to it’s original position.



$(document).ready(function(){

	 $('.holder').hover(
		function () {
		$(this).removeClass('.notactive');
		$('.notactive').stop().animate({'width':'290px'},400);
                $(this).stop().animate({'width':'380px'},400);
        $(this).find('img').stop().animate({'top':'-165px'},400);
		$(this).find('span').css({'background-color':'#000'});
		$(this).find('.text').fadeIn(300);
      },
	    function () {
		  	$('.notactive').stop().animate({'width':'320px'},400);
		  	$(this).addClass('.notactive');
			$(this).find('.text').hide();
       	                $(this).find('img').stop().animate({'top':'0px'},500);
		        $(this).stop().animate({'width':'320px'},400);
			$(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); 

      });

});

The HTML


<div class="main">
  <div class="holder notactive"> <img class="image" src="http://farm3.static.flickr.com/2784/4237135170_61a9938781.jpg" height=""/> <span>Image One</span>
    <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="holder notactive"> <img class="image" src="http://farm3.static.flickr.com/2599/4166210326_06d91ce72a.jpg"/> <span>Image Two</span>
    <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="holder notactive"> <img class="image" src="http://farm3.static.flickr.com/2443/4060303038_a630262185.jpg"/> <span>Image Three</span>
    <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="clear"></div>
</div>

The CSS



.holder {
	overflow:hidden;
	width:320px;
	height:333px;
	float:left;
	position:relative;
	background-color:#000;
	margin-right:1px;
}
.holder .image {
	position:absolute;
	left:-100px;
}
.holder span {
	background-color:#333;
	font-size:27px;
	font-family:Arial, Helvetica, sans-serif;
	color:#dedede;
	font-weight:700;
	padding:4px;
	position:absolute;
	top:120px;
	left:4px;
}
.holder .text {
	padding:20px;
	display:none;
	font-family:Arial, Helvetica, sans-serif;
	line-height:26px;
	position:absolute;
	top:180px;
	font-size:16px;
	color:#fff;
	width:340px;
}
.clear {
	clear:both;
}
.main {
	width:1000px;
	height:333px;
	margin:0 auto;
	overflow:hidden;
}

Simple CSS Navigation

Ashley — Sun, 04 Apr 2010 18:23:51 +0000

Navigation is a key feature on any site and for a front end web designer or developer there’s nothing more important than creating the perfect navigation menu. Today I’m going to run through how to create a pure CSS navigation strip using basic HTML and CSS. This will give you a basic understanding of how to put together a CSS menu that works efficiently. This tutorial is aimed at beginners who are learning CSS.

The HTML

The HTML used to generate our menu are simple list items. within a div container.




	Home
	PHP Tutorials
	Tutorials
	Design
	jQuery
	APIs
	Mobile
	Facebook
    Analytics
    Web Tools
    Frameworks

The CSS

Each list item element is floated left in order to get the menu to display horizontally.

#cont {
	border-bottom: solid 1px #994400;
	background: #ff7200;
	margin: 0 auto 0 auto;
}

#nav {
	list-style: none;
	background: #ff7200;
	height: 37px;
	width: 800px;
	margin:0 auto;
	padding:0px;
	border-left: solid 1px #ff9141;
}

#nav li {
	float: left;
	border-right: solid 1px #ca5600;
	height: 37px;
}

	#nav li.firstitem {
		border-left: solid 1px #ca5600;
	}

#nav li a, #nav li a:link, #nav li a:visited {
	text-decoration: none;
	display: block;
	float: left;
	height: 37px;
	color: #fff;
	line-height: 37px;
	padding: 0 10px 0 10px;
	border-right: solid 1px #ff9141;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	outline: none;
}

#nav li a:hover, #nav li a:focus, #nav li a:active {
	background-color: #c95500;
	color: #fff;
}

jQuery growl notification plugin

Ashley — Sun, 21 Mar 2010 00:31:10 +0000

Last week I signed up Gravity a new site setup by a few guys that used to work at MySpace. As i was using the site I noticed these great little notifications popping up in my browser, Mac users will be familiar with this as they work in the same way as Growl notifications.
I thought it was interesting that this technique of displaying live information to users could be presented in this way, so i went on the hunt for a similar jQuery plugin and found a number of results however the one that caught my eye was the jQuery Notice plugin by Tim Benniks.

The JavaScript

Below is the JavaScript that is used in the demo this plugin simply extends the jQuery framework, allowing you to activate a message box by calling the function ‘noticeAdd()’.

One interesting feature of this plugin is that it allows you to append a CSS class to the popup notice which can then be styled.

For example with the error message I’m appending the .error class and in the CSS i’m just adding a background color.


	$(document).ready(function()
	{
			jQuery.noticeAdd({
				text: 'This is a simple notification using the jQuery notice plugin. Click the X above to remove this notice.',
				stay: true
			});

		$('.add').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a notification that you have to remove',
				stay: true
			});
		});

		$('.add2').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a notification that will remove itself',
				stay: false
			});
		});

			$('.add3').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is an error notification!',
				stay: false,
				type: 'error'
			});
		});

					$('.add4').click(function()
		{
			jQuery.noticeAdd({
				text: 'This is a success notification!',
				stay: false,
				type: 'success'
			});
		});

		$('.remove').click(function()
		{
			jQuery.noticeRemove($('.notice-item-wrapper'), 400);
		});
	});

The HTML


  Click here to see a notification that you have to remove
  Click here to see a notification that does not stay
  Error Notification
  Success Notification
  Remove all active notifications

Papermashup.com » CSS

jQuery form titles

The JavaScript

The HTML

Using CufÃ³n font replacement

Generate the font

Include the JavaScript

Specify your elements

Building an animated 3D poll

The Code

Build a jQuery content feature like MailChimp

The Code

The HTML

The CSS

easypoll a side project

The Design

Visit the site

Get started with jQuery Tools

What’s in the Package

20 Complete scripts to download

What’s in the bundle?

jQuery Drag & Drop

jQuery Delete

PHP jQuery and MySQL Autosuggest

jQuery & PHP username checker

CSS3 Buttons

Feedburner Stats

jQuery & PHP username checker

jQuery image Zoom

jQuery PHP & MySQL inline editing

jQuery Gallery

Highlighting form inputs

jQuery JSON & PHP

jQuery Tabs

jQuery XML

jTruncate

PHP Page scrape

AJAX Check

PHP Pagination

jQuery Sliding Menu

jQuery Tooltips

Building a fancy jQuery header feature

The JavaScript

The HTML

The CSS

Simple CSS Navigation

The HTML

The CSS

jQuery growl notification plugin

The JavaScript

The HTML