Brett Patterson wrote:
On a different
note, I have a problem with the JavaScript code I am writing.
If you're going to begin a new topic, you should always begin a new
thread to avoid confusing the old thread with irrelevant material and to
attract potential readers who are disinterested in the old thread's topic.
The code is suppose to replace a
paragraph for Microsoft Internet Explorer users, using the replace().
Note that selectively displaying user guidance based on browser
detection is problematic since:
1. Other browsers that you haven't tested might have the same behavior,
especially if they use the same web engine (Trident) as Internet
Explorer, as Maxthon and Avant do.
2. If all other popular browsers have a different behavior, a future
version of Internet Explorer might change to mimic them, or vice versa.
3. Browser detection is not robust, since browsers (either by default or
by users configuration) often "spoof" other browsers in order to
circumvent browser detection (for example, because it is used to track
them, block their access to a site, or provide them with a behaviors
designed for an earlier version of their browser that no longer work).
Where possible, feature detection should be preferred to browser
detection and providing the user with all available guidance should be
preferred to trying to second-guess what guidance is relevant to them.
Given users' natural propensity to click on things, when you have to
explain that you need click on something in order for something to
happen, that is often a sign of an interface that is too hard to use.
Requiring users to differentiate between single-, double-, and
triple-clicking sounds especially difficult, and especially hard to
translate when using alternative input devices - how do you triple-click
using a keyboard, or speech recognition, and a mobile phone touchscreen?
I'm also curious about why Internet Explorer might differ from other
browsers in this case, and why only it only sometimes differs.
Triple-clicking, in low-level Windows terms, appears to be either three
clicks in quick succession or a double click followed by a single click
or a single followed by a double click:
http://msdn.microsoft.com/en-us/magazine/cc163628.aspx
As
I understand it, there is a maximum of 255 characters in a line, and
here is the line I am using.
Per line of what? Understand from where? There are no line length limits
in HTML or JavaScript as far as I know.
How do I get it to work?
Passing your JavaScript code through JSLint and running it with a
debugger would be a good start, since it has machine-detectable syntax
errors:
http://www.jslint.com/
Debugging with Gecko: http://www.getfirebug.com/
Debugging with Trident:
http://www.my-debugbar.com/wiki/CompanionJS/HomePage (or IE 8 Beta 2)
Debugging with WebKit: http://webkit.org/blog/197/web-inspector-redesign/
Debugging with Opera:
http://www.opera.com/products/dragonfly/
See also:
http://siliconforks.com/doc/debugging-javascript/
This is the code I am using:
When asking about HTML and JS code, it is best to provide a full HTML
document and a full JS script not a snippet, since how the snippet works
can be drastically changed by HTML and JS elsewhere in the page.
See also this article about test case reduction when reporting bugs from
the WebKit project:
http://webkit.org/quality/reduction.html
Often the very process of test case reduction can reveal where your
problem lies.
<p class="notes"><sup>Note:</sup> If you want to view only a specific
table, you will have to double-click on each drop-down Title, in order
to view individual tables.<br />
Note that the use of markup for presentational purposes ("sup" and "br")
is discouraged in favor of CSS applied to markup used for semantic and
structural purposes. See also:
* Opera Web Standards Curriculum
http://www.opera.com/wsc/
* Shirley E. Kaiser: Semantics, HTML, XHTML, and Structure:
http://brainstormsandraves.com/articles/semantics/structure/
* maxdesign CSS tutorials:
http://css.maxdesign.com.au/
<script type="text/javascript">
<!--
var str="<sup>Note:</sup> If you want to view only a specific
table, you will have to double-click on each drop-down Title, in order
to view individual tables.";
Note that according to the HTML 4.01 specification (although
implementations tend to ignore this point), your inline script ends at
the first occurrence of the sequence </ , and so strictly speaking your
script consists of the following error:
var str="<sup>Note:
You can get around this by breaking up the string with a normal
JavaScript character escape:
var str="<sup>Note:<\/sup> If you want to view only a specific
table, you will have to double-click on each drop-down Title, in order
to view individual tables.";
var browser = navigator.appName;
if(browser=="Microsoft Internet Explorer")
Note that some older versions of Opera, for example, claim to be
"Microsoft Internet Explorer" in navigator.appName. Generally, when
inspecting the navigator object to try to determine if it is Internet
Explorer, you need to try to exclude alternative possibilities first.
If, however, you merely want to detect the Trident web engine that
underpins Internet Explorer and certain other browsers, there are more
reliable methods available:
* Conditional comments in HTML:
http://reference.sitepoint.com/css/conditionalcomments
* Conditional comments in JScript:
http://msdn.microsoft.com/en-us/library/7kx09ct1(VS.80).aspx
document.write(str.replace(/<sup>Note:</sup> If you want to
view only a specific table, you will have to double-click on each
drop-down Title, in order to view individual tables./, "<sup>Internet
Explorer User's Note:</sup> You may have to triple click the drop-down
title, in order to view individual tables."));
This is very strange code. If an HTML document is still being parsed
when a document.write called is executed, then the passed string will be
inserted at that point and parsed before the rest of the document. See
also the documentation of Mozilla's implementation:
https://developer.mozilla.org/En/DOM/Document.write
Otherwise it will perform an implied document.open call and wipe the
existing document before parsing the passed string as a new document.
The intended results of your str.replace appears to be the string
"<sup>Internet Explorer User's Note:</sup> You may have to triple click
the drop-down title, in order to view individual tables." This isn't
variable and the replace() method does not alter the original str
variable, so I don't understand why you aren't using that string directly.
Now, another problem is your regular expression contains a syntax error,
since / is being used as a delimiter but hasn't been escaped inside
</sup> (for instance with the regular expression character escape: \/.
This syntax error would have been detected if you'd tried executing the
code with a JS debugger (i.e. turn on debugging in IE; Companion.JS may
also prove useful to you).
Note that the character "." also has special meaning in regular
expressions. See also:
http://www.regular-expressions.info/reference.html
http://www.regular-expressions.info/javascript.html
In general, I'd suggest keeping your markup separate from behavior for
reasons of separation of concerns and performance rather than mixing the
two together the way you're doing here. Here's a couple articles to help
with that:
http://www.wait-till-i.com/2007/11/12/the-seven-rules-of-unobtrusive-javascript/
http://www.sitepoint.com/print/javascript-from-scratch
and here's a quick example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progressive enhancement example</title>
</head>
<body>
<!-- This raw markup should provide core content and functionality. -->
<p id="text">Text without JavaScript.</p>
<!-- Rest of the raw document goes here. -->
<!-- All script put at end of document to ensure everything has been
parsed into the DOM and to maximize performance:
* http://peter.michaux.ca/article/553
* http://developer.yahoo.com/performance/rules.html#js_bottom
-->
<script type="text/javascript">
<!--
// Wrap everything in an anonymous function to prevent pollution of the
// global context:
(function() {
// Keep string definitions, which we might want to localize or modify,
// separate from the presentational logic:
//
// http://en.wikipedia.org/wiki/Separation_of_concerns
//
var strings = {
'newText':'Text with JavaScript.'
};
// Check interfaces exist before trying to use them.
// Yes, the level of checking here is a little bit paranoid.
if (typeof this.window !== 'undefined' &&
typeof this.window.document !== 'undefined' &&
typeof this.window.document.getElementById !== 'undefined' ) {
// Get a reference to the P HTMLElement instance:
var p = this.window.document.getElementById('text');
// Internet Explorer does not support the standard textContent
// feature of the HTMLElement interface:
//
// http://developer.mozilla.org/En/DOM/Element.textContent
//
// But it does implement a similar non-standard property, innerText:
//
// http://msdn.microsoft.com/en-us/library/ms533899(VS.85).aspx
//
// We can use typeof to detect which property is defined, if any:
if (typeof p.textContent !== 'undefined') {
p.textContent = strings.newText;
}
else if (typeof p.innerText !== 'undefined') {
p.innerText = strings.newText;
}
}
})();
//-->
</script>
</body>
</html>
Hope that helps.
--
Benjamin Hawkes-Lewis
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
