Home>Web design tutorial>CSS tutorial

Js and CSS realize footnote effect

Author：Eve Cole Update Time：2009-06-12 17:46:02
Footnotes are the best way to provide users with more information and are also an effective supplement to the main information. They are commonly found in various printed books. However, since footnotes have these benefits, of course we must also take advantage of them in web pages. This article introduces you to how to achieve footnote effects using Javascript and CSS.
Javascript: 
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. // Description: Use Javascript and CSS to achieve footnote effect
    5.  
  5. // Author: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var footNotes = function ( ) { } ;
    8.  
  8.  
    9.  
  9. footNotes. prototype = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // The className of the footnote
    12.  
  12. footNoteTagName : "span" , // The tag name of the footnote
    13.  
  13. footNoteBackLink : " [back]" , // Return to the link
    14.  
  14.  
    15.  
  15. format : function ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) return false ;
    18.  
  18.  
    19.  
  19. var content = document.getElementById ( contentID ) ;
    20.  
  20. var footnote = document.getElementById ( footnoteID ) ;
    21.  
  21.  
    22.  
  22. var spans = content. getElementsByTagName ( this . footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var noteArr = [ ] ;
    25.  
  25. var note = 0 ;
    26.  
  26. var elContent;
    27.  
  27.  
    28.  
  28. var len = spans. length ;
    29.  
  29. for ( i= 0 ; i<len; i++ )
    30.  
  30. {
    31.  
  31. note ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] . className == this . footNoteClassName )
    34.  
  34. {
    35.  
  35. // Get the footnote content
    36.  
  36. elContent = spans [ i ] . innerHTML ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Create a link to the footnote
    41.  
  41. var newEle = document. createElement ( "a" ) ;
    42.  
  42. newEle. href = '#ftn_' + footnoteID + '_' + note;
    43.  
  43. newEle. title = "show footnote" ;
    44.  
  44. newEle. id = 'ftnlink_' +footnoteID+ '_' + note;
    45.  
  45. newEle. innerHTML = note;
    46.  
  46. // Clear the original content
    47.  
  47. while ( spans [ i ] . childNodes . length )
    48.  
  48. {
    49.  
  49. spans [ i ] . removeChild ( spans [ i ] . firstChild ) ;
    50.  
  50. }
    51.  
  51. spans [ i ] . appendChild ( newEle ) ;
    52.  
  52. }
    53.  
  53. }
    54.  
  54.  
    55.  
  55. //Create a note list
    56.  
  56. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    57.  
  57.  
    58.  
  58. footnote.appendChild ( ul ) ;
    59.  
  59.  
    60.  
  60. } ,
    61.  
  61.  
    62.  
  62. __buildNoteList : function ( notes, noteID )
    63.  
  63. {
    64.  
  64. if ( !notes || notes. length < 1 ) return ;
    65.  
  65. var ul = document. createElement ( 'ul' ) ;
    66.  
  66.  
    67.  
  67. ul.className = this .footNoteClassName ;
    68.  
  68.  
    69.  
  69. varli ;
    70.  
  70.  
    71.  
  71. var len = notes. length + 1 ;
    72.  
  72. for ( i= 1 ; i<len; i++ )
    73.  
  73. {
    74.  
  74. li = document. createElement ( 'li' ) ;
    75.  
  75. li. id = "ftn_" +noteID+ "_" +i;
    76.  
  76.  
    77.  
  77. li. innerHTML = notes [ i -1 ] ;
    78.  
  78.  
    79.  
  79. // Create a [return] link
    80.  
  80. var link = document. createElement ( "a" ) ;
    81.  
  81. link. href = "#ftnlink_" + noteID + "_" + i;
    82.  
  82.  
    83.  
  83. link. innerHTML = this . footNoteBackLink ;
    84.  
  84.  
    85.  
  85. li.appendChild ( link ) ;
    86.  
  86.  
    87.  
  87. ul.appendChild ( li ) ;
    88.  
  88. }
    89.  
  89.  
    90.  
  90. return ul;
    91.  
  91. }
    92.  
  92. } ;
    93.  
  93.  
    94.  
  94. </script>
    95.  
  95.  
To implement footnotes we need the following elements:
HTML: 
  1.  
    2.  
  2. <div id = "article1" >
    3.  
  3.  
    4.  
  4. CSS <span class = "footnote" > CSS is the abbreviation of Cascading Style Sheet. Translated as "Cascading Style Sheets". It is a markup language used for (enhanced) control over web page styles and allows the separation of style information from web page content. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
in:
article1 is the main body of the article you need footnotes for
<span class="footnote"> .. </span> is the annotation content, and both span and class tags can be configured.
artnotes1 is where footnotes are displayed

According to the default setting calling method:
Javascript: 
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new footNotes ( ) ;
    5.  
  5. footnote. format ( 'article1' , 'artnotes1' ) ;
    6.  
  6.  
    7.  
  7. </script>

    9.  


  9. If you want to customize some content, you can use the following methods:
     Javascript:
  1.  
    2.  
  2. <script type= "text/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new footNotes ( ) ;
    5.  
  5. footnote. footNoteClassName = "footnote2" ;
    6.  
  6. footnote. footNoteTagName = "em" ;
    7.  
  7. footnote. footNoteBackLink = " [back &laquo;]" ;
    8.  
  8. footnote. format ( 'article1' , 'artnotes1' ) ;
    9.  
  9.  
    10.  
  10. </script>
Related Articles