Using JavaScript and CSS to implement footnotes (Footnote) effects _javascript Tips

However, since footnotes have these benefits, of course we have to take advantage of them in Web pages, this article gives you a way to implement footnote effects with Javascript and CSS.

Copy Code code as follows:

<script type= "Text/javascript" >
Description: Implement footnote (Footnote) effects with Javascript and CSS
var footnotes = function () {};
Footnotes.prototype = {
Footnoteclassname: "Footnote",//footnote className
Footnotetagname: "Span",//footnote label name
Footnotebacklink: "[Back]",//Return link
Format:function (ContentID, Footnoteid)
{
if (!document.getelementbyid) return false;
var content = document.getElementById (ContentID);
var footnote = document.getElementById (Footnoteid);
var spans = content.getelementsbytagname (this.footnotetagname);
var notearr = [];
var note = 0;
var elcontent;
var len = spans.length;
for (i=0; i<len; i++)
{
Note + +;
if (Spans[i].classname = = this.footnoteclassname)
{
Get footer Contents
Elcontent = spans[i].innerhtml;
Notearr.push (elcontent);
Create a link to a footnote
var Newele = document.createelement ("a");
Newele.href = ' #ftn_ ' + Footnoteid + ' _ ' + Note;
Newele.title = "Show footnote";
newele.id = ' Ftnlink_ ' +footnoteid+ ' _ ' + Note;
newele.innerhtml = Note;
Empty the original content
while (Spans[i].childnodes.length)
{
Spans[i].removechild (Spans[i].firstchild);
}
Spans[i].appendchild (Newele);
}
}
Create a comment list
var ul = this.__buildnotelist (Notearr, Footnoteid);
Footnote.appendchild (UL);
},
__buildnotelist:function (notes, Noteid)
{
if (!notes | | notes.length < 1) return;
var ul = document.createelement (' ul ');
Ul.classname = This.footnoteclassname;
var Li;
var len = notes.length + 1;
for (I=1; i<len; i++)
{
Li = document.createelement (' li ');
Li.id = "Ftn_" +noteid+ "_" +i;
li.innerhtml = Notes[i-1];
To create a "back" link
var link = document.createelement ("a");
Link.href = "#ftnlink_" + Noteid + "_" + I;
link.innerhtml = This.footnotebacklink;
Li.appendchild (link);
Ul.appendchild (LI);
}
return ul;
}
};
</script>

To implement footnotes, we need the following elements:

Copy Code code as follows:

<div id= "Article1" >
CSS <span class= "Footnote" >CSS is the abbreviation for cascading Style Sheet. "Cascading style forms." is a markup language for (enhanced) control of page styles and allows the separation of style information from Web page content. </span>
</div>
<div id= "artnotes1" class= "Footnoteholder" ></div>

which
Article1 is the subject of the article you need footnotes
<span class= "footnote" >. </span> is the annotation content, the label span and class are configurable.
Artnotes1 is where the footnotes are displayed
To call by default settings:

Copy Code code as follows:

<script type= "Text/javascript" >
var footnote = new footnotes ();
Footnote.format (' Article1 ', ' artnotes1 ');
</script>

If you want to customize some of the content, you can use the following ways:

Copy Code code as follows:

<script type= "Text/javascript" >
var footnote = new footnotes ();
Footnote.footnoteclassname = "Footnote2";
Footnote.footnotetagname = "em";
Footnote.footnotebacklink = "[back«]";
Footnote.format (' Article1 ', ' artnotes1 ');
</script>

Test code: Save the following code to run.

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "keywords" content= annotation, CSS, Javascript, footnote, footnote, "/>
The <meta name= "description" content= footnote (Footnote) is one of the best ways to provide more information to users and an effective complement to the subject information, common in a variety of printed books. However, since footnotes have these benefits, of course we have to take advantage of them in Web pages, this article gives you a way to implement footnote effects with Javascript and CSS. "/>
<title> using Javascript and CSS to implement footnotes (Footnote) effects-annotations, CSS, Javascript, Footnote, footnotes, </title>
<body>
<div class= "AD" >
</div>
<br/>
<div id= "Example" >

<div id= "Example_main" >
<!--************************************* instance code started *************************************-->
<style type= "Text/css" >
A
Font-weight:bold;
Text-decoration:none;
Color: #f30;
}
a:hover {
Color: #FFA200;
}
#wrapper {
width:500px;
margin:0 Auto;
Text-align:left;
}
#wrapper p {line-height:200%;font-size:14px;}
/*
================================================
Styling for footnotes begins
================================================
*/
Div.footnoteholder {
border-left:1px solid #ccc;
margin:20px 0 50px 20px;
padding:20px 10px;
font-size:12px;
line-height:150%;
}
Span.footnote {
Vertical-align:super;
font-size:10px;
}
Ul.footnote, Ul.footnote li {
margin:0;
padding:0;
}
Ul.footnote Li {
List-style-type:decimal;
margin:3px 0 3px 20px;
Color: #777;
}
Em.footnote2 {
Vertical-align:super;
font-size:10px;
}
Ul.footnote2, Ul.footnote2 li {
margin:0;
padding:0;
}
Ul.footnote2 Li {
List-style-type:decimal;
margin:3px 0 3px 20px;
Color: #678BB2;
}
</style>
<script type= "Text/javascript" >
Description: Implement footnote (Footnote) effects with Javascript and CSS
Author: codebit.cn (http://www.CodeBit.cn)
var footnotes = function () {};
Footnotes.prototype = {
Footnoteclassname: "Footnote",//footnote className
Footnotetagname: "Span",//footnote label name
Footnotebacklink: "[Back]",//Return link
Format:function (ContentID, Footnoteid)
{
if (!document.getelementbyid) return false;
var content = document.getElementById (ContentID);
var footnote = document.getElementById (Footnoteid);
var spans = content.getelementsbytagname (this.footnotetagname);
var notearr = [];
var note = 0;

var elcontent;
var len = spans.length;
for (i=0; i<len; i++)
{
Note + +;
if (Spans[i].classname = = this.footnoteclassname)
{
Get footer Contents
Elcontent = spans[i].innerhtml;
Notearr.push (elcontent);
Create a link to a footnote
var Newele = document.createelement ("a");
Newele.href = ' #ftn_ ' + Footnoteid + ' _ ' + Note;
Newele.title = "Show footnote";
newele.id = ' Ftnlink_ ' +footnoteid+ ' _ ' + Note;

newele.innerhtml = Note;

Empty the original content
while (Spans[i].childnodes.length)
{
Spans[i].removechild (Spans[i].firstchild);
}

Spans[i].appendchild (Newele);
}
}
Create a comment list
var ul = this.__buildnotelist (Notearr, Footnoteid);
Footnote.appendchild (UL);
},
__buildnotelist:function (notes, Noteid)
{
if (!notes | | notes.length < 1) return;

var ul = document.createelement (' ul ');
Ul.classname = This.footnoteclassname;
var Li;
var len = notes.length + 1;
for (I=1; i<len; i++)
{
Li = document.createelement (' li ');
Li.id = "Ftn_" +noteid+ "_" +i;
li.innerhtml = Notes[i-1];
To create a "back" link
var link = document.createelement ("a");
Link.href = "#ftnlink_" + Noteid + "_" + I;
link.innerhtml = This.footnotebacklink;
Li.appendchild (link);
Ul.appendchild (LI);
}
return ul;
}
};
</script>
<div id= "wrapper" >
<div id= "Content" >
<div id= "Article1" >

<p> in the process of programming, we usually accumulate a lot of simple, effective and reusable small pieces of code, a simple string processing function <span class= "Footnote" > function is to assign the unique output value to each input "law" ( Wikipedia). </span> or a regular expression that validates the e-mail address <span class= "footnote" > Regular expression (Regular Expression) describes a pattern of string matching. Can be used to check whether a string contains a seed string, to replace a matching substring, or to remove a substring from a string that matches a condition. </span&gt, or a simple file upload class, or even a good css<span class= "footnote" &GT;CSS is the abbreviation for cascading Style Sheet. "Cascading style forms." is a markup language for (enhanced) control of page styles and allows the separation of style information from Web page content. </span> navigation style. These tips save us a lot of time, but for a long time, the number of code is more and more, it takes a lot of time to find it. Therefore, the site is committed to the collection and collation of a number of similar small knowledge, and strive to improve the quality of the article search, one convenient for everyone to check, second also is to support the cause of open source.
</p>
<p> the code and tutorials collected in the site, there are functions extracted from world-renowned Open-source software, class <span class= "Footnote" > class is the definition of an object. It contains information about how the object acts, including its name, methods, properties, and events. </span&gt, also has the user submits the original or the translation wonderful article. This site contains code standards are: simple, wonderful, universal.
</p>

</div>

<div id= "artnotes1" class= "Footnoteholder" ></div>

<div id= "Article2" >

<p> in the process of programming, we usually accumulate a lot of simple, effective and reusable small pieces of code, a simple string processing function <em class= "Footnote2" > function is to assign the unique output value to each input "law" ( Wikipedia). </em> or a regular expression that validates the e-mail address <em class= "Footnote2" > Regular expression (Regular Expression) describes a pattern of string matching that can be used to check whether a string contains a seed string, Replace a matching substring or remove a substring from a string that matches a condition. </em&gt, or a simple file upload class, or even a good css<em class= "Footnote2" &GT;CSS is the abbreviation for cascading Style Sheet. "Cascading style forms." is a markup language for (enhanced) control of page styles and allows the separation of style information from Web page content. </em> navigation style. These tips save us a lot of time, but for a long time, the number of code is more and more, it takes a lot of time to find it. Therefore, the site is committed to the collection and collation of a number of similar small knowledge, and strive to improve the quality of the article search, one convenient for everyone to check, second also is to support the cause of open source.
</p>
<p> the code and tutorials collected in the site, there are functions extracted from world-renowned Open-source software, class <em class= "Footnote2" > class is the definition of an object. It contains information about how the object acts, including its name, methods, properties, and events. </em&gt, also has the user submits the original or the translation wonderful article. This site contains code standards are: simple, wonderful, universal.
</p>

</div>

<div id= "Artnotes2" class= "Footnoteholder" ></div>
</div>
<script type= "Text/javascript" >
<! [cdata[
var footnote = new footnotes ();
Footnote.format (' Article1 ', ' artnotes1 ');
var footnote2 = new footnotes ();
Footnote2.footnoteclassname = "Footnote2";
Footnote2.footnotetagname = "em";
Footnote2.footnotebacklink = "[back«]";
Footnote2.format (' Article2 ', ' artnotes2 ');
]]>
</script>
</div>
<!--************************************* instance code end *************************************-->
</div>
<div id= "Back" ><a href= "/pub/html/javascript/tip/footnotes_with_javascript_and_css/" > Return "with JavaScript and CSS implementation footnote (Footnote) effect "</a></div>
</div>
<br/>
<div class= "AD" >
</div>
</body>