Centering Fieldsets
January 4, 2006 – 11:06 pmA quick piece of CSS to center a fieldset:
<div style="width: 200px; text-align: center; margin-left: auto; margin-right: auto;"> <div style="text-align: left;">
<fieldset>
...
Here is an example:
Inobstrusive Form Field Highlighting in JavaScript
January 3, 2006 – 11:38 pmOne of the recent problem that I ran across at work is an easy way to do highlighting for form fields. Of course the best way would be CSS 2 (as shown here) but alas, IE does not support that.
The alternative is JavaScript onFocus and onBlur method. However, one thing which I also wanted to avoid is changing over 200 different pages in our system to add those in. So instead, I wrote a simple piece of Javascript which attaches the event handlers on the fly. The best part about this is that the actual form does not need to be changed - just include the Javascript on the bottom of your webpage. The code is as follows:
var fields = document.body.getElementsByTagName("INPUT");
for(i=0; i < fields.length; i++)
{
if(fields[i].type == 'text' || fields[i].type == 'password')
{
fields[i].onfocus = highlightOn;
fields[i].onblur = highlightOff;
}
}
The two highlight functions are as follows:
function highlightOn() {
this.style.border = '1px solid blue';
this.style.backgroundColor = 'white';
} function highlightOff() {
this.style.border = '1px groove #7A7E7C';
this.style.backgroundColor = '#EEEEEE';
}And here is a real example:
Test Field #1
Weird JavaScript problems
January 3, 2006 – 6:03 pmFor quite some time I have been trying to track down a strange Javascript error. In one of the forms in our application, we have a dynamically generated set of DOM form fields generated on the fly via Javascript. Something like “document.myForm.appendField(field);”. The page in question worked just fine in Opera and Firefox, but refuses to work in IE with no errors. It turns out that all of the fields had the same name AND Opera/Firefox took the first field while IE rightfully so refused and returned a collection instead. For example:
alert(document.myForm.field.value)
However there are multiple “field” fields in the form, and for some reason both Opera and Firefox returned only the first one. Unfortunatly, I was not able to reproduce the problem in a standard alone web page.
Removing Vowels from Hebrew Unicode Text
June 3, 2005 – 4:28 pmOne of the questions that recently came up is how to remove vowels from Hebrew characters in Unicode (or any other similar language). A quick look at Hebrew Unicode chart shows that the vowels are all located between 0×0591 (1425) and 0×05C7 (1479). With this and Javascript’s charCodeAt function, it is trivial to strip them out:
function stripVowels(rawString)
{
var newString = '';
for(j=0; j<rawString.length; j++) {
if(rawString.charCodeAt(j)<1425
|| rawString.charCodeAt(j)>1479)
{ newString = newString + rawString.charAt(j); }
}
return(newString);
}
You can test it below:
How To Wrap Text in a Table Cell with XSLT
May 5, 2005 – 12:06 pmAs a followup to yesterday’s post, here is how I am wrapping text via XSLT as opposed to CSS and JavaScript. The reason why I am prefering to do this server side via XSLT as opposed to JavaScript client-side is because if I will be doing client-side JavaScripts, I would have to escape the stuff during the HTML generation anyway in XSLT server-side. So in the same processing power I might as well wrap it instead. Of course you can also do it via some fancy JavaScript client side by going through the entire table and chopping up the text in each row, but that would make things look rather interesting to the user (tables automatically re-arranging themselves).
Anyway, here is a simple recursive template based on the code posted by Andrew Welch:
<xsl:template name="text_wrapper">
<xsl:param name="text"/>
<xsl:param name="width" select="20"/>
<xsl:if test="string-length($text)">
<xsl:value-of select="substring($text, 1, $width)"/><br/>
<xsl:call-template name="text_wrapper">
<xsl:with-param name="text"
select="substring($text, $width + 1)"/>
<xsl:with-param name="width" select="$width"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
To use it, call it as follows:
<xsl:call-template name="text_wrapper"> <xsl:with-param name="text" select="sometext"/> <xsl:with-param name="width" select="20"/> </xsl:call-template>
How To Wrap Text in a Table Cell
May 5, 2005 – 12:44 amAn interesting question that came up today during work was how to wrap text in a table cell that does not contain any line breaks or spaces. For example:
| ThisIsCell1 | ThisIsCell2 |
We want the text inside the cells to wrap to the next line instead of extending the table size. There are three basic solutions:
1. CSS - Internet Explorer Specific.
In Internet Explorer, there is a custom CSS extension called “word-wrap” which when set as “word-wrap: break-word;” will do just what we want. For example (only in IE):
| ThisIsCell1 | ThisIsCell2 |
2. CSS3 (no browsers yet).
In CSS 3 a new option called “wrap-option” is defined which when set as “wrap-option: emergency;” will do the same. Unfortunatly no browser today (except maybe Safari) supports it yet. The following example will only work in a CSS 3 browser (none of which I have):
| ThisIsCell1 | ThisIsCell2 |
3. JavaScript (all browsers).
Another solution would be to use JavaScript to break up the text into specific sized chunks. The downside of this approach is that you have to figure out what the chunk size would be. A good example of a JavaScript can be found here. I slightly modified it as follows:
strbuff='ThisIsCell1';
newstr='';
startI = 0;
max=2;
str='';
subarr=new Array(parseInt(strbuff.length/max+1));
for (i=0;i {
subarr[i]=strbuff.substr(startI,max);
startI+=max;
}
for (i=0;i {
newstr+=subarr[i]+’
‘;
}
str+=subarr[subarr.length-1];
document.write(newstr);
} else {
document.write(strbuff);
}
Here is an example:
ThisIsCell2
There is also a fourth way to do it via XSLT as described in Jeni Tennison’s book but I don’t have the time to get to that today. I will try to post a followup tomorrow.UPDATE: Here is the followup post.
Making Visited Links Look the Same as Unvisited Links
January 13, 2005 – 2:05 pmOne of our customers had recently requested a feature to make all links look the same, visited or unvisited. While debates and complaints have been raised about whether they should look the same, in our case this was necessary. A web application such as ours usually dynamically generated all the content. That means that links may stay static but their content changes. Therefore, visited links make no sense in a dynamic system.
In any case, the way I made them look the same is via the following piece of CSS:
A:link {color: blue}
A:visited {color: blue}
Strange IE Bug
January 11, 2005 – 3:10 pmToday I came across a VERY strange IE bug - a certain page would not work in IE6 under Windows XP SP2, while it worked fine in Opera, Mozilla and Firefox. The message shown would be as follows:
Internet Explorer cannot open the Internet site [url] Operation aborted
After more digging, I came across a post at a Microsoft Wiki:
“Operation aborted”
Apparently interacting with innerHTML and possibly using other JScript functionality causes IE to pop up “Internet Explorer cannot open the Internet site http://example.com. Operation aborted.” messages after loading a page. This is sometimes attributed to BHO mal/spyware, but I can confirm it happens with no such software installed. This bug is present in IE SP1 and IE SP2.
http://peterjanes.ca/blog/archives/2003/12/03/hulk-smash
I was having this problem trying to put some html inside a DIV tag using innerHTML and solved the problem by puting the DIV inside a TABLE.
Sample code for “Operation aborted”
This sample code will give you the “Operation aborted” error in IE6, while it works as expected in Firefox:
<table> <tr> <td> <script type="text/Javascript"> var d = document.createElement('div'); document.body.appendChild(d); </script> </td> </tr> </table>If the script part is moved outside the table it works in both IE6 and Firefox. (Emphasis added)
It seems that this problem is caused by the fact that the SCRIPT block operating on innerHTML or DOM structures is located inside a TABLE tag. I moved the SCRIPT tags outside the TABLE tag, and viola - that fixed the problem.
Peter Janes pointed out in the comments that the issue is deeper than that, it seems to be related to the timing issues with DOM rendering. I am going to leave it for now unless I see other problems, but using setTimeout or some other way of doing things is not out of the question.
Opening Popups in IE
January 4, 2005 – 8:34 pmRecently I ran across a rather strange error with different browser. Popup windows could be maximized in Opera and Mozilla, but not in IE. The code I was using was as follows (click here to try):
window.open(”, ”, ‘width=200,height=200′);
After some digging, I ran across the following snippet in MSDN:
When the sFeatures parameter is specified, the features that are not defined in the parameter are disabled. Therefore, when using the sFeatures parameter, it is necessary to enable all the features that are to be included in the new window.
My mistake in IE was that I specified the height and the width WITHOUT telling the browser about the resizability. Here is the corrected code (click here to try):
window.open(”, ”, ‘width=200,height=200′,resizable=yes);
But that still doesn’t explain why it worked in Opera or Mozilla. So after some more digging, an article at QuirksMode.org informed me that:
The popup is always resizable in Mozilla, Safari and Opera.
Go figure.
UPDATE: In response to a comment accusing Microsoft of not being HTML-compliant, I want to explain why in this case Microsoft is actually right. The “window.open” method is not defined in any public standard. The only places where it is defined is Netscape’s documentation for JavaScript and Microsoft’s IE documentation,where a resizable flag is mentioned in BOTH. This specific behavior is part of what is known “DOM Level 0″ which according to the W3C is defined as follows:
DOM Level 0
Functionalities equivalent to the ones exposed in Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0 are informally referred to as “Level 0″. There is no W3C specification for this Level.
Microsoft’s documentation states that as well:
Standards Information
There is no public standard that applies to this method.
According to QuirksMode.org Netscape 4 had the resizable flag but for some reason starting with Mozilla v1.4 and in both Opera and Safari this flag is no longer present. So in this case, Microsoft is right by preservering the functionality of the resizable flag exactly the same way it has been implemented in IE 4 and Netscape 4.
Hiding Table Rows in DHTML
October 24, 2004 – 12:13 amOne of the more fun things in DHTML is dynamic manipulation of page content. An interesting question that recently came up at work was hiding and displaying a single table row. The solution I came up with is pretty simply - set the CSS STYLE tag of the table row to “display: none” to hide it and then set it to “display: table-row” to unhide it. The problem is that it won’t work in Internet Explorer, primarly due to the fact that the display property can be set to “table-row” only in CSS 2, not in CSS 1 where only “inline” or “block” is possible. Interner Explorer only supports CSS1 at this time.
So the logical solution would be to use “block” Unfortunatly, when using “block” for table rows in IE as recommended by Microsoft. HOWEVER, this will cause problems with non-Microsoft browsers if any cell inside such row uses COLSPAN. The solution - setting the display property to the display property of some other table row like this in Javascript:
hidden_row.style.display = visible_row.style.display;
You can try it out below, on IE ‘table-row’ will throw an error but everything else will work fine. On other browsers, the ‘block’ approach will not work:
Col 1 Col 2 Col 3
Validating SELECT Boxes in JavaScript
October 21, 2004 – 6:07 pmOne of the more boring tasks in DHTML is validation of form data and specifically of INPUT and SELECT boxes. Since both have a “.value” property, we can save time and use the same code for checking both:
if(selectBox.value == null || selectBox.value.length == 0)
{ alert(’Nothing selected in select box!’); }
else { alert(’Selected value = ‘ + selectBox.value); }
An example is right here:
Test Box 0 :
Unfortunatly an ugly suprise is in store for you if happen to be from the 90% majority that uses Microsoft’s Internet Explorer - the example above WILL NOT WORK for you and will always return “Nothing selected…” message. But it will work perfectly in Opera and Firefox. To find out why this happens, we need to dig deeper.
Read the rest of this entry »
Changing Web Page Content on the Fly
October 12, 2004 – 6:31 pmAn interesting problem that comes up often is a need to change a part of a web page without reloading the entire page. This is especially true when dynamic content like a list needs to be generated from a database and included in the page. The solution to this is to do a dynamic Javascript include - programatically include a JavaScript file that can be generated dynamically, lets say by a servlet. The usual way to do that is via “document.write()” and include a “SCRIPT” tag in the web page. A more cleaner way is discussed in an article written by Moshe Moskowitz by DOM:
var scriptElement = document.createElement("script");
scriptElement.src = url;
scriptElement.type="text/javascript";
getObject('someSection').appendChild(scriptElement);
Now, what happens if your dynamic content generator also gives error pages in plain HTML? The code above will not work if an error occurs since the input provided will be HTML, not Javascript. So a workaround for this is to make the error pages do both JavaScript and HTML by adding the JavaScript code to the beginning of the HTML page and commenting it out with HTML comment tags. Then you can use JavaScript comment tags to comment out the HTML file itself. The result will execute JavaScript if included dynamically in a SCRIPT tag, and will show proper HTML (and even validate) if thrown in regular HTML processing. Here is a complete example with JavaScript content in red and HTML content in blue:
<!–
alert(’ERROR: Can’t find webpage [404]!’);
/* –>
<HTML>
<BODY>
<H1>ERROR: Can’t find webpage [404]!</H1>
</BODY>
</HTML>
<!– */ // –>
The JavaScript code is enclosed in an HTML comment tag making it invisible by browsers. However, when executed as a JavaScript tag, it will execute until it hits a JavaScript comment tag “/*” which is ignored by browsers. The closing tag on the bottom and the followup “//” comment tag make sure that the JavaScript ignores the HTML content. BUT at the same time the two sets of HTML comment tags on the top and bottom make sure that the browser ignores all JavaScript code ignoring comment tags.
