https://i.sstatic.net/TCp6E.jpg
I'm looking to create a design similar to the image above using only 2 divs and an img. I was able to achieve it using 6 divs, but is there a way to make a transparent mapped area of the parent div with CSS or JavaScript?
Note: The middle square div should be draggable and resizable.
In this code snippet, I have utilized three separate div elements: one for the background image, another for a background overlay (to create a tint), and a cropped region.
The cropped region shares the same background-image as the background image div, but with the background position adjusted to negative values according to the dimensions of the crop.
const cropDiv = document.querySelector(".croppedRegion");
let setCropRegion = function(x1, y1, x2, y2) {
cropDiv.style.backgroundPositionX = `${-x1}px`;
cropDiv.style.backgroundPositionY = `${-y1}px`;
cropDiv.style.width = `${x2-x1}px`;
cropDiv.style.height = `${y2-y1}px`;
cropDiv.style.left = `${x1}px`;
cropDiv.style.top = `${y1}px`;
}
setCropRegion(10, 10, 240, 240);* {
margin:0px;
}
.backgroundImg {
width:250px;
height:250px;
background-image: url('https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG');
position:relative;
}
.backgroundOverlay {
margin:0px;
padding:0px;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.6);
}
.croppedRegion {
width:110px;
height:80px;
background-image: url('https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG');
background-size:250px 250px;
background-position:-80px -90px;
position:absolute;
top:90px;
left:80px;
}<div class="backgroundImg">
<div class="backgroundOverlay">
<div class="croppedRegion"></div>
</div>
</div>My issue with my backbone.js app is that I have noticed some slow loading files (a .css and a .js) that are causing the page to block until they are fully loaded. After rendering the backbone view, I am looking for a way to delay the loading of these file ...
Currently facing issues while setting up a server for an ecommerce site being built in React. Attempting to run both the React app and the server simultaneously using npm run dev, but encountering various errors that persist even after attempted fixes foun ...
Currently, I am delving into React and attempting to include a Bearer token for private API calls. My approach involves writing a private axios function to intercept requests and responses. Subsequently, I invoke it in my API.js file to fetch data from the ...
When I submit the form, I want to perform some validations. However, it seems like the validation function is not working as expected. The alert part does not appear when triggered. Here is the code snippet: function validation(){ alert("somethi ...
I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...
I am troubleshooting an issue with a form that is not submitting data to processor.php for processing and storing responses in a database. Ensuring that the form submission does not cause a page refresh is crucial, as there is an iframe below the form tha ...
I'm looking to create 2 images with different widths that are displayed at the same height side-by-side, preferably using a flex box. The method below works if I have the image dimensions (962x706 and 962x1275). Is there a way to achieve this withou ...
I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...
I've been working on incorporating WebVR into a project that I created using Three.js, but I'm running into some issues with getting it to work properly. Several problems crop up when I try to view the scene: When VRMode is set to false, my ...
I am working with an object that has the following structure: var customObject = function() { this.property = "value"; }; customObject.prototype = new otherObject(); customObject.prototype.property2 = function() {}; This is just a snippet as the ac ...
I have a list of tag clouds: <ul #id = "tag-cloud-list"> <li class = "items">Music</li> <li class = "items">Lion</li> <li class = "items">Dwarf</li< </ul> This tag cloud list was generated using ...
I'm attempting to create hyperlinks that can dynamically set inline styles for different elements on a webpage. I have managed to save the element and attribute settings in hidden span elements and retrieve them to display in an alert dialog. However, ...
After extensive research, I am starting to think that using multiple versions of the same JavaScript library on a single page is not possible (without utilizing jquery Can I use multiple versions of jQuery on the same page?, which I am not). However, I wan ...
This is a question that I have posed previously, and although it may seem straightforward, I have yet to receive a response. I am looking for a way to include a single quote (') in a string. While I am aware that using double quotes can circumvent t ...
When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...
My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...
I am attempting to fetch an entire HTML file using AJAX and then manipulate the DOM with jQuery. This means that the retrieved HTML document includes a doctype and other top-level elements. The process of retrieving the HTML is straightforward: $.get(&ap ...
Sample 1 var Animal = function () { var animal = this; this.makeSound = function() { alert(animal.sound); } } var dog = new Animal(); dog.sound = 'woof'; dog.makeSound(); Sample 2 var Animal = function () { this.makeSound = ...
How can I wrap each item and then insert the object's indexes and values into each created wrapper? I've attempted to accomplish this using the following code: $.ajax({ url: "some url", type: "GET", success: function(data) { var data ...
Two types of components exist in my React project: functional/stateless and those inherited from React.Component: const Component1 = () => (<span>Hello</span>) class Component2 extends React.Component { render() { return (<span> ...