How can I handle hover on mobile devices like iPad? - javascript

I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for hover and making it on click but, customer is insisting on having hover.
Heres the problem, I have bootstrap navbar with few menus that dropdown on hover.
But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach".
I want to do following things using javascript/jquery.
Keep existing hover behavior on desktop and laptop
On devices like iPad, i would like the menu to disappear under following circumstances
(a) when clicked on the same menu item again
(b) When clicked on submenu
(c) When clicked outside the menu
Any sort of help here is appreciated.
Here is the fiddle http://jsfiddle.net/em656522/2/

Bootstrap's defaults are best web practices, so I would suggest staying closer in line with what's already there. The only thing you should do to customize your menu's behavior is perhaps add the hover dropdowns for desktop only. Bootstrap's responsive utility classes are also available for you to use.
You may want to read this question for some ways to approach your desktop dropdown menu.

Related

AlpineJS, my header dropdown works for large screens but not for the mobile responsive menu?

I'm trying to use AlpineJS to close and open dropdowns for my header NAV. The header is responsive for large and mobile screens. I'm able to get the header dropdown to work on large screens, but for some reason it does not work on mobile screens? I'm basically using the exact same syntax and tried many others. Still no luck. Maybe this is a bug? Could someone let me know if I'm in the wrong here?
Here is my CodeSandbox I'm using TailwindCSS and left everything in there for the most part to replicate my problem.
Please note my mobile menu button is hidden on large screens, its on line 42
The dropdown <div> that it's meant to open is on line 327
Any solution to this?
it is working now , there was a problems with your buttons they were hidden behind other divs and not accessible in reality . i have even erased one button
https://codesandbox.io/s/async-field-os411?file=/index.html:0-16377&resolutionWidth=320&resolutionHeight=675

Hidden nav bar on mobile

I'd like to have a navigation menu for an education website similar in structure to the one found here.
Take note of the left-hand navigation menu header and list items. In desktop view, all nav items appear, but in mobile view, only the header is visible (and you have to click the + icon to have the nav menu items appear)
Looking at the elements it appears there's some javascript working in the background that switches the CSS class names when the site goes to mobile view.
I've been trying to recreate something similar to no avail...
Could someone please take a stab at it using a simple structure like this using JSFiddle?
Nav Title (on click, Nav Menu Items 1-3 appears/disappears below)
Menu Link 1
Menu Link 2
Menu Link 3
I'd really appreciate it! Thank you!
there are already existing bootstrap templates and plugin that meet your requirement. Also you can leverage android material design guide line & sample templates.
https://getmdl.io/
(Edit: Copied from OP's comments:)
... is the design guideline from google for making web-apps. The idea is to make consistent looking as native possible. the site includes components like icons, widgets, navbar etc. Also contains sample templates that can be clone or download from git.
http://getbootstrap.com/
Bootstrap on the other hand have same features but its more targeted mobile first design approach.
Again if you want both you can check out materializecss.com

Multiple problems with twitter bootstrap - toggling tooltips, non-responsiveness

http://dynamo.viralsmods.com/becky
The circular images of people on the front page have a tooltip associated with them. When you hover over each tooltip for the first time, it shows, but any subsequent hover does not. What is the reason for this?
Secondly, if you view the website on a smaller screen (either mobile or just shrink your screen), the navbar shows the three lines instead of the links. When you click/ tap the three lines, it brings up a dropdown menu with the new links. When you tap it again to hide it, it hides and then automatically shows again. This error seems to be the same sort of problem with the tooltips, as it can't show/hide properly.
Any insight?
http://dynamo.viralsmods.com/becky/web/js/jQ.min.js (included in your page) is jQuery v1.7.1.
Bootstrap requires jQuery >=1.9.0
Upgrade your jQuery!

HTML5 slide menu form right to left

I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..

JavaScript media query to reverse user triggered JavaScript event

The brilliant amateur that I am I decided to make a website responsive. My website has a sidebar and I figured I would use a media query to hide that sidebar and show a button to make the side bar toggle-able. I used jpanelmenu http://jpanelmenu.com/ to do this.
The problem is if you do the following it all breaks apart
shrink down browser width to mobile size
the sidebar disappears
the button to toggle the sidebar appears
press the button and the sidebar appears
expand the browser window to normal side
now I have two fricken sidebars (the one from the jpanel menu) and the original sidebar that has now reappeared because the browser window has grown and my media-query unhides it
to top it off the mobile sidebar toggle button has disappeared because we are back to normal width
clearly this won't work, so should I use modernizer and a javascript media query ala Triggering jquery with css media queries
to fix it or is there a more elegant solution my amateur mind is not seeing?

Categories