Archive for the ‘HTML’ Category

Sliding Div Elements. A Full Example Follow-Up

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 »

CSS manipulation with jQuery – sliding div elements

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:

  1. Firstly th script will wait for the document to be ready (loaded)
  2. It will then slide div1 up slowly
  3. 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 »

Javascript menus – powered by underordered lists

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 »

jQuery Ajax call and result XML parsing

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 »

Dropshadows on html elements

24 October, 2006

A great article put together by the a list apart team – I got it up and running very quickly and have been impressed with the results.

http://alistapart.com/articles/cssdropshadows

Posted in CSS, HTML, Links | 1 Comment »

Using CSS to place a gradient in the background of an element

29 September, 2006

Here’s some simple CSS to create a gradient colour in the background of a form element:

filter:progid:DXImageTransform.Microsoft.Gradient
(endColorstr=’#cccccc’, startColorstr=’#FFFFFF’, gradientType=’0′);

I.e.

#Content
{
float: right;
width: 768px;
filter:progid:DXImageTransform.Microsoft.Gradient
(endColorstr=’#cccccc’, startColorstr=’#FFFFFF’, gradientType=’0′);
height:323px;
}

Posted in CSS, HTML | 4 Comments »

Using CSS to achieve tabular layout

25 September, 2006

I am told I shouldn’t use tables for anything but tabular data. I’m looking for a way to correctly align form fields using DIVs.

With tables, I would do the following:

<TABLE>
<FORM>
<TR><TD>Field 1:</TD><TD><input type=text></TD></TR>
<TR><TD>Field 2:</TD><TD><input type=text></TD></TR>
</TABLE>
</FORM>

This can be built something like this:

<div>
<label for=”field1″>Field 1:</label>
<input id=”field1″ type=”text”>
</div>
<div>
<label for=”field2″>Field 2:</label>
<input id=”field2″ type=”text”>
</div>

And this is an example CSS I’ve used:

label {
width: 35%;
float: left;
clear: left;
text-align: right;
white-space: nowrap;
min-width: 5em;
}

Posted in Best Practice, CSS, HTML | Leave a Comment »

Wrap text round video

21 September, 2006

There are a few way you can wrap text around the video using CSS. You can apply a class to your video or use a div tag for the video’s container. Then apply a float property in your style sheet.

Inline Style:

<embed src="http://yoursite.com/yourvideo.mov" width="480" height="376" pluginspage="http://www.apple.com/quicktime/download/" autoplay="false" CLASS="CLASSNAME"></embed>

I find that wrapping my video in a div tag usally works better in all browsers:

<div class="classname">
<embed src="http://yoursite.com/yourvideo.mov" width="480" height="376" pluginspage="http://www.apple.com/quicktime/download/" autoplay="false"></embed>
</div>

If you apply a float property of left in you style sheet the text will wrap around your video on the right side:

.classname { float:left; }

Posted in CSS, HTML | 4 Comments »

Center Align a Main Content div in All Browsers

17 September, 2006

I often see people posting on CSS discussion lists to ask how to centre a div. It’s actually very simple, although you need to use a few hacks for unruly browsers.

In this example I have set the widths to fit nicely in a 800×600 browser window.


body {
text-align: center;
min-width: 755px;
}

#main{
margin:0 auto;
width:755px;
text-align: left;
}


To centre the div, simply set its width and then use margin auto on the right and left hand sides. Unfortunately this doesn’t work in IE. However luckily for us, IE also misinterprets text-align: center. Applying this to the body centres the div in IE. However it also centres the body text in all the other browsers as well. To get round this you need to use text-align: left; on the div that you’re centering.

This gets IE up to scratch. However this is the step I always forget. In Mozilla, if you reduce the size of the browser window, half of your centred div hangs off the left of the page. To prevent this, just set a min-width on the body tag.

Posted in CSS, HTML | 1 Comment »

CSS Layout – The ‘One True Layout’

17 September, 2006

I had recently been using Alex Robinson’s 3-column CSS technique called “ordered columns, float-margin/float-margin” for some website designs.

But he has superceded that with the One True Layout. OTL allows you to keep your content sections in a logical sequence, a bonus when making chnages to complex pages.

Check out the examples for an idea of what you can achieve. In particular, look at the Nested Rounded Corners example, something I’m sure will come in handy one day!

Posted in CSS, HTML | Leave a Comment »