Move div randomly around page using jQuery in ASP.Net

ROHIT

SOLVED CLOSED ACTIVE ANSWERED
User: ROHIT
Posted: on May 10, 2016 01:53 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 6052
Sample Code: Download

vb.net webpage having 5 editable test buttons there is any way to move or animate those buttons from up to down or left to right randonlly with infinte loop automatically but don't go out from the desktop

  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Response.Redirect("http://www.Google.com/")
    End Sub

<html>
<head>
<style> 
div {
    width: 100px;
    height: 50px;
    background: white;
    color: white;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    animation: mymove 12s infinite;
}

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

#div1 {animation-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 1500px;}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1"><asp:Button ID="Button1" runat="server" Text="A" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div2"><asp:Button ID="Button2" runat="server" Text="B" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div3"><asp:Button ID="Button3" runat="server" Text="C" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div4">
    <asp:Button ID="Button4" runat="server" Text="D" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div5">
    <asp:Button ID="Button5" runat="server" Text="E" Height="100px" Width="100px" /></div>
</form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

Shashika...

0 8

Reply
ANSWER
User: Shashikant
Replied: on May 10, 2016 09:23 AM
Modified: on May 10, 2016 09:50 AM
Report

Hi,

Please refer below code

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.a').each(function () {
                var random = Math.floor(Math.random() * 100) + 10;
                animateDiv($(this)[0].id, random, random);
            });
        });
        function makeNewPosition(height, width) {
            var h = $(window).height() - height;
            var w = $(window).width() - width;
            var nh = Math.floor(Math.random() * h);
            var nw = Math.floor(Math.random() * w);
            return [nh, nw];
        }

        function animateDiv(controlId, height, width) {
            var newq = makeNewPosition(height, width);
            $('#' + controlId).animate({ top: newq[0], left: newq[1] }, 1500, function () {
                animateDiv(controlId, height, width);
            });

        };
    </script>
    <style type="text/css">
        input.a
        {
            background-color: red;
            position: fixed;
            width: 150px;
            height: 75px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    Click on Moving Bubbles to Visit
    <br />
    <br />
    <a href="http://www.aspsnippets.com/">
        <input id="btn1" type="button" value="AspSnippets" class='a' />
    </a> 
    <a href="http://facebook.com/">
        <input id="btn2" type="button" value="Facebook" class='a' />
    </a> 
    <a href="http://www.google.com/">
        <input id="btn3" type="button" value="Google" class='a' />
    </a> 
    <a href="http://www.jqueryfaqs.com/">
        <input id="btn4" type="button" value="JqueryFaqs" class='a' />
    </a>
    <a href="https://twitter.com/">
        <input id="btn5" type="button" value="Twitter" class='a' />
    </a>
    <a href="http://www.aspforums.net/">
        <input id="btn6" type="button" value="Aspforums" class='a' />
    </a>
</body>
</html>

Demo

I hope this will help you out.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Move div randomly around page using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us