- Adding Pagination Controls
- Adding a Print Control
- Adding an Email Control
- Automatic Pagination
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding an Email Control
As an added bonus, you can also add a quick-and-dirty control to email the link for the page. These links are often found next to the print control on Web pages, but generally take the user to a separate page with form fields to collect the necessary information to send an email. However, using some JavaScript along with the standard mailto protocol, you can use the page title as the email subject and send the link URL in the body of the message, making use of the default email application. This has several distinct advantages:
- The visitor has use of the address book.
- You don’t have to create and maintain a separate email page.
- Visitors don’t have to worry that you might use information in ways they do not approve of.
The obvious downside is that if users are not using their own computers (for example, if they are traveling) they cannot use this control.
Reopen your pageControl.js file and add the following variables at the top to find the name of the page to use as the email subject line and the URL to use as the content (body) of the email:
var emailSubject=document.title; var emailBody=self.location;
In the writePageControl() function, add the following line of code within the pageSend layer, immediately after the print control:
document.writeln (’<a href="mailto:?subject=’ + emailSubject + ’&body=’ + emailBody + ’">Email</a>’);
When you load the page, you should now see the Email control next to the Print control. Clicking this control opens the computer’s default email program with a new email and populates the subject with the title of the Web page and put the link directly into the body (see Figure 5).
)
Figure 5 ...Sending email through the user’s email client allows more control and a greater sense of security.
Final CSS file for screen: http://www.webbedenvironments.com/examples/PageControls/css/screen.css
Final CSS file for print: http://www.webbedenvironments.com/examples/PageControls/css/print.css
Final JavaScript file: http://www.webbedenvironments.com/examples/PageControls/javascript/pageControls.js