Re: [WSG] vCard File
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
Re: [WSG] When to use image replacements?
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
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] safari display issue : help please!
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: ... ... 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] Safari problem
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] ***
[WSG] Load Javascript early or on-demand?
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?
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?
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] Catch 22 list problem
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
Re: [WSG] Jquery and/or Yahoo UI
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] How to make DHML cover flash
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
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
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] How to make DHML cover flash
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
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] Toggle L2 menu items (within WCAG)
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] ***
[WSG] Re: [css-d] Box Issue
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] How to send two values to javascript
On 15/11/2007, at 3:34 PM, Casey Farrell wrote:
Try using single quotes, as in:
Michael Horowitz wrote:
Even better would be to modify the function itself to get the second
value:
Then in the JS:
function showSubcategory(value1) {
// Get value 2 either with
var value2 = document.getElementById('secondelement').value; // For
input boxes
// or
var secondSelect = document.getElementById('secondelement');
var value2 = secondSelect.items
[secondSelect.selectedIndex].value; // For select menus
...do something
}
window.onload = function() {
document.getElementById('categoryselect').onchange = showSubcategory;
}
Where 'secondelement' is the ID of your second element.
***
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
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:
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]
***
Re: [WSG] Javascript web standards was How to send two values to javascript
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] ***<> *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
