Will Bontrager Blogs Web Site Techniques
JavaScript Articles
Tooltip flyovers used judiciously can provide help at the very moment it's needed. Supplementary information can be provided for images, form field labels, or certain blocks of text, as examples. The information can be professionally and elegantly presented.
Switch background images like a slide show.
Ajax Content From Other Domains
Ajax has a restriction allowing it to retrieve content only from its own domain -- the domain where the web page is loaded into the browser is the only domain Ajax can retrieve content from. I show you how to get around that restriction.
Here is the source code of an Ajax engine you can use over and over, on many different web pages. With instructions how to use it. The focus is to make Ajax available even to those who have learned no programming skills.
Logging Syndicated Content Page Loads
I'll show how - and provide the means - to do your own logging of content you syndicate to other web sites.
Forms Copied And Pasted To Unauthorized Web Sites
This post is specifically oriented for those who are having problems with others copying their forms and pasting them on unauthorized web sites. The concept, however, can be applied to other web page features -- search boxes or cookies, as examples.
Form text fields may themselves contain a prompt indicating what information is expected. When the field is clicked on, the prompt disappears.
A colored bar extends and contracts, built entirely with HTML, CSS and JavaScript.
Changing textarea Box Size On-The-Fly
The user can change a textarea form field to any size desired, if you so allow. Ever run into a textarea box that was designed way too small? Or maybe even too big? It can be frustrating. Put your form users in control. Let them change the textarea box size to fit their needs.
One Way to Block Form Submission Robots
They pollute forums, inundate email boxes, corrupt databases with loads of wrong information, and vie with legitimate traffic for use of the Internet. I don't know how to keep them off the Internet. But I can tell you about a way to block them from auto-submitting your forms.
Right-Click and 'Select "[See Article]"'
Downloading the file requires the user to right-click on the link and then save the file. Different browsers have different right-click menus. This JavaScript will print the correct menu item for some of the most popular browsers.
Yes, the code for using Ajax really can be just copy 'n paste. The article linked to in this post provides exactly that.
I'll show you how to prevent pretty much any JavaScript function from running more than once with a cookie.
Use JavaScript to deliver ads to web sites where you are advertising at. I'll show you how.
Reliable "JavaScript-Required" for Forms
There may be times when a certain form may not be used at all except by browsers with JavaScript enabled. The answer is to use JavaScript to publish the submit button. With no JavaScript, there will be no submit button.
When folks fill out your forms, sometimes they type their name in all lowercase letters. And sometimes they type them all caps. Names are personal. Correct capitalization might be a little thing. But it can mean a lot. The JavaScript accompanying this article will adjust capitalization of names.
You've seen images swapped when the cursor moves over a link or the image itself. Today, I'll show you how to do a DIV swap. The DIVs being swapped can contain anything DIVs can contain -- images, text, forms, whatever. The article contains a complete example. Code is included to copy 'n paste into your web page to see it work.
Effectively Requiring Cookies With All Browsers
If you have any web pages that must not be viewed unless a certain cookie is set, this article contains the means to make it so.
Cache-Independent Imported JavaScript Files
Browser caching of content can be a problem if the content is subject to changing between page loads. Here, I describe a technique that works on every browser I've tested. And you don't need any cache-inhibiting meta tags.
Detecting a "Back" Button Click
Certain events can be detected (page load, page unload, page re-focus) and, depending on which order they occur, determine with some certainty whether or not the "back" button was clicked.
Multiple Function Calls with One Onclick Attribute
Once in a while we receive questions like, "How do I run more than one JavaScript function with one onclick= or onsubmit= call?"
A Printer-Friendly Web Page with Non-Printing Elements
Here, I will give you a copy 'n paste example of how to let your site visitors print certain parts of a web page and exclude certains parts from printing.
Multi-Page Forms with JavaScript and Cookies
If your form processing software does not have multi-page form capability, this article shows you how to carry the information from one form page to another using JavaScript and cookies.
Changing Form Action URLs On-The-Fly (an Addendum)
The reason an action URL with a query string rarely works is because a method="get" form, itself, generates a query string for the action URL. The result is a query string attached to the end of a query string.
The intent of this article is to make setting and reading cookies with JavaScript an easy thing for you to do.
Sometimes it is prudent to cloak links by controlling what the browser's status bar displays.
Publishing Content with JavaScript
These are 3 good reasons: (1) To hide your forms from spammers' robots. (2) To publish content pulled from remote files. (3) To hide certain content from search engine spiders.
A Personalized "Thank You" Page With Any Form
When your site visitor uses a form, the "thank you" page can be personalized. The personalization uses information the site visitor provided on the form. Personalization occurs when the "thank you" page is loaded into the browser, whether immediately after the form is submitted or later on.
A tab panel is a panel of content, often bordered, with tabs above it (or on the side of it). When tabs are clicked, different content is displayed for each tab.
Catching Illegal File Extension *Before* It's Uploaded
You have a form that lets people upload a file. The files you want to accept are only certain types — with extensions ".gif" or ".jpg", for example. It would be nice to have something that checks the file name extension right at the form, *before* the file is uploaded.
How to Make a Link that Does Nothing
When an anchor tag is used only for JavaScript functionality, an href attribute is still required. It's a link, after all. This post shows how to keep the browser from visibly reacting when the link is clicked -- the browser won't go anywhere, won't reload the page, nothing.
Mari and I were talking this morning and we came up with a Feeling Lucky button idea. Clicking on it redirects the browser to one in a list of our most popular web pages.
Simulating a Form Submit Button
Form submit buttons are limited in design choices. For example, suppose you want to put a smiley on the button that winks when it's clicked.
Pre-Fill and Multi-Page Forms with JavaScript
When information is passed in a URL parameter to a web page, JavaScript in the web page can pre-fill form fields.
Using JavaScript To Change Form Fields On-The-Fly
Sometimes a hidden (or other) form field needs to have its value changed depending on which, if any, radio button is checked or if something is typed into a certain form field. This post shows you how.
New JavaScript Demonstrations Index
This is a new index, not new JavaScript demonstrations. Yet, it contains JavaScript that you might have long ago given up ever finding.
Resizing Form Fields with JavaScript
Some websites can benefit from a touch of "Wow"; something fun to catch the visitor's attention.
Quick 'n Easy Double-Submit Blocker
Okay, people are clicking your submit buttons more than once, and you get double emails or double database entries. The fix is quicker to implement than it is to read the post.
When a mouse hovers over a link, the link URL is clearly visible in the browser's status bar. Sometimes that is not desirable. This article shows 2 ways to hide link URLs.
It's a Cookie! Get Outta Here!
When a page has performed it's purpose, a cookie can be set to redirect the browser to a different page on subsequent visits.
Making a 'Next' Button or Link
A "next" button or link at the end of an article or a section can be a convenient way to lead the site visitor to the next page in the sequence. This post shows you how.
Hiding a Page From the 'Back' Button
Need to hide a page from the back button? This is one way to do it.
Auto-Filling Billing Fields With a Click
This will show you how to make the shipping address fields in a form be copied to the billing address when a checkbox is checked.
How To Make an Image Roll Over with JavaScript
You've seen images on web sites that putting your cursor over an image causes the image to roll over into another image. This article shows you a method that also tells the browser to preload the second image.
(1) Limit the number of characters that can be typed into a textarea field. (2) Give IE/Win users the ability to switch textarea word wrap on/off.
Spamming You Through Your Own Forms
Are you getting spammed through your own web page forms? If not, remember willmaster.com for when it does happen. They have a solution.
Looking back, I notice that every three years I write about another method of providing instant information. The latest is about the Stock Ticker Box. The complete article is at http://www.bontragerconnection.com/library/library42.shtml
When a form has a dropdown list to select a year, the form creator often extends selections way into the future. Recently, I saw a form with a baby's "expected delivery date" dropdown list containing year selections for every year current to 12 years into the future.