I am trying to overlap an image in front of a HTML element, so that I can simulate having a different arrow icon. I successfully achieved that, however even though I am able to click on the "text" area of the selector, obviously nothing happens if I click on top of the custom image (since it sits on top of the and is unrelated to it). I need to make it work for IE10 only, although I tried in Chrome and doesn't work either.
I did some research and seems like attaching some JS to the image to open the selector options is hard, if not impossible, specially for IE. As a separate effort, I tried setting a lower z-index for the image node, so that the mouse click event would ignore the image and go straight to the node, but didn't work. I wanted to check if anybody would have another idea, or if it's actually impossible to achieve.
Here is the fiddle for my code. For simplicity, I have replaced the image URL for just background-color: red
Fiddle
Here is the full code:
<style type="text/css">
.styled-select {
width: 240px;
overflow: hidden;
position: relative;
}
.styled-select select {
width: 268px;
z-index: 5;
background-color: transparent;
}
.imageNode {
background-color: red;
position: absolute;
right: 0px;
top: 2px;
height: 32px;
width: 32px;
overflow: hidden;
z-index: 3;
}
</style>
<div class="styled-select">
<select>
<option>Here is the first option!!!!!!!!!!</option>
<option>The second option</option>
<option>Third option!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</option>
</select>
<div class="imageNode"></div>
</div>
You can do it by CSS :after pseudo element
html
<div class="custom-select">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
css
div.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼"; /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
Related
Background
I have an HTML div which contains a ‘tooltip’-like feature (i.e., a text box pops up when a certain element is clicked or hovered over); this tooltip has decorative pseudo-elements to make it look like a ‘speech bubble,’ added in css as :before and :after .
I have a JS script, which is intended to show and hide the tooltip and decoration, in response to click events (i.e., toggle them between ‘show’ and ‘hide’ states).
Problem
I can’t get the decorative pseudo-elements to hide when the tooltip is hidden; as pseudo-elements, they are not part of the DOM and so I can’t use normal selectors to manipulate them.
When the tooltip is hidden on click, the decorative pseudo-elements persist, which is not a usable result.
I can’t do away with the decorative elements, they are part of the work specification.
Approach tried so far
Based on this question, my thought was to add an empty span with its own class, to which I’d prepend and append these pseudo-elements. Then, add or remove the class on click based on whether it exists already, or not.
I have also tried setting the class to which the pseudo-elements are pre/appended to display:none on click, but this also seems not to work
However, I cannot convince the pseudo-elements to hide on click.
I’ve included a screenshot of what these remnant pseudo-elements look like in the live environment.
Note: I tried to work up a running simulation for the purpose of this question, but I wasn’t able to and the original css file is massive; the code included below is for reference only.
All guidance is much appreciated!
const barContainer = document.querySelector(".bar-container");
const decorationElement = document.querySelector("#decoration");
document.addEventListener('click', function(event) {
console.log('click event listener triggered');
if (event.target.closest('.link') || event.target.classList.contains('link')) {
if (barContainer.classList.contains('open')) {
barContainer.classList.remove('open')
decorationElement.classList.remove('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
} else {
barContainer.classList.add('open')
decorationElement.classList.add('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:block');
}
} else {
barContainer.classList.remove('open')
decorationElement.classList.remove('decoration')
document.querySelector('.tooltip-container').setAttribute('style', 'display:none');
}
});
.foo-container {
height: auto;
position: relative;
}
.bar-container {
height: auto;
position: relative;
text-align: center;
}
.bar-container:hover .tooltip-container,
.tooltip-container:hover,
.bar-container.open .tooltip-container {
position: absolute;
display: block;
text-align: left;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
bottom: 50px;
right: 5%;
border-radius: 4%;
font-weight: 300;
max-width: 90%;
font-size: 14px;
padding: 20px 0;
}
/*the below two rule sets create the rotated 'decoration' */
.bar-container:hover .tooltip-container:before,
.tooltip-container:hover:before,
.bar-container.open .tooltip-container:before,
.foo-container .bar-container:hover .decoration:before {
content: "";
width: 65px;
height: 35px;
position: absolute;
overflow: hidden;
transform: rotate(-180deg);
z-index: 10;
bottom: 0;
left: 170px;
background-color: white;
}
.foo-container .bar-container.open .decoration:before,
.foo-container .bar-container:hover .decoration:before {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #fff;
transform: rotate(45deg);
left: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 2;
top: -42px;
}
/* end 'deocration' */
<div class="foo-container">
<div class="bar-container">
<p>text <span class='link'>the-link<span id='decoration' class='decoration'></span></span>
</p>
<div class='tooltip-container'>
<p>lorem </p>
</div>
</div>
</div>
Screenshot of the undesirable 'persistent pseudo-elements' behavior -->
Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.
I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)
I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}
I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.
I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/
I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image
While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>
The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.
I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)
I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}
Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?
Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.
position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.
I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...
This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}
You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});
display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)