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!
Related
I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.
1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.
2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.
Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/
You need to use the js detection that the example uses.
Add class="no-js" to your body element.
Then on load, set document.body.className = "js" (or equivalent).
This will enable the menu.
For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).
Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).
Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.
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.
I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
I recently created a pretty long list in my bootstrap navbar, I'm wondering how I can change the setting for when my navbars to hide into the javascript button, check out the page with the problem at: http://www.twoog.org.
Thanks on beforehand.
Your Problem is that you used Images inside the menu. Use Text and Css Backgrounds.
I altered the bootstrap tabs to work on hover and made some changes to hide the content tabs correctly.
I want it to function as a dynamic popup/flyout layer.
Now the problem is that it does not work properly when you dont hover over any content after hovering over the menu. I want it to be visible when hovering over the respective tab or over the content itself. The problem with my quick change of the original script is that it will still show the content when you leave the Tab to the left (1st menu item) or to the right (3rd menu item).
It is illustrated in the following jsFiddle:
http://jsfiddle.net/WnQvF/27/
A simple, clean solution would be appreciated.