Archive for the ‘jQuery’ Category
19 March, 2007
A while ago I wrote an article showing how you could build a basic sliding div element using the JQuery library. I have had many questions over that post and I have decided to post a full HTML page with the sliding div example.
You will need to download the JQuery library – you can get it from http://www.jQuery.com
If copying and pasting watch the ” characters 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery: Collapsible Menu</title>
<script type="text/javascript" src="js/JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").mouseover(function(){
$("#div2").slideDown('fast');
});
$("#div1").mouseout(function(){
$("#div2").slideUp('fast');
});
$("#div3").mouseover(function(){
$("#div4").slideDown('fast');
});
$("#div3").mouseout(function(){
$("#div4").slideUp('fast');
});
});
</script>
</head>
<body>
<div id="Nav" style="width:200px;">
<div id="div1" style="border: solid 1px silver;">Navigation 1</div>
<div style="border:solid 1px white; height:5px;"></div>
<div id="div2" style="display:none;background-color:pink;">Welcome to the Navigation 1 area </div>
<div id="div3" style="border: solid 1px silver;">Navigation 2</div>
<div id="div4" style="display:none;background-color:pink;">Welcome to the Navigation 2 area </div>
</div>
</body>
</html>
Posted in Development, HTML, Javascript, jQuery | 7 Comments »
19 January, 2007
Please note, I have provided a full example of this in a later post here
I’ve spent a couple of months working with jQuery now and have grown to like it. For a sales pitch recently I used jQuery to put together a few forms and have been impressed by its power.
Here’s a quick example of a sliding div element.
<script>
jQ(document).ready(function(){
$(“#div1″).slideUp(’slow’, function(){
$(“#div2″).slideDown(’slow’);
});
});
</script>
And the HTML:
<html>
<body>
<div id=’div1′>div 1</div>
<div id=’div2′ style=’display:none;’>div 2</div>
</body>
</html>
This will result in div1 sliding up and div2 sliding down into its place on completion of the page load.
The jQuery will execute as follows:
- Firstly th script will wait for the document to be ready (loaded)
- It will then slide div1 up slowly
- Only on completion of div1 sliding up will div2 slide down
As you can see div1 only slides up once the document has loaded and div2 will only slide down once div1 has completed its ’slide up’. This takes all those handcrafted JS time delays out of the code – making things much much nicer
Posted in CSS, Development, HTML, jQuery | 5 Comments »
2 November, 2006
I’ve been working with unordered lists as menus for a while now.
The basic concept is you take most – if not all – of the inherent styling from the <ul> to create a basic one tier menu. The trouble then comes when you want to make the menu open out on hover of a node – this requires javascript. I have been playing with building my own menus using jQuery and the code, frankly, was starting to become a tad messy when I got round to adding effects (‘fx’ in jQuery speak).
I had a quick look round the web and found this beauty from twinhelix. I’ve used it a number of times now and with changes to the stylesheets you can make this menu behave and look exactly as you please. It has built in fade/blind effects and the ability to add images to submenus.
The one key advantage.
Accessibility. If you were to have javscript disabled the menu wouldn’t work but what would happen is the <ul> would just render to the page and the menu would still make perfect sense.
Brilliant.
Posted in Best Practice, CSS, Development, HTML, Links, jQuery | Leave a Comment »
2 November, 2006
I have found jQuery to be one of the most powerful JavaScript libraries out there at the minute. I’ve been working with the base library and a number of plug-ins over the past couple of weeks and have found both the effects and AJAX methods to be both powerful and easy.
Here’s some code that I have used to look up an address. The data is served by an .aspx (.NET) page and I have included an example of the returned XML below.
jQuery code:
//Perform Ajax call – notice the number and postcode – these end up as querystring params and are taken in by AddressFinder.aspx
//’xml’ is an XML document object holding the returned XML
jQ.ajax({ type: “POST”, url: “AddressFinder.aspx”, data: “number=1&postcode=wn58ln”, dataType: “xml”, success: function(xml){
//This simple XPath XML function looks through the returned XML data
//All tags can now be accessed within the loop
var _number = “”;
var _line1 = “”;
var _town = “”;
var _city = “”;
var _country = “”;
//This function will loop for each match on addresses/address
jQ(“/addresses/address”, xml).each(function(){
_number = jQ(“number”, this).text();
_line1 = jQ(“line1″, this).text();
_town = jQ(“town”, this).text();
_city = jQ(“city”, this).text();
_country = jQ(“country”, this).text();
jQ(“#text11″).val(_line1);
jQ(“#text12″).val(_town);
jQ(“#text13″).val(_city);
jQ(“#text14″).val(_country);
});
XML returned from AddressFinder.aspx:
<?xml version=”1.0″ encoding=”utf-8″ ?>
<addresses>
<address>
<number>6</number>
<line1>Almsberry Cresent</line1>
<town>Ashton – in – Makerfield</town>
<city>Wigan</city>
<country>England</country>
</address>
</addresses>
Did you find this demonstration helpful? If so leave me a comment and let me know if there are any other AJAX exmaples you’d like to see here. Thanks.
Posted in AJAX, ASP.NET, HTML, jQuery, xml | 92 Comments »
