Papermashup.com » Tutorials

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' });

MySpace Open Search API

Ashley — Sun, 04 Jul 2010 20:47:21 +0000

The MySpace Search API allows you to search MySpace for user, videos, images, and music. With an individual feed for each search item. It is designed to function like a search on the MySpace website and to have a response format that is compatible with OpenSocial. The API returns either JSON or XML and in this tutorial i’ll be using PHP and CURL to parse an XML response to build a simple MySpace search page.

Application use

Open Search could be used to mash data using the MySpace API with other applications, for example automatically pulling in a users MySpace profile image, name, location and URL. Building a Facebook application that recommends bands to you on MySpace.

The Code

Just like the Twitter search API tutorial that I did a last year we’re using the CURL function in PHP5 to allow us to parse the XML file and format the data that we get back.

Here’s how it works

Any search that we make will send GET variables through the page URL therefore making it easy to see the data that we’re sending to the API generally you will see search pages use this method as we’re not transmitting private data such as usernames or passwords.

The search data is stored in the variable $q if nothing is searched for initially we run a default search mainly for demo purposes with the search term ‘Coldplay’. You’ll notice that the first result on the left is highlighted green, this is because it is the official profile for the Coldplay. you can see that we construct the URL and store it in the variable $search. There are many different variables that can be passed to the API. It’s worth pointing out that we’re using the People search call. You can see all the values that can be passed in here

Here is an example XML request: http://api.myspace.com/opensearch/people?searchTerms=ferrari&format=xml


//Search API Script

$q=$_GET['q'];

if($_GET['q']==''){

$q = 'coldplay';

}

if($_GET['pics']==1){

$pics[0] = '&hasPhoto=on';
$pics[1] = 'checked';

}

if(!empty($_GET['location'])){

$pics[0] = '&location='.urlencode($_GET['location']).'';

}

$search = "http://api.myspace.com/opensearch/people?searchTerms=".urlencode($q)."&format=xml".$pics[0]."";

$cu = curl_init();

curl_setopt($cu, CURLOPT_URL, $search);
curl_setopt($cu, CURLOPT_RETURNTRANSFER, TRUE);
$result = curl_exec($cu);
$search_res = new SimpleXMLElement($result);

echo "".$search_res->totalResults." MySpace results for '".$q."'";

// Echo the Search Data

foreach ($search_res->entry as $user) {

$officialprofile = null;

if($user->isOfficial==1){

$officialprofile = 'official';

}

echo "profileUrl."\" target=\"_blank\">thumbnailUrl."\" title=\"".$user->displayName."\" />";
echo "".$user->displayName."
 ".$user->location."
Visit ".$officialprofile." profile";

}

curl_close($cu);



  Search MySpace 
 Location 
  Only show users with profile pics  />

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.

Using jQuery Arrays

Ashley — Fri, 21 May 2010 22:37:18 +0000

I was recently in a situation where I needed to count a number of list items and pass the values to a form, I got around this problem by using JavaScript arrays, looping through the list items and picking up one of the attributes. I’ve created a demo page to show an example of this here. Lets run through the code. We start with our dom ready function which has two click functions one function toggles a class which is either added or removed from a checkbox that is clicked and the second function is triggered when you click the submit button, this function loops through each element that has the ‘selected’ class then pushes the value into the array.

The Code

$(document).ready(function() {

    $("input").click(function () {

		$(this).toggleClass('selected');

      });

	// on submit check selected class for a value
    $(".submit").click(function () {

	var itemsarray = [];

      $("#list li .selected").each(function () {

       var items = $(this).attr('value');
	   itemsarray.push(items);

      });

	  // this is where we could process the array or POST it with AJAX
	  alert(itemsarray);

	});

});

The HTML

  
 Advertising
 Art
 Automotive
 Business
 Celebrity
 Comedian
 Education
 Entertainment
 Family
 Fashion
 Film



    Submit

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;
}

Parse XML with jQuery

Ashley — Tue, 16 Mar 2010 11:15:37 +0000

I recently ran through the technique of parsing JSON with jQuery and thought i’d pick this up and show you how to parse XML. It’s pretty much the same although the big difference with using XML is that this won’t work for xml files that don’t sit outside of your domain as we’re making a standard AJAX request and you can’t make cross domain ajax request unless you’re using JSONP, more of which can be found here.

The XML

Here’s our XML code, and for the purpose of the demo i’ve saved it as books.xml. You can see that we have an XML node called ‘book’ these help to structure the xml file elements. You will see that each book has a title, description and date. You could for instance add an image tag or anything for that matter.



  
    My Cool Book Title
    The my cool book is possibly the best cool book in that any developer could use to be a great web designer.
    12/1/2010
  
  
    Another PHP book
    Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.
    4/1/2010
  
  
    jQuery Techniques
    jQuery techniques runs you through real life examples of jQuery from beginner to expert
    6/2/2010
  
  
    MySQL Database Book
    Brush up your knowledge with the best MySQL database book on the market.
    14/2/2010

The JavaScript

The first thing we need to do in order to parse our XML file is to make an AJAX request to get the XML file, The XML file has to sit on the same domain as the JavaScript below because we can’t do cross domain AJAX requests.

IMPORTANT. Because of the nature of JavaScript you can’t make a cross domain AJAX request, this can only be achieved by using JSONP

Once we have the XML file we need to parse it and get the data that we need. The way we do this is by using the .find() function. By using this we can specify each book node and loop through them to get the data. We then append the data in to the .main div.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

    $('#load').fadeOut();

    $(xml).find("Book").each(function () {

        $(".main").append('' + $(this).find("Title").text() + '
' + $(this).find("Description").text() + '
Published ' + $(this).find("Date").text() + '');
        $(".book").fadeIn(1000);

    });

}

The HTML

The contents of the XML file will be injected into the .main div. Once the XML data is parsed the loading gif is faded out.

Papermashup.com » Tutorials

jQuery form titles

The JavaScript

The HTML

Using CufÃ³n font replacement

Generate the font

Include the JavaScript

Specify your elements

MySpace Open Search API

Application use

The Code

Here’s how it works

".$search_res->totalResults." MySpace results for '".$q."'

Building an animated 3D poll

The Code

Build a jQuery content feature like MailChimp

The Code

The HTML

The CSS

Using jQuery Arrays

The Code

The HTML

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

Parse XML with jQuery

The XML

The JavaScript

The HTML