ryoungz/highlight.html

## highlight.html
<!DOCTYPE html>
    <head>
    <title>On page highlighting</title>
    <style type="text/css">
        .effect
        {
            -webkit-box-shadow: 0 10px 6px -6px #777;
            -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
        }
        .centered
        {
            width: 600px;
            position: fixed;
            z-index: 10000;
            height: 300px;
            background-color: #C0C0C0;
        }

        h2 {
            color: #222;
            text-shadow: 0px 2px 3px #555;
            text-align: center;
        }

        h1 {
            text-align: center;
            vertical-align: bottom;
            color: #F2C343;
            text-shadow: 0px 2px 3px #555;
        }

        span {
            color: #ffff00;
            font-size: 20px;
            font-family: sans-serif;
        }

        .replace {
            margin-left: 20px;
            margin-top: 20px;
            font-size: large;
        }

        .highlight {
            margin-left: 20px;
            margin-top: 20px;
            font-weight: bolder;
            font-size: larger;
        }
        #searchterm:focus
        {
            border: thin solid #FFD633;
            -webkit-box-shadow: 0px 0px 3px #F7BB2E;
            -moz-box-shadow: 0px 0px 3px #F7BB2E;
            box-shadow: 0px 0px 3px #F7BB2E;
        }

        #searchterm
        {
            height: 24px;
            width: 200px;

        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            ShowDialog();
            $('#searchterm').bind("keyup change", function (e) {
                var txt = $('#searchterm').val().trim();
                var regex = new RegExp("(" + txt + ")", "igm");
                $('.replace').each(function () {
                    var stringSearch = $(this).text().replace(regex, "<span>$1</span>");
                    $(this).html(stringSearch);
                });
            });
        });
        function ShowDialog() {
            //get viewport's width and height
            var x = document.getElementById("demo");
            var vpWidth = self.innerWidth;
            var vpHeight = self.innerHeight;

            //get dialog's width and height
            var dialogWidth = x.offsetWidth;
            var dialogHeight = x.offsetHeight;

            //calculate position
            dialogTop = (vpHeight / 2) - (dialogHeight / 2);
            dialogLeft = (vpWidth / 2) - (dialogWidth / 2);


            //Position the Dialog
            x.style.top = dialogTop + "px";
            x.style.left = dialogLeft + "px";

            a = x.style.display = "block";
        }
    </script>
</head>
<body>
    <h2>Search Text using jquery</h2>

    <div id="demo" class="effect centered">
        <p class="highlight">
            Search Box:&nbsp;
            <input id="searchterm" type="text" /></p>
        <div class="replace">
            We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>
        <p class="replace">
            All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.</p>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<title>On page highlighting</title>
	<style type="text/css">
	.effect
	{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
	}
	.centered
	{
	width: 600px;
	position: fixed;
	z-index: 10000;
	height: 300px;
	background-color: #C0C0C0;
	}

	h2 {
	color: #222;
	text-shadow: 0px 2px 3px #555;
	text-align: center;
	}

	h1 {
	text-align: center;
	vertical-align: bottom;
	color: #F2C343;
	text-shadow: 0px 2px 3px #555;
	}

	span {
	color: #ffff00;
	font-size: 20px;
	font-family: sans-serif;
	}

	.replace {
	margin-left: 20px;
	margin-top: 20px;
	font-size: large;
	}

	.highlight {
	margin-left: 20px;
	margin-top: 20px;
	font-weight: bolder;
	font-size: larger;
	}
	#searchterm:focus
	{
	border: thin solid #FFD633;
	-webkit-box-shadow: 0px 0px 3px #F7BB2E;
	-moz-box-shadow: 0px 0px 3px #F7BB2E;
	box-shadow: 0px 0px 3px #F7BB2E;
	}

	#searchterm
	{
	height: 24px;
	width: 200px;

	}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	ShowDialog();
	$('#searchterm').bind("keyup change", function (e) {
	var txt = $('#searchterm').val().trim();
	var regex = new RegExp("(" + txt + ")", "igm");
	$('.replace').each(function () {
	var stringSearch = $(this).text().replace(regex, "<span>$1</span>");
	$(this).html(stringSearch);
	});
	});
	});
	function ShowDialog() {
	//get viewport's width and height
	var x = document.getElementById("demo");
	var vpWidth = self.innerWidth;
	var vpHeight = self.innerHeight;

	//get dialog's width and height
	var dialogWidth = x.offsetWidth;
	var dialogHeight = x.offsetHeight;

	//calculate position
	dialogTop = (vpHeight / 2) - (dialogHeight / 2);
	dialogLeft = (vpWidth / 2) - (dialogWidth / 2);


	//Position the Dialog
	x.style.top = dialogTop + "px";
	x.style.left = dialogLeft + "px";

	a = x.style.display = "block";
	}
	</script>
	</head>
	<body>
	<h2>Search Text using jquery</h2>

	<div id="demo" class="effect centered">
	<p class="highlight">
	Search Box:
	<input id="searchterm" type="text" /></p>
	<div class="replace">
	We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</div>
	<p class="replace">
	All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.</p>
	</div>
	</body>
	</html>