For a complete list of
all cut-and-paste JavaScript
go here |
JavaScript (And Other) Tips & Tricks
By
etLux |
For a complete list of
all cut-and-paste JavaScript
go here |
|
|
|
| How
do I get the page background image to stay fixed when
the page is scrolled?
The
technique is called watermarking.
One
simple way is to add bgproperties="fixed" to
the body tag, like this:
<body
bgproperties="fixed">
Note that
this typically only works in Internet Explorer browsers.
Another
way of doing it that also works in later Netscape
browsers (6.x & up) is to add this style script to
the <head> of your page:
<style>
body {background-attachment:fixed}
</style>
.
|
|
|
|
| Who
do you recommend for hosting?
First, we
do not recommend anyone we do not use. Second,
bear in
mind we've been on the 'Net practically from the
beginning, and have dealt with dozens and dozens of
hosting companies. We know who the dogs and rogues
are, and you will not find them here. That said, we
recommend:
High-Performance,
Full-Featured Hosting ( $8/month and up):
We give a
ringing, unreserved, resounding endorsement to
FutureQuest
as arguably the
best-run host on the 'Net. Andrew Gillespie, chief
tech guru and co-owner, is indisputably a grand master
of his art, and he plainly loves his
servers. For blistering speed, extremely generous
disk space and bandwidth, and truly extraordinary
control and features -- go see Andrew. Our most
important CodeBrain InterNET Group major sites are on
FutureQuest
-- including CodeLifter.com, CodeFoot.com, and others.
..
|
|
|
|
| How
do I call more than one JavaScript function in a body
tag (or other) event handler?
Simple.
End each function call with a semi-colon ;
Like this:
<body
onload="someFunction();otherFunction();">
or, say,
in a mouseover...
onMouseOver="someFunction();otherFunction();"
In
JavaScript, the semi-colon is essentially an end-of-line
marker. Within reasonable limits, you can actually
write a whole script inside of an event handler.
The same
thing applies to the href="javascript:etc"
structure. For instance:
<a
href="javascript:someFunction();otherFunction();">
Click Here
</a>
.
|
|
|
|
| How
do I make a window "pop under" when it is
opened?
Put this
as early in the <head> of the page as possible:
<script>
self.blur();
</script>
That
tells the window to "lose focus" as soon as it
reads the self.blur(); -- which makes the window
"jump behind" the window that is currently in
focus.
.
|
|
|
|
| How
can I set a window's size when it is opened?
Put this
as early in the <head> of the page as possible:
<script>
self.resizeTo(100,200);
</script>
Set the
dimensions in the parentheses. The first number is
the width; the second is the height.
.
|
|
|
|
| How
can I set a window's position when it is opened?
Put this
as early in the <head> of the page as possible:
<script>
self.moveTo(100,200);
</script>
Set the
position in the parentheses. The first number is
the x (that is, left) position; the second number is the
y (that is, top) position.
..
|
|
|
|
| How
can I make certain a window will "come to the
front" when it is loaded?
Add
onload="self.focus();" to the body tag, like
this:
<body
onload="self.focus();">
As soon
as the window is fully loaded, it will "take
focus" and move in front of any other open windows.
..
|
|
|
|
| How
can I stop a window from "losing focus" --
hiding behind other windows?
Add
onblur="self.focus();" to the body tag, like
this:
<body
onblur="self.focus();">
Use this
with some forethought, as it acts like a modal window,
pre-empting focus until it is closed.
..
|
|
|
|
| How
can I make a window periodically come to the front if it
has lost focus?
You can
use a timer to call self.focus() for this, that is
triggered whenever the window loses focus by detecting
the onblur event. Add onBlur="setTimeout('self.focus()',500)"
to the window's body tag, like this:
<body
onBlur="setTimeout('self.focus()',500)">
The 500
is the time interval, in milliseconds. (1000
milliseconds is 1 second). Usually a range of
300-7000 will keep the window comfortably in
front. Unlike a simple onblur="self.focus();"
shown above, the window does not behave modally.
..
|
|
|
|
| How
can I prevent a page from being captured in someone
else's frameset?
The
technique is called frame busting. Put
the following script in the head of the page:
<script>
if (window!=top){top.location.href=location.href;}
</script>
Whenever
the page loads, it checks to see if it is in a frameset
(that is, not the "top" window). If it
is, it reloads itself as topmost.
.
|
|
|
|
| How
can I redirect a page to a different address, even if
the user has JavaScript turned off?
Use
suspenders and a belt -- both the Refresh pragma and a
JavaScript redirect in the <head> of the page,
like this:
<meta http-equiv="Refresh" content="0; url=http://www.mysite.com/mypage.html">
<script>
window.location="http://www.mysite.com/mypage.html";
</script>
Make sure
to set both url's the same, and be careful of the
punctuation in the Refresh pragma.
The other
way to do this is server-side via the .htaccess file in
your web root. Do this with caution, and always check your
server documentation or with your server administrator
to be certain it's allowed on your host -- though the
technique is very much standard on UNIX/LINUX boxes.
Add a
Redirect request to your .htaccess file in the following
general form:
Redirect
whatpage.html http://www.mysite.com/otherpage.html
In this
example, whatpage.html is redirected to
http://www.mysite.com/otherpage.html.
.
|
|
|
|
| How
can I make a page reload itself at a given time
interval?
Generally
this is done with the Refresh pragma. Put this in
the <head> of the page:
<meta http-equiv="Refresh" content="60;
url=http://www.mysite.com/mypage.html">
The 60 in
the sample code is the time interval, set in
seconds. For the url, use the address of the page
that is refreshing itself.
..
|
|
|
|
| How
do I get the scrollbar to show on the left of a textarea
instead of the right?
Add
dir="rtl" to the <textarea> tag, like
this:
<textarea
dir="rtl">
Sample:
You can
do the same thing in the page <html> tag,
as well, and it will flip the whole layout (but not
text) to a right-to-left orientation, with the page
scrollbar on the left instead of the right. The
technique is intended for languages (Arabic, for
instance) that read from right to left, rather than left
to right; but can occasionally be used to good effect
for special purposes.
Note that
this works in IE4&up and NS6&up; but is ignored
in older browsers.
.
|
|
|
|
| How
do I stop the scrollbar from showing in a regular
window?
In
windows where you have a minimum of content, or for
design reasons do not want the browser scrollbar to
show, you can remove the scrollbar by adding scroll="no"
to the page body tag, like this:
<body
scroll="no">
A perhaps
more sensible approach in most cases, however, is to use
scroll="auto"
instead. This removes the scrollbar from the page
when there is no need for it; but shows the scrollbar
when content exceeds the length of the window.
Thus:
<body
scroll="auto">
..
|
|
|
|
| How
do I attach more than one style to an element?
Basically, you just put them all in a row with a
space between them when you attach the class, as in this
<div> example, where three different styles are
used:
<div class="styleOne styleTwo styleThree">
For instance, let's say we have this style script in
the head of the page:
<style>
.bigText {
font-family: sans-serif;
font-size: 20px;
}
.redItalic {
color : red;
font-style: italic;
}
.lineThrough {
text-decoration: line-through;
}
</style>
To attach that to a <div> with some text, it
would look like this:
<div class="bigText redItalic lineThrough">
The dogs of war eat watermelons.
</div>
with the result showing, thus...
The dogs of war eat watermelons.
If you think this through a bit, it can greatly
simplify the use of styles, by segregating particular
characteristics to individual styles that are then
combined as needed -- rather than making numerous, longer, more
complex styles for every possible combination of
characteristics.
..
|
|
|
|
| How
do I use a JavaScript link to return to the previous
page?
JavaScript
includes what is called a history object.
It tracks the URLs visited by the browser. You can use
this browser history as a means to return to the
previous page (or, for that matter, to go back and
forward through the history). This is especially useful
when a hard-coded, specific link is not possible; for
instance, in cases where you do not necessarily know the
address of the previously visited page. This is
how a "previous page" or "go-back"
link would appear in your HTML code:
<a
href="javascript:history.go(-1)">
Go Back
</a>
Alternatively,
if you wanted to go forward instead of backward in the
history, you would write the code thus:
<a
href="javascript:history.go(1)">
Go Forward
</a>
The
numbers in the parentheses are the number of pages to
move (forward or back, respectively, in the above
examples). You can also move more than one page;
for instance javascript.history.go(-3)
would navigate three pages back in the history.
Note that if there is no page in the history to go to,
the JavaScript does not error out; it simply does
nothing.
.
|
|
|
|
| How
can I protect my page code with a no-right-click script?
One of
the more commonly asked questions, you will find a
couple of good scripts for this at the following links:
Basic
No-Right-Click Script with Alert is
a standard no-right-click script.
No-Right-Click
Script Launches PopUp Window is
a bit more interesting, in that it launches a popup
window where you can put your own page, hurling whatever
invective amuses you at the unduly curious.
It should
be noted that no-right-click scripts offer limited
protection in a standard browser window, since the
visitor can simply use View > Source from the browser
menu to see the code. However, if you put your
content in a configured window (popup window, or
fullscreen mode window) with no menu or status bars,
such scripts can be reasonably effective. The code
for any page is still in the browser cache on the
visitor's hard drive, but extremely few people will go
to the effort to dig it out.
.
|
|
|
|
| How
do I close a regular window with a JavaScript
link, and how would I do it if I am using frames?
For a
regular window, use this:
<a href="javascript:window.close()">Close</a>
If you
are using a frameset, then use this in any page in any
frame in the frameset:
<a href="javascript:top.window.close()">Close</a>
..
|
|
|
|
|
