Staging a div from a specific origin

Question

Staging a div from a specific origin

On my HTML page, there is one div and a small round image. Initially, the div has a scale of 0 so it is not displayed. However, when I click on the small image, the div scales to 1 in the middle of the window. The position of my div is absolute. My issue now is that when I scale the div to 1, it does so from the center of the window. What I want is for it to scale from the small image, giving the appearance that the window opens from that small image. Additionally, the small image is draggable.

This is a snippet of my code:

$('.divclass').css('transform','scale(1)');

javascript jquery html css

Answer 1

Answer №1

To enable dragging of the image, you will need to implement the draggable() function from jquery-ui.

$(document).ready(function(){
    $('img').on('click',function(){
        $('.holder').toggleClass('scale');
    });
   $( "#draggable" ).draggable();
});

This JavaScript code will display a red box in the center of the image when clicked, and remove it upon another click.

You can view a working example on this fiddle here. By the way, I believe this addresses your question, although it may be a bit confusing.

Answer 2

To enable dragging of the image, you will need to implement the draggable() function from jquery-ui.

$(document).ready(function(){
    $('img').on('click',function(){
        $('.holder').toggleClass('scale');
    });
   $( "#draggable" ).draggable();
});

This JavaScript code will display a red box in the center of the image when clicked, and remove it upon another click.

You can view a working example on this fiddle here. By the way, I believe this addresses your question, although it may be a bit confusing.

Staging a div from a specific origin

Answer №1

Similar questions

Big calendar experience with React

Load an image dynamically within a JavaScript function

The colors of my SVG button remain constant and do not dynamically change when I hover over it

Prevent list item from triggering onclick event while scrolling

I would like to showcase the image with specific dimensions in CakePHP

Arrange the row information in the MUI DataGrid in order to prepare it for exporting to CSV or Excel

React: Oops! Looks like there's an issue - this.props.update is not defined as

I'm struggling to understand how to use the Beautifulsoup find() function with this particular HTML code

How to overlay an image on a div element using Bootstrap styling

How can you calculate the partial years between two dates using momentjs?

Trigger jquery in a newly opened window following a click event

Retrieve the latest entry from a JSON file containing epoch timestamps

Using iFrames to switch sources repeatedly

Comparing NodeJS equivalents to window.location and window.pathname

Issue with React MUI V5 causing theme not to display properly within shadow-root element

Guide on shifting an element into a different one with the help of jQuery

Internet browser automatically appending numerical values to the website address

JavaScript or jQuery can be used to rearrange the position of child divs within parent divs with a single action

What is the correct way to customize colors for specific components in Material-ui?

Tips for revealing a hidden div by clicking on another div?