Looking to replicate the tagging feature on Facebook, I want an empty box to appear when a specific area of an image is clicked.
With jQuery, what code can be used to make this box follow the cursor upon clicking?
Appreciate any guidance. Thank you!
Looking to replicate the tagging feature on Facebook, I want an empty box to appear when a specific area of an image is clicked.
With jQuery, what code can be used to make this box follow the cursor upon clicking?
Appreciate any guidance. Thank you!
If you're looking to achieve a similar effect, consider utilizing the following code snippet. In this example, "image" refers to the designated image class that can be tagged, while "box" denotes the ID of an element set to an absolute position:
$(".image").click(function(e){
$("#box").css('top',e.pageY).css('left',e.pageY);
});
Caution: Messy Code Ahead!
<script type="text/javascript">
$(document).ready(function() {
$("#image-wrapper").click(function(e){
var newElement = $("<div>");
newElement.css({width:"50px", height:"50px", border:"1px solid green", position:"absolute", left: e.pageX - 25, top: e.pageY -25});
$("body").append(newElement);
});
});
</script>
<div id="image-wrapper" style="border: 1px solid red; width: 300px; height: 200px;">
</div>
$(function(){
$(document).on("click", function(event){
$("<div>").
text("Bar").
css({ position: "relative", top: event.pageY, left: event.pageX }).
appendTo(document.body);
});
});
To learn more about jQuery event objects, you can refer to their documentation on events. In this code snippet, I am utilizing event.PageX and event.PageY.
I encountered an issue while trying to preview an image from a BBCode decoder. The code works fine, but I need the image to be inside an <a> href link, so that people can click on it and get the image source. Additionally, I want to display a message ...
I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...
Upon loading the page, I only want to display two comments initially. However, when I click on the button, I expect the number of displayed comments to increase by two. Unfortunately, my code isn't working as intended. Instead of showing just two comm ...
Currently, I am utilizing Mithril as our chosen MVC framework and I am interested in tapping into the extensive functionality of jQuery/jQuery UI. I am seeking insights on best practices when integrating jQuery with Mithril. My understanding is that I can ...
Recently, I successfully created a code that enables users to open a second div by clicking on a specific div. The second div is initially hidden with the CSS property display: none. To close it, users simply need to click on the same div again. Although ...
After implementing the code below, I expected to see 'hi mom' displayed between the <div id='job-status'></div> on the original page. However, the result is not as anticipated: $(function () { function show_status() { ...
Currently, I am utilizing ASP.NET MVC and have created a controller that is able to return a PDF file. The PDF is constructed using PDFsharp: public ActionResult GenerateReport(string Param) { // Create a new PDF document PdfDocument document = n ...
I am currently working on making a div element, set to "overflow:auto," scroll when a user is dragging an element. The dragging functionality is functioning correctly, and I am able to retrieve the necessary mouse data, such as the initial x/y position du ...
Currently facing an issue with the DropDown menu. Whenever I add padding to the DropDown menu (class - drop_link), it ends up pushing the entire element over the <nav>. I'm unsure of how to prevent this from occurring. I attempted to disable som ...
Working on a wireless robotics project that involves using node.js and jquery to create a webpage "controller". Currently, the code is set up to work with an internet connection because it downloads scripts from internet addresses. The goal is to make it ...
What I aim to accomplish is: I have a JSON object structured like below var foo = { format:"json", type:"test", id:"26443" }; and my goal is to convert it into a URL in the following format 'http://example.com/a:3:{s:6:"format";s:4:" ...
Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...
Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...
Recently, I encountered a form that looked like this: <form id="post_comment" action="cmt.php" method="post"> <input type="hidden" name="type" value="sub" /> <textarea id="body"></textarea> </form> To interact with the ...
I have 4 input fields and I need to check if at least one of them has a value. If none of them are filled out, I want the function to stop. Below is the current code snippet I'm using but it's not working as expected because it doesn't ente ...
I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". https://i.sstatic.net/l0Ss6.png <div v-for="item in first" :key="item.id"> <p cl ...
Currently, I am faced with a dilemma involving an Ajax function that calls a remote site, saves data to a database, and then needs to refresh the current page to display the new information. The complication arises from the fact that tabs are being utilize ...
Let's discuss the current scenario at hand. I have a JSF page where a date is displayed in the following manner: <h:outputText value="#{bean[date]}" > <f:convertDateTime pattern="#{Const.CALENDAR_PATTERN}"/> // featuring a ca ...
Managing vertical spacing between columns that switch from horizontal to vertical at breakpoints can be challenging. While there are solutions available when dealing with forms, applying them to multiple columns wrapping in a row can be tricky. I have atte ...
Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...