www.bram.us Open in urlscan Pro
2a00:1c98:1000:1014::2636:cd94  Public Scan

Form analysis
2 forms found in the DOM

POST https://www.bram.us/wordpress/wp-comments-post.php

<form action="https://www.bram.us/wordpress/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="">
  <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p>
  <p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="5" maxlength="65525" required=""></textarea></p>
  <p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required=""></p>
  <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required=""></p>
  <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url"></p>
  <p><label for="subscribe-reloaded"><input style="width:30px" type="checkbox" name="subscribe-reloaded" id="subscribe-reloaded" value="yes"> Notify me of followup comments via e-mail. You can also
      <a href="https://www.bram.us/comment-subscriptions?srp=20681&amp;srk=f70fb7f13e13a8933b5e177cdd4487d0&amp;sra=s&amp;srsrc=f">subscribe</a> without commenting.</label></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="20681" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="31270f08f8"></p>
  <p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js"
      value="1725659265211">
    <script>
      document.getElementById("ak_js_1").setAttribute("value", (new Date()).getTime());
    </script>
  </p>
</form>

GET https://www.bram.us/

<form role="search" method="get" class="search-form" action="https://www.bram.us/">
  <label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Search …" value="" name="s">
  </label>
  <input type="submit" class="search-submit" value="Search">
</form>

Text Content

Skip to content

Bram.us

A rather geeky/technical weblog, est. 2001, by Bramus

 * Blog
   * Blog
   * All Posts
   * Original Content
   * Elsewhere
 * Talks
 * About
 * RSS
   * RSS
   * All Posts
   * Original Content Only
   * Elsewhere Only
 * Search

 * * Back

Squarespace has all the tools you need to keep visitors coming back. ads via
Carbon



PAGEMAP, A MINI MAP NAVIGATION FOR WEB PAGES

August 28, 2019 Leave a comment on pagemap, a mini map navigation for web pages

Many text editors nowadays sport a minimap on the right hand side of the screen.
Pagemap is like that, but for webpages:



To use it, position a canvas element fixed on your screen, and tell pagemap
which elements to include in the map:

<canvas id="map"></canvas>

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
}

pagemap(document.querySelector('#map'), {
    viewport: null,
    styles: {
        'header,footer,section,article': rgba(0,0,0,0.08),
        'h1,a': rgba(0,0,0,0.10),
        'h2,h3,h4': rgba(0,0,0,0.08)
    },
    back: rgba(0,0,0,0.02),
    view: rgba(0,0,0,0.05),
    drag: rgba(0,0,0,0.10),
    interval: null
});

Installation per npm/yarn

$ yarn add pagemap

pagemap – minimap for web pages →
pagemap source (GitHub) →

Posted byBramus!August 28, 2019Posted inElsewhereTags: javascript, link, map,
navigation, ui, web


PUBLISHED BY BRAMUS!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer
Relations Engineer at Google. From the moment he discovered view-source at the
age of 14 (way back in 1997), he fell in love with the web and has been
tinkering with it ever since (more …) View more posts


POST NAVIGATION

Previous Post Previous post:
Open your React Native’s Xcode project file from the CLI with xed
Next Post Next post:
Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)


LEAVE A COMMENT


CANCEL REPLY

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Notify me of followup comments via e-mail. You can also subscribe without
commenting.





Δ

This site uses Akismet to reduce spam. Learn how your comment data is processed.


ABOUT BRAM.US

Bram.us is the technical/geeky weblog of Bramus Van Damme, a Freelance Web
Developer from Belgium.

Main topics are web related technologies (CSS, JS, PHP, …), along with other
geeky things (robots, space, …) and personal interests (cartography, music,
movies, …).

More …


STAY UP-TO-DATE

To follow bram.us you can:

 * Subscribe to bram.us via RSS
 * Follow @bramusblog on Twitter
 * Give bram.us a like on Facebook

Next to his ramblings here, you may also follow @bramus himself on Twitter or on
Mastodon.


ARCHIVES

Archives Select Month August 2024 July 2024 June 2024 May 2024 April 2024
February 2024 January 2024 December 2023 November 2023 October 2023 September
2023 August 2023 July 2023 June 2023 May 2023 April 2023 March 2023 February
2023 January 2023 December 2022 November 2022 October 2022 September 2022 August
2022 July 2022 June 2022 May 2022 April 2022 March 2022 February 2022 January
2022 December 2021 November 2021 October 2021 September 2021 August 2021 July
2021 June 2021 May 2021 April 2021 March 2021 February 2021 January 2021
December 2020 November 2020 September 2020 August 2020 July 2020 June 2020 May
2020 April 2020 March 2020 February 2020 January 2020 December 2019 November
2019 October 2019 September 2019 August 2019 July 2019 June 2019 May 2019 April
2019 March 2019 February 2019 January 2019 December 2018 November 2018 October
2018 August 2018 July 2018 June 2018 May 2018 April 2018 March 2018 February
2018 January 2018 December 2017 November 2017 October 2017 September 2017 August
2017 July 2017 June 2017 May 2017 April 2017 March 2017 February 2017 January
2017 December 2016 November 2016 October 2016 September 2016 August 2016 July
2016 June 2016 May 2016 April 2016 March 2016 February 2016 January 2016
December 2015 November 2015 October 2015 September 2015 August 2015 July 2015
June 2015 May 2015 April 2015 March 2015 February 2015 January 2015 December
2014 November 2014 October 2014 September 2014 August 2014 July 2014 June 2014
May 2014 April 2014 March 2014 February 2014 January 2014 December 2013 November
2013 October 2013 September 2013 August 2013 July 2013 June 2013 May 2013 April
2013 March 2013 February 2013 January 2013 December 2012 November 2012 October
2012 September 2012 August 2012 July 2012 June 2012 May 2012 April 2012 March
2012 February 2012 January 2012 December 2011 November 2011 October 2011
September 2011 August 2011 July 2011 June 2011 May 2011 April 2011 March 2011
January 2011 December 2010 November 2010 October 2010 September 2010 August 2010
July 2010 June 2010 May 2010 April 2010 March 2010 February 2010 January 2010
December 2009 November 2009 October 2009 September 2009 August 2009 July 2009
June 2009 May 2009 April 2009 March 2009 February 2009 January 2009 December
2008 November 2008 October 2008 September 2008 August 2008 July 2008 June 2008
May 2008 April 2008 March 2008 February 2008 January 2008 December 2007 November
2007 October 2007 September 2007 August 2007 July 2007 June 2007 May 2007 April
2007 March 2007 February 2007 January 2007 December 2006 November 2006 October
2006 September 2006 August 2006 July 2006 June 2006 May 2006 April 2006 March
2006 December 2005 November 2005 August 2005 July 2005 June 2005 May 2005 April
2005 March 2005 February 2005 November 2004 October 2004 August 2004 July 2004
June 2004 May 2004 April 2004 March 2004 February 2004 October 2003


SEARCH

Search for:
Bram.us, Proudly powered by WordPress.