I asked this question earlier from my phone but it became very convoluted and confusing so I decided to start over after finding a usable PC. Note that I can't give the full original code nor images due to the project's classified nature which is also located offline. The bare-bones version below contains the same problem anyway, so I'm quite certain being able to solve the problem in this example code will be adequate for me to troubleshoot anything else in the actual application.
I have the following code: https://jsfiddle.net/mssdjrzk/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
When the cursor hovers over the button, a default browser-based behaviour is triggered. In the case of IE 11, the button is highlighted.
Next, I add additional CSS for a:hover: https://jsfiddle.net/yLrznyss/
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
a:hover {
color: red;
}
</style>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
Now, when I hover my cursor over the button, the behaviour is messed up - the behaviour does not render, although other events like onclick renders normally. I have done a lot of troubleshooting and attempts to workaround without success, but here are my findings:
The offending element is :hover. It doesn't matter what element/class/id is attached to it, its very existence in the stylesheet is enough. Even a:hover {} which contains no styling will cause the problem too, as does span:hover {} when no <span> elements even exist in the HTML.
I tried it on Chrome, but the problem does not exist since Chrome's default hover behaviour for buttons is rendered differently. This is thus a browser-specific problem.
The problem only exists for buttons containing images, as opposed to buttons containing text, empty buttons or standalone images not inside anything.
My guess is that the existence of the :hover CSS in the stylesheet, even if it's empty, is causing issues in how IE renders the resultant web page and its behaviour.
How can I prevent the button and/or its internal image from being affected, thus returning to the default IE button hover behaviour? I can change anything, as long as the desired hover style on the hyperlinks is achieved without affecting the buttons.
The full application which uses this code will use IE11 on Windows 10 - not any other browser. Solutions using HTML, CSS or JavaScript are acceptable but no external libraries are available to my project.
Maybe I'm missing something, but I don't see any anchor links inside the button. I used this code:
button:hover {
background: red;
}
And was able to get the hover effect you are looking for
I have found a successful workaround. Since I can't use the :hover selector, I have to mimic it via JavaScript. Credits to Javascript onHover event for the solution.
<!DOCTYPE html>
<html>
<style>
button {
width: 24px;
height: 24px;
padding: 4px 0 0;
}
img {
width: 16px;
height: 16px;
}
.isHovered {
color: red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for (var i = 0; i < links.length; ++i) {
(function() {
var link = links[i];
var hoverTimer;
link.addEventListener("mouseover", function() {
hoverTimer = setTimeout(function() {
link.className = "isHovered";
}, 0);
});
link.addEventListener("mouseout", function() {
clearTimeout(hoverTimer);
link.className = "";
});
}());
}
});
</script>
<body>
<button type="button">
<img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
</button>
<hr>
<a>Sample link</a>
</body>
</html>
I would welcome any better answer though, or at least an explanation of why I have this problem - if you are able to replicate it on your machine.
Related
I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.
It won't be possible with pure CSS because selectors are unable to ascend.
What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.
To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.
<!DOCTYPE html>
<html>
<body>
</body>
<style>
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#link1 {
margin: 5vw;
}
#link2 {
margin: 5vw;
}
#link1:hover body {
background: url('');/*any url you want for the picture*/
}
#link2:hover body {
background: url('');/*another url you want for the other picture*/
}
</style>
</html>
I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want
I am using it in JavaScript to enable and disable a div element:
$("#divbutton").css("pointer-events","auto");
But I want a property that enables and disables the element. How can I do that?
html
<div class="buttonSender" id="divbutton">Invia</div>
While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.
You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.
Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.
$('#divbutton').click(function(e) {
// This is where you would put your code that
// does something when the div is clicked.
alert('The Fake Button was Clicked');
});
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').removeClass('disabled');
});
div.buttonSender {
margin: 1px;
padding: 4px;
border: 1px solid darkgray;
border-radius: 2px;
max-width: 20em;
pointer-events: auto;
color: black;
background-color: peachpuff;
}
div.buttonSender.disabled {
background-color: lightgray;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="divbutton" class="buttonSender" role="button">
This is the div that is acting like a button.<br> Click Me
</div>
</section>
<section class="demo-buttons">
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.
You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.
The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.
This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.
/*
* This is NOT your code - this would be the click handler that already exists.
*/
$('#divbutton').click(function(e) {
// Assume there is already a click handler, and you want to disable it.
// This code would be the existing handler, somewhere else, not written by you.
alert("Invia was clicked");
});
/*
* This would be your code, and it wouldn't be packaged with the code above
*/
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').css('pointerEvents', 'auto');
});
#divbutton {
border: 1px solid darkgray;
border-radius: 2px;
padding: 5px;
max-width: 5em;
}
#demo-controls {
margin-top: 2em;
border-top: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>
This area would be part of the page that you don't control.<br>
The div acting like a button is below, and you can't change it.
</p>
<div class="buttonSender" id="divbutton">Invia</div>
</section>
<section id="demo-controls">
<p>
This area would not be part of the HTML, over which you have no control,
but somehow you need a way to fire your code that disables the existing div#divbutton
<br>
There needs to be <em>something</em> that fires your javascript;
these buttons simulate that.
</p>
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
Try creating a CSS class with the value of pointer-events that you want like in the following example:
document.querySelector('button').addEventListener('click', () => {
document.getElementById('divbutton').classList.toggle('disabled');
});
#divbutton.disabled {
pointer-events: none;
user-select: none;
background:yellow;
}
#divbutton {
height: 2rem;
}
<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>
I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});
I'm trying to have two buttons side by side, one with an image, one with text.
I can't figure out why they don't line up correctly on the baseline.
Here's the code:
<head>
<style type="text/css">
button {
height: 20px;
}
</style>
</head>
<body>
<button id="image-button">Some text
<img src="http://www.famfamfam.com/lab/icons/mini/icons/application_firefox.gif">
</button>
<button id="text-button">Some text</button>
</body>
I'd love a solution to this, but I'd also love to understand the "why" of this behavior, since it is consistent on all browsers.
Also, I've tried "float: left" on the image, but that doesn't work on Chrome.
Add vertical-align: top
button {
height: 20px;
vertical-align: top
}
Check this JSFiddle
Your problem is two things, one the image is bumping up the line height of that text since it's displaying inline. And two, browsers don't support vertical-align consistently. Looking at the previous answers, some of them work in Chrome, but not in Firefox.
My best solution - that works in all the browsers I test in - is to redefine how the image is treated and make it a block element, then float it to the right of the text. That way the image does not affect the way the text is aligned. The downside to this is that you then need to define an absolute width for the button to make sure the image isn't wrapped to the line below the text. Here's the CSS for that:
button {
height: 20px;
width: 100px;
}
img {
display: block;
float: right;
}
Working fiddle
Another solution is to use a background-image on the button instead of an img tag, but then you'll need to define a padding on the right side of that button to make room for the image. But then you lose the default styling that the browser places on the button, so you're going to have to deal with that.
The text and the image are lining up on the bottom, but being pushed down by the size of the image. Try setting vertical-align: Text-top
More details: http://css-tricks.com/what-is-vertical-align/
You can fix this using line-height:
button {
height: 40px;
line-height: 40px;
}
There is a fiddle here: http://jsfiddle.net/txdMZ/
If I put a YUI menu bar in the body it works perfectly. However if I use it inside of a Panel it shows up without the proper background. It is larger than it should be. Other than the default sam skin I'm using only the following css. .windowbody is the class of the panel.
<style type="text/css">
body {
margin: 0;
}
.windowbody {
overflow: auto;
padding: 0;
}
.windowbody div {
padding: 0;
margin: 0;
}
</style>
I've been working on the same problem and I was delighted to finally find one more person who is trying to do the same as I am. I can't find any examples on the otherwise excellent YUI documentation pages so I've uploaded a solution to the problem at this address:http://catalinabuilder.hostjava.net/exercisepanel.html