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.
Related
we're kinda new to this whole webpage coding stuff and are currently working on setting up our own wordpress page with custom html/css via wordpress/elementor (but still in the free version, not pro).
We made a video autoplay and react to hover mouse events and mouseclicks, but as we tried to put a text overlay over the videobox with a .overlay class, the overlay class would cover the whole video and the actual video wouldn't react to our mouse. The goal is to display the text over the video, whilst the video itself keeps playing and pausing when hovering over it.
We're using the HTML function of the Elementor plugin.
Any help/advice would be much appreciated.
Here is what we got so far (and yes, we're newbs when it comes to coding, sorry for the messy code I guess):
<style>
.Maus {
cursor: pointer;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Times New Roman;
font-size: 22pt;
line-height: 22pt;
text-align: center;
}
</style>
<div class=Maus>
<div onmousedown="openInNewTab('https://private.com/video/');">
<video loop="this.play()" onmouseover="this.play()" onmouseout="this.pause();">
<source src="https://private.com/video.mp4" type="video/mp4">
</video>
<div class=overlay>
<p>
lorem ipsum
</p>
</div>
</div>
</div>
<script>
function openInNewTab(url)
{
window.open(url, '_blank').focus();
}
</script>
here is a screenshot of it:
videofile in elementor widget with text
Tried messing around with the z-index, but failed as elements were overlapping the text so it was behind the video.
You can add pointer-events: none; to make an element let mouse actions "go through it" (to the element behind it)
Use the property I think it will help you:
pointer-events: none;
I'm trying to add an "escape button" to a Domestic Abuse help site for an HTML project. I have the button, an image, and it works, but the problem is that you can click outside of the image and it triggers the button. I'm trying to find a way to contain the button activation to inside the picture, not outside of it.
<p id="escape" onclick="myFunction()">
<img src="quickescape.png">
</p>
<script>
function myFunction() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
</script>
Here's a demo of what I'm encountering if it wasn't clear: https://imgur.com/a/5QepBU1
Do I need to use a map id? Any help would be greatly appreciated.
myFunction is activated when clicking where p tag is. If p tag has space then onClick event will be in space too. Giving myFunction event to img tag will not accept activating function on empty space.
<p id="escape" >
<img src="quickescape.png" onclick="myFunction()">
</p>
<script>
function myFunction() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
</script>
Don’t wrap it in a ‘p’ tag (that is a block level element). Wrap it in an inline element, like an ‘a’ or ‘span’.
That is a very good idea. If I were you, I would use this example below so that the website's last url won't show up in the history section.
function quickEscape() {
window.location.replace('https://www.example.com')
}
button {
height: 50px;
width: 100px;
background-image: url('https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/butterfly_16x9_0.jpg?itok=jZ3DYvGK');
background-position: center;
background-size: cover;
color: pink;
font-weight: bold;
font-size: 1.25em;
-webkit-text-stroke: white 1px;
outline: none;
border: pink solid 2px;
border-radius: 10px;
cursor: pointer;
}
<button onclick='quickEscape()'>Quick Escape</button>
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 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);
}
I have a button in my webpage with below code -
HTML:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>
CSS:
.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}
Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.
What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:
if flag=1:
/* enable the button, and let the user click it and run the php code */
else:
/* display this button, but don't let any actions take place if the user clicks on it; */
How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.
You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.
Simply use the disabled attribute:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>
And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:
const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";
.checkout-button {
width: 130px;
height: 35px;
background: #333;
border: none;
vertical-align: top;
margin-left: 35px;
cursor: pointer;
color: #fff;
}
.checkout-button:disabled {
background: #999;
color: #555;
cursor: not-allowed;
}
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>
You can do it either by modifying the attribute or by adding/removing a class.
Modifying attribute
You will want to switch between <button disabled="true"> and <button disabled="false">
With javascript, it could look like this:
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
And with jquery, like this:
if flag=1:
$('#your-btn').prop('disabled', true);
else:
$('#your-btn').prop('disabled', false);
Adding/removing class
Add the following css:
.btn-disabled{
cursor: not-allowed;
pointer-events: none;
}
And add/remove a class to the button.
With jquery:
if flag=1:
$('#your-btn').addClass('btn-disabled');
else:
$('#your-btn').removeClass('btn-disabled');
If you don't want jquery, but pure javascript, here is how to do it.
If your circumstance allows you could just remove the content in the action attribute from the form tag. Therefor when a user clicks submit, no action is taken.