par7133
/
SqueeJS


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!DOCTYPE html>
<!--
* Copyright (c) 2021, 2024, 5 Mode and other contributors
* Released under the MIT license
*
* This file is part of SqueeJS.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
* and associated documentation files (the "Software"), to deal in the Software 
* without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
* distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
* Software is furnished to do so, subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be included in all copies or 
* substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* highlight.html
* 
* SqueeJS Doc and examples for the Hightlight functionalities.
*
* @author Daniele Bonini <my25mb@aol.com>
* @copyrights (c) 2016, 2024, 5 Mode    
* @license https://opensource.org/licenses/MIT 
* -->
<html>
    <head>
       
      <title>Highlight: doc and examples.</title>
       
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
      <link rel="shortcut icon" href="favicon.ico" />
    
      <meta name="description" content="Welcome to Squeejs! Let everyone squeez its javascript code."/>
      <meta name="author" content="5 Mode"/> 
      <meta name="robots" content="index,follow"/>
      <meta name="keywords" content="Squeejs,javascript,framework,squeejs.com,MIT,license,5 Mode"/>
       
      <script src="/js/common.js" type="text/javascript"></script>
       <script src="/js/squeejs.js" type="text/javascript"></script>
       
       <link href="/css/style.css?v=1631827555" type="text/css" rel="stylesheet">
       
</head>
<body style="height:2900px;border:0px solid lightgray; padding:20px; margin-right:20px;">

<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>

<br><br><br>

<h2>HIGHLIGHT</h2>    

Here the Javascript code available to be inserted in your web pages to implement the <i>highlight functionalities</i> of their html elements.<br>
<br>
Please check the <b>context</b> of implementation for each of the functions.<br>

<br><br><br>

<h2>Code:</h2>  

<pre>
/**
 * SQJS.highlightDiv
 * 
 * Highlight the current DIV element
 *
 * context:
 * - call this function in the &lt;onmouseenter&gt; event 
 * 
 * @param {Element}  tthis, the current DIV element (&lt;this&gt; on the function call)
 * @returns {void}
 */
 <b>function SQJS.highlightDiv(tthis){};</b>

/**
 * SQJS.unlightDiv
 * 
 * Unlight the current DIV element
 * 
 * Context:
 * - call this function in the &lt;onmouseleave&gt; event 
 * 
 * @param {Element} tthis, the current DIV element (this on the function call)
 * @returns {void}
 */
<b>function SQJS.unlightDiv(tthis){};</b>

/**
 * SQJS.highlightInput
 * 
 * Highlight the current INPUT element
 * 
 * Context:
 * - call this function in the &lt;onmouseenter&gt; event 
 * 
 * @param {Element} tthis, the current INPUT element (this on the function call)
 * @returns {void}
 */
<b>function SQJS.highlightInput(tthis){};</b>

/**
 * SQJS.unlightInput
 * 
 * Unlight the current INPUT element
 * 
 * Context:
 * - call this function in the &lt;onmouseleave&gt; event 
 * 
 * @param {Element} tthis, the current INPUT element (this on the function call)
 * @returns {void}
 */
<b>function SQJS.unlightInput(tthis){};</b>

/**
 * SQJS.highlightInput
 * 
 * Highlight the current TEXTAREA element
 * 
 * Context:
 * - call this function in the &lt;onmouseenter&gt; event 
 * 
 * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 * @returns {void}
 */
<b>function SQJS.highlightTextArea(tthis){};</b>

/**
 * SQJS.unlightTextArea
 * 
 * Highlight the current TEXTAREA element
 * 
 * Context:
 * - call this function in the &lt;onmouseleave&gt; event 
 * 
 * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 * @returns {void}
 */
<b>function SQJS.unlightTextArea(tthis){};</b>

</pre>  

<br><br>

<h2>Usage example:</h2>  
  
<pre style="background:lightyellow;width:100%;white-space: pre-wrap;">

    &lt;div id="content" onmouseenter="SQJS.highlightDiv(this);" onmouseleave="SQJS.unlightDiv(this);" style="max-width:450px; width:100%; padding:35px;"&gt;
        &lt;input type="text" id="txtName" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="Capitan Cloud"&gt;
        &lt;input type="text" id="txtCompany" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="5 Mode"&gt;
        &lt;input type="text" id="txtEmail" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="my25mb@aol.com"&gt;
        &lt;textarea style="height:150px;width:300px;resize:none;" onmouseenter="SQJS.highlightTextArea(this);" onmouseleave="SQJS.unlightTextArea(this);"&gt;&lt;/textarea&gt;
    &lt;/div&gt;

</pre>

<br><br>

<h2>How it looks like:</h2>
  
<div id="content" onmouseenter="SQJS.highlightDiv(this);" onmouseleave="SQJS.unlightDiv(this);" style="max-width:650px; width:450px; padding:35px; border:1px solid gray;">
    <input type="text" id="txtName" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="Capitan Cloud"><br><br>
    <input type="text" id="txtCompany" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="5 Mode"><br><br>
    <input type="text" id="txtEmail" onmouseenter="SQJS.highlightInput(this);" onmouseleave="SQJS.unlightInput(this);" value="my25mb@aol.com"><br><br>
    <textarea style="height:150px;width:300px;resize:none;" onmouseenter="SQJS.highlightTextArea(this);" onmouseleave="SQJS.unlightTextArea(this);"></textarea><br>
</div>

<div style="clear:both; margin:auto;"> 
<br><br><br>
</div>
 
<div class="footer">
<div id="footerCont">&nbsp;</div>
<div id="footer"><span style="background:#FFFFFF;color:black;opacity:1.0;margin-right:10px;">&nbsp;&nbsp;<a href="dd.html">Disclaimer</a>&nbsp;&nbsp;A <a href="http://5mode.com">5 Mode</a> project and <a href="http://demo.5mode.com">WYSIWYG</a> system. MIT License.</span></div>	
</div>	

<script>
  
function setFooterPos() {
  if (document.getElementById("footerCont")) {
    tollerance = 12;  	  
    footerContHeight = 35;
    footerHeight = 32;
    document.getElementById("footerCont").style.top = parseInt( getDocHeight2() - footerContHeight - tollerance ) + "px";
    document.getElementById("footer").style.top = parseInt( getDocHeight2() - footerHeight - tollerance) + "px";
  }
}
setFooterPos();

</script>  

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(90317440, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/90317440" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

</body>
</html>