Javascripts and Others Tips & Tricks

21/09/2011 18:44

 

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 FutureQuestClick Here To Get Your Site Hosted With 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 FutureQuestClick Here To Get Your Site Hosted With 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){RubicusFrontendIns.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=https://www.mysite.com/mypage.html">
<script>
RubicusFrontendIns.location="https://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 https://www.mysite.com/otherpage.html

In this example, whatpage.html is redirected to https://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=https://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>

..

 

 

From https://www.etlux.com Visit this ..

Back