OSDN Git Service

Correctly handle internal page section references.
authorKeith Marshall <keith@users.osdn.me>
Fri, 6 Nov 2020 10:12:24 +0000 (10:12 +0000)
committerKeith Marshall <keith@users.osdn.me>
Fri, 6 Nov 2020 10:12:24 +0000 (10:12 +0000)
* site.js (load_content) ["#" in URL]: Scroll to internal reference.
* site.css (overlapped): New styling class; define it, such that any
element to which it is assigned will be positioned, with its topmost
content fully visible below the page header block, when an internal
page reference is scrolled into view.

* contact.html (general-enquiry, bug-report, feature-request)
* mailing.html (mingw-users, mingw-notify, mingw-msys, list-etiquette)
* about.html (cross-compile): Mark reference points as "overlapped".

about.html
contact.html
mailing.html
site.css
site.js

index 80c9ac3..4676c85 100644 (file)
@@ -171,7 +171,8 @@ project mailing lists available
 subscription to these older lists is no longer permitted.
 </p>
 <hr />
 subscription to these older lists is no longer permitted.
 </p>
 <hr />
-<h3 id="cross-compile">Using MinGW for Cross-Hosted Development</h3>
+<div class="overlapped" id="cross-compile">
+<h3>Using MinGW for Cross-Hosted Development</h3>
 <p>While <strong>MinGW</strong> provides tools
 primarily intended for use by developers working on the
 MS&#8209;Windows platform,
 <p>While <strong>MinGW</strong> provides tools
 primarily intended for use by developers working on the
 MS&#8209;Windows platform,
@@ -188,6 +189,6 @@ although we may be able to help out with advice related to the specifics
 of MS&#8209;Windows applications development,
 common to the use of our own native tool chains
 and to such cross&#8209;compilers.
 of MS&#8209;Windows applications development,
 common to the use of our own native tool chains
 and to such cross&#8209;compilers.
-</p>
+</p></div><!-- cross-compile -->
 
 <!-- $RCSfile$: end of file -->
 
 <!-- $RCSfile$: end of file -->
index f2fe7c8..87cdc7b 100644 (file)
@@ -78,7 +78,7 @@ in any way, affiliated with MinGW.org;
 MinGW.org <strong>does not</strong> support the products
 of these projects.</em>
 </p>
 MinGW.org <strong>does not</strong> support the products
 of these projects.</em>
 </p>
-<div id="general-enquiry">
+<div class="overlapped" id="general-enquiry">
 <h3>General Enquiries</h3>
 <p>If you encounter a problem using MinGW, or MSYS,
 and you cannot find a satisfactory answer on our web&#8209;site,
 <h3>General Enquiries</h3>
 <p>If you encounter a problem using MinGW, or MSYS,
 and you cannot find a satisfactory answer on our web&#8209;site,
@@ -111,7 +111,7 @@ we <em>strongly</em> recommend that you acquaint yourself with
 compliance with this may improve your chances of receiving a response,
 whereas non&#8209;compliance may result in your post being ignored.
 </p></div><!-- general-enquiry -->
 compliance with this may improve your chances of receiving a response,
 whereas non&#8209;compliance may result in your post being ignored.
 </p></div><!-- general-enquiry -->
-<div id="bug-report">
+<div class="overlapped" id="bug-report">
 <h3>Reporting Bugs</h3>
 <p>After discussing an issue on the mailing&#8209;list,
 as described above, you may be asked to file a formal bug report.
 <h3>Reporting Bugs</h3>
 <p>After discussing an issue on the mailing&#8209;list,
 as described above, you may be asked to file a formal bug report.
@@ -185,7 +185,7 @@ and create a bad impression of the reporter).
 Finally, when you are satisfied, click the &#8220;Submit&#8221; button
 to complete the ticket submission process.
 </p></div><!-- bug-report -->
 Finally, when you are satisfied, click the &#8220;Submit&#8221; button
 to complete the ticket submission process.
 </p></div><!-- bug-report -->
-<div id="feature-request">
+<div class="overlapped" id="feature-request">
 <h3>Feature Requests</h3>
 <p>When you wish to request the implementation of a new feature,
 (e.g.&nbsp;to support a currently unsupported MSVC or POSIX API function),
 <h3>Feature Requests</h3>
 <p>When you wish to request the implementation of a new feature,
 (e.g.&nbsp;to support a currently unsupported MSVC or POSIX API function),
index df6a8b1..c1655b9 100644 (file)
@@ -74,7 +74,7 @@ today, only two remain operational, and both are
 <p>The currently operational
 MinGW.org mailing&#8209;lists are:&mdash;
 </p>
 <p>The currently operational
 MinGW.org mailing&#8209;lists are:&mdash;
 </p>
-<dl class="no-indent" id="mingw-users">
+<dl class="no-indent overlapped" id="mingw-users">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-users"
 >MinGW&#8209;Users Mailing&#8209;List</a>
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-users"
 >MinGW&#8209;Users Mailing&#8209;List</a>
@@ -133,7 +133,7 @@ and the SourceForge.net (lower box) archives, respectively.
   <input type="hidden" name="mailing_list" value="mingw-users" />
 </form>
 </dd>
   <input type="hidden" name="mailing_list" value="mingw-users" />
 </form>
 </dd>
-</dl><dl class="no-indent" id="mingw-notify">
+</dl><dl class="no-indent overlapped" id="mingw-notify">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-notify"
 >MinGW&#8209;Notify Mailing&#8209;List</a>
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://lists.osdn.me/mailman/listinfo/mingw-notify"
 >MinGW&#8209;Notify Mailing&#8209;List</a>
@@ -186,7 +186,7 @@ However, archives of historical postings remain
 and may be searched using their respective keyword&#8209;search boxes,
 below.
 </p>
 and may be searched using their respective keyword&#8209;search boxes,
 below.
 </p>
-<dl class="no-indent" id="mingw-msys">
+<dl class="no-indent overlapped" id="mingw-msys">
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://sourceforge.net/p/mingw/mailman/mingw-msys"
 >MinGW&#8209;MSYS Mailing&#8209;List</a>
 <dt><a rel="noopener noreferrer" target="_blank"
  href="https://sourceforge.net/p/mingw/mailman/mingw-msys"
 >MinGW&#8209;MSYS Mailing&#8209;List</a>
@@ -245,7 +245,7 @@ on the historical MinGW-CVS archive.
 </form>
 </dd>
 </dl>
 </form>
 </dd>
 </dl>
-<div id="list-etiquette">
+<div class="overlapped" id="list-etiquette">
 <h3>Mailing&#8209;List Posting Etiquette</h3>
 <p>MinGW is an open source project.
 As such, it is heavily dependent on people who dedicate
 <h3>Mailing&#8209;List Posting Etiquette</h3>
 <p>MinGW is an open source project.
 As such, it is heavily dependent on people who dedicate
index 9db30cb..d8ae3d8 100644 (file)
--- a/site.css
+++ b/site.css
@@ -255,6 +255,30 @@ dl.masthead+p
 }
 
 
 }
 
 
+/* Subsection Reference Positioning Relative to Page Header
+ * ========================================================
+ */
+.overlapped
+{ /* Any internal page reference will be positioned at the same
+   * vertical offset, within the viewport, as the top of the page
+   * header block.  Thus, any text which appears within the upper
+   * 70px of the subsection division will be hidden behind the
+   * header block; adjust the alignment of the target element,
+   * such that its top margin overlaps the lower region of the
+   * preceding element, by the depth of the header block, then
+   * pad it, to push the content downward, into the viewport.
+   */
+  margin-top: -70px; padding-top: 70px;
+}
+hr+div.overlapped
+{ /* When an overlapped division follows a horizontal rule, we
+   * need to adjust its position upward, to allow for the blank
+   * space in the bottom margin of the rule element.
+   */
+  margin-top: calc( -70px - 0.6em );
+}
+
+
 /* Supplementary Formatting for Sections with Numbered Headings
  * ============================================================
  */
 /* Supplementary Formatting for Sections with Numbered Headings
  * ============================================================
  */
diff --git a/site.js b/site.js
index 1a7c368..b684e92 100644 (file)
--- a/site.js
+++ b/site.js
@@ -73,6 +73,11 @@ function load_content( container, src )
          update_page_content_header( "title" );
          update_page_content_header( "subtitle" );
          set_content( "e404-missing-page", document.URL );
          update_page_content_header( "title" );
          update_page_content_header( "subtitle" );
          set_content( "e404-missing-page", document.URL );
+         if( src.includes("#") )
+         { src = src.substring( src.indexOf("#") + 1, src.length );
+           element = document.getElementById( src );
+           if( element ) element.scrollIntoView();
+         }
          break;
        case 404:
          load_content( container, "missing.html" );
          break;
        case 404:
          load_content( container, "missing.html" );