How To Redirect If JavaScript Is Disabled In A Browser

This tutorial will help you to understand how to redirect a web page when JavaScript is disabled in a browser..........

Read more

Open a URL in a New Tab Using JavaScript

HTML have an attribute option to open URL in a new tab. The target attribute basically decide where to open linked anchor.In this tutorial, we will see how to open a URL in new tab using JavaScript...................

Read more

Create HTML Form with JavaScript

This tutorial is all about creating form using JavaScript. In this tutorial, we are going to see how to create simple html form using JavaScript step by step. ..............

Read more

Copy TEXT to Clipboard on Button Click

Copy to clipboard is a very common task and we use it often in computer, laptop and mobile.......

Read more

How to Prevent Default action of Anchor Tag Using JavaScript

<a href="#tab1"  onClick='return false;'>Tab1</a>

Difference between on('keyup' ) and keyup

Problem :    $( "#find" ).keyup(function(){

Script is not working

Solved : 
Find
    $( "#find" ).keyup(function(){
Replace with below

 $( "#finds" ).on('keyup', function(){

always prefer .on .As I suggest.'

Send form data in hidden on anchor click Using JavaScript

<form action ="actionpagename.php" id="testform" method="post">
<input type="hidden" name="name" value="dgegg" />
<input type="hidden" name="id" value="adfdsafe" />
</form>

<a class="your class" onclick="test()">Your Links</a>

<script type="text/javascript">
function test()
{
document.forms.testform.submit();
}
</script>

If on('click') for Class is Not Working in JavaScript

 $(".load").on("click",function(){   //if not work use below code snippet

$(document).on("click",".load",function(){

//here load is class name

What is the difference between onclick and .on('click')

What is the difference between onclick and .on('click') ?

Ans: 
1) if  i am using ajax with onclick or click and it is not working but when i am using .on('click'), it is working perfect.


2) .on(...) is new with Jquery and it will work with javascript or jquery.

3) preferring .on over .click because the former can use less memory and work for dynamically added elements.

how to calculate value of two textfield and display its sum in third textfield autmotatically

<script>

function sum() {

      var txtFirstNumberValue = document.getElementById('txt1').value;

      var txtSecondNumberValue = document.getElementById('txt2').value;

      var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);

      if (!isNaN(result)) {

         document.getElementById('txt3').value = result;

      }

}

</script>

<input type="text" id="txt1"  onkeyup="sum();" />

<input type="text" id="txt2"  onkeyup="sum();" />

<input type="text" id="txt3" />

how to disable enter key for input textbox

Disable enter key for textbox input using JavaScript and Jquery.

<script>
$(document).ready(function()
    {
        // Stop user to press enter in textbox
        $("input:text").keypress(function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
});
</script>

breadcrumbs in html using JavaScript and css

breadcrumbs in html using JavaScript and css

JavaScript

<script type="text/javascript">
function breadcrumbs() {

  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<div class=topnav><a href=/>Home</a> » ";

  sURL = location.href;
  sURL = sURL.slice(8,sURL.length);
  chunkStart = sURL.indexOf("/");
  sURL = sURL.slice(chunkStart+1,sURL.length)

  while(!stop){
    chunkStart = sURL.indexOf("/");
    if (chunkStart != -1){
      bits[x] = sURL.slice(0,chunkStart)
      sURL = sURL.slice(chunkStart+1,sURL.length);
    } else {
      stop = 1;
    }
    x++;
  }

  for(var i in bits){
    output += "<a href=\"";
    for(y=1;y<x-i;y++){
      output += "../";
    }
    output += bits[i] + "/\">" + bits[i] + "</a> » ";
  }
  //document.write(output + document.title);
  document.write(output+ "text1" +" "+"»"+" "+ "text2");
  document.write("</div>");
  }
</script>

CSS

<style>
.topnav { 
  font-size: 0.8em;
  color: #000;
  background-color: #FFCF29;
  border: 1px #00009C solid;
  padding: 0.5em;
}

</style>

JS to call a function to appear breadcumbs where you need.

<script type="text/javascript">


  breadcrumbs();


</script>

to go one page to another using javascript

to go one page to another using javascript

Use this syntax:

echo ("<script>window.location.href='home.php';</script>");

                                      OR

 echo ("<script>location.href = 'home.php';</script>");

validation in a drop down list with javascript

<form name="con" method="post" action="" onSubmit="return check()">

<select id="country" name="country">

</form>

<script>

function check(){

if(document.getElementById('country').selectedIndex==0)

{

alert("Please select country"); document.getElementById('country').focus(); return false;

}

}

</script>

to hide source code of website to not be copied

Option 1:

<body oncontextmenu="return false">
  ...
</body>

Option 2:

<script language="javascript">
  document.onmousedown = disableclick;
  status = "Right Click Disabled";
  Function disableclick(e)
  {
    if(event.button == 2)
    {
      alert(status);
      return false;
    }
  }

</script> 

Pagination within a div

Pagination within a div

Step 1: HTML

<link rel="stylesheet" href="css/main.css" type="text/css" />


<script src="js/jquery.min.js"></script>
<script src="js/pager.js"></script>



<div class="example">


    <h3><a href="#">pagination sample</a></h3>

    <div id="content">

<?php
$sql="select * from `tablename`";
if($dd=mysql_query($sql))
{
while($DD=mysql_fetch_array($dd))
       { ?>

<div class="z"><?php echo $DD['name']; ?> </div>

                  <?php }?>

</div>

    <div id="pagingControls"></div>

</div>

<script type="text/javascript">

var pager = new Imtech.Pager();

$(document).ready(function() {

    pager.paragraphsPerPage = 5; // set amount elements per page

    pager.pagingContainer = $('#content'); // set of main container

    pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers

    pager.showPage(1);

});

</script>

STEP 2: CSS

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}

.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}

#content p{text-indent:20px;text-align:justify;}

#pagingControls ul{display:inline;padding-left:0.5em}

#pagingControls li{display:inline;padding:0 0.5em}

STEP 3: JS

js/jquery.min.js   ( – just jQuery library. Available in package.)

js/pager.js 

var Imtech = {};

Imtech.Pager = function() {

    this.paragraphsPerPage = 3;

    this.currentPage = 1;

    this.pagingControlsContainer = '#pagingControls';

    this.pagingContainerPath = '#content';

    this.numPages = function() {

        var numPages = 0;

        if (this.paragraphs != null && this.paragraphsPerPage != null) {

            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);

        }

        

        return numPages;

    };

    this.showPage = function(page) {

        this.currentPage = page;

        var html = '';

        this.paragraphs.slice((page-1) * this.paragraphsPerPage,

            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {

            html += '<div>' + $(this).html() + '</div>';

        });

        $(this.pagingContainerPath).html(html);

        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());

    }

    var renderControls = function(container, currentPage, numPages) {

        var pagingControls = 'Page: <ul>';

        for (var i = 1; i <= numPages; i++) {

            if (i != currentPage) {

                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';

            } else {

                pagingControls += '<li>' + i + '</li>';

            }

        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);

    }

}

on mousehover div appear using javascript

******************************** js ******************************
<script>
 function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft +70000;
hp.style.right = hoveritem.offsetRight +70;
hp.style.bottom = hoveritem.offsetBottom +70;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
  </script>

*****************************   html  *****************************
<a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">Hover over me!</a>


<div id="hoverpopup" style="visibility:hidden; position:absolute; top:50px; left:300px; ">
<table bgcolor="#0000FF" style="width:500px; height:500px; margin-left:100px;">
<tr><td><font color="#FFFFFF">This is my popup</font></td></tr>
<tr><td bgcolor="#8888FF" >Hello I am a popup table</td></tr></table></div>

validating password and confirm password using javascript

<SCRIPT LANGUAGE="JavaScript">
  function validate(form) {
  pw1 = form.password.value;
  pw2 = form.password1.value;

  if (pw1 != pw2) {
  alert ("\nYou did not enter the same new password twice. Please re-enter your password.");
   document.getElementById("password").value="";
    document.getElementById("password1").value="";
   document.getElementById("password").focus();
  return false;
  }
  else return true;
  }

</script>

popup using javascript

<!DOCTYPE html>
<html>
<head>
    <title> popup-1</title>
    <link rel="stylesheet" type="text/css" href="css/1.4.1.min.css" />
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/1.4.1.min.js"></script>
</head>
<body>

<button class="btn" onclick="popup()">Open Popup</button>

<script type="text/javascript">
function popup() {
    w2popup.open({
        title: 'Popup Title',
        body: '<div class="w2ui-centered">This is text inside the popup</div>'
    });
}
</script>

</body>
</html>

jump to top of page without a link or with a link

<script type="text/javascript"><!--
window.onload = function() {
  scrollTo(0,0);
}
// -->
</script>

or
<script language="JavaScript" type="text/javascript">
 <!--
 document.write("<a href= \"" + document.location + "#top\">Jump Up</a>");
 // -->
 </script>