My HTML code includes a <div>Some text</div>, and I am looking to ensure it is unclickable (allowing elements under the div to be selected instead), unselectable (preventing users from selecting text inside the div), while still being visible... is this achievable for IE6, IE7, IE8, and IE9?
Update
I simply want to display text on top of an image, with the image being the only element able to receive mouse events... so I need the text to display but not interfere with mouse events.
To prevent text from being selected, you can use the unselectable attribute like this: <p unselectable="on">. Additionally, you can disable text selection by setting the CSS property -moz-user-select: none;.
If your text is contained within a <p> element, you can make it so that clicking on the paragraph triggers a click event on an image.
$("p").click(function() {
$(this).parent().find('img').trigger('click')
});
$('img').click(function() {
alert('image clicked');
})
One technique to consider is overlaying the image and text with another div, which can be called capturebox as shown in the example below. By capturing mouse events on this div, you can achieve the desired functionality:
To ensure that capturebox effectively captures events in Internet Explorer (IE), it is essential to set a background color. To maintain transparency, an opacity of 0 can be applied:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function captureclick(event) {
alert('capurebox');
}
</script>
<style>
.imgbox {
position: absolute;
top: 0px;
left: 0px;
}
.imgbox img {
width: 200px;
height: 200px;
}
.imgbox p {
cursor: default;
position: absolute;
top: 50px;
left: 50px;
}
.capturebox {
filter: alpha(opacity=0);
background-color: white;
height: 200px;
width: 200px;
position: absolute;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="imgbox">
<img src="yourimage.jpg"/>
<p>Some text</p>
<div class="capturebox" onclick="captureclick(event)"></div>
</div>
</body>
</html>
Check out this interactive demo that showcases the use of Raphael for text rendering and jQuery for event handling.
(Who doesn't love marsupials?)
I was pleasantly surprised to see the click event pass-through functionality in VML working smoothly in IE6! It's also worth mentioning that the VML text isn't selectable by default, which is a nice touch in this scenario.
The initial markup consists of just
<img alt="the text you want to show" />Essentially, this approach serves as the SVG-based counterpart to the canvas-based method suggested by @Eldar.
let target = document.getElementById('content');
target.onselectstart = function () { return false; } // internet explorer
target.onmousedown = function () { return false; } // mozilla firefox
Give it a shot
Is it possible to position a transparent image at the top?
Utilize canvas to overlay text on an image. While HTML5 may not be supported on Internet Explorer 6, you can utilize Google's library at http://code.google.com/p/explorercanvas/ to emulate its functionality.
Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...
Looking to apply a filter on my input v-model to search through a list of products. The current filter only shows items with an exact match to the input. How can I adjust it to display partial matches as the user types? Vue.filter('byName', fun ...
I recently downloaded a form from the website and integrated it within my desktop site successfully. However, when accessed on mobile devices, specifically iOS, the submit button changes to "sending ..." and the form gets stuck without displaying any erro ...
Web Development : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> The Coding Academy Survey</title> <link rel="stylesheet" href="styles.css" ...
The JSON returned from my Ajax call looks like this: returnedData = "[ { id: 1, firstName: 'John', lastName: 'Smith', address: '123 Spa Road', city: 'London', orders: [ { product: ...
My jQueryMobile page structure in index.html looks like this: <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div& ...
Does anyone have experience creating a game with jQuery? I can't seem to get the options after the first choice to work. Sorry, I don't have a working example at the moment. --- jQuery --- $(document).ready(function() { $(".console"). ...
I'm currently using Codacy in my code repository to assess the quality of my work. Struggling with two errors during commit, unsure how to troubleshoot them. Can anyone offer assistance? Issue: Expected property shorthand. Error occurs in this line ...
I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...
Our Web application utilizes ajax calls to a backend that operates on a different domain, requiring CORS. The backend setup includes an HAproxy 1.4.22 along with multiple Wildflys running on the OpenShift PaaS. During times when a Wildfly instance is unava ...
As a newcomer to the world of javascript and jQuery, I am diving into my first experiment with javascript. My initial focus has been on changing questions by clicking next or previous buttons. The goal is to create a dynamic quiz webpage that updates quest ...
This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...
I'm struggling to grasp the concept of the float attribute. Here's the code that is causing me confusion: #p1 { border: solid black 3px } <p id="p1" style="float:left">Paragraph 1</p> <a href="https://facebook.com" style="floa ...
I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...
Currently, I am facing an issue while trying to utilize an 'each' loop in my Angular 8 app's end-to-end tests using protractor. Within my page object, I have created a method that returns an ElementArrayFinder. public getCards(): ElementArr ...
Currently, I'm working on creating an advanced search bar and came across this template here. Everything seems to be functioning properly except for the fact that the search bar and dropdown menu are not fully utilizing the entire width of 100%. I wou ...
SVG offers a unique system with symbol and use where icons can be defined once and reused throughout the SVG using use. However, I am having trouble getting it to work from JavaScript. You can view an example on this JSFiddle link. When programmatically ...
I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...
I have a handy @mixin that I use to easily add different transition properties to elements. Here's an example of how I use it in my .scss file: @mixin transition($prop, $sec){ -webkit-transition: $prop $sec; -moz-transition: $prop $sec; -ms-tra ...
I've implemented a download feature in my application. When a user clicks a button, it triggers an ajax call to generate a CSV file with all the displayed information for download. Although I have successfully created the CSV file on the server-side, ...