CINXE.COM
CSS & Javascript - H5mag User Guide
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS & Javascript - H5mag User Guide</title> <meta name="keywords" content="" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/reset.css" type="text/css"> <link rel="stylesheet" href="/css/text.css" type="text/css"> <link rel="stylesheet" href="/css/search.css" type="text/css"> <link rel="stylesheet" href="/css/pagination.css" type="text/css"> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="/css/print.css" type="text/css" media="print"> <link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/mobile.css" type="text/css"> <link rel="stylesheet" href="/css/mobile-menu.css" type="text/css"> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="navigation-container"> <div class="hamburger"></div> </div> <div class="mobile-menu"> <div class="close navigation-container"></div> <ul class="navigation"> <li> <a data-id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a data-id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li> <a data-id="menu-2" class=" main" href="/basics">Basics</a> <ul> <li> <a data-id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a data-id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a data-id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a data-id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a data-id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a data-id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a data-id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a data-id="menu-22" href="/basics/images">Images</a> </li> <li> <a data-id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a data-id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a data-id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a data-id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a data-id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a data-id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a data-id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a data-id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a data-id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a data-id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a data-id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a data-id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a data-id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a data-id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a data-id="menu-24" href="/areas/text">Text</a> </li> <li> <a data-id="menu-40" href="/areas/section">Section</a> </li> <li> <a data-id="menu-25" href="/areas/image">Image</a> </li> <li> <a data-id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a data-id="menu-26" href="/areas/video">Video</a> </li> <li> <a data-id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a data-id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a data-id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a data-id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a data-id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a data-id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a data-id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a data-id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a data-id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a data-id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a data-id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a data-id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a data-id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a data-id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a data-id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a data-id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a data-id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a data-id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a data-id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a data-id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a data-id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a data-id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a data-id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a data-id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a data-id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a data-id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a data-id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a data-id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a data-id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a data-id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a data-id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a data-id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a data-id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a data-id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a data-id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a data-id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a data-id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a data-id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a data-id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li class="active"> <a data-id="menu-6" class=" main mainactive" href="/advanced-features">Advanced Features</a> <ul> <li class="active"> <a data-id="menu-55" title="CSS & Javascript" class=" active" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a data-id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a data-id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a data-id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a data-id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a data-id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a data-id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a data-id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a data-id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a data-id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a data-id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a data-id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a data-id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a data-id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a data-id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> <div class="bottom"> <div class="submenu"> <div class="first half"> <a href="http://h5mag.com/blog"><p>Blog</p></a> <a href="http://h5mag.com/updates"><p>Versions</p></a> </div><div class="second half"> <a href="http://docs.h5mag.com/"><p>User Guide</p></a> <a href="http://h5mag.com/contact"><p>Contact Us</p></a> </div> </div> <div class="contact"> <a href="tel:+310703184404">+31 (0)70 31 84 404</a><br> <a href="mailto:support@h5mag.com">support@h5mag.com</a><br> <a href="https:twitter.com/h5mag"><img src="/img/twitter.svg"/>@H5mag</a> </div> </div> </div> <header> <div class="container"> <aside> <header><a href="https://h5mag.com"><img src="/img/h5mag_compact_logo.png" alt="" width="75" height="72" /><a href="/">User Guide</a></a></header> <nav class="main desktop"> <ul class="navigation"> <li> <a id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li> <a id="menu-2" class=" main" href="/basics">Basics</a> <ul> <li> <a id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a id="menu-22" href="/basics/images">Images</a> </li> <li> <a id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li> <a id="menu-56" title="Actions" href="/basics/actions">Actions</a> <ul> <li> <a id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li> <a id="menu-73" title="Social media sharing and follow actions" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a id="menu-24" href="/areas/text">Text</a> </li> <li> <a id="menu-40" href="/areas/section">Section</a> </li> <li> <a id="menu-25" href="/areas/image">Image</a> </li> <li> <a id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a id="menu-26" href="/areas/video">Video</a> </li> <li> <a id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li class="active"> <a id="menu-6" class=" main mainactive" href="/advanced-features">Advanced Features</a> <ul> <li class="active"> <a id="menu-55" title="CSS & Javascript" class=" active" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> </nav> </aside> <main> <form method="get" action="/search" class="search"> <input type="hidden" name="page" value="1"> <input type="text" name="q" value="" class="text"></input> <input type="submit" class="button" value=""> </form> <article> <h1>Custom CSS & Javascript</h1> <section><p>H5mag allows you to add custom CSS and Javascript to your publication. This allows you to customize parts of the magazine and add interactivity that you cannot create using the <a href="/basics">Live Editor</a>.</p> <p>To write custom CSS & Javascript, you need to have some in depth knowledge about both languages. To explain them is beyond the scope of the manual. If you want to learn more about CSS and Javascript, we recommend you to start with the great resources on <a href="https://developer.mozilla.org/en-US/">MDN</a> about <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">Javascript</a>.</p> <p><strong>Note that we don't provide support on the use of CSS and Javascript</strong> within H5mag, unless you are on our Enterprise plan with a service contract.</p> <h2>The CSS editor</h2> <p>The CSS editor supports syntax highlighting and will display warnings when invalid CSS is entered. Sometimes a warning is given for example for selectors with double class name, where the CSS is valid and working, in that case you can ignore the warnings.</p> <h3>Edition CSS</h3> <p>The CSS editor for editions can be found in the Edition Settings, to find it follow the following steps:</p> <ol> <li>Click the settings icon <img alt="" src="/public/editor/settingsbtn.png" style="width: 20px; height: 20px;" /> in the top right corner</li> <li>A popup with setting will appear, select the "Scripting" tab.</li> <li>Click the 'Edit styles' button.</li> <li>Enter your CSS rules in the editor that will open.</li> <li>When you've added your code, close the editor window and save.</li> </ol> <h3>Article specific CSS</h3> <p>Each <a href="/basics/managing-articles">article </a>can have CSS applied to it. You can find the article CSS editor under the "Scripting" tab on the right side.</p> <p>Selectors of the article specific CSS will automatically be prepended so that the CSS will only be applied to the current page, you cannot see this in the editor, but you can inspect the applied CSS using your browser's inspector.</p> <p style="text-align: center;"><img src="/public/csslets/article_css.png" style="width:256px;" /></p> <h3>CSS variables</h3> <p>Within your custom CSS, you can use the following CSS variables. When the user adjusts their viewport, the contents of these variables get updated. You can use these for example for viewport relative positioning:</p> <pre> <code>--visible-artboard-width --bleed-offset-left --bleed-offset-right --bleed-offset-top</code></pre> <div id="cke_pastebin" style="position: absolute; top: 381px; width: 1px; height: 1045px; overflow: hidden; left: -1000px;">--visible-artboard-width</div> <div id="cke_pastebin" style="position: absolute; top: 381px; width: 1px; height: 1045px; overflow: hidden; left: -1000px;">--bleed-offset-left</div> <div id="cke_pastebin" style="position: absolute; top: 381px; width: 1px; height: 1045px; overflow: hidden; left: -1000px;">--bleed-offset-right</div> <div id="cke_pastebin" style="position: absolute; top: 381px; width: 1px; height: 1045px; overflow: hidden; left: -1000px;">--bleed-offset-top</div> <h2>Custom Javascript</h2> <p>If you can program, you can add new functionality to your publication using Javascript. H5mag is fully scriptable using Scriptlets — little pieces of code that interact with elements of your choosing. Within your custom scripting, you have access to <a href="https://jquery.com">jQuery</a> using the <code>$</code> variable.</p> <p>You can then access your areas by their area name or classes you have given them. The following example hides the area with the <code>my-example-area</code> class name: <code>$article.find('.my-example-area').hide();</code></p> <h3>Execution level</h3> <p>Scriplets can execute on the level of the current <a href="/terminology#edition">edition</a> or the current <a href="/terminology#article">article</a>.</p> <h3>Available variables</h3> <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Context</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <th scope="row"><code>this</code> </th> <td>Article</td> <td>Within an article, <code>this</code> points to the current article</td> </tr> <tr> <th scope="row"><code>$article</code> </th> <td>Article</td> <td>Within an article, <code>$article</code> points to a jQuery representation of the current article</td> </tr> </tbody> </table> <h3>Adding an external Javascript</h3> <p>If you'd like to add an external Javascript to your entire edition, you can do that using the <em>Edition Settings</em>. Navigate to the <em>Scripting</em> tab. Press the <em>Edit Script</em> button and add a script like the one below there:</p> <p><code>var head = document.getElementsByTagName('head')[0];<br /> var script = document.createElement('script');<br /> script.type = 'text/javascript';<br /> script.src = 'https://www.example.com/example.js';<br /> head.appendChild(script);</code></p> <p>Note that this script only executes in the preview and published edition and will not run in the Live Editor.</p> </section> <div class="last-modified">Last modified: <time>Thursday, 20 June 2024 - 12:18:41 CEST</time></div> </article> <nav class="breadcrumbs"> You are here: <a href="/">H5mag User Guide</a> > <a id="breadcrumbs-6" class=" main mainactive" href="/advanced-features">Advanced Features</a> > CSS & Javascript </nav> </main> </div> <!-- Piwik --> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.schuttelaar.net/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "30"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Piwik Code --> </body> </html>