Documentation Source Text

Check-in [81ab7ec21a]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Experimental: Attempt yet another method for implementing cross-browser pulldown menus.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | trunk
Files: files | file ages | folders
SHA1: 81ab7ec21a81c656a4563ccbfa73d1fd86ed6153
User & Date: dan 2007-12-12 11:14:05.000
Context
2007-12-12
11:14
Experimental: Attempt yet another method for implementing cross-browser pulldown menus. (Closed-Leaf check-in: 81ab7ec21a user: dan tags: trunk)
2007-12-11
13:49
Get rid of the double-spacing. (check-in: 0d59f40a31 user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to sitemap.tcl.
83
84
85
86
87
88
89





90
91
92
93
94
95
96
97
98
99
100
101
102
103
104



105

106










































































































107
108
  append P </ul>

  return $P
}

proc create_menubar {uriprefix} {
  set sitemap [linsert $::Sitemap 0 [list Sitemap sitemap.html]]





  foreach menuitem $sitemap {
    set menucontents ""
    foreach {caption uri menucontents} $menuitem break

    if {![string match -nocase http:* ${uri}]} {set uri "$uriprefix$uri"}
    putsin4 {<div class="menu"><div class="rel"><a href="${uri}">$caption</a>}
    if {$menucontents ne ""} {
      puts {<div class="pulldown">}
      foreach submenu $menucontents {
        foreach {caption uri} $submenu break
        if {![string match -nocase http:* ${uri}]} {set uri "$uriprefix$uri"}
        putsin4 {<a href="${uri}">$caption</a>}
      }
      putsin4 {</div>}
    }



    putsin4 {</div></div>}

  }










































































































}








>
>
>
>
>





|

|



|

|

>
>
>
|
>

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>


83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
  append P </ul>

  return $P
}

proc create_menubar {uriprefix} {
  set sitemap [linsert $::Sitemap 0 [list Sitemap sitemap.html]]
  set T {
    <table style="clear:both;width:100%"><tr><td>
      <div class="se"><div class="sw"><div class="ne"><div class="nw">
      <div class="toolbar">
  }
  foreach menuitem $sitemap {
    set menucontents ""
    foreach {caption uri menucontents} $menuitem break

    if {![string match -nocase http:* ${uri}]} {set uri "$uriprefix$uri"}
    append T [subst { <span class="menu"><a href="${uri}">$caption</a>}]
    if {$menucontents ne ""} {
      append T {<div class="pulldown">}
      foreach submenu $menucontents {
        foreach {caption uri} $submenu break
        if {![string match -nocase http:* ${uri}]} {set uri "$uriprefix$uri"}
        append T [subst {<a href="${uri}">$caption</a>}]
      }
      append T {</div>}
    }
    append T { </span> }
  }
  append T {
      </div></div></div></div></div>
    </table>
  }
  set T
}

proc create_menubar_header {path} {
  return [subst -nocommands {
    <script type="text/javascript">

      function y_offset (node) {
        var y = node.offsetTop;
        while (node.offsetParent) {
          node = node.offsetParent
          y += node.offsetTop
        }
        return y
      }
      function x_offset (node) {
        var x = node.offsetLeft;
        while (node.offsetParent) {
          node = node.offsetParent
          x += node.offsetLeft
        }
        return x
      }

      var current_menu = null
      var current_timeout = null

      function menu_mouseover () {
        menu_mouseout_delayed()
        var m = this.childNodes[1]
        if (m.style) {
          var top = y_offset(this) + this.offsetHeight;
          if (!document.all) { top += 8 }
          m.style.top = top + "px"
          m.style.left = x_offset(this) + "px"
          m.style.display = "block"
          current_menu = m
        }
      }
      function menu_mouseout () {
        current_timeout = window.setTimeout('menu_mouseout_delayed()', 500)
      }
      function menu_mouseout_delayed () {
        if (current_menu) {
          current_menu.style.display = "none"
        }
        if (current_timeout) {
          window.clearTimeout(current_timeout)
        }
        current_menu = null
        current_timeout = null
      }

      window.onload = function() {
        var collection = document.getElementsByTagName("span")
        var ii
        for (ii = 0; ii < collection.length; ii++) {
          var span = collection.item(ii)
          if (span.className == "menu") {
            span.onmouseover = menu_mouseover
            span.onmouseout  = menu_mouseout
            span.id  = "menu" + ii
          }
        }
      }

      function LOG (text) {
        if (!window.log) {
          window.log = window.open()
        }
        window.log.document.body.innerHTML += ("<p>" + text + "</p>")
      }

    </script>
    <style type="text/css">
      .toolbar { text-align: center; margin: 0; padding:8px; }
      .toolbar a { color: white; text-decoration: none; padding: 2px 12px 8px; }
      .toolbar a:visited { color: white; }
      .toolbar a:hover { 
        color: #80a796; background: white; text-decoration: underline
      }
      .toolbar a:active { color: blue }
      
      /* rounded corners */
      .se  { background: url(${path}images/se.png) 100% 100% no-repeat #80a796}
      .sw  { background: url(${path}images/sw.png) 0% 100% no-repeat }
      .ne  { background: url(${path}images/ne.png) 100% 0% no-repeat }
      .nw  { background: url(${path}images/nw.png) 0% 0% no-repeat }
  
      /* CSS for drop down menus */
      .pulldown {
        font-size: 0.8em;
        line-height: 1.0;
        margin-top:0px;
        display: none;
        position: absolute;
        z-index: 1;
        background: #80a796;
        text-align: left;
        border: 2px solid #607d71;
        border-top-style: none;
      }
      .pulldown a { display: block; white-space: nowrap; }

    </style>
  }]
}

Changes to wrap.tcl.
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
      float:right;
      text-align:right;
      font-style:italic;
      width:240px;
      margin:12px;
      margin-top:58px;
    }
    
    .toolbar {
      text-align: center;
      line-height: 1.6em;
      margin: 0;
      padding:1px 8px;
    }
    .toolbar a { color: white; text-decoration: none; padding: 2px 12px 6px; }
    .toolbar a:visited { color: white; }
    .toolbar a:hover { 
       color: #80a796; background: white; text-decoration: underline
    }
    .toolbar a:active { color: blue }
    
    .content    { margin: 5%; }
    .content dt { font-weight:bold; }
    .content dd { margin-bottom: 25px; margin-left:20%; }
    .content ul { padding:0px; padding-left: 15px; margin:0px; }
    
    /* rounded corners */
    .se  { background: url(${path}images/se.png) 100% 100% no-repeat #80a796}
    .sw  { background: url(${path}images/sw.png) 0% 100% no-repeat }
    .ne  { background: url(${path}images/ne.png) 100% 0% no-repeat }
    .nw  { background: url(${path}images/nw.png) 0% 0% no-repeat }

    /* CSS for drop down menus */
    .menu {
      float:left;
    }
    .pulldown {
      font-size: 0.8em;
      line-height: 1.0;
      left:0px;
      top:100%;
      margin-top:0px;
      display: none;
      position: absolute;
      z-index: 1;
      border: 2px solid #80a796;
      background: #80a796;
      text-align: left;

      border-left-color: #607d71;
      border-right-color: #607d71;
      border-bottom-color: #607d71;
    }

    .pulldown a { display: block; white-space: nowrap; }
    .toolbar table, .toolbar tbody, .toolbar tr, .toolbar td { 
      padding: 0; border-spacing: 0
    }
    .rel {position: relative}

    .over .pulldown, .menu:hover .pulldown { display: block; }
    .over .pulldown, .menu:hover .pulldown { display: block; }

    .advertisement {
      font-style: italic;
      color: #80a796;
      color: #607d71;
      color: #45735f;
    }
    .advertisement a {
      color: black;
    }

    </style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript">

      var current_menu_id = null
      var current_timeout = null

      function menu_mouseover () {
        menu_mouseout_delayed()
        this.className += " over"
        current_menu_id = this.id
      }
      function menu_mouseout () {
        current_timeout = window.setTimeout('menu_mouseout_delayed()', 500)
      }
      function menu_mouseout_delayed (id) {
        var elem = document.getElementById(current_menu_id)
        if (elem) {
          elem.className = elem.className.replace(" over", "")
        }
        if (current_timeout) {
          window.clearTimeout(current_timeout)
        }
        current_menu_id = null
        current_timeout = null
      }

      window.onload = function() {
        var collection = document.getElementsByTagName("div")
        var ii
        for (ii = 0; ii < collection.length; ii++) {
          var span = collection.item(ii)
          if (span.className == "menu") {
            span.onmouseover = menu_mouseover
            span.onmouseout  = menu_mouseout
            span.id  = "menu" + ii
          }
        }
      }
    </script>
  }
  puts {</head>}
  putsin4 {<body>
    <div><!-- container div to satisfy validator -->
    
    <a href="${path}index.html">
    <img class="logo" src="${path}images/SQLite.gif" alt="SQLite Logo"
     border="0"></a>
    <div><!-- IE hack to prevent disappearing logo--></div>
    <div class="tagline">Small, Fast, Reliable.<br>Choose any three.</div>
    <table width=100% style="clear:both"><tr><td>
      <div class="se"><div class="sw"><div class="ne"><div class="nw">
      <div class="toolbar">
        <table style="margin:auto"><tr><td>
  }
  create_menubar $path
  putsin4 {
        </tr></table>
      </div></div></div></div></div>
    </td></tr></table>
  }
}

# A procedure to write the common footer found at the bottom of
# every HTML file.  $srcfile is the name of the file that is the
# source of the HTML content.  The modification time of this file
# is used to add the "last modified on" line at the bottom of the
# file.







|
<
<
<
<
<
<
<
<
<
<
<
<
<





<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<












|
<
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<









<
<
<
<

|
<
<
<
<
<







68
69
70
71
72
73
74
75













76
77
78
79
80





































81
82
83
84
85
86
87
88
89
90
91
92
93

94





































95
96
97
98
99
100
101
102
103




104
105





106
107
108
109
110
111
112
      float:right;
      text-align:right;
      font-style:italic;
      width:240px;
      margin:12px;
      margin-top:58px;
    }














    .content    { margin: 5%; }
    .content dt { font-weight:bold; }
    .content dd { margin-bottom: 25px; margin-left:20%; }
    .content ul { padding:0px; padding-left: 15px; margin:0px; }
    





































    .advertisement {
      font-style: italic;
      color: #80a796;
      color: #607d71;
      color: #45735f;
    }
    .advertisement a {
      color: black;
    }

    </style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  }

  puts [create_menubar_header $path]





































  puts {</head>}
  putsin4 {<body>
    <div><!-- container div to satisfy validator -->
    
    <a href="${path}index.html">
    <img class="logo" src="${path}images/SQLite.gif" alt="SQLite Logo"
     border="0"></a>
    <div><!-- IE hack to prevent disappearing logo--></div>
    <div class="tagline">Small, Fast, Reliable.<br>Choose any three.</div>




  }
  puts [create_menubar $path]





}

# A procedure to write the common footer found at the bottom of
# every HTML file.  $srcfile is the name of the file that is the
# source of the HTML content.  The modification time of this file
# is used to add the "last modified on" line at the bottom of the
# file.