I have a drop down element which works great on desktop.
http://www.c-testing.nl/werkenbijvanaarsen/growing-together/
But on mobile devices, the drop down won't collapse back when tapping again.
I read some answers on this forum, but it doesn't seem to work in this case.
I'm trying to achieve this only with css, but the more I read about this, it seems that online javascript can achieve it.
Does anybody know how I can set something like an un-hover on this element?
.pl-drop_down:hover ul {
opacity: 1;
visibility: visible;
}
Best regards, Mark
It’s unlikely you’ll get what you want using just CSS :hover, as this wasn’t designed for touch screens.
To get it to collapse back on mobile, you could add the javascript:
$('[selector that you want to tap]').click(function() {
$('.pl-drop_down').css({'pointer-events': 'none'});
});
This will remove the hover state on mobile and should make it collapse back, you’ll need jQuery for this solution to work though.
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I'm currently working on a CSS transition and I'm struggling to find the proper Javascript to make it function properly on a mobile device.
http://seancrater.com/test/
In the section, "The Dirty Dozen Plus", the transition can be seen. I currently have
ontouchstart="this.classList.toggle('hover');
added to each of the DIVs but it currently requires you to hold down your finger on it from a mobile device to keep it on the transition state. I was wondering if anybody could give me some insight on how to make it a single click to make it stay in the transition state. I tried the pseudo :focus and it stopped it from functioning all together.
Thanks! -Sean
As others have stated, you'll need to avoid :hover.
The easiest way to address your issue is to update your CSS like so:
.top:hover,
.top.touched {
-webkit-transform:translateY(-150px);
-webkit-transition: all .5s;
}
And then add touched as a class to your elements on touchstart or touchend. My guess is you'll want to maintain which element currently is touched, so you can remove the transitioned state when a user scrolls or touches another element.
(EDIT: Updated fiddle to allow user to tap close the element)
http://jsfiddle.net/4n6Z4/1/
Shell, for easier testing on a smartphone:
http://fiddle.jshell.net/4n6Z4/1/show/
ontouchstart="this.classList.toggle('click'); There are no hover events in mobile. You need to turn your hover event into a click event for mobile phones. Use javascript to detect if it's a phone or not. Setup a constant var phone = false and if it's a phone and set it to true and if not it remains false. Then use it in your function that controls / or triggers that animation.
You cannot use :hover on mobile.
more info
As you know, :hover behavior doesn’t exist on touch screen devices. So
when you design a responsive website, you should carefully plan when
and where to use :hover interactions. Simple links that open some URL
will loose their :hover effect on some touch screen devices. On iOS
:hover is triggered before the click event, so you will see the hover
style for a brief moment before the page changes. Those are minor
things, they don’t affect the functionality of the site. The real
problem is a :hover that either hides or shows another element using
display or visibility CSS properties. This type of :hover will
transform into the double tap behavior on touch screens.
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
i'm using skrollr.js and skrollr-menu for creating a parallax website. I have 3 divs with nested elements that i would like to parallax at different speed. Everything works as expected on desktop but on iPad running iOS 7 i am experiencing a problem with the way the elements are positioned and the speed at which they scroll. The 3 different divs have a class of position: fixed, and nested elements a class of position: absolute; and are positioned on Y axis using top:px, (tried using % instead with mixed results). other (non-nested, ie. #content) divs seem to be working consistently across all browsers and device though. I would really appreciate any help with this problem it has been driving me crazy for days, this is my first project using skrollr so i dont have much expericence but so far i'm loving it except for this glitch on iOS, i have checked the documentation and related question in stackOverflow but still no luck! Hopefully someone will be able to point me in the right direction, here's a fiddle of how im trying to achieve this, although to see it in iOS i will have to provide a direct link to the project shortly, please bear with me since i had to port an existing project for using it with skrollr on mobile devices so i would like to clean up code as much as possible before submitting to avoid confusion, in the meantime here is the fiddle:
//Init Skrollr
$(document).ready(function(){
var s = skrollr.init({
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 150
});
skrollr.menu.init(s, {
easing: 'outCubic',
animate: true,
duration: 1000
});
});
http://jsfiddle.net/shinobisan/EvPdL/6/
Thanks!!
On mobile the skrollr-body element is moved using CSS transforms, which will break fixed positioned elements. Please read this part of the documentation, which I just extended with a second paragraph.
Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. That's the element we move in order to fake scrolling. The only case were you don't need a #skrollr-body is when using position:fixed exlusively. In fact the skrollr website doesn't include a #skrollr-body element. If you need both fixed and non-fixed (i.e. static) elements, put the static ones inside the #skrollr-body element.
Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. You can't have position:fixed or background-attachment:fixed inside elements which use CSS transforms as per CSS spec (http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/). That's why those elements need to be outside of the skrollr-body element.
https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers
I have a problem with a navigation menu for which I have applied pie.js (library that allows you to have css3 on ie6-8 browsers). Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8. This is a function through I call js library.
$(document).ready(function(){
if (window.PIE) {
$('.aahov,ul#menu,ul#menu li ul').each(function(){
PIE.attach(this);
});
}
});
Check this example: http://mainpage.ueuo.com
...and don't forget, only on IE8 browsers ...
Thank's.
It might just be IE8 adding some extra padding.
I noticed from your css that you aren't using a css reset which may help to eliminate browser based differences.
You could have a look at http://meyerweb.com/eric/tools/css/reset/ or something similar.
Also IE8 doesn't support last-child
ul#menu li ul li:last-child{ border-bottom:none; }
So this will also affect the look of your menu items.
Also as a side note from a usability point of view it would be good practice to let the user know that the menu link is a drop down. Possibly add a down arrow to the right of the link.
Your scripting looks good to me, it looks like it's something in your styling. Not really sure what you have there, but you might be able to work it around to use overflow:hidden, or at least that might be a place to start.
I have a page using <ul> lists for navigation (Javascript changes the styling to display or not on mouseover).
This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.
In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.
I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <div>, not an <iframe>.
Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?
I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.
I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:
$(function () {
$("#primary-nav").appendTo("#footer");
});
Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.
The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.
I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.
Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.
I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.
If you want to check out what CSS hacking is about: click here
If you want to check out some pure CSS menu examples: click here
Hope this helps!
According to this google maps thread, you are correct - an IFrame is inserted by the google code.
You'll need to use the solution which Dan mentioned,
you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists
Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.
Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.
An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.
I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.