how to use delay function in jquery

November 6, 2012 Leave a comment

 

  • call the jquery library file
<script src="jquery.js" type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").delay("slow").fadeIn();
                $("#div2").delay("fast").fadeIn();
                $("#div3").delay(800).fadeIn();
                $("#div4").delay(2000).fadeIn();
                $("#div5").delay(4000).fadeIn();

            });
        });
</script>
</head>
//body code here

<body>
<p>This example sets different speed values for the delay() method.</p>
<button>Click to fade in boxes with a delay</button>
<br><br>
<div id="div1" style="width:90px;height:90px;display:none;
    background-color:black;"></div><br>
<div id="div2" style="width:90px;height:90px;display:none;
    background-color:green;"></div><br>
<div id="div3" style="width:90px;height:90px;display:none;
    background-color:blue;"></div><br>
<div id="div4" style="width:90px;height:90px;display:none;
    background-color:red;"></div><br>
<div id="div5" style="width:90px;height:90px;display:none;
    background-color:purple;"></div><br>


</body>
</html>

Categories: j query

clearqueue function in jquery

November 6, 2012 1 comment

 

  • call the jquery library file.

 

Clearqueue function
<script src="jquery.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var div = $("div");
        $("#start").click(function () {
            div.animate({ height: 300 }, "slow");
            div.animate({ width: 300 }, "slow");
            div.queue(function () {
                div.css("background-color", "red");
                div.dequeue();
            });
            div.animate({ height: 100 }, "slow");
            div.animate({ width: 100 }, "slow");
        });
        $("#stop").click(function () {
            div.clearQueue();
        });
    });
</script>
</head>
<body>

<p>The queue() method shows the queue of functions to be executed on the selected elements.</p>
<p>The dequeue() method removes the next function from the queue, and then executes the function.</p>
<p>The clearQueue() removes all items from the queue that have not yet been run.<p>

<p>
<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
</p>
<div style="background:#98bf21;height:100px;width:100px;position:relative"></div>

</body>

Categories: j query

How to drag the image in our website using in javascript

November 2, 2012 Leave a comment

 

Events:

Script :

<script>
        var srcelementid;
        var destelementid;
        function getsource() {
            srcelementid = event.srcElement.id;
        }
        function getdestination() {
            destelementid = event.srcElement.id;
            var dest = document.getElementById(destelementid).innerHTML;
            document.getElementById(destelementid).innerHTML = 
            dest + "<br><img src='mickey861.gif'width=100 height=150 />";
            document.getElementById("top").innerHTML = "";

        }
        function getdestinationbottom() {
            destelementid = event.srcElement.id;
            var dest = document.getElementById(destelementid).innerHTML;
            document.getElementById(destelementid).innerHTML = 
            dest + "<br><img src='mickey861.gif'width=100 height=150 />";
            document.getElementById("bottom").innerHTML = "";

        }
        function cancelevent() {
            window.event.returnValue = false;
        }
    </script>

 

Body:

<body>
 <form id="form1" runat="server">
        <table border="0" width="100%">
            <tr>
                <td align="center">
                    <div class="style1">
                  <strong>Drag image from Top box to Empty space in Bottom box.
                    </strong>
                    </div>
                </td>
            </tr>
            <tr>
     <td align="center" valign="middle">
    <div id="top"  style="border: solid 1px black; height: 260px;
         width: 500px; overflow: auto;
                        background-color: White;" ondragstart='getsource();' 
                 ondragover='cancelevent() ;' ondrop='getdestinationbottom()'>
                 <br />  
                 <br />      
        <img src="mickey861.gif" width=100 height=150 />
        </div>
         </td>
            </tr>
            <tr>
         <td align="center" valign="middle">
              <div id="bottom" style="border: solid 1px black; height: 260px;
                         width: 500px; background-color: White;"
                      
                         ondragenter='cancelevent() ;' 
                        ondragover='cancelevent() ;' 
                       ondrop='getdestination() ;'ondragstart='getsource();'>
                    </div>
                    
           </td>
            </tr>
        </table>
    </form>
</body>

 

Output :

 

 

Sample screenshot

Sample screenshot

Categories: javasript

How to Disabling Right Click button of mouse using JavaScript

October 30, 2012 Leave a comment

 

Script :

 <script>
        function disable() {
            if (event.button == 2) {
                alert("Right click is not working here!!");
            } 
        }
    </script>

Body :

<body onmousedown="disable()">
    <form id="form1" runat="server">
    <div>
        <img src="mickey861.gif" />
    </div>
    </form>
</body>

Output :

Categories: javasript

How to Create a Popup box using JavaScript

October 30, 2012 Leave a comment

 

 

Script :

<script language="javascript">
    x = 20;
    y = 70;
    function set_visible(obj) {
        obj = document.getElementById(obj);
        obj.style.visibility = (obj.style.visibility == 'visible') ? 
                                               'hidden' : 'visible';
    }
    function place_It(obj) {
        obj = document.getElementById(obj);
        if (document.documentElement) {
            theLeft = document.documentElement.scrollLeft;
            theTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            theLeft = document.body.scrollLeft;
            theTop = document.body.scrollTop;
        }
        theLeft += x;
        theTop += y;
        obj.style.left = theLeft + 'px';
        obj.style.top = theTop + 'px';
        setTimeout("place_It('layer1')", 500);
    }
    window.onscroll = setTimeout("place_It('layer1')", 500);
</script>

Css Style :

<style type="text/css">
  #layer1 {
    position: absolute;
    visibility: hidden;
    width: 300px;
    height: 300px;
    left: 20px;
    top: 300px;
    background-color: #ccc;
    border: 2px solid #000;
    padding: 10px;
}

#close {
    float: right;
}
</style>

Body :

<div id="Div1">
  <span id="Span1"><a href="javascript:set_visible('layer1')" 
  style="text-decoration: none">
  <strong>Close</strong></a></span>
  <p>Java Script was developed by the Brendan Eich of Netscape. 
  Initially java script was called Live script. Live script 
  was the official name of java script
  when it was released in beta version in  Netscape Navigator 2.0 in 1995.
  But it was renamed by joint procession of Sun Microsystems and Netscape 
  .</p>
</div>
  <input type="button" value="Open popup" onclick="set_visible('layer1')">
 </body>

Output :

Categories: javasript

How to Increases and decreases the size of image using JavaScript

October 30, 2012 Leave a comment

 

Script :

<script>
        function changesize(x, y) {
            var x;
            var y;
            document.getElementById("zoom").height = x;
            document.getElementById("zoom").width = y;
        }
    </script>

Body :

<body>
<img id="compman" src="Image.jpg" width="100" height="100" />
<br /><br />
<input type="button" onclick="changeSize(150,150)" value="150X150">
<br />
<input type="button" onclick="changeSize(200,200)" value="200X200">
<br />
<input type="button" onclick="changeSize(300,300)" value="300X300">
</body>

Output :

 

Categories: javasript

INSERTING AND REMOVING LISTITEMS IN DROPDOWNLIST USING JAVASCRIPT

October 30, 2012 Leave a comment

 

Script :

<script>
        function AddItemInList() {
            var list = document.getElementById('DropDownList1');
            var box = document.getElementById('Text1');
            var newListItem = document.createElement('OPTION');

            newListItem.text = box.value;
            newListItem.value = box.value;
            list.add(newListItem);

            box.value = "";
            box.focus();
        }

        function RemoveItemInList() {

            var list = document.getElementById('DropDownList1');
            if (list.options.length > 0) {
                for (var i = list.options.length - 1; i >= 0; i--) {
                    if (list.options[i].selected) {
                        list.remove(i);
                        return false;
                    }
                }
            }
            else {
                alert('Unable to remove. List is Empty!');
            }
        }
    </script>

Body :

<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <input id="Text1" type="text" />
        <input id="Button1" type="button" value="Add New"  
        onclick="AddItemInList();"/>
        <input id="Button2" type="button" value="Remove Item"  
        onclick="return RemoveItemInList();"/>
    </div>
    </form>
</body>

Output :

Categories: javasript

Selecting a item from Drop Down List and display it another Text Box using JavaScript

October 30, 2012 Leave a comment

 

 

Script:

<script>
        function seltext() {
            var mylist = document.getElementById("mylist");
            document.getElementById("favouriate").value = mylist.options
                                            [mylist.selectedIndex].text;

        }
        
    </script>

Body:

<body>
    <form id="form1" runat="server">
    <div>
    select your city:
    <select id="mylist" onchange="seltext()">
    <option>delhi</option>
    <option>andhra</option>
    <option>kerala</option>
    <option>bengal</option>
    </select>
    <input type=text id=favouriate size=20 />
    
    </div>
    </form>
</body>

 

Output:

Categories: javasript

Selecting whole text on button Click

October 30, 2012 Leave a comment

 

script :

 <script>
        function selecttext() {
            document.getElementById("mytext").select();
        }
    </script>

Body:

<body>
    <form id="form1" runat="server">
    <div>
    <input type=text id="mytext"  value="have a nice day" />
    </div>
    </form>
    <p>
    <input type=button value="copy" onclick="selecttext()"/> </p>
</body>

Output:

Categories: javasript

How to create the animated frame using javascript

October 29, 2012 Leave a comment

 

 

Script :

<body onload="changeOneFrame()">
<script language="javascript">
    var newWin = window.open('', 'f', 'width=400,height=400');
    newWin.document.write('<frameset rows="50%,50%" cols="50%,50%">');
    newWin.document.write('<frame name="f1" src="about:blank">');
    newWin.document.write('<frame name="f2" src="about:blank">');
    newWin.document.write('<frame name="f3" src="about:blank">');
    newWin.document.write('<frame name="f4" src="about:blank">');
    newWin.document.write('</frameset>');
    colors = new Array("red", "green", "blue", "yellow", "white");
    windows = new Array(newWin.f1, newWin.f2, newWin.f4, newWin.f3);
    var c = 0, f = 0;
    var timeout = null;
    function changeOneFrame() {
        windows[f].document.write('<BODY BGCOLOR="' + colors[c] + '">');
        windows[f].document.close();
        f = (f + 1) % 4;
        c = (c + 1) % 5;
        timeout = setTimeout("changeOneFrame()", 250);
    }
</script>
<input type="button" value="Stop" 
onclick="if (timeout) clearTimeout(timeout); if (!n.closed) n.close();" />
</body>

 

Ouput :

Categories: javasript