I am looking to add some amusement to my website for April Fool's Day by creating an animated button using either pure CSS or jQuery. The idea is to have a regular button that moves rapidly to the other side of the mouse when hovered over, creating a simple game for visitors to enjoy. It shouldn't be too difficult to catch, but users can click on it if they try hard enough :)
Is there anyone who can help me bring this fun idea to life?
Thank you in advance!
Here is an example of how you can create a fun animation effect using jQuery:
$("button").mouseover(function(){
$(this).css({
left:(Math.random()*300)+"px",
top:(Math.random()*300)+"px",
});
});
You can view a demo of this code in action here: http://jsfiddle.net/ZQamp/
I want to give credit to @roXon for suggesting an even better animation technique. Check it out here: http://jsfiddle.net/ZQamp/3
Take a look at the complete code snippet below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.block
{
position: absolute;
left: 50px;
width: 130px;
height: 30px;
margin: 5px;
}
</style>
<script src="ReferencetoYourJqueryFile" type="text/javascript"></script>
</head>
<body>
<div class="block">
<input type="button" name="btnClick" value="Catch me if you can" style="width: 130px;
height: 30px; border: 1px sold silver; background-color: #f7dfb5" />
</div>
<script type="text/javascript">
$(".block").mouseover(function () {
$(".block").animate({
left:(Math.random()*500),
top:(Math.random()*500),
}, "fast");
});
</script>
</body>
</html>Seeking assistance with an issue following a jQuery upgrade. After updating jQuery to version 3.3.1 and jQuery-ui to 1.12.1, along with jquery-migrate-3.0.1.min.js inclusion, code that previously functioned now produces an error for which I'm struggl ...
I'm currently developing a Chrome extension that enables users to capture all HTTP requests for a specific website, edit components of the request, and then send it again. My plan is to utilize jQuery's ajax function to design and dispatch the a ...
In Chrome and Firefox, the issue below doesn't seem to work, but it works in IE. I'm dynamically creating an element object using Javascript: svg = document.createElement("object"); svg.setAttribute("type","image/svg+xml"); svg.setAttri ...
Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...
I'm currently working with Laravel and have an HTML block that looks like this: <div class="white-panel"> <div class="media-body"> <h4 class="media-heading"> <!-- Title Goes Here --> </h4> </div> &l ...
My current table structure is as follows: <table class="table table-bordered"> @for (var i = 0; i < Model.Count; i++) { <tr> <td width="25px"> @if (!Model[i].Letter.Equ ...
My issue involves a bottom navigation bar with 5 elements. When the window is resized to less than 400px, the bottom navigation does not shrink, instead maintaining a minimum width of 400px and causing a scrollbar to appear on the x-axis. You can view a m ...
It seems like the task I have at hand may not be as simple as I had hoped, so here I am seeking some reassurance. I am aiming to switch out an image with a closing div, then the image itself, followed by another opening div. Let me illustrate this with a ...
Hello everyone! I have a question regarding user display and JavaScript. My goal is to turn off the update arrow gif, show the rotating arrows, perform the update, hide the rotating arrows, and then display the gif indicating that the item is now set. How ...
I have created a static aspx page with the following code: <div class="container"> <div class="contain" id="subdiv" runat="server"> <input type="checkbox" id="cb1" runat="server" /> <label for="cb1"> <img sr ...
I've been through numerous stackoverflow posts looking for a solution, but I still can't figure out how to add an additional Y scale in my Google chart. Can anyone assist me? Here is what my current output looks like: However, this is the desir ...
I am trying to adjust the width of stacked multiple divs dynamically based on the longest content, like shown in this image: https://i.sstatic.net/QhGCe.png After doing some research, I found that using inline-block is recommended. Here is my initial atte ...
Is it possible to retrieve the value assigned to <p class="myclass"></p> using a PHP script after setting it with jQuery's $('.myclass').text('txtvalue');? For example, I want to access this value without resorting to j ...
I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...
I am looking to customize the pagination length in DataTables plug-in for jQuery. Specifically, I want to calculate the number of pages on the server side and display the correct amount of buttons on the client side. Can anyone provide guidance on how to ...
I have a customized svg where elements are connected to user clicks and keyups. When a user modifies a text field on the website, it automatically updates the corresponding text element within the svg. Similarly, if the user edits the svg, the correspondin ...
There's a div with some content in it. Initially, this function works well when the page loads. However, if I use JavaScript to update the div with new content, this function stops working. I'm stuck and not sure how to fix this issue. Can anyon ...
Currently, I am facing a challenge while attempting to send an ajax call from the client to my server containing data related to an input parameter. The issue is that although I can view the data in my server's console, it does not display in the brow ...
My goal is to implement a hidden contact form field that has a linked counter which increments by 1 as soon as it is filled in the source code. I have chosen the input function for this purpose, regardless of the number of characters entered. Once the inpu ...
When checking the value of a form field, an alert box pops up if the value is more than 5. However, I've noticed that after filling in the field once, the alert box needs to be closed multiple times if entering another value above 5. This issue has no ...