jQuery divGrow plugin updated – 1.3.0

Plugin has been updated. No longer need to provide the final height value using the rel= attribute, it is calculated. Also now generates W3C valid markup.

You can also specify whether or not to show the brackets (“[…]”) before the ‘more’ button using the option ‘showBrackets’.

Download from here -> http://plugins.jquery.com/content/divgrow-130

Plugin page – http://simonhibbard.wordpress.com/2010/06/02/jquery-based-div-grow-shrink/

Using jQuery .animate() to spice up a simple page

Here is an example of using jQuery .animate to add a bit of interest to otherwise basic pages on this site -> http://www.acplanningsolutions.co.uk/case-studies.aspx

One effect is used to fade in/out the background colours of the menu items creating a nice ‘trailing’ effect as you hover over them (see below).

The other effect is to animate in the images and text, also if you click on “Conservation Area – Residential” you will notice the page frame grows to fit the new image and the images change on a timer.

Just thought I would share this as an example of what can be done with a small amount of jQuery code 🙂

 

 

Web site development top tip – always start with a CSS reset

Always start a web site with a CSS reset. This sets all the elements CSS properties and avoids the inconsistency of various browsers default CSS properties for elements. Giving you a consistent starting point for building a cross browser compatible web site.

There are many to be found but generally very similar. Here is the one I use and has served its purpose perfectly well.


/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset{
border:0;
}
img
{
border:none;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
.clear
{
clear:both;
}
.bold-text
{
font-weight:bold;
}
.hide
{
display:none;
}
html,body
{
height: 100%;
}
:focus {outline:none;}
/* End CSS Reset */

jQuery vScroll – Simple animated vertical content scroller supporting varying heights

This plugin turns a container with sub containers into a scrolling window with previous and next buttons, the content can be anything and the heights of these can vary as needed. The plugin is very small (minified version just over 500 bytes).

A demo of this being used on a live site I developed can be found here where it is used to scroll the news content: http://waterwell.co.uk/news.aspx

To use it simply create a container element and a previous and next button (these can be any html elements), then apply this plugin to the container element specifiying the height you want the container to be.

All sub containers will become scrollable elements which can be accessed via the previous and next buttons.
A demo can be found here: http://simon.tpdserver2.co.uk/jquery/vscroll/demo/

How-to:

1) Basic example html markup, 2 buttons and a container with sub containers:

<input type=”button” value=”Prev” id=”prevButton” />
<input type=”button” value=”Next” id=”nextButton” />

<div style=”height:400px” id=”demo2″>

<div>some content</div>

<div>some more content</div>

<div>some other content</div>

<div>

2) Include the jQuery files (I use Google CDN for jQuery) and apply the plugin to the container:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

<script src="js/jquery.vscroll-1.2.0.min.js" type="text/javascript"></script>

<script type=”text/javascript”>
$().ready(function () {
$(‘#demo2’).vScroll({ speed: 500, height: 300, upID: “#prevButton-demo2”, downID: “#nextButton-demo2”, cycle: true });
});

</script>

Plugin can be downloaded from here:

http://plugins.jquery.com/content/vscroll-121

Plugin options:

speed – how fast the scroll animation is (default = 500)

height – height of the container element (you must include this from V1.2.0 onwards otherwise the container will default to 300px)

upID – id of the element used to trigger the up animation (default = #up-arrow)

downID – id of the element used to trigger the down animation (default = #bottom-arrow)

cycle – Whether or not to scroll back to the first item if the next button is clicked on the last item (default = true)

jQuery popBox – a textarea popup extension for small text boxes

This plugin provides a simple to use popup textarea extension for textboxes.

If you have ever come accross the situation where you have a bunch of text boxes that you want the user to fill in, for example in the back admin system of a site, but it is annoying for the user to try and type in text in a small box and you do not want to launch a full blow text editor, this plugin will automatically popup a textarea for text input.

A perfect addition for backend admin systems. Simple, effective and fast.

This plugin can be applied to a textbox or textarea (see notes on textarea usage). Basically if the user clicks on a textbox which has popBox applied to it, a nice modal popup box will appear with the textarea selected for the user to enter their text, if they click outside of the area or on the ‘done’ button it will dissapear and the text will be inserted into the initiating textbox.

The other cool thing is the user can tab into a textbox, the popup will appear with the cursor set inside it, they can then continue to type, hit tab and be taken back out and continue to tab to the next textbox – similiar to tabbing through a spreadsheet.

All the styling is done in CSS, no images, the button is also CSS. Rounded corners will degrade properly in IE. There is no animation or clever tricks as I wanted it to be fast, I have a page with rows of textboxes that this is applied to and it needs to be quick and responsive. Future additions may include animation, styling options etc. It comes with CSS which can be modified as you like.

Hitting the ‘Escape Key’ will back out any changes you make and cancel the operation.


 

jQuery plugin page: http://plugins.jquery.com/project/popBox

A demo can be found here: http://simon.tpdserver2.co.uk/jquery/popBox/demo/

Usage is very simple.

1. Include jQuery (I use the Google CDN)

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

2. Inlcude the popBox.js or the minified version popbox.min.js and the popbox.css files

<script src=”js/popBox/popBox1.2.1.min.js” type=”text/javascript”></script>
<link href=”js/popBox/popBox1.2.1.css” rel=”stylesheet” type=”text/css” />

3. Apply to your textbox:

$(document).ready(function () {
$(‘#input-box’).popBox();
});

Thats it! simple.

Optional arguments are:

height: popup textarea height
width: popup textarea width
newlineString: the newline string to use when copying the text back to the original textbox

Note: As the html textbox (input type=”text”) does not support newline chars this plugin will replace newlines with ‹br›. This can be changed using the options, for example if you want to apply this plugin to an existing textarea (which is small) you can set newlineString to be ‘n’ and it will be preserved.

Options examples:

$(‘#input-box’).popBox({width:500});

$(‘#input-box’).popBox({width:500, newlineString: “n” });

Please note this is a very first release based on my own basic needs. If it proves popular it can easily be expanded with options and settings.