Re: [WSG] Javascript web standards was How to send two values to javascript

2007-11-15 Thread Kit Grose

No sweat.

Basically the whole concept of the standards-based web is to build up  
the site in *layers*.


You have the content layer defined in XHTML, often generated through  
server-side scripting languages such as PHP. Without any further  
enhancement, this should display fully readable and useful in a web  
browser.


The next layer is the presentation layer defined in CSS and usually  
also using things like background images. If you stopped developing  
at this point, the website should still be fully functional and useful.


After that comes the behaviour layer (defined in Javascript) that  
introduces things like transitions and animations and AJAX and all  
that good stuff.


The basic concept then, is that the behaviour layer is not written  
until two stages after the content layer. It makes no sense to have  
onclick, onchange and onmouseover events defined in the content layer  
(or in the XHTML) since that's a totally separate layer.


So instead, like external CSS replacing inline 'style' attributes,  
external Javascript files replace the inline event handler attributes  
(onclick etc.).


That means adding, changing or removing a behaviour is all done in  
the behaviour layer and it's never going to adversely affect someone  
who has Javascript turned off.



Hope that helps,

Kit

On 16/11/2007, at 8:33 AM, Michael Horowitz wrote:

I appreciate that.  Just wanted to let people know I solved the  
issue with / quotes.


I would appreciate people explaining more about what the changes  
are in good practices for web standards that people were  
criticizing the tutorials on.  I've ordered one of the recommended  
books but wanted some background in the change in coding  
practices.  As a newbie to javascript I figure I can learn it right  
the first time


Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079



Mark Harris wrote:
With respect to all involved, this is the Web Standards Group, not  
the JavaScript 101 group. Could I suggest, Michael, that you look  
for a more appropriate venue as you continue on your (laudable)  
quest to learn something new? Thanks.


Regards

Mark Harris
Technology Research and Consultancy Services Ltd


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***inline: emailsignature.jpg




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to send two values to javascript

2007-11-14 Thread Kit Grose
The issue is that selects themselves don't have values. You notice  
the value is on the option tag, not the select.


So you can't just get the .value of the element with ID  
'subcategory'; you need to get the value of the currently selected  
item OF that select box. That can be done as an inline declaration,  
but shouldn't be.


The best bet is to get both values within the showSubcategory2  
function. Remove both parameters to the showSubcategory2 function and  
calculate them in the function:


HTML:
select name=subcategory id = subcategory  
onchange=showSubcategory2()

JavaScript:
function showSubcategory2() {
var categorySelect = document.getElementById('category');
var subcategorySelect = document.getElementById('subcategory');

	var category = categorySelect.options 
[categorySelect.selectedIndex].value;	
	var subcategory = subcategorySelect.options 
[subcategorySelect.selectedIndex].value;


xmlHttp = GetXmlHttpObject();

if (xmlHttp == null) {
alert (Browser does not support HTTP Request);
return;
}

var url = getsubcategory2.php;
url = url + ?category2=+category;
url = url + subcategory2=+subcategory;
url = url + sid=+Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open(GET, url, true);
xmlHttp.send(null);
}


...or better yet, remove the onchange attribute from your select tag  
completely and implement the onchange unobtrusively as I detailed  
last time.


Hope that helps,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



[WSG] Re: [css-d] Box Issue

2007-10-30 Thread Kit Grose
The technique you're describing is called faux-columns, where you  
create the column colour for each of the three columns in a one pixel  
high background image repeating vertically on the container DIV.


As for keeping the footer under the columns; set the footer DIV to  
have the CSS property 'clear: both' which means pull the item  
underneath any other floated items.


Hope that helps!

Kit Grose
Frontend Engineer
[EMAIL PROTECTED]

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] Toggle L2 menu items (within WCAG)

2007-10-28 Thread Kit Grose

JonMarc,

It sounds to me like he's referring more to a tree layout than a drop- 
down menu.


If that's the case, it's exactly what I'm researching at the current  
time, so I have a few good links you might like to visit (all use  
JavaScript; CSS can't handle 'clicks' natively with any sort of  
control):


This is quite an old example, but it's worked well for me in the  
past. Completely unobtrusive, but requires an initiation call to a  
specific ID:

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

This one is quite nice, but needs some CSS work:
http://krijnhoetmer.nl/stuff/javascript/list-treeview-menu/

This one is great and very small (looks like it'll be the one I'll be  
using soon):

http://www.silverstripe.com/tree-control/

If you're already using jQuery, this one looks like a good idea (but  
obviously requires the jQuery library):

http://jquery.bassistance.de/treeview/

YUI includes its own but it is by no means SEO compatible. This one  
is an attempt to modify it so it doesn't affect SEO:

http://blog.davglass.com/files/yui/treetest/


Hope that helps.

If anyone has any other good ones (particularly any that benefit from  
prototype.js already being used), I'm very interested to hear!


Cheers,

Kit Grose


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] How to make DHML cover flash

2007-10-17 Thread Kit Grose

Mike,

The drop-down menus drop down over the Flash for me in Safari 2.0.4  
(on OS X v10.4.10), but not at all smoothly: the slide-down animation  
appears to flicker (especially noticeable on the stock service one).  
The flicker problem is an issue that happens a lot for Safari 2 users  
(but is fixable). The issue is apparently fixed in Safari 3.


Check out http://f6design.com/journal/2007/07/11/safari-3-fixes-flash- 
flicker-bug/ (particularly the comment by 'Will' explaining how to  
fix it in Safari 2)


I notice the same very illegible text in Firefox for Mac as Tony did.

Cheers,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] How to make DHML cover flash

2007-10-17 Thread Kit Grose
The reason for using wmode was to fix the problem that existed  
before.   All I wanted was to make sure the dhtml drop down menu  
came down on top of the flash movie not underneath it.




Is that not the best way ?
I believe he's referring more to your use of wmode = transparent  
(rather than the more suitable opaque).


Setting the wmode at all will fix the issue you were experiencing,  
and transparent wmode isn't adding anything to your Flash  
(transparent is supposed to allow a Flash movie to show the HTML  
background underneath it).



Kit

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] How to make DHML cover flash

2007-10-16 Thread Kit Grose

Michael,

A couple of things to make it work cross-browser:

- Set the Flash element to have wmode set as opaque or transparent  
(if you use SWFobject, it's addParam('wmode','opaque');).
- Position a transparent IFRAME behind the menus (really not simple  
if it's not functionality written into the menus you're using), which  
is required for IE (Win) whenever menus need to go over SELECT boxes  
or Flash elements.
- Remove animation from the drop-down for Firefox Mac users (Flash  
elements go invisible while the menus slide down otherwise)


One of the more horrible problems drop-down menus experience.

Cheers,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] introducing a prompt to download or open a pdf

2007-10-16 Thread Kit Grose
I like your suggestion of including the file size, but just as an  
aside: Kb stands for Kilobit, not Kilobyte (which you probably mean).  
Both letters should be in caps to mean Kilobytes/Megabytes.


I'd think (as a user) if you use the terminology 'download' for the  
link, the PDF should be sent with a force-download Content-type  
header if possible (so it doesn't try to view it).


My two cents,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] introducing a prompt to download or open a pdf

2007-10-16 Thread Kit Grose

On 17/10/2007, at 1:05 PM, Chris Knowles wrote:


heres a generic javascript function I wrote to open links in a new
window based on class name. It's only a partial solution to the pdf
issue but maybe someone will find it useful anyway.

just call it on dom load or window load with the class name you  
want to use:

setNewWindowLinks('new-win');

It'll hijack any 'a' tags with the class name you use and make them  
open

in a popup. If no javascript enabled then it'll just go to that link.
The 'a' tag can have multiple class names as well and it'll still  
work.


function setNewWindowLinks(className)
{
var tags = document.getElementsByTagName('a');
var re = new RegExp(className);
if (tags.length  0) {
for (var i = 0; i  tags.length; i++) {
if (tags[i].className.search(re) != -1) {
tags[i].onclick = function()
{
window.open(this.href, '_blank');
return false;
}
}
}
}
}


Just a note:
Your function doesn't currently use the RegExp function for anything  
useful (you might as well use indexOf). RegExp is the right way to do  
it, though, so you can enforce word boundaries to match complete  
classNames only (if I want all a.pop to be new window links, I  
wouldn't want a.popcorn to turn into a popup window).


See http://snook.ca/archives/javascript/your_favourite_1/ for more  
info (specifically the update) on how to enforce word boundaries but  
allow for multiple classnames.


Just my thoughts,

Kit

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] Jquery and/or Yahoo UI

2007-10-14 Thread Kit Grose

You're right;

innerHTML is much, much, MUCH faster to execute (see http:// 
www.quirksmode.org/dom/innerhtml.html for numbers). It's also quicker  
to code and to implement.


However it leaves you with less handles on the elements you're  
inserting, and 'feels' wrong (in the same way that sometimes a big  
table is the easiest way to centre content, but doesn't feel right),  
standards-wise.


I'm a big fan of JS libraries. I use Prototype (and Script.aculo.us)  
and YUI quite a lot as the basis of a lot of my larger JS-based  
sites. The advantage of YUI isn't so much its ability to maintain  
strong standards, but its very strong cross-browser compatibility (so  
if you use Yahoo.DOM, you're getting a standard DOM across every  
browser; as with events, etc.).


Prototype's biggest strength is its ability to keep common functions  
short and simple in your own code files. I can perform complex AJAX  
throughout a webapp with maybe three lines of JS (plenty of PHP, mind  
you).


I've never really tried jQuery, because it's been marketed wrong for  
me. I've been using Javascript since ~1998 and have been doing things  
with it the old way (when everyone declared their variables on a  
global scope and functions were all called on the onclick,  
onmouseover events explicitly in code, and when anything fancy was  
called DHTML). I've spent the years since then developing my syntax  
and thinking to keep in line with the industry, and am comfortable  
with the syntax people have come to associate with new Javascript  
(Object notation, DOM manipulation, etc.). jQuery is marketed as a  
way to change JS syntax significantly (with a view to greater speed,  
marketed as a sort of Rails on the client side), which would mean a  
massive change for someone who already has four different programming/ 
scripting languages to flick between on a daily basis (not counting  
HTML and CSS syntax). I've heard only good things from people  
starting out with JS though.



Cheers,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] Catch 22 list problem

2007-10-11 Thread Kit Grose

I'm in the 'Invalid code' camp here.

Of course it matters what your target market is too, and whether it  
would be an issue if the numbers just didn't show up for IE users  
(likely the case).


To my mind, the numbers in a list are inherently content and should  
not be passed off to the stylesheet.


Cheers,

Kit

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


[WSG] Load Javascript early or on-demand?

2007-10-09 Thread Kit Grose

G'day all,

I've had some internal debate about this topic, so I thought I'd put  
it to the list:


Imagine a large (300 dynamic pages+) site with a real client focus on  
speed. An average user is expected to visit around 5% of the site per  
visit (~15 pages), and the user is expected to visit with an unprimed  
cache around 75% of the time.


One very popular page of the site expects to get hits from more than  
half of all visitors, and uses all kinds of (unobtrusive) Javascript  
goodies, requiring Script.aculo.us (and therefore Prototype). The  
page is the only page on the entire site that uses either library.


The server is quite slow, so HTTP requests are at a premium.

So the question I ask is this: do you
1. load the libraries as part of the global header on every page so  
that visitors to the swishy page aren't waiting an exorbitant time to  
view all the Javascript goodies while waiting for two entire JS  
libraries (and the actual behaviour for the page) to download, but  
extending the initial load time of the site, or
2. load the libraries on the page in question only, slowing the intra- 
site navigation, but not penalising users who never intend to visit  
that particular page of the site.


In essence, is it more important to optimise the initial load time,  
or load-time per subsequent page?



Cheers,

Kit Grose
Frontend Developer
iQmultimedia
[EMAIL PROTECTED]

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] Load Javascript early or on-demand?

2007-10-09 Thread Kit Grose

Hi Frank,

addLoadEvent is one of my essential includes on every project! I've  
made my own minor modifications, but it's a great piece of code.


Cheers,

Kit

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] Load Javascript early or on-demand?

2007-10-09 Thread Kit Grose

Hi Karl,

For the site in question, I ended up deciding to load the JS  
(minified, of course) on just the page it is required on, but I was  
never really happy with the performance (since a page that was  
designed to be flashy and impressive ends up being delayed by the  
download of libraries). I always sort of wondered whether a user  
expects to wait at the initial load and never after that point, or  
whether, like a developer, they expect each page to have an  
individual load requirement. In the era of site-wide CSS, most other  
pages load almost instantly (even on the slow server), so (maybe just  
to me) it's a really obvious discrepancy for that page only.


YSLOW is actually what led me to thinking about the HTTP requests  
involved on that page, and how they affect the user. I've been a big  
fan of that plugin since it was released.


I had never heard of Protoculous! Thanks for that! I've been using  
PHP minify (http://code.google.com/p/minify/) lately which doesn't  
like script.aculo.us too much, but does a good job of integrating all  
JS and CSS into a single HTTP request.


Thanks for your input!

Kit

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

smime.p7s
Description: S/MIME cryptographic signature


Re: [WSG] Safari problem

2007-09-27 Thread Kit Grose

Hi Bas,

Bas V wrote:
So far no problem... however, in Firefox, Internet Explore etc, the 
y-scroll bar shows on PC and Mac but in Safari it doesn't show the 
box's scroll bar, why


The issue is that Safari 2 doesn't support the CSS3 property 
'overflow-y'/'overflow-x', instead only supporting the regular 'overflow'.


Your best bet, then, is to set 'overflow: scroll' first, then 
'overflow-x: hidden' next, so that browsers that do support it can 
remove the horizontal scrollbar.


Another alternative is to wrap the #photos div with another div. Set the 
outer div to have 'overflow: auto', and set the internal div to have a 
strict width, an auto height and overflow: hidden.
The outside div will get the scrollbars when they're needed, and the 
strict width on the inside div will stop it from triggering horizontal 
scrollbars.


Cheers,

Kit Grose
iQmultimedia


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] safari display issue : help please!

2007-08-23 Thread Kit Grose

On 23/08/2007, at 5.04 PM, Andrew Harris wrote:


Hi all, hope you can help. I have a problem with a page in safari.
...
Here is a completely stripped out version of the page, displaying  
the issue.

http://www.woowoowoo.com/safari-bug/formbug.html
In all browsers there is (should be) a form. In Safari, there is not.
It just vanishes!

I can fix it two ways:
- wrap the form in a div
- remove the display:table; rule on the enclosing div
neither of which are very palatable in the context of the site.



Hi Andrew,

The issue is that you can't technically use the display: table  
property that way. Safari demands that for every display: table you  
need a display: table-row and display: table-cell. Your example is  
something akin to the following old-school HTML:


table
div.../div
form.../form
/table

Which is obviously unusual. Beware, also; the display: table property  
doesn't work at all in any version of IE. Check out http:// 
www.quirksmode.org/css/display.html#table for more info.


Cheers,

Kit Grose
iQmultimedia

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] When to use image replacements?

2007-08-05 Thread Kit Grose
The biggest issue I see with image replacement (which I, too, use  
ridiculously often) is with printing.


Most browsers remove background images from printing, and since image  
replacement usually makes extensive use of background images, the  
print will usually only list the text (which clients tend to dislike).


This has got one specific benefit, though: if your logo is usually  
set reversed (white on dark), you're not left printing a badly anti- 
aliased, low-resolution white image on white paper.


So my advice is to use image replacement for navigation, buttons,  
etc., but not for logos or images that you require to be able to be  
printed by a grandmother.


Cheers,

Kit Grose


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] designing for handheld

2007-08-05 Thread Kit Grose

So which emulators (simulators) are correct?


As John said, phone browsers vary as much (actually, more) than their  
desktop counterparts.


On the phone, there are a few different environments I'd test in:
1. Safari (WebKit is the primary browser on Nokia S60 devices, as  
well as the iPhone of course. There are some compatibility  
differences, but it's the best way to check, short of actually using  
the device)
2. Opera Mini (has quite significant market penetration on mobile  
devices. I believe I read somewhere that it was the number 1 browser,  
but that may not be true)
3. IE on a Windows Mobile device. I have no idea how to test this  
other than on the device itself. I'm not aware of how it differs with  
IE/Win.


The other thing that's important to check is that you're developing a  
handheld stylesheet, but not relying on it. MobileSafari on the  
iPhone, for instance, uses screen stylesheets and ignores the  
handheld one entirely. I believe Opera Mini has that as a capability,  
too.


Hope that helps,

Kit


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] vCard File

2007-08-01 Thread Kit Grose
A vCard is an industry standard format. It works in Outlook or  
Windows Address Book in Windows, Entourage and Address Book in OS X  
and if your mobile phone was released in the last 5 or so years,  
likely it as well.


vCard files are often attached to outgoing emails in the corporate  
world as a better alternative to a text signature.


If you're considering including vCards, it might be worth checking  
out microformats (http://microformats.org/) while you're at it.


Kit Grose

On 02/08/2007, at 12.51 PM, Joyce Evans wrote:

I think there may have been a discussion regarding the vCard File  
recently, and if there was, I didn’t study those emails because I  
didn’t have to deal with it at the time.  Today, however, I got a  
new project of re-creating a website with the current design.  On  
this client’s contact page, there is a link to the .vcf file, which  
when I click on it, the client’s contact information appears in the  
Contacts section of my Outlook program.  I’ve never seen a link to  
a vCard File on a website until today.  Is it okay to have this  
link?  What happens if the visitor to the website does not use  
Outlook?  Thank you.


Joyce



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


smime.p7s
Description: S/MIME cryptographic signature