<?php
  header("Content-Type: text/html; charset=ISO-8859-1");
?>
<html>
<head>
  <?php require_once("../include/common_head.php") ?>
  <title>Zero Click jQuery Search Widget</title>

  <style type="text/css">
  body {
    font-family: 'Segoe UI',Arial,sans-serif;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    color: #666666; /* FF9900 */
    background-color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
  }
  .section {
    font-size: 22px;
    font-weight: bold;
    padding-top: 15px;
    border-bottom: 1px solid #FF9944;
  }
  .subsection {
    padding-top: 10px;
    font-weight: bold;
  }
  .actions {
    font-family: Helvetica, cursive, 'Comic Sans MS', Arial;
  }
  #a1 {
    background-color: transparent;
  }
  #a2 {
    background-color: #FFFFFF;
  }
  #a3 {
    background-color: #FFCEDE;
  }
  pre {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .code-title {
    text-decoration: underline;
  }
  pre.code {
    background-color:#FFEE99;
    border-left:2px solid grey;
    color:black;
    margin-left:20px;
    padding-left:20px;
    width:800px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: monospace;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  ol > li {
    margin-top: 15px;
  }
</style>
</head>


<body>

<center>
  <h1>Zero Click jQuery Search Widget</h1>
</center>


<div class="section">Why do I need this widget?</div>
<p>
  Authors generally write browser plugins for letting people define the meanings of certain words or perform easy and quick web searches of selected text. It is easy to see that the same features are not available to the user once he/she starts using a different browser or visits that web-page on a different browser/machine that does not have that particular extension/plugin/add-on installed. This is frustrating for the user who might have gotten used to the conveniences provided by that extension.
</p>

<p>
  What I would like to propose is a widget that web-site authors can embed into their web-pages so that users:
  <ol>
    <li>Need not externally install extentions for defining words or concepts or getting more information about something they want to know more about.</li>
    <li>Get a consistent experience across all browsers and machines that they use. So, if one user sees a page in a certain way, he/she can expect others to also see it in the same way notwithstanding the Browser or Operating System used.</li>
  </ol>
</p>

<div class="section">What is the <i>zero click</i> widget?</div>
<p>
  The <i>zero click</i> search widget searches for a block of selected text using Duck Duck Go's public <a href="http://duckduckgo.com/api.html">API</a> and displays the results in an iframe. The result iframe is highly configurable via configuration parameters.
</p>



<div class="section">Demos</div>
<p>
  Select some text in the paragraphs below to see how the widget works and looks like.
</p>

<ol>
  <li>
    <div class="subsection">Transparent widget</div>
    <p id="p1">
    An operating system (OS) is software, consisting of programs and data, that runs on computers and manages the computer hardware[1] and provides common services for efficient execution of various application software.
    For hardware functions such as input and output and memory allocation, the operating system acts as an intermediary between application programs and the computer hardware,[2][3] although the application code is usually executed directly by the hardware, but will frequently call the OS or be interrupted by it. Operating systems are found on almost any device that contains a computer—from cellular phones and video game consoles to supercomputers and web servers.
    Examples of popular modern operating systems for personal computers are Microsoft Windows, Mac OS X, and GNU/Linux.[4]
    </p>

    <span class='code-title'>Javascript Code:</span><pre>$("#p1").zero_clickable({
  id: "a1", 
  singleton: true, 
  clickout: true, 
  css: { color: "#666666", "font-family": "monospace" }
});
      </pre>
  </li>

  <li>
    <div class="subsection">Widget with a white background</div>
    <p id="p2">
    Early computers were built to perform a series of single tasks, like a calculator. Operating systems did not exist in their modern and more complex forms until the early 1960s.[5]  Some operating system features were developed in the 1950s, such as monitor programs that could automatically run different application programs in succession to speed up processing. Hardware features were added that enabled use of runtime libraries, interrupts, and parallel processing. When personal computers by companies such as Apple Inc., Atari, IBM and Amiga became popular in the 1980s, vendors added operating system features that had previously become widely used on mainframe and mini computers. Later, many features such as graphical user interface were developed specifically for personal computer operating systems.
    </p>

    <span class='code-title'>Javascript Code:</span><pre>$("#p2").zero_clickable({
  id: "a2", 
  singleton: true, 
  clickout: true, 
  proximity: false, 
  css: { color: "#666666" }, 
  onbeforeshow: function(a) { alert("About to show: " + a.attr("id")); }, 
  onbeforeclose: function(a) { alert("About to remove: " + a.attr("id")); }
});
      </pre>

    <span class='code-title'>CSS (stylesheet):</span><pre>#a2 {
  background-color: #FFFFFF;
}
</pre>
  </li>

  <li>
    <div class="subsection">Widget with a violet font and light violet background</div>
    <p id="p3">
    An operating system consists of many parts. One of the most important components is the kernel, which controls low-level processes that the average user usually cannot see: it controls how memory is read and written, the order in which processes are executed, how information is received and sent by devices like the monitor, keyboard and mouse, and decides how to interpret information received from networks. The user interface is a component that interacts with the computer user directly, allowing them to control and use programs. The user interface may be graphical with icons and a desktop, or textual, with a command line. Application programming interfaces provide services and code libraries that let applications developers write modular code reusing well defined programming sequences in user space libraries or in the operating system itself. Which features are considered part of the operating system is defined differently in various operating systems. For example, Microsoft Windows considers its user interface to be part of the operating system, while many versions of Linux do not.
    </p>

    <a name="p3-js-code"></a>
    <span class='code-title'>Javascript Code:</span><pre>$("#p3").zero_clickable({
  id: "a3", 
  singleton: true, 
  clickout: true, 
  css: { color: "purple", "font-family": "'Segoe UI',Arial,sans-serif" }
});
      </pre>

    <span class='code-title'>CSS (stylesheet):</span><pre>#a3 {
  background-color: #FFCEDE;
}
    </pre>
  </li>

</ul>


<div class="section">Widget Quick Intro.</div>
<p>
  To make any block of text <i>Zero Clickable</i>, you need to do the following:
</p>

<ol>
  <li>Include jQuery core, jQuery UI and the <i>zero clickable</i> jQuery plugin in the <i>&lt;head&gt;</i> section of your HTML file.
    <pre class="code">
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://dhruvbird.com/ddb/js/jquery.zero_clickable.min.js&quot;&gt;&lt;/script&gt;</pre>
  </li>

  <li>
    In a <i>&lt;script&gt;</i> tag, when the document is completely loaded, select the div (or element) containing the text you want to make <i>zero clickable</i> using jQuery's selector mechanism and then call <i>zero_clickable(params)</i> on it where, params should be a hash (object) containing one or more of the following configuration parameters.
    <pre class="code">
&lt;script type=&quot;text/javascript&quot;&gt;
$().ready(function() {
  $(&quot;#p1&quot;).zero_clickable({
    id: &quot;a1&quot;, 
    singleton: true, 
    clickout: true, 
    css: { color: &quot;#666666&quot;, &quot;font-family&quot;: &quot;monospace&quot; }
  });
});
&lt;/script&gt;</pre>
    In the example above, a DOM element with an id of <i>p1</i> is the element that contains the text we want to make zero clickable.
  </li>

  <li>
    In the <i>&lt;head&gt;</i> section of your HTML file, you will also need to include the following basic CSS for styling the widget. You may replace it with your own custom styling.
    <pre class="code">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.zero_clickable.css&quot; /&gt;
&lt;style type=&quot;text/css&quot;&gt;
  #a1 {
    background-color: #FFFFFF;
  }
&lt;/style&gt;</pre>
  </li>
      
</ol>

<div class="section">Widget parameters</div>
<p>
  The following configurables may be passed to the widget constructor (the zero_clickable() method) to customize the behaviour and look &amp; feel of the wedget. All the fields below are optional.
</p>

<ol>
  <li><b>id</b>: An <b>id</b> to assign to the div that will show the zero 
	  click info. This can be used for selecting the div for styling purposes.
	  <br/>Default: (empty)</li>
  <li><b>unpunct</b>: (true/false) Remove punctuations from the selected text if true. Default: false</li>
  <li><b>max-length</b>: Ignore selected text if number of selected characters 
	  are greater than max-length. <br/>Default: 60</li>
  <li><b>singleton</b>: (true/false) Will allow ONLY 1 instance of this widget on 
      this page if set to true. The value of 'singleton' must be the SAME
      for ALL invocations of this widget on the same page. The behaviour of 
      the widget is undefined if you use different paramaters when invoked 
      on the same page. <br/>Default: false</li>
  <li><b>clickout</b>: (true/false) Clicking outside the widget closes it if true.
      The value of clickout is meaningful ONLY if the 'singleton' flag is 
      set to true. <br/>Default: false</li>
  <li><b>proximity</b>: (true/false) If true, changes the opacity of the widget 
      based on widget position and the position of the mouse pointer. The value 
      of proximity holds true only if singleton is set to true. If 
      'proximity' is set to true and 'singleton' is set to false, 
      then the behaviour of this widget can not be defined. Just like 
      'singleton', if you specify a value for 'proximity' once on a page, 
      you MUST use the same value on all invocations on that page. 
	  <br/>Default: true</li>
  <li><b>cornered</b>: (true/false). If true, the widget will try to start 
      itself at one of the corners of the screen such that it is not under 
      the mouse. sandesh247 suggested this since most selections would be
      to copy text and not to define a term. Thanks Sandy!! :-) :-)
      <br/>Default: true</li>
  <li><b>error-string</b>: The error string to 
      display in the iframe if no matches were found.</li>
  <li><b>css</b>: Other css attributes. The attributes that are forwarded 
	(if using iframe) are: color, font-faimly. By default, color and 
	font-family are copied from the element that has been made 
	<i>zero_clickable</i>. <br/>Default: (empty)</li>
</ol>


<div class="section">Download</div>
<ol>
  <li><a href="http://dhruvbird.com/ddb/js/jquery.zero_clickable.js">Unminified</a> (12kB)</li>
  <li><a href="http://dhruvbird.com/ddb/js/jquery.zero_clickable.min.js">Minified</a> (4kB)</li>
</ol>



<div style="height: 250px;">&nbsp;</div>



<script type="text/javascript">
  $().ready(function() {

    $("#p1").zero_clickable({
      id: "a1", 
      singleton: true, 
      clickout: true, 
      css: { color: "#666666", "font-family": "monospace" }
    });

    $("#p2").zero_clickable({
      id: "a2", 
      singleton: true, 
      clickout: true, 
      proximity: false, 
      css: { color: "#666666" }, 
      onbeforeshow: function(a) { alert("About to show: " + a.attr("id")); }, 
      onbeforeclose: function(a) { alert("About to remove: " + a.attr("id")); }
    });

    $("#p3").zero_clickable({
      id: "a3", 
      singleton: true, 
      clickout: true, 
      css: { color: "purple", "font-family": "'Segoe UI',Arial,sans-serif" }
    });

  });
</script>

<?php
  require_once("../include/ga.php");
  require_once("../include/customize.php");
  require_once("../include/terminal.php");
?>

</body>
</html>
