Wordle is a great tool for creating interesting tag clouds. The example below contains a bunch of Lorem ipsum just so that there is some content to feed Wordle. This is followed by a button which creates a Wordle from the content. The jQuery takes the page content and applies it to the text field required by the Wordle service.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery","1");
google.load("jqueryui","1");
</script>
<script>
$(document).ready(function()
{
$('#wordleParam').text($('#mainContent').text());
});
</script>
</head>
<body>
<section id="mainContent">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<!-- The all important wordle button -->
<form action="http://www.wordle.net/advanced" method="POST">
<textarea name="text" id="wordleParam" style="display:none;">
</textarea>
<input type="submit" value="Submit content to Wordle">
</form>
</section>
</body>
</html>
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Tuesday 18 January 2011
Monday 10 January 2011
jQuery Radio Buttons
Happy New Year!
It took me about 20 minutes to work out how to use radio buttons with jQuery. The examples I found were a bit rubbish, so I thought I would share this code with you to save everyone the time.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Radio Buttons</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(function ()
{
$("input[name='radioTest']").change(
function()
{
if($(this).val()=='yes')
{
alert('Yes');
}
else
{
alert('No');
}
});
});
</script>
</head>
<body>
Try this radio button<br />
Yes<input name="radioTest" type="radio" value="yes">
No<input name="radioTest" type="radio" value="no">
</body>
</html>
It took me about 20 minutes to work out how to use radio buttons with jQuery. The examples I found were a bit rubbish, so I thought I would share this code with you to save everyone the time.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Radio Buttons</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(function ()
{
$("input[name='radioTest']").change(
function()
{
if($(this).val()=='yes')
{
alert('Yes');
}
else
{
alert('No');
}
});
});
</script>
</head>
<body>
Try this radio button<br />
Yes<input name="radioTest" type="radio" value="yes">
No<input name="radioTest" type="radio" value="no">
</body>
</html>
Thursday 18 November 2010
jQuery line to reflect h1 in page title
Quite often you want the title tag of your page to be the same as your title. This little jQuery line will do that for you.
$('title').text($('h1:first').text());
$('title').text($('h1:first').text());
Tuesday 9 November 2010
Pixel to em calculator
These days we need to use the most flexible means of sizing elements in our web content. Our websites have to cope with different devices, different resolutions, different user preferences, accessibility, etc...
Step forward em. This can, not only be used for font sizes, but layout too. We are used to sizing elements of our pages using pixels. To be more flexible, and get in the swing of thinking about em instead of pixels, in the early stages we need a converter. Now of course, IE certainly early versions of it need to be covered, if we want our pages to be rendered consistently. For this we should put an * before our properties.
The example below, provides you with a converter and an example of how to use it.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel to em calculator</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage
{
margin:0 auto;
width:30.8em;
*width:30em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
jQuery(function( $ )
{
$("#button").click(function()
{
$('#emlVal').val(parseFloat($('#pixelVal').val()*0.0625).toFixed(2));
$('#emForIEval').val(parseFloat($('#emlVal').val()*1.1).toFixed(2));
});
});
</script>
</head>
<body>
<div id="mainPage">
Pixel value<br /><input type="text" name="pixelVal" id="pixelVal" /><br />
Em value<br /><input type="text" name="emVal" id="emlVal" /><br />
Em for IE value<br /><input type="text" name="emForIEval" id="emForIEval" /><br />
<input type="submit" value="Submit" id="button" />
</div>
</body>
</html>
Step forward em. This can, not only be used for font sizes, but layout too. We are used to sizing elements of our pages using pixels. To be more flexible, and get in the swing of thinking about em instead of pixels, in the early stages we need a converter. Now of course, IE certainly early versions of it need to be covered, if we want our pages to be rendered consistently. For this we should put an * before our properties.
The example below, provides you with a converter and an example of how to use it.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel to em calculator</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage
{
margin:0 auto;
width:30.8em;
*width:30em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
jQuery(function( $ )
{
$("#button").click(function()
{
$('#emlVal').val(parseFloat($('#pixelVal').val()*0.0625).toFixed(2));
$('#emForIEval').val(parseFloat($('#emlVal').val()*1.1).toFixed(2));
});
});
</script>
</head>
<body>
<div id="mainPage">
Pixel value<br /><input type="text" name="pixelVal" id="pixelVal" /><br />
Em value<br /><input type="text" name="emVal" id="emlVal" /><br />
Em for IE value<br /><input type="text" name="emForIEval" id="emForIEval" /><br />
<input type="submit" value="Submit" id="button" />
</div>
</body>
</html>
Monday 8 November 2010
jQuery to split your strings into classes
This next example simplifies, but pays reference to some excellent work done on http://daverupert.com/2010/09/lettering-js/. I have taken this idea but used it to create the same class across all the letters in my title. You'll be able to see why when you copy the code into a file of your own. Essentially , in this case, I have put boxes around each letter to give you an idea as to what you can do.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Splitting Letters</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.spanTheChars = function()
{
var returnString = '';
$(this.text().split('')).each(function()
{
returnString += '<span class="chars">'+this+'</span>';
});
$(this).empty().append(returnString);
}
jQuery(function( $ )
{
$('h1').spanTheChars();
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
h1
{
text-align:center;
font-size:2em;
text-transform:uppercase;
color:#FFFFFF;
}
.chars
{
display:block;
float:left;
width:2.8em;
min-height:2em;
background:#5CCCCC;
margin:0.2em;
padding-top:1em;
}
</style>
</head>
<body>
<h1>Split Title</h1>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Splitting Letters</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.spanTheChars = function()
{
var returnString = '';
$(this.text().split('')).each(function()
{
returnString += '<span class="chars">'+this+'</span>';
});
$(this).empty().append(returnString);
}
jQuery(function( $ )
{
$('h1').spanTheChars();
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
h1
{
text-align:center;
font-size:2em;
text-transform:uppercase;
color:#FFFFFF;
}
.chars
{
display:block;
float:left;
width:2.8em;
min-height:2em;
background:#5CCCCC;
margin:0.2em;
padding-top:1em;
}
</style>
</head>
<body>
<h1>Split Title</h1>
</body>
</html>
Wednesday 3 November 2010
jQuery Google Feed Plugin
This plugin provides a nice easy way for developers to implement the Google Feeds API in their site. In the example below, I've also added some ugly style elements to help show how the appearance can be manipulated.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Google Feed Plugin</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#feeds
{
margin:0 auto;
width:80em;
background:#CCCCCC;
}
.gfc-control
{
width:40em;
font-size:1.2em;
}
.gfc-tabsArea
{
background:#FF9200;
}
.gfc-tabHeader.gfc-tabhActive
{
font-weight:bold;
}
.gfc-tabHeader.gfc-tabhInactive
{
font-style:italic;
}
.gfc-resultsbox-visible
{
background:#D3EDFC;
}
.gf-title
{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://jquery.malsup.com/gfeed/jquery.gfeed.js"></script>
<script>
$(document).ready(function()
{
$('a.feed').gFeed(
{
target:'#feeds',
max:3,
tabs:true
});
});
</script>
</head>
<body>
<div id="feeds">
<a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
<a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Google Feed Plugin</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#feeds
{
margin:0 auto;
width:80em;
background:#CCCCCC;
}
.gfc-control
{
width:40em;
font-size:1.2em;
}
.gfc-tabsArea
{
background:#FF9200;
}
.gfc-tabHeader.gfc-tabhActive
{
font-weight:bold;
}
.gfc-tabHeader.gfc-tabhInactive
{
font-style:italic;
}
.gfc-resultsbox-visible
{
background:#D3EDFC;
}
.gf-title
{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://jquery.malsup.com/gfeed/jquery.gfeed.js"></script>
<script>
$(document).ready(function()
{
$('a.feed').gFeed(
{
target:'#feeds',
max:3,
tabs:true
});
});
</script>
</head>
<body>
<div id="feeds">
<a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
<a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>
</body>
</html>
Tuesday 2 November 2010
Three equal height columns using jQuery
I've seen lots of CSS solutions to this. They all seemed a little over the top and unreliable to me. So I decided to write my own solution using jQuery. There may be a better way to go about this using jQuery and I'd love to simplify what I've done, but it does work.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Equal Columns using jQuery</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
margin:0 auto;
width:800px;
font-size:62.5%;
color:#FFFFFF;
}
#column1, #column2, #column3
{
float:left;
padding:10px;
font-size:1.2em;
}
#column1, #column2
{
width:180px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:380px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$.fn.getBiggest = function(param, biggest)
{
if($(param).height() > biggest) return $(param).height();
else return biggest;
}
var currentlyBiggest = 0;
$(document).ready(function()
{
$('div').each(function(index)
{
currentlyBiggest = $(document).getBiggest($(this), currentlyBiggest);
});
$('div').height(currentlyBiggest);
});
</script>
</head>
<body>
<div id="column1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div id="column2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div id="column3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Equal Columns using jQuery</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
margin:0 auto;
width:800px;
font-size:62.5%;
color:#FFFFFF;
}
#column1, #column2, #column3
{
float:left;
padding:10px;
font-size:1.2em;
}
#column1, #column2
{
width:180px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:380px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$.fn.getBiggest = function(param, biggest)
{
if($(param).height() > biggest) return $(param).height();
else return biggest;
}
var currentlyBiggest = 0;
$(document).ready(function()
{
$('div').each(function(index)
{
currentlyBiggest = $(document).getBiggest($(this), currentlyBiggest);
});
$('div').height(currentlyBiggest);
});
</script>
</head>
<body>
<div id="column1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div id="column2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div id="column3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</body>
</html>
Thursday 21 October 2010
Using jQuery corners and simple grids to begin interesting layouts
Here, I have taken techniques from 2 of my previous posts to create a layout. It doesn't look great, but you should be able to see the potential. I have once again, used the jQuery rounded corners plugin at http://jquery.malsup.com/corner/
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
jQuery Text Shadows
The latest text-shadow attributes of course, don't work in IE. There is a way of producing text shadows without using images and that is through a jQuery plugin. You can get the plugin from here http://justinshearer.com/solidShadow/
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>
jQuery rounded corners
Until recently I had been using CSS3 Pie from http://css3pie.com/ to add such things as rounded corners and drop shadows to elements of my pages. I was adding some rounded corners today to boxes on a website. I checked that they would be working in IE and D'oh! No rounded corners. So, I went in search of something which would work and after several tests of different hacks, plugins and scripts, I finally found this one at http://jquery.malsup.com/corner/ which works very well, so I'm sticking with it for now....
See demo.
Below is an example of how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Corners</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myBox
{
background:#FF0000;
width:200px;
margin:10px;
padding:10px;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('.myBox').corner();
});
</script>
</head>
<body>
<div class="myBox">
<h1>Hello World!</h1>
</div>
</body>
</html>
See demo.
Below is an example of how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Corners</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myBox
{
background:#FF0000;
width:200px;
margin:10px;
padding:10px;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('.myBox').corner();
});
</script>
</head>
<body>
<div class="myBox">
<h1>Hello World!</h1>
</div>
</body>
</html>
Monday 18 October 2010
Cross browser rotating divs using jQuery
Below, I have used the jQuery plugin called rotate at http://code.google.com/p/jquery-rotate/
Normally, I like to refer to these online, but for some reason, it didn't work, so you'll have to download it as I have done in the example below. Another unfortunately, is that I had to create a wrapper for IE. The code is still quite small.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#wrapper
{
margin:0 auto;
width:300px;
height:300px;
}
#container
{
width:200px;
height:200px;
background:#FF0000;
color:#FFFFFF;
border:2px solid #000000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.rotate.js"></script>
<script>
$(document).ready(function()
{
$('#container').css('rotate',6.1);
});
</script>
</head>
<body>
<br /><br />
<div id="wrapper">
<div id="container">
<h1>Hello World!</h1>
</div>
</div>
</body>
</HTML>
Normally, I like to refer to these online, but for some reason, it didn't work, so you'll have to download it as I have done in the example below. Another unfortunately, is that I had to create a wrapper for IE. The code is still quite small.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#wrapper
{
margin:0 auto;
width:300px;
height:300px;
}
#container
{
width:200px;
height:200px;
background:#FF0000;
color:#FFFFFF;
border:2px solid #000000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.rotate.js"></script>
<script>
$(document).ready(function()
{
$('#container').css('rotate',6.1);
});
</script>
</head>
<body>
<br /><br />
<div id="wrapper">
<div id="container">
<h1>Hello World!</h1>
</div>
</div>
</body>
</HTML>
Tuesday 12 October 2010
Put external web content into your page using jQuery and PHP
I looked into using the jQuery .load and .get methods to do this, but it only seemed to work with content on my server. I knew that PHP had a really good function called file_get_contents, so I thought, I'll use that, but jQuery is still good for putting the contents into your page. Here is an example of how they work together to achieve the goal.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
Monday 11 October 2010
jQuery Functions and Toggle
Below are a few examples of how to create functions in jQuery. Th real beauty lies in the fact that you can create your own library of functions in an external file. You should try and make them as flexible as possible.
See demo.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>jQuery Functions</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myToggleClass
{
background:#FF0000;
font-size:2em;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
/* Functions are declared here */
$.fn.firstWithoutParameters = function()
{
alert('Without parameters');
}
$.fn.secondWithParameters = function(param)
{
alert('With parameter of '+param);
}
$.fn.grow = function()
{
return $(this).css('font-size','2em');
}
$.fn.growSlowly = function()
{
return $(this).animate(
{
fontSize:'2em'
}, 1500 );
}
$.fn.doTheToggle = function()
{
return $(this).toggleClass('myToggleClass');
}
/* Functions are called here */
$(document).ready(function()
{
$('#first').click(function()
{
$(this).firstWithoutParameters();
});
$('#second').click(function()
{
$(this).secondWithParameters('Jimmy');
});
$('#third').click(function()
{
$(this).grow();
});
$('#fourth').click(function()
{
$(this).growSlowly();
});
$('#fifth').click(function()
{
$(this).doTheToggle();
});
});
</script>
</head>
<body>
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
<p id="fourth">fourth</p>
<p id="fifth">fifth</p>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>jQuery Functions</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myToggleClass
{
background:#FF0000;
font-size:2em;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
/* Functions are declared here */
$.fn.firstWithoutParameters = function()
{
alert('Without parameters');
}
$.fn.secondWithParameters = function(param)
{
alert('With parameter of '+param);
}
$.fn.grow = function()
{
return $(this).css('font-size','2em');
}
$.fn.growSlowly = function()
{
return $(this).animate(
{
fontSize:'2em'
}, 1500 );
}
$.fn.doTheToggle = function()
{
return $(this).toggleClass('myToggleClass');
}
/* Functions are called here */
$(document).ready(function()
{
$('#first').click(function()
{
$(this).firstWithoutParameters();
});
$('#second').click(function()
{
$(this).secondWithParameters('Jimmy');
});
$('#third').click(function()
{
$(this).grow();
});
$('#fourth').click(function()
{
$(this).growSlowly();
});
$('#fifth').click(function()
{
$(this).doTheToggle();
});
});
</script>
</head>
<body>
<p id="first">first</p>
<p id="second">second</p>
<p id="third">third</p>
<p id="fourth">fourth</p>
<p id="fifth">fifth</p>
</body>
</html>
Friday 1 October 2010
Send Form information to PHP through jQuery
"Why would I do this?", I hear you ask. The answer is simple, by sending information through jQuery you open yourself up to losing browser refresh and a better UI. There are 2 files in this example:
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.
See demo.
Let's start with the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</title>
<style type="text/css">
html, body
{
font-family:sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#sendTheData').click(function()
{
$.post("sendThedata.php",
{
myValue:$('#lname').val()
}, function(data)
{
alert(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>
Now for the PHP file:
<?php
echo 'Got '.$_POST['myValue'];
?>
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.
See demo.
Let's start with the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</title>
<style type="text/css">
html, body
{
font-family:sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#sendTheData').click(function()
{
$.post("sendThedata.php",
{
myValue:$('#lname').val()
}, function(data)
{
alert(data);
});
return false;
});
});
</script>
</head>
<body>
<form>
<input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>
Now for the PHP file:
<?php
echo 'Got '.$_POST['myValue'];
?>
Wednesday 29 September 2010
Using jQuery Dialog as a lightbox
Your first thought may be "Why?".
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.
Also, like many of my examples, the code is now easily transferable.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.
Also, like many of my examples, the code is now easily transferable.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>
Tuesday 28 September 2010
Panel Slider
The example below uses the excellent Coda-Slider by Niall Doherty at http://www.ndoherty.biz/tag/coda-slider/
All I have done is simplified the implementation, making it easy to begin using the code.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{
overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
All I have done is simplified the implementation, making it easy to begin using the code.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{
overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Image Slideshow
Here is a simple implementation of an image slideshow using the jQuery application at http://www.serie3.info/s3slider/
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</body>
</html>
Thursday 23 September 2010
Prettier scrollbars
This demo offers a starting point to having prettier scrollbars for your web page. I am using jScrollPane at
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
Friday 17 September 2010
jQuery Pagination
This is a nice, simplified version of a jQuery paginator plugin found at http://plugins.jquery.com/project/jquery-pagination
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.
There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</div>
</body>
</html>
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.
There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</div>
</body>
</html>
Wednesday 15 September 2010
Drop down menu using jQuery
This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)