Exploring the CSS positioning with the power of JQuery

How can I identify if a specific PNG file is placed next to another PNG file on a webpage, and trigger an alert if they are?

The issue I'm facing is that the alert pops up as soon as the webpage loads.

Here's the code I'm using for the PNG files:

<div id="container" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="donkey">
        <img src="images/donkey.png">
    </div>
    <div id="tail">
        <img src="images/donkeytail.png">
    </div>
</div>

And here's the jQuery code:

<script>
    $(function() {
        $( "#tail" ).draggable();
    });
    if($("#tail").css({top: 382, left: 810, position:'absolute'})){
        alert ('You win');
    }
</script>

I used a Chrome extension to determine the exact coordinates where the tail should be placed.

I'm uncertain if I'm approaching this correctly, so any assistance would be greatly appreciated!

Thank you!

Answer №1

Utilizing the position method in jQuery can be useful, as shown below:

if($("#tail").position().top == 382 && $("#tail").position().left == 810)){
        alert ('Congratulations! You have won');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The getJSON function in jQuery is incapable of detecting an error event when the response status is 500

When I try to access the server using getJSON, I receive a 500 status response but the fail event does not execute. Can someone please help me understand why this is happening? Thank you. var action = 'http://ship.mangocity.com/ship-calendar.shtml?ca ...

If a user clicks on an element twice in a row, the div will be hidden. Otherwise, it will remain

My navigation bar consists of several items and a div located next to it, as shown below: <nav> <a id="a"></a> <a id="b"></a> <a id="c"></a> </nav> <div id="menu-col"></div> If the same li ...

Tips for automating Selenium to wait for progress bars similar to those found on YouTube

Currently, I am employing Selenium (Java) to automate a web application that features a progress bar similar to Youtube's. This progress bar indicates the loading status of the page at the top of the webpage. My challenge lies in creating a function t ...

Sending data from Flask to Ajax

Upon accessing the main page, my Flask application generates a base Jinja template with specific elements: <div><span id="var_1">{{ var1|safe }}</span></div> <div><span id="var_2">{{ var2|safe }}</span></div> ...

JQuery toggle button malfunctioning

Currently, I am in search of a simple replacement for the now deprecated toggle() method in jQuery. My goal is to create a smooth sliding effect for an element when a button is clicked, and have it slide back in the opposite direction upon clicking the sam ...

The behavior of having two submit buttons within the $document.ready(function) in Jquery

In my code, I have implemented the behavior of two buttons, button1 and button2, within a $(document).ready(function). Whenever either button is clicked, an alert() function should be triggered. However, it seems that only button2 is functioning properly w ...

Acquire a local json file on Chrome for iOS device

How can I retrieve data from a JSON file locally using different methods or approaches? While $.getJSON works well in Firefox, it may not work in Chrome unless running on localhost. I am looking for a way to make it work in Chrome (as Android devices use ...

Adjust the class of a div element located close to its ancestor using JavaScript

I'm trying to change the class of the element #sidePanel from .compact to .expanded dynamically in this code snippet: <div id="sidePanel" class="compact"></div> <div id="topbar"> <div id="buttonContainer"> <div ...

After clicking, an created modal is displayed, then disappears on its own

After creating 2 Modals, I encountered an issue where the second modal with the class "category-modal" reverts back to display none when I click the "+" sign on the form. The first modal, with the class "modal," displays correctly when the add button is cl ...

Rails - Issue with jQuery/AJAX causing partial not to refresh

Currently, I have a timeline view that displays event partials, allowing users to create, read, update, and delete events directly on the timeline. However, I am facing an issue where the delete partial does not refresh after deleting an event, requiring t ...

Apply a blur effect to the entire container without targeting a specific element within it

How can I add a filter: blur(20px) to the div with class named todo, while excluding the div with class called modal? Could this be achieved using SCSS by any chance? Sample Code: .todo { display: grid; } .modal { display: grid; position: fixed; wid ...

I keep getting redirected to a blank page by JS

I've created a JavaScript script that smoothly fades in the page when a user enters it and fades out when they click a link to another page. The script is working as intended, but I'm facing an issue with anchor links on the page. Whenever I clic ...

Running the Jcrop function multiple times within another function will not result in execution

When I click on the 'Edit A' link, a window opens where I can use Jcrop for editing. The process works smoothly for the first image. However, when I try to edit the second image using the 'Edit B' link, it keeps displaying the first ima ...

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

Is the jQuery trim function malfunctioning on Internet Explorer 7?

I'm attempting to utilize the jQuery text() function and apply the trim() function to eliminate any leading or trailing whitespace. This method works perfectly in Firefox, but unfortunately does not produce the desired results in IE7 (it persists in r ...

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

Adjust the jQuery and PHP script to retrieve both the ID and text content to populate an OPTION element

I have a basic DROPDOWN list: <select class='form-control' id='builders' name='builder_id'> <option value="1">Java</option> <option value="2">Python</option> </select> I am looking ...

Special characters cause Ajax post to malfunction

My goal is to pass the content of a textarea to a PHP page for processing and storing in a SQL database. I need the textarea to handle special characters without any issues. However, when I input the following string into the textarea and submit it: J ...

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

Ways to toggle the sliding of text on and off an image?

After spending some time experimenting with my code, I managed to get it working. Essentially, when a user hovers over an image, text now appears over the image. Since this is a gallery, I had to utilize $(this).children in order to target and display the ...