|
|
 |
Miscellaneous List of Categories
- How do I scroll to the very top of a page?
- How do I make a link void of any action?
- How do I nest quotes without JavaScript causing a runtime error?
- How do I hide select menus when using layers?
- How do I find an element's position on a page?
-
How do I scroll to the very top of a page?
Using the scrollTo() method which accepts two arguments. Horizontal and vertical pixel positions. Eg. to scrol to the very top :
<a href="javascript:scrollTo(0,0);">
Or to scroll to any part of a page, enter the pixel co-ordinates. scrollTo(10,175)
-
How do I make a link void of any action?
By using the void() function. Using it in a href tag will cause the link to do nothing, you could then use the onclick event handler to execute another function. Eg.
<a href="void(0);" onclick="alert('Hello')">
-
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>
-
How do I find an element's position on a page?
This JavaScript will give you the position of any element on a page, whether you're looking for the left pixel, top pixel, bottom pixel or right pixel position of the element. The script can be called using any event such as onmouseover, onclick, onkeypress, etc. It makes use of the event object to backtrack up the document tree using the offsetParent, offsetLeft and offsetTop properties. Additionally, the offsetWidth and offsetHeight properties are used to compute the elenet's pixel right and pixel botom positions.
The script is supported by all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It will return either the pixel positions of any element on a page, whether the user has scrolled down a page or not. You do not need to define element IDs nor positions if using event handlers.
The following two functions backtrack through the document's object model, computing the top and left position of each element copy and paste these two functions to your document.
<script type="text/javascript">
function getPageOffsetLeft(el){
var x = 0;
if(el){
if(el.offsetLeft != null){
x = el.offsetLeft;
if(el.offsetParent != null){
x += getPageOffsetLeft(el.offsetParent);
}
}
}
return x;
}
function getPageOffsetTop(el){
var y = 0;
if(el){
if(el.offsetTop != null){
y = el.offsetTop;
if(el.offsetParent != null){
y += getPageOffsetTop(el.offsetParent);
}
}
}
return y;
}
</script>
To call the above functions, you must pass in a reference element as an object. That is, the element for which you wish to find the position. For example, if you had an div tag on you page named "divA", you could use :
myDiv = document.getElementById('divA');
divLeft = getPageOffsetLeft(myDiv);
alert(divLeft);
To get the pixel position of an element from an event, include the following function in your document :
<script type="text/javascript">
function getPosFromEvent(event, getEnd){
if(event.srcElement){
pLeft = getPageOffsetLeft(event.srcElement);
pTop = getPageOffsetTop(event.srcElement);
} else {
pLeft = getPageOffsetLeft(event.target);
pTop = getPageOffsetTop(event.target);
}
alert("Pixel Left: " + pLeft);
alert("Pixel Top: " + pTop);
}
function getEndPosFromEvent(event){
if(event.srcElement){
pRight = getPageOffsetLeft(event.srcElement) + event.srcElement.offsetWidth;
pBot = getPageOffsetTop(event.srcElement) + event.srcElement.offsetHeight;
} else {
pRight = getPageOffsetLeft(event.target) + event.target.offsetWidth;
pBot = getPageOffsetTop(event.target) + event.target.offsetHeight;
}
alert("Pixel Right: " + pRight);
alert("Pixel Bottom: " + pBot);
}
</script>
Then to call the above function, you could place the following event handler in any element on your page. For example, you could add the onmouseover event handler to a <td> tag like this :
<td onmouseover="getPosFromEvent(event);">
| Mouseover to see left and top pixel position of this cell |
| Click to see right and bottom pixel position of this cell |
Here's an entire HTML page that will show you the pixel position of all elements within the page whenever you mouseover any one of them.
|
|
|
