How do I nest quotes without JavaScript causing a runtime error?
You must escape them or alternate between single and double quotes. Take a look at the first example which uses alternating quotes.
<a href='#' onclick="alert('Hello')">About </a>
The following example uses the escape character (\) to let the JavaScript engine know that we want the quote printed and is not part of the syntax.
<a href='#' onclick="alert('How\'s your day?')">About </a>
Quotes can be escaped numerous times in any one statement. If you forget to escape your quotes, your scripts will fail. Take a look at this stipped down example :
'You\'re day\'s going well?'
Sometimes you need to print double quotes, in this case, you'd use something like the following :
"Click the link that says \"Start\""
How do I hide select menus when using layers?
When using div tags that scroll in any direction, select menus or drop down menus, and in some cases other form fields, remain at the top most layer of the rendered page, or above layers and div tags. This is true for for Internet Explorer 6 and earlier anyway. The latest version of Firefox, and the Mozilla engine (which also powers Netscape and a few other browsers) does not inherit this problem.
There are two methods you can use to solve the problem of select menus above layers in Internet Explorer. Between the two, you should be able to form a solution for your layers below select menu problem.
1. Use an <iframe> tag. iframes are rendered even higher than select menus in the layer array. So you could create an empty iframe inside your div tag, set it's position to absolute, and it's z-index to -1. Then, create a nested div tag inside your outer layer and set it's position to absolute also, but it's z-index to 1 or greater. Then position it's left and top co-ordinates so that it rests above the iframe. Here's an example of the code you could place inside your layer to cover select menus, form elements and possibly all other elements:
<iframe width="890" height="550" style="position: absolute; top 0px; left: 5px; z-index: -1;" frameborder="0"></iframe>
Then position the elements of your layer, in a nested layer, so they rest above the iframe, like such:
<div style="position: absolute; z-index: 2;">
Your layer's elements here.
</div>
The above solution will cover all form elements in IE.
2. Hide all select menus by changing their visibility from visible to hidden, then back again as required. Here's an example of how to hide all select menus found on a page and how to restore them, so that your layer's content can appear uninterupted. You'd call the first function to hide all select menus, and the second to restore their visibility.
<script>
function hideSelect(){
for (var i = 0; i < document.all.length; i++) {
o = document.all(i);
if (o.type == 'select-multiple') {
if (o.style) o.style.display = 'none';
}
if (o.type == 'select-one') {
if (o.style) o.style.display = 'none';
}
}
}
function restoreSelect(){
for (var i = 0; i < document.all.length; i++) {
o = document.all(i);
if (o.type == 'select-one') {
if (o.style) o.style.display = '';
}
if (o.type == 'select-multiple') {
if (o.style) o.style.display = '';
}
}
}
</script>
