Archive

Archive for the ‘WebDev’ Category

Javascript & CSS attributes (Visibility vs Display)

September 8th, 2005 Mark No comments

I’m messing around trying to create a “Daily del.icio.us links” box which is dynamically populated via AJAX & a PHP + Magpie RSS script…

I’m using prototype.js as I’ve mentioned previously as a generic AJAX helper library. I was stumped when Element.show stopped working.. then I realised that it just changes the display: attribute to be null and I was using visibility: hidden..

Apparently the difference between the two is that if an element has display: none set – no space is reserved for it at all, whereas it actually exists and owns space with visibility: hidden..

Also I have learned via google searching that setting display: ” on a div still won’t show it, so I guess I’m going to be patching prototype.js again

Categories: WebDev Tags:

Borders & margin collapsing

September 6th, 2005 Mark No comments

I added a border around my “content div” which holds the blog entries and it made the “content div” lose the gap between itself and the footer

Reminded me of this post I made a while ago on the CSSCreator Forums.

Categories: WebDev Tags:

Textile Quirks

September 6th, 2005 Mark No comments

I’m using Dean Allen’s classTextile.php (well – a bug fixed version available from the “textpattern weblog”:http://textpattern.com/weblog/, but I don’t know if I’m using it wrong as I keep running into niggling issues…

e.g. I type:

I can’t even get it to format this properly!!!!!!!!

I am now using Markdown.php due to Textile quirks which annoy me (crap handling of preformatted text, inability to fully disable Textiles parsing in certain places, etc…)

One Markdown problem I’ve already encountered is lack of strikethrough, as you can see I needed it for this post!

It can be overcome by using the following though:

<span style="text-decoration: line-through;">
Categories: Opinion, WebDev, Website Tags:

Textile Lists

September 5th, 2005 Mark No comments

Due to the way Textile handles lists (at least the Textpattern implementation of it), a list may only be line after line of list items, i.e. you cannot have a paragraph after each bullet point, etc.

I need to look into this further

Categories: Opinion, WebDev, Website Tags:

Event handlers

September 1st, 2005 Mark No comments

[imported from Bloglines]

Interesting article on QuirksMode about problems with some generic methods for adding events to objects…

I’m currently using the behaviour.js script method and I’m not sure if this has already taken things mentioned in the article into consideration… I will have to check it out.

I also use another method for the initial pageload events which I will also need to check.

Categories: WebDev Tags:

prototype.js AJAX library mod

August 26th, 2005 Mark No comments

[imported from Bloglines]

Whilst using the prototype.js AJAX library I have needed a timeout ability on the Request method.. i.e. so if the XMLHTTPRequest hasn’t returned data within X seconds, run a function and kill the request…

I have hacked a quick timeout function onto Prototype.js v1.3.1, you can download it here: prototype_1.3.1+moo_0.1.zip

Usage:
Just as you would use an onLoaded method or whatever, add an onTimeout method… if you don’t know how to do that, I would read the following documentation: Using Prototype 1.3.1

Categories: Internet, WebDev Tags:

prototype.js issues

August 25th, 2005 Mark No comments

[imported from Bloglines]

  • Ajax.Updater doesn’t work when page is served as application/xhtml+xml
  • evalScripts only works with Ajax.Updater
Categories: WebDev Tags:

Debugging AJAX + another Bloglines gripe

August 25th, 2005 Mark No comments

[imported from Bloglines]

I’m playing with AJAX at the moment and found some useful techniques/tools…

Currently I’m serving different formats depending on what browser is being used.

e.g

for browsers which support application/xhtml+xml / XHTML 1.x, they get:

mime = application/xhtml+xml

doc start =

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

for other browsers, they get:
mime = text/html
doc start =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Anyway, I have a javascript which creates a global variable called mimexml so that other parts of the script know how I’ve served the original page (there may be a better way to do this)

I’m using the prototype.js AJAX library and the following routine to update a div:

function showResponse(originalRequest)
{
if (mimexml) {
c =     document.getElementById('ici_ajaxresult');
removeChildNodes(c);
c.appendChild(document.importNode(
originalRequest.responseXML.documentElement.getElementsByTagName('div')[0],
true));
} else {
c =     document.getElementById('ici_ajaxresult');
c.innerHTML =     originalRequest.responseText;
}
}

What I wanted to do was “view source” but of the rendered page, after the javascript had done its stuff… (both in IE and FF)

Two useful tools:

Jennifer Madden’s View Rendered Source (Firefox Extension)

Bill Friedrich’s View Rendered Source (IE Utility)

Bloglines gripe: the editor is really very flakey (adding/editing a blog entry.. formatting stuff, pasting, view source, etc)

Categories: Internet, WebDev Tags:

Web design books

August 24th, 2005 Mark No comments

[imported from Bloglines]

I have just ordered a few books from Amazon:

(in no particular order)

  • “The ZEN of CSS Design: Visual Enlightenment for the Web”Dave Shea; Paperback
  • “Bulletproof Web Design: Creating Flexibility with XHTML and CSS”Dan Cederholm; Paperback
  • The Art of Project Management”Scott Berkun; Paperback
  • “Professional CSS”Christopher Schmitt; Paperback
  • “Web Standards Solutions: The Markup and Style Handbook”Dan Cederholm; Paperback
Categories: WebDev, Website Tags:

Absolute positioning

August 23rd, 2005 Mark No comments

[imported from Bloglines]

Creating a good, standards compliant layout that works across browsers is very difficult.

I was having trouble understanding why absolute positioning wasn’t working relative to a container I had.. you have to set the containers position to relative because the position is calculated using the “nearest positioned ancestor”

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position

Quote:
9.8.4 Absolute positioning

Finally, we consider the effect of absolute positioning. Consider the following CSS declarations for outer and inner:

#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}

#inner { color: blue }

which cause the top of the outer box to be positioned with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example). The top side of the outer box is ’200px’ below the top of the containing block and the left side is ’200px’ from the left side. The child box of outer is flowed normally with respect to its parent.

Categories: WebDev, Website Tags: