Using one of jquery plungin to display as Flyout styles menu.
Please check http://jsfiddle.net/bNj4R/
It's so strange in Safari browser, when you click a top level menu from fifth top, It does not showing any children menus.
I found It's something do with following css in jqueryUI.css
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
It's all working great in other browsers. expect safari.
Please check http://jsfiddle.net/bNj4R/
Fixed , Forced to make a scroll to top. before display sub menus.
$('.fg-menu.fg-menu-scroll').scrollTop('0');
Thanks for your advice :)
Looks like safari isn't scrolling the box to the top again. That's the reason why the first 5 work and the rest don't. Once you scroll, Safari keeps that position when it brings up the submenu.
I think it's possibly a bug with fgMenu library. Looking at the lirbary, it's 5 years old and it's pretty hefty in size. Might be worth having a hunt around for a more current menu library. Can do a bunch of things with css these days.
Related
I have a logo that takes you to startpage when you click it. This works in desktop view but not on mobile view!? What can I do to make this work also in mobile view?
I have a vue-project.
The homepage is located at eagleinstruments.se
Hope you can help med solve this!
Best regards / Lisa
It's because the menu navbar was overlapping on your logo. Your logo do have a z-index: -1; but here, the fix is to set some width to the .wrap .hamburger menu.
This could be enough, but of course you can make something more complex with flexbox or alike to make it more responsive depending of what can happen.
width: auto;
I found this out by inspecting with the chrome devtools.
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
This is what I am trying to achieve:
This is what I get:
Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/
This is happening when you narrow the screen but there's still visibly enough space for the button.
I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?
I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.
The fix involves:
.ui-input-search {
width: 50px;
display: inline-block;
}
Check it in action here: http://jsfiddle.net/NqFhQ/
I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.
I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.
There are 2 problems:
Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.
I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.
I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.
To #header and #nav add:
position:relative;
and
z-index:10 //for #nav
z-index:0 //for #header
I've got a flyout menu on a site that I'm building. I'm using a UL nested within the LI. In Firefox it's working beautifully but IE breaks it. (The Pants & Shorts link is the only one with a flyout so far)
Here's the site (a work-in-progress so it's not quite all there):
http://epalla.com/bogeypro/featured/covert-cooler.html
If I set:
.bogeypro_catmenu ul li {
position: static;
}
the submenu does become visible in IE, but in IE6 it flys at the top of the page (absolute positioning is NOT relative to the LI) and in IE7 it still doesn't fly above the product image.
any ideas?
have you seen suckerfish menus? http://www.htmldog.com/articles/suckerfish/dropdowns/
As it turns out, IE7 was taking a dump over the opacity filter. I started from scratch and redid everything from the ground up. I had it working beautifully in both browsers and was wondering what I'd done differently - then I added the opacity filters back in and voila, duplicate results.
I've removed the IE opacity line (below) and all is working beautifully
filter:alpha(opacity=92);