Page Toolbar

On each page, there is a toolbar at the top and bottom in the main box with user controls. On the current page you will find it on the width of the content column. On malmo.se/events/ you can see the same toolbar a different kind of page grid where it occupies the full main box.

Toolbar for External Services

The toolbar for external services contains the following items:

  • Lyssna – screen reading functionality.
  • Skriv ut – prints the page, same functionality as the browsers own print commands. Basic print styles are included in the common assets, add additional print styles to your own application.
  • Dela – sharing functionality using AddThis.

JavaScript listners are automatically activated in the common assets you include on your pages. The markup for the external toolbar is the following:

<div class="article-toolbar"> 
  <div class="listen">
    <a href="http://app.readspeaker.com/proreader/proreader.php?cid=4817&amp;lang=sv_se&amp;url=http://www.malmo.se/full-url-to-the-page">Lyssna</a>
  </div>
  <div class="print"></div>
  <div class="share">
    <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250"><img src="http://www.malmo.se/assets-2.0/img/share-this.png" width="119" height="18" alt="Dela" /></a>
  </div>
</div>

On line 3, the full URL to the current page should be provided in the href attribute as the url= parameter of the query string. If you can not provide the URL to the current page, leave the url parameter empty like this: url=

The AddThis button on line 6–8 must be omitted on pages served with the https: protocol for security reasons.

The screen reading functionality should read the content on the page and should jump over the navigation. To achive this, add the following comment tags where your content starts and stops on the page:

<!-- RSPEAK_START -->
<h1>Here goes the content of the page</h1>
<p>Lorem ipsum</p>
<!-- RSPEAK_STOP -->

Tooblar for Internal Services

The toolbar for internal services contains the following items:

  • Skriv ut
  • Lågg till bokmärke/favorit – add to the browsers bookmarks/favorites

This is the markup you should use to get the internal toolbar:

<div class="article-toolbar">
  <div class="print"></div>
  <div class="favorites"></div>
</div>

Senast ändrad: 2011-03-06 11:59