Differences

This shows you the differences between two versions of the page.

--- styles_and_script [2022/12/02 10:53] – ↷ Page moved from playground:styles_and_script to styles_and_script tadachi
+++ styles_and_script [2023/09/26 08:22] (current) – [Use JS to add a link to the project footer] jsmith
@@ Line 24: / Line 24: @@
 JavaScript (JS or JQuery) is described as the programming language of the web and can be used to introduce new functions to your project.  This usually requires previous experience or knowledge with programming, although it is possible to find code snippets on the web that can be adapted for use in a Xerte project.  There are two ways to add JavaScript to a Xerte project, to change its functionality.
-  - In the HTML Source of the Page, from any text editor by clicking the HTML toggle button <>.  The new function(s) will apply only to the page to which it is added
+  - In the HTML [[source_view|source view]] of the Page, from any text editor by clicking the HTML toggle button <>.  The new function(s) will apply only to the page to which it is added
   - In the optional property Script box:
     - at project, where the function(s) will apply to all relevant pages in the project
@@ Line 34: / Line 34: @@
   * Add the Styles optional property to your project's page.
-  * Add this CSS code to the Styles box, to create a container class to go around the iframe code:
+  * Add this CSS code to the Styles box, to create a container class to go around the iframe code: <code css>.container {position: relative;overflow: hidden:width: 100%;padding-top: 56.25%;}</code>
-    * %%.container {position: relative;overflow: hidden:width: 100%;padding-top: 56.25%;}%%
+  * Then add this CSS to style the iframe so that it fits inside the container with full height and width: <code css>.responsive-iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}</code>
-  * Then add this CSS to style the iframe so that it fits inside the container with full height and width:
-    * %%.responsive-iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}%%
   * In HTML view in your Xerte page text editor:
     * Paste in the iframe embed code
-    * Surround the iframe embed code with: <div class="container">  </div>
+    * Surround the iframe embed code with: <code css><div class="container">  </div></code>
-    * Add this class to the iframe code: class="responsive-iframe"
+    * Add this class to the iframe code: <code css>class="responsive-iframe"</code>
-  * It should look like this:
+  * It should look like this: <code css><div class="container"><iframe class="responsive-iframe" frameborder="0" scrolling="no" src="url"></iframe></div></code>
-    * %%<div class="container"> %%<iframe class="responsive-iframe" frameborder="0" scrolling="no" src="url"></iframe>%%</div>%%
 ==== Add CSS to format the Page Timer ====
   * Add the Styles optional property to your project's page.
-  * Add this CSS code to the Styles box, to format the timer.  You can adjust the pixel sizes and colours to suit your project.
+  * Add this CSS code to the Styles box, to format the timer.  You can adjust the pixel sizes and colours to suit your project. <code css>#x_pageTimer {position:relative;margin:0px 0px 50px 50px; padding: 20px;border: 1px solid #ffa500;border-radius: 10px;background-color: #ffa500;font-size: 3em;width:450px;}</code>
-    * #x_pageTimer {position:relative;margin:0px 0px 50px 50px; padding: 20px;border: 1px solid #ffa500;border-radius: 10px;background-color: #ffa500;font-size: 3em;width:450px;}
 ==== Use JS to add a link to the project footer ====
   * Add the Script optional property to your project.
-  * Add this code to the Script box, replacing the "add url here" with the link you want to add:
+  * Add this code to the Script box, replacing the "add url here" with the link you want to add: <code javascript>$('#x_footerBlock').append('<a href=“add url here” target="_self"><span style="color:#fff; position:relative; bottom:20px;">Link</span></a>');</code>
-    * %%$('#x_footerBlock').append('<a href=“add url here” target="_self"><span style="color:#fff; position:relative; bottom:20px;">Link</span></a>');%%
+{{tag>pagetype customisation}}