I am working on a Phone Gap Project.I am using HTML,JAVA SCRIPT and CSS.
I have implemented onclick ,mapping and ahref functionality in my project.While using this functionality either for onclick or mapping or ahref --while selecting the image or text it gets highlighted.
I don't want it get highlighted.I tried implementing this following code
noSelect
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
But,this code made no difference in the SELECTING VIEW.
So,please suggest me a way to handle this and solve my problem.
EDIT:
This is how i have used it in mapping and image but it isn't working.
mapping
<div id="main" class="main" ><img src="img/abc.png" alt="abc" usemap="#abc" class="noSelectInputBox:focus"/></div>
image source
document.getElementById("detail").innerHTML = '<img src="img/image1.png" onclick="detail()" class="noSelectInputBox:focus"/> '
try adding the following css to yours:
noSelectInputBox:focus
{
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
-webkit-focus-ring-color:rgba(0 0 0 0);
}
Hope that helps.
Writing the following code in your css file. While using this we can disable highlighting the contents on touch.
*{
/* Prevent any object from being highlighted upon touch event*/
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Related
I am making a custom Application in Android. I am displaying a html page with an img tag inside a div.
<div class="press">
<img src="but.png" width="150" height="62" border="0"/>
</div>
In the javascript I am writing:
$(".press").bind("click",function()
{
//display something
});
When I click on the image, the click is working but the image is surrounded with a blue overlay.
Image 1
Image 2 when image clicked
I dont understand how to remove it. I have tried many ways but none of the answers work. Please help. Thanks
You can prevent selection on your page through css. You can change the * selector to the element selector you want to prevent from selection.
/*IE9*/
*::selection
{
background-color:transparent;
}
*::-moz-selection
{
background-color:transparent;
}
*
{
-webkit-user-select: none;
-moz-user-select: -moz-none;
/*IE10*/
-ms-user-select: none;
user-select: none;
/*You just need this if you are only concerned with android and not desktop browsers.*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input[type="text"], textarea, [contenteditable]
{
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
Try this:
CSS
.press, img, .press:focus, img:focus{
outline: 0 !important;
border:0 none !important;
}
You could use CSS:
** HTML **
<button class="press">
<img src="but.png" width="150" height="62" border="0"/>
</button>
** CSS **
.press{
outline-width: 0;
}
.press:focus{
outline: none;
}
Answer take from here: How to remove the border highlight on an input text element
It may be the background color or the border color on the div that includes the button. Else
use a code like following to remove the css after click completely
$("#myButton").click(function(){
$("#displayPanel div").removeClass('someClass');
});
I have a mute button that toggles between two images (one for mute and one for unmute), and the button itself does as it's supposed to. But for whatever reason, when I press my button one too many times, or too fast, the closest elemenr (wether it be text or image) gets highlighted, as if the button is a transparent layer and I'm actually just pressing the background of my webpage. Why does my mute button do this? I've gone through my script multiple times, but can't adress the issue. Is there anything I can wrap my mute button into to make it behave more like a button?
this is the code for the button
<style>
.unmute{
background-image: url(unmute.png);
position: absolute;
background-size: cover;
margin-left: 25px;
width:153;
height:96;
cursor: pointer;
}
.mute{
background-image: url(mute.png);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</script>
<audio id="track" autoplay="autoplay" loop="loop">
<source src="poopsyflop.wav"/>
</audio>
<div class='unmute' onclick="document.getElementById('track').muted =
!document.getElementById('track').muted;$(this).toggleClass('mute')"></div>
(I've unwrapped the Script jquery code, so it looks different (more messy) in my script)
Is there anything I can add/remove from my button codes to make it act more like a button?
(I will go further into details if necessary)
Thanks in advance to everyone!
-Daniel
You can deactive user selection on elements with CSS:
.unmute,
.mute
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Browser compability: http://caniuse.com/#search=user-select
EDIT: You could also use a real button element and style it as you wish.
I have an application which theme is based on Metro UI CSS which hides the (I think) nice and usefull spinners Chrome adds when using <input type="number" />.
I am trying to "override" this rule, but I can't figure out what value I have to set it to:
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: initial !important;
}
Does not work (see FIDDLE).
What is the correct value to restore them?
P.S.: I am trying to avoid just removing the rule from the base CSS to avoid update problems...
Set -webkit-appearance to inner-spin-button, the default value for the buttons.
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
}
Additionally I needed the spinner hiding (as per the default) or always showing, so here is the way to do all three. Strangely difficult to get this information.
/* disable globally if required */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* restore to hidden until mouse over */
.show_spinner input[type='number']::-webkit-outer-spin-button,
.show_spinner input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
}
/* restore and show permanently */
.show_always input[type='number']::-webkit-outer-spin-button,
.show_always input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
opacity: 1;
margin-left: 10px;
}
<!-- disabled spinners -->
<input type="number">
<!-- restore to hidden until mouse over -->
<div class="show_spinner">
<input type="number" class="show_spin">
</div>
<!-- restore and show permanently -->
<div class="show_always">
<input type="number" class="show_spin">
</div>
Tested on Chrome v67.0.3396.87:
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
/*-webkit-appearance: inner-spin-button !important;*/
opacity: 1;
margin-left: 5px;
}
<input type="number"/>
Changing the -webkit-appearance property did not appear to have any impact; it did not show the spinners except when hovering, which is the default behavior anyway.
Changing the opacity worked as expected. The spinners are always visible, when hovering or not. Credit for this trick goes to https://codepen.io/BJack/pen/FHgtc
I tried so hard to restore arrows form mobile browsers like mobile chrome but the following code was not working
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
/*-webkit-appearance: inner-spin-button !important;*/
opacity: 1;
margin-left: 5px;
}
and eventually I decided to make some side buttons. I made the code and you can add as many buttons as you want. I invite you to look at the snippet on this other similar post.
Improved
In this snippet I have added autoincrement when the user keep the button pressed
https://stackoverflow.com/a/70957862/13795525
Initial
https://stackoverflow.com/a/68679616/13795525
i am making a website for my college as a project.To show you i have hosted the same on a free
hosting site. link http://vivace.net23.net/ .Now in the informal section of menu i wanted to put a pop up modal here is the fiddle..http://jsfiddle.net/karn21/73QXx/.
Click Me
<div id="openModal" class="modalDialog">
<div>
X
</div>
</div>
But on click it is not working.Please help me
Instead of setting it as a target, you could set an onclick event for the Click Me button that triggers a JavaScript function to append the id target to the div (or another class). Then, change .modalDialog:target to .modalDialog.target. Then, just remove the class when the close button is clicked.
New Fiddle: http://jsfiddle.net/73QXx/2/
That shouldn't interfere with your hastag scrolling script.
Also, if you still wanted it to appear as a link, you can add this:
CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
This line is only supported by IE11+:
pointer-events: none;
Here is an alternative that you can add using an HTML IF to check if the version is IE10 or less:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
on the elements on the page*/
New Fiddle for IE9 (and many other versions including anything that the old version can support): http://jsfiddle.net/73QXx/3/
However, the downside and why this should not be used for anything except IE9 or lower (which is possible with HTML IF) is that the box suddenly appears instead of fading in.
I am making a website in dreamweaver CS5. I exported the images from photoshop an inserted them into a table. When I view the site all the images are selectable(you are able to drag them to your desktop). How do I change this??? I want to do it with an onclick method in addition how would I achieve this?
<td><img src="images/people_03.png" name="one" width="1000" height="156" id="one" ONCLICK="closeimages();"/></td>
I stumbled upon this question while struggling with the same problem but the accepted answer was not a possible solution for me.
I used the info found here , in particular adding the following styles to my body, inside the css (this worked for me in Firefox, Chrome and Opera, I cannot test for IE)
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
The unselectable html tag seems also helpful, but it's apparently supported only by IE and Opera:
<img src="1.jpg" unselectable="on">
as well as the javascript solution, that is said to work on IE and webkit browsers:
<script>
window.onload = function() {
document.body.onselectstart = function() {
return false;
}
}
</script>
Note. As Albert Renshaw pointed in the comment this method no longer works in Chrome > 50.
I would use pointer-events: none; in my CSS
img {
pointer-events: none;
}
Reliable Pure CSS Solution
Applying the following 2 CSS properties to your <img> element(s) will achieve exactly what you described:
pointer-events: none;
user-select: none;
This works reliably across all modern browsers.
Example: (Try to select and drag the image with your cursor! :D)
img {
pointer-events: none;
user-select: none;
}
<img src="https://source.unsplash.com/random/200x200" alt="sample image" />
The only downside is that pointer-events: none causes your :hover, :active and other pointer-related CSS pseudo-classes to stop working.
In order to solve this, you should use a <div> or something as a wrapper for your <img> and then apply your :hover, :active pseudo-classes on that wrapper as opposed the <img> itself.
Example:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Don't mind the code above... */
.image-wrapper {
transition: ease .5s;
}
.image-wrapper:hover {
transform: scale(1.3)
}
.image {
pointer-events: none;
user-select: none;
}
<div class="image-wrapper">
<img class="image" src="https://source.unsplash.com/random/200x200" alt="sample image" />
</div>
If you also don't want to or can't change your HTML markup, then you're gonna have to resort to some JavaScript:
imgElement.addEventListener('selectstart', () => false);
Easiest way I think would be to make the images as css background images to each cell