JavaScript & CSS

VS2008 Javascript debugging error: The breakpoint will not currently be hit. No symbols have been loaded for this document

Tim Huffam — Sun, 17 Aug 2008 22:04:24 GMT

When trying to debug javascript using Visual Studio 2008 there a couple of things you need to do first - otherwise it (debugging) will not work and you'll get the following error when you hover over breakpoint in your javascript:

The breakpoint will not currently be hit. No symbols have been loaded for this document.

Note that this is only for debugging using IE (6) - not sure about other browsers/versions.

Within IE go into Tools - Internet Options - Advanced tab and make sure the 'Disable Script Debugging' is unchecked.
Make sure you have a breakpoint in your javascript.
Start debugging your web app in VS.
Within VS select menu item Debug - 'Attach to Process...'
On the Attach to Process dialog, select the row which has explorer.exe for your app (the Title column will have you page title on it), then click Attach.

That's it - when your breakpoint is reached the VS debugger will be triggered.

HTH
Tim

Centering div tags using CSS

Tim Huffam — Tue, 15 May 2007 05:11:00 GMT

As text-align doesn't work I use a simple work around:

.mydiv{
width: 100%;
left: 50%;
}

It's not perfect - but very simple and easy to understand - and you can modify it to suit.

Seems to work ok in IE 6 & FF 2.0.

Here's another method (http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/index.php) - but I found it not obvious/simple enough (expecially for others who may have to maintain the css down the track - KISS)

HTH
Tim

Printing nicely from the web: Printing web pages or alternate documents

Tim Huffam — Mon, 30 Oct 2006 23:30:00 GMT

Many web pages are not designed with any consideration for printing - this is one of those annoying things that one comes across more often than not.

Here are a couple of simple ways to make sure your pages are printed in a formatted way:

Use a specific print style sheet.

This is the most common approach used on the web. The idea being you create another stylesheet that is specifically for formatting your web page(s) for printer output.

There are many examples on the web of how to do CSS so I won't go into that. However what you may need to know, is how to specify an printer specific stylesheet within your page.

A normal stylesheet is added like this:
<link href="default.css" type="text/css" rel="stylesheet">

where as a print specific stylesheet is added like this:
<link href="print.css" type="text/css" rel="stylesheet" media="print">

By adding this to your web page, whenever the user click on the Print button the page will be formated using the print stylesheet.
Use an alternative document.

This is a less known method, which can be very effective. Basically it tells your browser to use an alternative document whenever the user clicks on Print. This alternative document can be any web resource eg another web page or something like a word document, spreadsheet or pdf document. What's good about this that things like word or pdf documents are very quick and easy to create and format - so you know what it's going to look like printed right away (I find it way easier to create and format a word doc than fiddling with stylesheets).

This is how to specify the alternate print document:

<link href="worddoc.doc" type="application/msword" rel="alternate" media="print">

Note that you should specify the correct content type.

HTH

Tim

Access is denied - Javascript error when attempting to load xml from an external site.

Tim Huffam — Tue, 16 May 2006 20:13:00 GMT

As yet I don't have the answer to this problem - so any suggestions would be very much appreciated!

I have a JS library with an object that loads xml from a specified URL and populates specified HTML elements with the data. This works fine.

However recently I refactored the code that calls this library, to be more OO (to allow it to be more easily extended). Now the xml "load()" method raises the error "Access is denied" when loading from external urls.

I've proved that the load library still works ok by calling it from a simple test script.

So why does the behavior of a JS function change based on what has called it?

Any help will be very much appreciated!
Thanks in advance
Tim

DOM Inspector not working in FF (FireFox)

Tim Huffam — Thu, 11 May 2006 07:40:00 GMT

When you install Firefox on windows, by default it does not install the DOM Inspector.

To make sure it installs it, select Custom Install then select Web Developer Tools.

If you already have FF installed you can install the DOM Inspector without having to reinstall FF:

Run the FF installer - just so it unpacks the install without installing anything.
Use file explorer to locate the C:\Documents and Settings\<username>\Local Settings\Temp dir. FF will have created a temp directory to unpacked the install components into (in my case "7zS17.tmp").
Start FF.
Drag adt.xpi onto the FF window. This installs the dom inspector.
Cancel the install.
Restart FF.

Thanks very much to clagnut for his informative post on this - and to Thierry B for his additional help on this.

Update for Firefox 2.0: (25 Oct 06)

Same problem exists - whereby it did not install the DOM Inspector by default. However the solution mentioned above does not appear to work (as I couldn't find the adt.xpi file) - so there is another work around - for which I've created another post (for feed subscribers).

HTH

Tim

text-align: center; not working in Firefox

Tim Huffam — Wed, 19 Apr 2006 07:28:00 GMT

I have the following scenario:

.container{
text-align: center;
border: solid 1px blue;
}
<div class=container><table><tr><td>Text</td></tr></table><div>

In IE (6) this displays as you would expect (with the table centered). However with Firefox (1.5) the table is left aligned.

Apparently this is due to a bug with the way FF handles CSS.

The workaround is to use this:
text-align: -moz-center;
instead of
text-align: center;

Don't ask me why "-moz-center" even exists - it's like they thought 'hey center doesnt work - lets make up our own version of it.. duh!

Oh well - at least it works (sort of).

HTH

Tim

CSS nowrap alternative

Tim Huffam — Sun, 16 Apr 2006 04:48:00 GMT

To achieve the same results as a TD nowrap (<td nowrap="true">) using cascading style sheets, use the following:

white-space: nowrap;

This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY. If you're desparate to not apply it to each TD, then you can get away with only applying it to the TD's of the first row - but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach - ie don't do it).

HTH

Tim

IE bug: HTTP POST with zero content-length (content-length = 0) (even though there is data in the post request)

Tim Huffam — Thu, 26 Jan 2006 01:35:00 GMT

This little gem comes to us courtesy of MS's IE, whereby it resets the connection and sets content-length to 0 (zero), even though there is data in the post request, when the keep-alive timeout expires.

Fortunately this only occurs when using HTTPS, and apparently it's limited to a particular version of IE (although I'm not 100% convinced about this).

This bug is documented very well here and by ibm here, and an typically difficult to understand MS solution here.

Another solution I think may work (if you're using ASP.NET), is to flush the response manually (Response.Flush())- my understanding is that this will disable the keep-alive header that ASP.NET sends out. Basically should allow you to still have the keep-alive setting switched on on your IIS server and by manually inserting the Flush() method you can restrict where this occurs to individual pages or apps (eg Global.asax). Although I've not tried this and could be completely wrong ;-)

HTH

Tim

IE and Firefox compatible javascript to enable or disable an anchor tag

Tim Huffam — Wed, 18 Jan 2006 23:54:00 GMT

IE supports provides a half-baked implementation of the non-standard attribute 'disabled' on anchor tags (ie it changes it's color -even though it does not actually disable the anchor (if it has an href value). Firefox does not provide any support for it.

To add full 'disable' functionality to both browsers there are a couple of work arounds (hacks):

Override the onclick event of the anchor (to do nothing) and override the visual settings.

or, more simply

Add or remove the href attribute (both browsers will enable/disable the anchor with this method).

This causes both browsers to remove hyperlink behaviour: remove the underline, remove the hover mouse pointer (hand) and don't color the text blue. It does not, however cause the anchor to be greyed out (which you can easily do if you wish).

To allow this to work you need to store the existing href value - I just add another (non standard html) attribute eg href_bak.

Eg:

HTH

Tim

PS - I've just (9 May 06) updated the JS above - god knows what I was thinking with the original post :-s Thanks Heath K for the wake up call!

IE and Firefox compatible javascript to reference innerText/text attribute

Tim Huffam — Wed, 18 Jan 2006 22:12:00 GMT