I'm a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
Related
I have problem scrolling with touch scrolling, it's working just fine with mouse and keyboard arrows but not by touching.
This is the html code:
<div class="drive-dashboard">
<div id="dashboardContainer" class="dashboard-container"/>
</div>
And this is the CSS part
.drive-dashboard {
height: 100%;
width: 100%;
position: absolute;
overflow: auto;
}
Any suggestions where the problem is?
I've run into this before and in React i've been able to solve it with something like:
`document.addEventListener("touchstart", function() {}, true);`
But, I have to admit sometimes i've needed to use it and sometimes not, so I am not sure which html elements respond and which don't.
Here is some reference
I'm currently in a project developing an Angular SPA that has dropdown menus in its main navbar. To get this effect, we are using CSS: hover selectors. The issue is that when an action is performed within this dropdowns we would like to close them without hindering the ability to open them again. For example, if a user opens a link within one of this dropdowns (internal link with ui-sref) he is then taken to this particular state, but the dropdown would still be visible until he moves the mouse outside it (and partially obscuring the new content shown). We would like the dropdown to be closed when an action within is performed and if the user would like to open it again, he would be able to hover the mouse again over the trigger.
We tried removing and re-adding classes (even after a timeout) but the dropdown reappears again.
Link to a Plunker with a setup similar to what we are trying to accomplish: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
And the relevant portions (Angular controller omitted as it has no content):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Thanks!
Finally solved it by using ng-mousenter and ng-mouseleave and dropping CSS :hover rules. As everything is based on JS I can just trigger mouseleave when I want to close them.
I have a page with a large products table. Each product is represented by an image.
I would like to make each product name searchable using the browser's "search in page" feature. When searching for a product name, the user should end up at the respective image.
I can not add a product name that is visible as text (the name is already very prominently on each image) but can add text elements that are not visible.
Is there a robust way to do this?
How about hiding some text behind the image? Something like this.
<div class="image-block">
<div class="img-description">Some text.</div>
<img>
</div>
.image-block {
position: relative;
}
.img-description {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.image-block img {
position: relative;
}
Basically, this will put the image over the img-description element, so you can still search and find it.
Using z-index, you can hide the text behind the image. This lets it be searched for with Chrome, Safari and Firefox (unfortunately can't test in IE).
<html>
<body>
<style>
.product-image {
position: relative;
width: 100px;
height: 100px;
display: block;
overflow: hidden;
}
img.product {
position:absolute;
height: 100px;
width: 100px;
}
div.product {
z-index: -1;
position: absolute;
}
</style>
<table>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">name 1</div></div></td></tr>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">something else...</div></div></td></tr>
<table>
</body>
</html>
It works well in FF & Chrome, however in Safari it pulls the text out from behind the image, which your users may find jarring.
The solutions here have the problem that the user can't tell they've found something, since the text they're searching for is hidden behind the image. If there's 12 images on screen, it's not obvious which one has matched their search.
I do something similar, but I just have transparent text above the image. <p style="color:transparent">My product title</p>.
That way when the browser scrolls to the right region, the user can also see a blue selection growing around the text as they type it.
(In Chrome at least, the "transparent" text becomes visible once it's selected)
Just as the title suggests, I am making a website that utilizes the "off canvas" menu approach to save space and modernize the look and feel of the site on mobile devices.
The exact problem is that the menu itself will not move off the canvas when the page is loaded in iOS 7 on an iPad. This is not the case in iOS 6 though, when I checked it. The flyout works perfectly on my desktop when I resize the browser window.
This is what it looks like on an iPad Air with iOS 7
I was surprised to find that the layout actually worked as expected in iOS 6 with an earlier iPad. I am racking my brains trying to figure this out. Here is the code I am working with (note: I am using the Bootstrap 3 framework underneath all of this):
HTML HEADER
<meta name="viewport" content="width=device-width, initial-scale=1.0">
GLOBAL DEVICE-RELATED CSS
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
MENU CSS
#media screen and (max-width: $screen-tablet) {
#nav {
position: absolute;
top: 0;
padding-top: 5.25em;
}
#nav .block {
position: relative;
padding: 0;
}
.js-ready #nav {
height: 100%;
width: 70%;
background: #333333;
}
.js-ready #nav .block {
background: transparent;
}
.js-ready #nav {
left: -70%;
}
.js-ready #inner-wrap {
left: 0;
}
.js-nav #inner-wrap {
left: 70%;
}
}
}
JAVASCRIPT
// Toggle the mobile navigation off-canvas menu
$(document).on('click', '.nav-btn', function(event)
{
event.preventDefault();
if ($('html').hasClass('js-nav-in'))
{
$('html').removeClass('js-nav-in').addClass('js-nav-out');
}
else if ($('html').hasClass('js-nav-out'))
{
$('html').removeClass('js-nav-out').addClass('js-nav-in');
}
});
I'm sorry for the code dump, but that seems to make this a more complex issue. Any tips or suggestions anyone has would be appreciated. I am willing to completely rebuild the menu if it means that this menu would work across the bulk of tablets and mobile phones.
As a note, when I tap on the menu icon or closing x the view zooms in as if the total width of the page is less. I think this may be a complete rebuild type situation. If you know of a resource where I would be able to see how this could be properly done, I would accept it.
EDIT: The sizing seems to work in iOS 7 Safari. However, when the user swipes to the side, the menu comes out. This is still an issue, just a different one. Any helpful resources would be appreciated.
As a test, could you change your CSS to hide the navigation (#nav {display:none;})on top of positioning it off the page. Then have your jquery .show(); and .hide(); the nav respectively when the user clicks on the menu along with your slide in/out transition.
My gut instinct is that since the nav is technically still part of the layout (it's just off to the right, presumably with overflow:hidden on the parent container), but iOS is thinking its part of the layout and is including it somehow.
So as a test, hide the nav and I'm thinking iPad iOS7 should respect it being gone and have your "page" take up the full width of the viewport (that's my theory at least).
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/