Javascript Course

In this tutorial is presented a script with jQuery that highlights the word which is selected by double-click on it.
It is useful if you want to add in your webpage the posibility that when the user double-clicks on a word, all occurrences of that word in the page will be highlighted.

• To test it, just double-click on words in this page.

- This script uses the highlight plughin from www.johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html .
- Explanations about the code are in the comments in script.

Usage

1. Add to your page (after jQuery library) the JavaScript code bellow.
2. In the CSS style add this code (define a color, and background for highlighted words).
.highlight { background-color: yellow; color:blue; }
- If you want to highlight to words in a specific area, replace the "body" to this line of code: $('body').dblclick(function(), with the reference to that area. For example: $('#id_element').dblclick(function() .

Script code

<script><!--
/*
Plughin highlight v3
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
Johann Burkard
<http://johannburkard.de>
*/
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
 var skip = 0;
 if (node.nodeType == 3) {
 var pos = node.data.toUpperCase().indexOf(pat);
 if (pos >= 0) {
 var spannode = document.createElement('span');
 spannode.className = 'highlight';
 var middlebit = node.splitText(pos);
 var endbit = middlebit.splitText(pat.length);
 var middleclone = middlebit.cloneNode(true);
 spannode.appendChild(middleclone);
 middlebit.parentNode.replaceChild(spannode, middlebit);
 skip = 1;
 }
 }
 else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
 for (var i = 0; i < node.childNodes.length; ++i) {
 i += innerHighlight(node.childNodes[i], pat);
 }
 }
 return skip;
 }
 return this.each(function() {
 innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
 this.parentNode.firstChild.nodeName;
 with (this.parentNode) {
 replaceChild(this.firstChild, this);
 normalize();
 }
 }).end();
};

// function to get selected text in a webpage
function getSelText() {
 var seltxt = ''; // store selected text

 // get selected text
 if (window.getSelection) {
 seltxt = window.getSelection();
 } else if (document.getSelection) {
 seltxt = document.getSelection();
 } else if (document.selection) {
 seltxt = document.selection.createRange().text;
 }
 return seltxt;
}
--></script>
<script><!--
$(document).ready(function() {
 // when double click on BODY area
 $('body').dblclick(function() {
 var seltxt = getSelText(); // get selected text
 seltxt = $.trim(seltxt); // remove the whitespace from the beginning and end of "seltxt"
 $(this).removeHighlight().highlight(seltxt); // calls the function that anulate and highlight
 });
});
--></script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Highlight selected, clicked word in page

Last accessed pages

  1. The Stage, Panels and Tools in Flash (10398)
  2. SHA512 Encrypt hash in JavaScript (24997)
  3. PHP Script Website Mini-Traffic (7274)
  4. Using v-model in form input fields (1085)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (59617)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (311)
  2. CSS cursor property - Custom Cursors (36)
  3. The Mastery of Love (35)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (32)
  5. Read Excel file data in PHP - PhpExcelReader (28)