JavaScript http://drupal8.ovh/en/tags/javascript en Run JavaScript code via web browser console. http://drupal8.ovh/en/tutoriels/314/run-javascript-code-via-web-browser-console <span class="field field--name-title field--type-string field--label-hidden">Run JavaScript code via web browser console.</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>On Firefox and Chrome how to run JS codes using browser console ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 06/06/2017 - 14:48</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Note : Following examples are tested on FireFox Version 52.</p> <h2>Open Web browser console. F12</h2> <p>Method 1 . Press F12 and click on "Console"<br /> Method 2 . Press Ctrl + Shift + K</p> <h2>Example 1. Test the console.</h2> <p>Type<code><strong> alert('Hello');</strong></code> this will open a "Hello" dialog box.</p> <h2>Example 2. Change input value by ID. ()</h2> <p><code>document.getElementById("the_element_id").value</code></p> <h2>Example 3. Change all inputs (checkbox) start with 'variable' to 'checked'</h2> <p><strong>Note : I use this example to activate features on Drupal 7</strong></p> <p><code>var eles = [];<br /> var inputs = document.getElementsByTagName("input");<br /> for(var i = 0; i &lt; inputs.length; i++) {<br />     if(inputs[i].name.indexOf('variable') == 0) {<br />         inputs[i].checked = 'checked';<br />     }<br /> }</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> <li><a href="/en/tags/features" hreflang="en">Features</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=314&amp;2=comment&amp;3=comment" token="_3Df-Y3aJWZ2TUjZAPPHB5UFmX9gnwBoDx58uxqrCNc"></drupal-render-placeholder> </section> Tue, 06 Jun 2017 12:48:01 +0000 editor 314 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/314/run-javascript-code-via-web-browser-console#comments HTML JS communication between iframes and Cross-document messaging http://drupal8.ovh/en/tutoriels/169/html-js-cross-document-messaging <span class="field field--name-title field--type-string field--label-hidden">HTML JS communication between iframes and Cross-document messaging</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to communicate between iframe and the parent site ?</p> <p>How to communicate between two iframes  ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" typeof="schema:Person" property="schema:name" datatype="">Anonymous (not verified)</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 06/14/2016 - 17:46</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example :</p> <p>For example in the top window (Parent): (<code>the_iframe.contentWindow.postMessage('data', 'domain');</code>)</p> <p><code>&lt;html&gt;<br />   &lt;body&gt;<br />     &lt;iframe src="iframe.html" id="iframe1"&gt;&lt;/iframe&gt;<br />   &lt;/body&gt;<br />   &lt;script&gt;<br />     window.onload = function () {<br />       myIframe = document.getElementById('iframe1');<br />       myIframe.contentWindow.postMessage('hello', '*');<br />     }<br />   &lt;/script&gt;<br /> &lt;/html&gt;</code></p> <p>and in the iframe:</p> <p><code>&lt;html&gt;<br />   &lt;body&gt;<br />     &lt;div&gt;The I frame&lt;/div&gt;<br />   &lt;/body&gt;<br />   &lt;script&gt;<br />     window.onmessage = function (e) {<br />       if (e.data == 'hello') {<br />         alert('It works!');<br />       }<br />     };<br />   &lt;/script&gt;<br /> &lt;/html&gt;</code></p> <p><code>On the iframe, You can also yse:<br /> function postMessage(a, b){<br /> }</code></p> <p>Example 2 : Between two iframes</p> <p>Get One iframe from another Iframe</p> <p><code>var iframe2 = parent.document.getElementById('iframe2');</code></p> <p>Parent:</p> <p><code>&lt;html&gt;<br />   &lt;body&gt;<br />     &lt;iframe src="iframe.html" id="iframe1"&gt;&lt;/iframe&gt;<br />     &lt;iframe src="iframe2.html" id="iframe2"&gt;&lt;/iframe&gt;<br />   &lt;/body&gt;<br /> &lt;/html&gt;</code></p> <p>iFrame 1:</p> <p><code>&lt;html&gt;<br />   &lt;script&gt;<br />     window.onmessage = function (e) {<br />         alert(e.data)<br />     };<br />   &lt;/script&gt;<br /> &lt;/html&gt;</code></p> <p>iFrame2:</p> <p><code>&lt;html&gt;<br />   &lt;script&gt;<br />     parent.window.onload = function() {<br />       myIframe = parent.document.getElementById('iframe1');<br />       myIframe.contentWindow.postMessage(["name", "age", "city"], '*');<br />     }<br />   &lt;/script&gt;<br /> &lt;/html&gt;</code></p> <p> </p> <p>Note : You may have problems if you use different domains</p> <p> </p> <p>Link : </p> <p>http://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site<br /> https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage<br /> http://www.dyn-web.com/tutorials/iframes/refs/<br /> http://www.dyn-web.com/tutorials/iframes/refs/iframe-iframe.php</p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=169&amp;2=comment&amp;3=comment" token="hj7RSHHwLy1uI777D_SlLZhpES_bJ_hwHeFeU9b7Vwk"></drupal-render-placeholder> </section> Tue, 14 Jun 2016 15:46:07 +0000 Anonymous 169 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/169/html-js-cross-document-messaging#comments Run a JavaScript for selected pages (using body class) http://drupal8.ovh/en/tutoriels/152/run-a-javascript-for-selected-pages-using-body-class <span class="field field--name-title field--type-string field--label-hidden">Run a JavaScript for selected pages (using body class)</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to execute JS codes on selected Pages, using drupal body class ? </p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 06/02/2016 - 10:07</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example : Execute JS only in the front page.<br /> This Script run whin the <code>body</code> tag contains<code> class='front'</code></p> <p><code>(function ($) {<br />     $(document).ready(function () {<br />         if ($('body').hasClass('front')) {<br />             alert('Hello');<br />         }<br />     });<br /> })(jQuery);</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/drupal-7" hreflang="en">Drupal 7</a></li> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> <li><a href="/en/tags/jquery" hreflang="en">jQuery</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=152&amp;2=comment&amp;3=comment" token="ZM7wl_t0KDeRO24NHjt5ohgLgQ6F70FN5-uH7lCUQFE"></drupal-render-placeholder> </section> Thu, 02 Jun 2016 08:07:44 +0000 editor 152 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/152/run-a-javascript-for-selected-pages-using-body-class#comments Theming tips for Bootstrap framework http://drupal8.ovh/en/tutoriels/120/theming-tips-for-bootstrap-framework <span class="field field--name-title field--type-string field--label-hidden">Theming tips for Bootstrap framework</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>Tips for handle and/or override bootstrap defaluts themes</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 03/04/2016 - 11:39</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Modal dialogue box ( bootstrap / jquery)</h2> <h3>1. Remobe the gray background of modal dialog  box (modal-backdrop)</h3> <p><code>.modal-backdrop {<br />   background-color: transparent;<br /> }</code></p> <p>2. Modal dialog  box Theming<br /><code>  .modal-dialog {<br />     .modal-content {<br />       .modal-header {}<br />       .modal-body {}<br />       .error {}<br />       .modal-footer {<br />       }<br />     }<br />   }</code></p> <p> </p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=120&amp;2=comment&amp;3=comment" token="Yxx-Y04Ntrw_5KZ7Tca1ImMQvDq3AkVPkrgMCNN5haw"></drupal-render-placeholder> </section> Fri, 04 Mar 2016 10:39:04 +0000 editor 120 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/120/theming-tips-for-bootstrap-framework#comments Add JavaScript to a module http://drupal8.ovh/en/tutoriels/70/add-javascript-to-a-module <span class="field field--name-title field--type-string field--label-hidden">Add JavaScript to a module</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to add a JS JavaScript to a module ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 12/07/2015 - 13:05</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Add JavaScript as libraries</h2> <p>Like a CSS, You can add a JS as a librarie</p> <p>Example:<br /> 1.1 Add a librarie.<br />  -&gt; Create a file modulename.libraries.yml<br /> -&gt; Add JS file, Exemple:<br /><code>myjs:<br />   version: 1.x<br />   js:<br />       js/myjs.js: {}<br />   dependencies:<br />     - core/jquery</code><br /> 1.2 Create CSS file and put it in to the <strong>module_folder/js/myjs.js</strong><br /> 1.3 Attach librarie to the block<br /> In your build() methode, add to the output array,<br /><code>    $output[]['#attached']['library'][] = 'modulename/myjs';</code></p> <p>2. If yoy want to add tl all pages, Add librarie to the<strong> .info.yml</strong> File<br /><code>libraries:<br />   - mybartik/myjs</code></p> <p>3. Add libraries from twig templates:<br /><code>{# In a Twig template we attach the library. #}<br /> {{ attach_library('bartik/messages') }}</code></p> <p>NOTE:<br /> If you use jQuery, Your JS file must be like:</p> <p><code>(function ($) {<br /> //Jour jQuery codes ...<br /> })(jQuery);</code></p> <h2>Use Drupal behaviors</h2> <p>Example 2:<br /> //modulename.libraries.yml<br /><code>myjs:<br />   version: 1.x<br />   js:<br />     js/script.js: {}<br />   dependencies:<br />     - core/drupal<br />     - core/jquery</code></p> <p><em>NOTE : Dependencies<br /> To use Drupal, you must add - core/drupal<br /> To use $ (jQuery), you must add - core/jquery<br /> To use drupalSettings, you must add - core/drupalSettings</em></p> <p>//JavaScript File :  js/script.js<br /><code>(function ($, Drupal, window, document) {<br />   Drupal.behaviors.basic = {<br />     attach: function (context, settings) {<br />       $(window).load(function () {<br />         // Execute on page load<br />       });<br />       $(window).resize(function () {<br />         // Execute code when the window is resized.<br />       });<br />       $(window).scroll(function () {<br />         // Execute code when the window scrolls.<br />       });<br />       $(document).ready(function () {<br />         // Execute code once the DOM is ready.<br />       });<br />     }<br />   };</code></p> <p>}(jQuery, Drupal, this, this.document));</p> <h2>Add inline JS to a custom page.</h2> <p>Note : In drupal 7 you can use <em>drupal_add_js,</em> but not in Drupal 8.</p> <p>To add an inline javascript you can use <strong>#attached </strong>of drupal render array. Example:</p> <p><code>$output['#attached']['html_head'][] = array(<br />   array(<br />     '#tag' =&gt; 'script',<br />     '#value' =&gt; 'alert("Yes")',<br />   ),<br />   'my_scripts'<br /> );</code></p> <p> </p> <p><a href="https://www.drupal.org/node/2269515" rel="nofollow">JavaScript API in Drupal 8 : https://www.drupal.org/node/2269515</a></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/drupal-8" hreflang="en">Drupal 8</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/javascript" hreflang="en">JavaScript</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/271/adding-jquery-ui-widget-to-drupal-8" hreflang="en">Adding jQuery UI Widget to drupal 8</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=70&amp;2=comment&amp;3=comment" token="lVr2me8sBkS-nqUIwncjF3mVjqLfFPdES9CWk_dZWLs"></drupal-render-placeholder> </section> Mon, 07 Dec 2015 12:05:42 +0000 editor 70 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/70/add-javascript-to-a-module#comments