Is there a way to create a drag selection box with JavaScript?
I'm referring to the functionality where clicking and dragging the left mouse button draws a "wire" (not sure of the technical term) similar to your desktop.
Ideally, this action would trigger a search box to appear below the selected area after releasing the mouse on an image.
I believe this can be done, but I haven't come across any examples. Can someone assist me with this?
One possible approach is as follows:
function retrieveCursorPosition(e)
{
e = e || window.event;
if (e)
{
if (e.pageX || e.pageX == 0) return [e.pageX,e.pageY];
var dE = document.documentElement || {};
var dB = document.body || {};
if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0),e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
}
return null;
}
function mouseClick(e)
{
var mxy = retrieveCursorPosition(e);
var selBox = document.getElementById("sel_box");
selBox.orig_x = mxy[0];
selBox.orig_y = mxy[1];
selBox.style.left = mxy[0]+"px";
selBox.style.top = mxy[1]+"px";
selBox.style.display = "block";
document.onmousemove = mouseMovement;
document.onmouseup = mouseRelease;
}
function mouseMovement(e)
{
var mxy = retrieveCursorPosition(e);
var selBox = document.getElementById("sel_box");
selBox.style.width = (mxy[0]-selBox.orig_x)+"px";
selBox.style.height = (mxy[1]-selBox.orig_y)+"px";
}
function mouseRelease(e)
{
var selBox = document.getElementById("sel_box");
selBox.style.display = "none";
selBox.style.width = "0";
selBox.style.height = "0";
document.onmousemove = function(){};
document.onmouseup = function(){};
}
document.onmousedown = mouseClick;
@Praveen Kumar
If you're looking to resize images dynamically without distorting their proportions, there are plugins available that can help with this task. One such plugin is the jQuery Resize Plugin.
The aeImageResize jQuery plugin is designed specifically for resizing images while maintaining their original proportions.
Here's an example of how you can use it:
$(function() {
$( ".resizeme" ).aeImageResize({ height: 250, width: 250 });
});
If you want to customize the functionality further, you can extend the plugin and utilize the complete function to incorporate additional features like converting the resized image into a textarea.
Website Link :- http://jqueryui.com/draggable/
Employing the jQuery UI API.
This technique offers superior drag selection functionality.
I simply want to click on the state and have that state's specific pop-up appear. $("path, circle").on('click', function(e) { $('#info-box').css('display', 'block'); $('#info-box').html($(this ...
In the header section of my ASPX page, I have some scripts that I would like to debug with breakpoints in Firefox. ...
Currently, I am utilizing protractor to iterate through table cells in an attempt to verify the presence of a checked checkbox. var elements = element.all(by.css(columncssname)); elements.each(function (cell, index) { <--need to confirm if check ...
Greetings, I apologize if my explanation is not very clear. What I am attempting to do is retrieve the value from an input field and then display that value in a label. Below is the code snippet: Code Example I have an input field for displaying an imag ...
Currently, I'm in the process of developing a new user interface for a website that I frequently use. My approach involves utilizing Node.js along with request and cheerio to scrape data from various web pages. However, I've encountered an issue ...
I'm attempting to retrieve a file named files.json from the main directory of my locally hosted NodeJS backend and then display its contents in the console. <script> fetch("./files.json") .then(res => { return res.json() ...
Recently, I embarked on a journey to learn jQuery and AJAX, but I found myself tangled in confusion when it came to AJAX requests. To gain practice, I decided to create a simple TodoApp using Node, jQuery, and Bootstrap. While I managed to grasp GET and P ...
I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...
I've been working on passing PHP echo values through AJAX, but I've encountered a problem where the if and else conditions are being skipped in the success function of AJAX. Even when the if condition is met, the else statements are still being e ...
I recently started delving into AngularJS, but I've hit a roadblock with a particular issue. For some reason, the ng-repeat directive isn't iterating through the users array as expected. The resulting list is just blank. Below is a snippet of my ...
I found a bedroom object on Blender that I downloaded from this source. When exporting it in json format to load it into Three.js, I noticed that only one mesh of the bed component was included instead of all the meshes I had selected. All components of ...
Is there a way to trigger a fetch right after saving data? I'm looking to immediately retrieve information after a successful post... Below is the code snippet in question: search: function (search) { searchM = new SearchM(); searchM.sa ...
After spending more than two days searching for a solution to this problem, I am now reaching out directly with my question. Although there have been some hints and partial answers, nothing has definitively resolved the issue I am facing, prompting me to m ...
While developing a website using React, I encountered an error that said useState is defined but never used in the navbar component. To address this, I made changes to my ESLint configuration in the package.json file: "rules": { "eqeqe ...
After developing a node.js chat application using express and socket.io, I am faced with the challenge of making it accessible online for users from different networks. It currently runs on localhost and allows devices within the same network to connect. A ...
arrange() organizes the elements in a custom order: var fruits = new Array("Apple", "Banana", "Kiwi", "Ananas", "Mango"); Namen.arrange(); document.write(fruits); I don't want them alphabetically sort ...
Currently, I am utilizing the D3-threeD2.js library to convert SVG files into THREE.Shape(s) that can be extruded with three.js. The process works smoothly, however, when it comes to incorporating holes, I encounter an issue. Imagine a shape resembling a ...
Encountering an issue while using Chart.js in my Django project - when utilizing the NPM package, it fails to work. However, switching to the CDN resolves the problem seamlessly. Chart.js version 3.9.1 Below is a snippet from my project's index.html ...
const express = require('express'); const app = express(); app.get('/',(req,res) =>{ // viewable at localhost:3000 res.send('hello world'); }); app.get('/api/courses',(req,res) =>{ // shown on ...
Can the label be styled based on whether the input is checked or not using CSS, or do I have to use JavaScript? <label class="filterButton"> <input name="RunandDrive" type="checkbox" value="1"> </label> ...