Andy Jarrett : XHTML HTML CSS

My blog has moved

Please update your bookmarks and feeds for my site.

I now have a Mango Blog at:

http://www.andyjarrett.com/blog

Feed URL: http://feeds.feedburner.com/andyjarrett

Comments (0) | Print | Send | 1196 Views

Creating a new DOM element with jQuery

I've been using jQuery for a while now keep meaning to blog about the little bits I use often. One is creating a DIV object on the fly and loading content in to it.

view plain print about

1$(document).ready(function(){
2    // Your URL of the page to be loaded
3    u = "/index.cfm?event=contactme";
4
5    // We're creating a div element to load the URL contents into
6    div = $("<div>");
7
8    // When the element is displayed at first we could leave it blank
9    // or a loading image, or in this case the wording loading......
10    div.html("Loading......");
11
12    // We now load our file and inject it into the DOM.
13    div.load(u);
14
15    // With the DIV getting its content we need to put the DOM on the page
16    // and in to the body. $.prepend will put our content at the top of
17    // of the <body>
18    $("body").prepend(div);
19})

Instead of having "Loading...." being displayed you can delay showing the content of the DIV until loading is completed.

view plain print about

1// Your URL of the page to be loaded
2    u = "/index.cfm?event=contactme";
3
4    // We're creating a div element to load the URL contents into
5    div = $("<div>");
6
7    // We now load our file and inject it into the DOM.
8    div.load(u);
9
10    // By default we're going to hide the DIV until the content is loaded
11    div.hide();
12
13    // Before the DIV gets its content we need to put the DOM on the page
14    // and in to the body. $.prepend will put our content at the top of
15    // of the <body>. But this will be hid.
16    $("body").prepend(div);
17
18
19    // Now we load the content into the DOM and as a CALLBACK function
20    // we SLIDEDOWN the div. This could be FADEIN or something else.
21    div.load(u, {limit: 25}, function(){
22        div.slideDown();
23    });

Both sets of code will load on document ready. Usually I tie this kind of process to a click event to load in a page dynamically when needed.

Also don't forget you can chain these methods too and cut down on code. Taking the first example it could be written as:

view plain print about

1u = "/index.cfm?event=hermes.contactSeller";
2 div = $("<div>").html("Loading......").load(u);
3 $("body").prepend(div);

Comments (2) | Print | Send | 8171 Views

Minify your Javascript and CSS

I've just came across scriptalizer.com which is well worth sharing with all.

This site takes your multiple CSS files or Javascript files and compresses them into just one file.

So your CSS goes from:

view plain print about

1<link rel="stylesheet" href="/style/longstylesheet.css" type="text/css" />
2<link rel="stylesheet" href="/style/anotherlongstylesheet.css" type="text/css" />

to:

view plain print about

1<link rel="stylesheet" href="/style/scriptalizer.css" type="text/css" />

Or your Javascript from:

view plain print about

1<script type="text/javascript" src="/js/jquery/jquery.js"></script>
2<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
3<script type="text/javascript" src="/js/myOwnScriptFile.js"></script>

to this:

view plain print about

1<script type="text/javascript" src="/js/scriptalizer.js" ></script>

Comments (6) | Print | Send | 1594 Views

Eclipse local help system

Update: This appears to be on a different port for others. As Jax pointed out you can go: Eclipse, select Help -> Help contents to get there as well :o)

I was just going into some help files of Aptana when I came across the local address for the Eclipse Help system at: http://127.0.0.1:58041/help/index.jsp

In there was a wealth of information I just didn't know was on my hard drive ... though I suppose it depends on what plug-in's you've got installed but for me I had:

references and getting started tips for Subclipse, plus ColdFusion Documentation, Using CF extensions for Flex builder (including details of RDS support), Java development user guide, plug-in guide and loads more. The Aptana section is indepth as well with documentation covering:

Ajax Libraries (including Spry 1.5
CSS (elements and properties)
HTML
Javascript (keywords, DOM, core)
and even javascript reference for Adobe AIR(though that seems to actually hit Adobe.com livedoc (which is slicker than the CF ones!))

Check it out

http://127.0.0.1:58041/help/index.jsp

[More]

Comments (2) | Print | Send | 3735 Views

CSS Layout techniques

Anyone who has read my blog for a while will know that I like changing it around. I've tried alot of different CSS techniques over the past few years but when it comes to tried and tested layouts check out Glish.

Layouts covered inclue:

http://www.glish.com/css/

Comments (3) | Print | Send | 4128 Views

Open source CSS template sites

More of a reference than anything else but below is a list of sites that offer FREE, open source, css website templates - and good ones too!

Check out more about these sites and the shake ups that have gone on in the Wikipedia

Comments (5) | Print | Send | 7938 Views

Will the browser apply the CSS rule(s) you want!

If you are a developer and designer, or generally just do a lot of CSS this will be helpful!

http://centricle.com/ref/css/filters/

Comments (0) | Print | Send | 2503 Views

Browser Incompatibility

A friend was asking me about web developing coming from a design background and what limitations you have to face. They had done a lovely design using font X which only for a specific platform and wanted to know why I couldn't put it on the website in the same format. I worded a lengthy (for me) reply about the issue and thought someone else might find it helpful.

In regards to the typeface a particular font will only appear in a readers browser if they have that font installed on their computer. A prime example is Helvetica which is only available to Mac users. To get around this, the best idea is to use common fonts and group them together by similarities across different platforms i.e. Windows, Mac, Linux etc. Because of this restriction you are limited to what fonts you can use for text which is why typeface will appear different.

When developing a website you must remember that though you might have a Mac and your browser is Safari that doesn't mean that you end user(reader) has got the same set-up and that is were lies some restrictions in formatting. Browser incompatibility and display differences really comes from:

Different Browsers
Different Browser Versions
Different Computer Types
Different Screen Sizes
Different Font Sizes

Because of this you really want to make sure you have access to the following browsers on the follow platforms:

Platforms:
Windows, Mac, Linux (though I tend to worry least about Linux)

Browsers: Internet Explorer, version 6,7
FireFox, version 1.5 upwards
Opera, version 8 upwards
Safari, version 2 upwards

Now before anyone says anything about my site not being 100% compatible, I don't really care. Not to be harsh, but I don't have the time to make sure everyone in every format can read this. I presume that if you are reading my site you are a tech head and have access to at least one descent browser/platform combo.

Comments (4) | Print | Send | 2679 Views

Change Link Color Via Javascript

Im playing around with a pure HTML site recently (no server side tech at all) and OMG how akward is the simple stuff. To make my life a little more easier I have been using Dreamweaver's templates which make managing layouts easier especially when you have forgotten a navigation link.

One thing I have been trying to do is change the colour of a selected navigation link. i.e. The navigation links are all blue except for the link to the section you are currently in which is white. I was about to do this with DWMX templates conditional statements, which can get a little messy, and awkard when putting them inline to change the href class atrribute. Doing this with CFMX or PHP is simple and thats what I wanted.

So I took a dynamic(ish) approach to the problem and decided to use Js. Reading in the page name from the window.location.pathname string I change the colour of the text. Incase anyone is interested below is the code I used, you'll note that to do this without a switch or if statement I have used the ID attribute, and made it the same as the html page.

view plain print about

1<html>
2<head>
3<InvalidTag>
4function linkHighlight(){
5    var urlPath = window.location.pathname;
6    var thisPage = urlPath.substring(urlPath.lastIndexOf('/') + 1);
7    var pageName = thisPage.split('.');
8
9    document.getElementById(pageName[0]).style.color = '#FFFFFF';
10}
11</script>
12</head>
13<body>
14<a href="index.htm" id="index">Home</a>
15<a href="products.htm" id="products">Products</a>
16<a href="projects.htm" id="projects">Projects</a>
17<a href="about_us" id="about_us">About Us</a>
18<a href="contact_us.htm" id="contact_us">Contact Us</a>
19</body>
20</html>

[More]

Comments (9) | Print | Send | 15502 Views

Firefox allows refresh in source view

Now and then, mainly when im creating huge forms I get CF to generate HTML.

The process is usually simple

Write code
Switch to browser
Run page
View source
See some formatting issue
Close source view
Go back to editor
Ammend code, then go through steps 2 onwards

But Firefox actually helps your here. Once you have viewed the source you can actually just hit F5 to refresh the view/code. Savin just a little bit of your sanity in the process.

[More]

Comments (5) | Print | Send | 2527 Views