Web Page and Site Features
Ajax-Free Info Transfer From Web Page to Server
Use JavaScript to send data from web page to server (without Ajax).
This is a tutorial showing how Ajax can be used to fill a div with content obtained from the server. And change the content on demand.
Altering Popup Window Behavior
There are plain popups. And there are popups with altered behavior.
When a page loads with a valid anchor name, the window scrolls to that position. I'll show you how to scroll a div to a specific spot instead of the window.
Here is a way to give an important word or phrase a noticeable highlight, a subtle animation. It can be used for a price, a phone number, anything that needs attention.
Animated rotation means you can see the rotation happening on the page. One way to accomplish rotations is with the CSS transform property.
A Notice at Bottom of Browser Window
How to publish a notice on your web page fixed at the bottom of the browser window.
Make an icon for a smart phone or tablet that, when tapped, opens the browser and loads the desired page.
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.
How to provide a "print this web page article" link.
A ticker on a web page grabs the visitor's attention. It's message is seen.
The Attention Ticker software puts a ticker on WordPress posts and pages and also on non-WordPress pages. I'll describe how to do it.
Automatically Enlarge Form Field When Needed
A text field grows larger as the site visitor types characters into it. It shrinks as characters are deleted.
Your visitor's browser knows when it has finished loading a page. Using JavaScript, you can make things happen at that point.
Automatic Scroll To Exact Pixel Position
When Page Loads
Generally, when a page is loaded, the upper-left part of the page is visible in the browser window or frame. This article describes how to display a different part of the page by automatically scrolling an exact amount.
Did you know you can switch background images like a slide show? It's not something I had previously thought about, until my imagination was stimulated at JavaScript Source
Background Image Transition Slide Show
This article provides the means to transition between images with fades. The images appear to be background images.
Check a Checkbox to Reveal Content
When a checkbox is checked, the content of a div is revealed. When the checkbox is unchecked, the content disappears.
You can show or hide content when a checkbox is checked or unchecked.
Click Replaces One Div With Another
Swap one div for another with a mouse click or a tap.
If you want to require an email address, or an agreement to receive promotions or to participate in an activity, in exchange for a freebie, this article is for you.
Content Box with Unique Shadow
A way to make the content of a div stand out by using an image to give it a unique shadow.
Any HTML div tag can coded to function like a form submission button. Or a button to do other duties, like redirect the web page when clicked.
Images can be given drop shadows using pure CSS.
Direct Download of Images (and Other Files)
Let your site visitors tap on an image to download the image. Or download any other file type you allow.
How to switch a div and its content every so often on a web page. An automated div layer slide show, one without next/previous buttons.
Download a file with a click. Tap it and here comes the file.
Site visitors select an item from the dropdown. The selected content is pulled in.
When you create forms with date fields, do you prefer a calendar to choose a date instead of several dropdown lists? This article shows you how, complete with all the code you need.
Easy Member, new and free membership software that lives up to its name.
A pull quote on a web page is a section of text pulled out of web page content and presented in an attention-getting way. They're usually thought-provoking or enticing excerpts.
Expandable Menu Items Without JavaScript
Sometimes, menu items are expanded to reveal sub-items to tap on. Generally, the functionality is maintained with JavaScript. JavaScript is unnecessary when the HTML "details" tag is used.
Image swaps tend to be abrupt. This article describes one implementation where the new image fades in.
So, what would people say if they were able to send you feedback from within the article they are reading?
Fixed Position, Edge-Hugging Clickable Image
Occasionally, I see a clickable image on the left or right side of web pages, right at the edge of the browser window. I wanted one for myself. And I thought maybe you would, too.
Position an image within a browser window that won't move even with page scroll.
During a vertical scroll, the table header scrolls out of view -- unless the header is fixed in position.
Flip Content Front-Side to Back-Side
A div with content seems to flip and show the back side of the div. After a pause, it flips again to show the front side.
Floating 'Scroll to Top of Page' Link
Learn how to implement a floating up-arrow image that floats on the right side of a web page. Clicking on it scrolls the page to the top.
Force Download PDF (Instead of Browser View)
There are situations where a PDF (or other file) needs to be downloaded to the site visitor's computer. Not just loaded into the browser.
Formatting End-of-page Site Links
There is a way to automatically omit a menu link when at the page that would otherwise be linked to.
A form in an iframe lets a form be used and the thank-you message published without leaving the page. The site visitor stays right there on the page. No need for them to click the back button after using the form to return and continue reading your content.
One PHP script for publishing many world time zones in virtually any combination of time format with geographical locations
Borders with color gradients can be made in two steps.
Hide and Display Content On Demand
You may have encountered web pages where an action on your part like clicking a link or checking a checkbox or moving the mouse over a certain part of the web page inserted causes additional content to appear on the page. The website may have made it possible for another action to remove the content.
Hide and Reveal Content, On Demand
Busy webpages can benefit from these easy "Hide and Reveal Content" techniques. Make extra information available to the visitor - on the same page they are viewing
Hide and Reveal Content, On Demand: How It Works
Hide and reveal content on a webpage. CSS is the key. JavaScript is the switch.
Hiding Affiliate Code In Browser Address Bar
If you use ClickBank (or other systems that leave the affiliate's ID in the browser's address bar), it can be obvious to the potential buyer that an affiliate link was followed. This affects affiliates in two ways.
On your website, publish an always-correct number of days until a certain date.
An easter egg is an intentional hidden message, inside joke, or feature. The key is "intentionally hidden," which implies it can be discovered.
How to Print Only One Thing on a Web Page
Site visitors may wish to print one special thing on your web page, without printing the entire page. Here's how to implement the feature.
HTML Reveal-Close Without JavaScript, CSS Optional
Javascript-free content reveal-hide functionality.
HTML Tooltips With CSS Enhancements
You're probably aware that when a cursor hovers over text affected by a TITLE attribute, the value assigned to the attribute shows up as a tooltip. This article shows you examples of how using that one attribute can make your websites more visitor-friendly.
Click thumbnail. Get larger-image popup centered on page. Click anywhere to close popup.
Image Slides Forward and Backward
A forward- and backward-sliding image, toward you and away from you.
An image tag can launch a PHP script as the image is loaded.
PHP can be used to put text on top of an image so that it is part of the image. The imprinted image can be saved just like other images on web pages.
Include Special Message When Web Page Is Printed
Some people print web pages they like for off-line study, perhaps to save in a swipe file for future reference.
Interesting Image Color-Grayscale Switching
Tap an image to make it turn into a grayscale image.
JavaScript alert() Alternative
New Alert Box replaces JavaScript alert() so the message box can be visually designed for your site.
JavaScript, Not PHP, for PayPal Thank-You Page
When it comes to inserting URL parameter information into a web page, JavaScript can be used as well as PHP.
Keep Specific Web Page Items From Printing
Omit certain items when the browser is used to print a web page, whether printing to printer or as a PDF.
When a certain key is pressed on a web page, stuff can happen. As the website owner, you determine which key that is and you determine what will happen. It's done with the JavaScript presented in this article.
Label Change when Checkbox Checked
When a checkbox is checked or unchecked, its label can change accordingly. When changed, labels can be bolded, colors changed, even the text can be changed.
This is a fine way to display a large image in a small div, and let the magnification be according to the web page reader's preference.
Sometimes it is useful to link to another web page without the HTML A "anchor" tag.
List of Suggestions at Form Text Field
The HTML5 datalist tag presents a list of possible values when a user starts typing in a text field. The user can select one of the values instead of typing the whole thing. Alternatively, the user can type something that isn't in the list.
Sections on a web page with content that may go stale while the site visitor is on the page can be updated live — "live" being page updates occurring whenever updated content is available.
Copy 'n paste code to make graphical bars on the fly for web pages. Code can be customized.
A jump link is one that, when clicked on, scrolls the web page to another point on the page. If the destination is cluttered or if the desired section is not immediately evident, the site visitor can experience confusion. This article show one way to temporarily mark the place to get attention where the site visitor should look first.
Using the position:fixed; CSS declaration for a browser-based online ebook reader.
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.
There are instances where a mouseover message makes sense.
The countdown timer presented in this article counts down with hours, minutes, and seconds.
Next/Previous Links on Article Pages
Some web pages have "next" and "previous" links for related articles. Here, find out how to do it.
Online Custom Certificate Printing
Learn how to let people provide content for a custom printer-ready certificate — on your website.
Tap a link. Pop up information. (Two ways to code it.)
The browser acts as if #name was appended to the link URL, even when it wasn't.
For any of many possible reasons, sometimes it is desirable to have the browser open a new window for the new page when a link is clicked.
Yes, I'll show how to highlight an operative menu item. But, what is the menu item operative of? The menu items hide and reveal certain content on the page - without the use of A tag links. I'll show you how to do that, too.
Page View History: Leaving Breadcrumbs for Visitors
Learn how to be a gracious host and give your site visitors links to their most recently viewed pages. The display may also contain the current page's title. It can be considered akin to a "You are here" and "You were here" map.
PayPal Buy Now Buttons with Coupon Codes
This article describes how to accept coupon codes with PayPal Buy Now buttons.
The Possibilities Lightbox is so named because its use has many possibilities. It can be used on WordPress and non-WordPress sites.
Change the CSS style of a div or other HTML elements, on demand, with one powerhouse JavaScript function.
Preselect Today's Date in Dropdown
Preselecting the current month, day, or year in a dropdown, where appropriate, is a friendly gesture. It expresses an element of elegance. "Where appropriate" would be in forms where the form user's response likely would be today's date. A start date for a membership or other service period, for example.
Present a Special Message
to Really Interested Site Visitors
When people view 3 or more pages at a website, it is likely they are either thoroughly interested in the content or they are looking for something specific. This article describes how to deliver a special message to those site visitors.
You've seen the "previous" and "next" links on some web pages with multi-page articles. The site owners are not hand-coding all those links, not if they're smart. Here is a smart way to do it.
Printing a Textarea Field and Not the Entire Page
I'll show you how to print only the content of a textarea field instead of the entire web page.
The site visitor clicks a link and the content of the textarea field is queued for printing. The rest of the page does not print.
Print textarea Box Into Web Page
I'll show you how to transfer the content of a textarea box into a div on the same web page. The transfer can occur either immediately after any change is made to the text in the textarea box or when a button is clicked.
Publish Current Date and Time With JavaScript
The current date and time according to the user's computer or device can be printed on a web page when it is loaded.
Publishing Your Current Office Time
If you offer a telephone number for people to call, it is considerate to let them know what time it is at your office.
A person might think a quiz is only for academic uses. But quizzes can be put to use in many other situations, too.
When a page is loaded, or reloaded, some of its content can be selected randomly with PHP.
This article shows how to display one or more random images on a web page.
Real Time Reader Feedback Within Your Articles
Understanding the audience is key to writing content the audience can easily understand. This article describes a way to enhance your understanding of your audience.
A user of the Willmaster below-article anonymous feedback form asked how to replace a link with a different URL after it has been tapped.
Require Steps Be Done In Order
When a web page has several steps that need to be completed by the user, how does one ensure the steps are done in order? This article describes how to put each step into an undisplayed div tag. The divs are locked so each step must be completed before the next div can be displayed. A cookie remembers the last step completed so the user can come back later to finish the steps.
Sometimes, an agreement to terms of service must be acquired before a service is delivered.
Checking a web page to see if it looks good displayed in browser windows at various widths can be time consuming.
Reveal and remove content for each heading of an article - so people don't immediately get discouraged about its huge length.
Doing a slight rotation of text or an image can attract the eye.
Scroll Assist for Long Web Pages
Having the icon visible only when the user is likely to need it makes it more user-friendly than an ever-present icon would be.
JavaScript can be used to scroll a page until the content of an element is in the browser window.
There are two choices to easily scroll a web page to a specific point within a browser window.
Server-side Actions When Importing JavaScript
When JavaScript is imported from a file on the server, other actions can take place before the server delivers the JavaScript.
When you know the site user's country, you can publish country-specific content.
Sometimes site owners, especially site developers and others who work with the public via their website, need to provide somewhere to upload a file.
When not needed, the menu on the left side of a web page retracts to be out of the way. Tap it and it expands.
This article contains copy and paste JavaScript to swap two divs on a page. Along with an example of how to use it.
Create one file on your server to contain one or more custom variables. Now, you can use those custom variables on your *.php web pages.
Slide Open, Slide Close With jQuery
The article provides a relatively simple way to implement sliding show/hide content.
Your web sites can now have a suggestion box without form spam. Even without captcha or other action users need to take to prove they're human.
Special Message for Social Media Referrals
Publish a special message for people who click a link to your page at Facebook or Twitter.
Swapping Images With Built-In Image Rollover Code
When the mouse moves over the first image, it is replaced with the second image. When the mouse moves off the second image, it is replaced with the first image. The image rollover functionality is inserted into the image tag, built right in. It may be the easiest image switch code on the Internet.
Table Row Color Change On Mouseover
When tables are very wide, the eye may wander up or down onto another row. Changing the background color of the entire row when the mouse pointer hovers over it helps the reader's eye focus on the correct data.
I'll show you how to make a table sortable by clicking on a column heading. When a heading is clicked, the table rows sort themselves according to the data in the column below that heading.
This is likely the quickest (and easiest) to implement do-it-yourself tap-to-reveal method out there.
When an image is tapped, another image takes its place.
Things To Do With Textarea Form Fields
Getting form input, presenting text for copying, varying text size and color, automatically selecting content with a click, changing background colors, using background images, all these are addressed in this article.
A certain amount of time after a page loads, content (ads, images, sayings) can be replaced. Perhaps after a minute. Or two minutes.
Tweet and Share Buttons Your Way
Put Twitter and Facebook share buttons on your website without using either site's API. And without enabling Twitter or Facebook to follow your site visitors around.
Quickly implement an easy-to-maintain membership functionality for your website with Ultra-Simple Membership.
A user-friendly 404 page may suggest certain destinations depending on which subdirectory the person tried to get content from.
How to let the public make private edits to your web page.
Using JavaScript To Publish PHP Software Output
Some publishing platforms, WordPress for example, don't allow PHP code in blog posts or article page content. Thus, the output of PHP software can not be published that way. But it can be published with JavaScript. (NOTE: A plugin is now available for inserting PHP code into WordPress posts or pages. See article for link.)
Place an image of a phone on a web page that has a video running within the phone.
If you could give your visitors their preferred link style choice, would you?
Visitor's Time Zone Translated to Your Office Time
JavaScript translates your site visitor's time zone into your current office time.
Which to Use? display or visibility CSS Property
The CSS display property has more values available than does the visibility property. There is a major difference, however.
Width-Responsive YouTube Videos
How to make YouTube videos embedded in your content so they are responsive to browser or column width.
WillMaster LIKE is free software to put a "like" button images on your web pages – without having to go through Facebook.
All information in WillMaster Library articles is presented AS-IS.
We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.
