JavaScript is a complex programming language that is used to make websites interactive for users. Despite the difficulty beginners may have with comprehending its code, there are some relatively simple yet useful functions that can be added to your site without much previous experience in working with JavaScript. This blog post will describe three snippets of JavaScript code that can be modified and integrated into your webpages by anyone who has a good understanding of HTML and CSS. These pieces of code may be of great use to anyone who works with large amounts of text on their sites and wants their users to have some input on how it is displayed for readability reasons.
One of the most simple yet useful tasks JavaScript can be asked to execute is to let users viewing a webpage change the CSS class of an HTML tag by clicking on a link. This effectively makes your website customizable and more attentive to user preferences. In this post, you will learn how to do the following:
There may come an occasion when you have a large amount of text that may not be necessary for all your visitors to see but may be useful to certain interested readers. Maybe you want to allow users to view more content without moving their browser to a new page. Times like these call for a simple piece of JavaScript that can hide and unhide text and div tags based on the actions of the user.
First, make sure the following classes are in your CSS stylesheet:
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
Now, put the following code in within your <head></head> tags at the top of the HTML document:
<script type="text/javascript">
function visibility(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
Here is the code for creating a link (obviously going in the <body> text of the HTML) that triggers the above JavaScript code:
<a href="javascript:visibility('divID');">
Click here to unhide and hide the below text:
</a>
Finally, here is how the code for the hidden/unhidden text should be written:
<div id="divID" class="hidden">
<p>This text will appear when you click the above link and disappear when you click it again.</p>
</div>
You should now be able to test this code in a browser and customize it as you wish. Underlined code can be changed as you see fit. Just make sure that if you replace "divID" with another div ID it remains consistent throughout the entire page.
After you complete this and get it working properly, you can decide to keep this code stored in a text file on your computer if you think it could be utilized in a fruitful manner in the future.
A major factor in readability is the line height at which your text is set. Some people may find a relatively low line height may make your site hard to read while others may decide that a high line height is unnecessary. This is why it may be a good idea to let your readers toggle the text between a low and high line height.
First, put following classes in your CSS stylesheet:
<style type="text/css">
.normal-line-height {line-height: inherit;}
.double-line-height {line-height: 200%;}
</style>
Now place this JavaScript code in the head tag:
<script type="text/javascript">
function expand(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='normal-line-height')?'double-line-height':'normal-line-height';
}
}
</script>
Here is the code for creating a link (place in the <body> text of the HTML) that triggers the above JavaScript code:
<a href="javascript:expand('divID');">
Click here to expand and collapse the line height of the below text:
</a>
Finally, here is the code for the text that will have its line height adjusted:
<div id="divID" class="normal-line-height">
<p>This text will have its line height altered when you click the above link and disappear when you click it again.</p>
</div>
Many of the same rules that apply to the hide/unhide code also applies to this code. Underlined code can be changed as you see fit. Make sure that if you replace "divID" with another div ID it remains consistent throughout the entire page.
Sometimes you may want to give the user the power to decrease and increase the font size of the text on your site. This would especially be useful for a news article in which you want to grant the user the ability to customize the size of the body text. The following code will give your readers the ability to toggle between three different sizes.
First, put following classes in your CSS stylesheet:
<style type="text/css">
.small-font {font-size: small;}
.medium-font {font-size: medium;}
.large-font {font-size: large;}
</style>
Now place this JavaScript code in the head tag:
<script type="text/javascript">
function shrink(divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='medium-font') {
item.className='small-font';
}
else if(item.className=='large-font') {
item.className='medium-font';
}
}
}
function enlarge(divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='small-font') {
item.className='medium-font';
}
else if(item.className=='medium-font') {
item.className='large-font';
}
}
}
</script>
The following code, placed in the body of the HTML, will allow readers to shrink and enlarge text:
<p><a href="javascript:shrink('divID');">Shrink</a> | <a href="javascript:enlarge('divID');">Enlarge</a></p>
Finally, here is the code for the text that will have its font size adjusted:
<div id="divID" class="medium-font">
<p>This text will have its font size adjusted when one of the above two links are clicked.</p>
</div>
The same rules that applied to the previous two pieces of code about underlined text and divID are applicable to this piece of code.
JavaScript is a powerful coding language that can be utilized in numerous ways to make user experiences more interactive and customizable. The above three snippets will allow developers to make the text on their web pages adjustable by individual readers and can thus come in handy on pages with large amounts of text. Please feel free to use the code in this blog post and customize it as you wish to give your readers a sense of control over what they read.
