On my megamenu, whenever I hover between unsorted lists I can see, in inspector, style being added overflow:hidden and height. This height causes the entire mega menu to 'jump' by about 10px. I have searched all my jquery, and I know I didn't put any such code in it, and tried finding if any of the added jquery libraries (superfish for instance) are adding it, but no luck.
Is it possible in Chrome to somehow pinpoint where this change comes from? Or in Firefox? Because something must be adding that inline style, and I have no idea what.
Found the issue. Superfish was adding the code, but the 'jump' came from my megamenu list items being set as display:inline-block and not display: block elements. Once I put them to block, the jump was gone.
Related
I have a dashboard with a left-side bar. The bar has a lot of elements in it (including inner lists, etc). Obviously, it didn't fit in such a small area. The solution was to use a slim scroll by JQuery. The problem I have encountered, though, is unavailability to scroll to the very last element inside the bar.
The bar looks like this (without scrolling)
Now take a look at how it looks when inner elements are open:
See? The very last element cannot be seen properly (although it is clickable). Unfortunately, the only way to "fix" it is perphaps use some parameters, while initializing this stuff. Now it looks like this:
$('.elemToAddScrolling').slimScroll({
height: '100%',
wheelStep: 5,
});
Basically I see that the library generates div elements - one of them is slimScrollBar - exactly what I look for. I see that it has top property, and whenever I scroll it alters. The maximum value, though, is 107px (when we reach "the end"). I use the latest version of this plugin - 1.3.8 Is there a way to customize it really?
The issue was reproduced here.
So it was clear that it was a padding issue from a parent element. Now which one? In the codepen, it was the body... In J. Doe's project, it was on an outer wrapper were he found a 44px padding.
The issue was fixed by applying a margin-top:-44px to the inner container... To move the whole thing up.
But, another way could have been to apply height: calc(100% - 44px) in the slimScroll settings! It can take it, as you can see it here.
I have been searching about this problem from last week...all I could found is this " overflow-x :hidden "
Here is my site : seriesratings.com
when I open it in my iphone, it shows me horizontal scrollbar.
I tried this already:
html,body{overflow-x:hidden;overflow-y:scroll}
someone has told me this "You have inline styles all over your html that will not be properly fixed by using css"
I can not change style now because site is fully developed.
does someone has any other way, like hide horizontal scrollbar with jquery or JS or any other code.
At the sg-site-header-1 I found a H1 with an A tag in it, this thing causes the horizontal scroll-bar, why should you make a color #blank? This is not working, then make is display: invisible or something like that. Hopefully this will work for you!
#dutchsociety Thanks A Lot, you saved me, If you have time can you tell me how did you find out the solution to the problem, so I can do it by myself..
I opened my element inspector in Google Chrome and deleting sections of the website. So on that moment I deleted the header and saw that there was the long sized H1.
I am creating a website at the moment where scrolling will be disabled on the entire website (it's made out of sections, all are as tall as screen height except for 1 section, because that one is too large..).
I've been looking around to see if any plug-ins exist for this yet, but haven't had any luck, yet.
Would anyone know a plug-in or how to do this?
It would help me a great deal.
if all of your site has the style overflow:hidden then you can target the one section by id or class and make it overflow-y:scroll
ps the link you posted is a 404 error
You can use css to disable or enable scroll for a containing element by setting the overflow property to none.
However, in your case, I guess there is no reason for a script, you can simply set the overflow property in the style of the offending element.
Here's the code:
http://jsfiddle.net/tqkr9vyz/2/
function setScroll(elementName, s) {
document.getElementsByName(elementName).style.overflow = s;
}
My Problem (Fiddle)
My problem is that on my jquery animated dropdown menu, when you hover over the "Other" link, the sub menu does not appear. When using firefox to 'Inspect Element', I find height is animated, and the width appears to be alright, yet all I see is the left border.
I noticed that if I have that particular section display as a block, when you animate the first menu it is shown, but upon entering the unordered list, it disappears (ex). I imagine it is somehow related to this, but I can not figure out what is causing this.
Any incite into what I'm probably just overlooking would be great, and of course much appreciated.
Notes:
I have had this problem in Firefox, Chrome, Opera, and IE.
It's designed such that it could work with only css. The the first .each is overriding default css hover behavior.
the empty span holds the arrow image.
only relevant code is posted. However, you may view my site here
If you have any tips on making something more efficient, always welcome.
http://jsfiddle.net/sailorob/4cdTV/5/
I've removed your CSS for simplicity's sake and simplified your functions by utilizing jQuery slideUp and slideDown, which essentially handle many of the css properties you were managing with your functions. From here, I think it would be fairly simple to work back in some of your CSS.
When utilizing javascript/jQuery/animation on menus, I highly suggest using timers (setTimeout) for firing mouseenters and 'leaves. This way, your menu is more forgiving when a user accidentally moves their mouse a few pixels out of the menu and it closes.
Well, in debugging the JS and CSS I found that if you remove ALL the JS you have, the drop down menu with sub menus work fine. The Other li opens up the ul below it just fine. Note, it doesn't animate without the JS though.
Here's a forked fiddle.
I tested it in latest Chrome and Firefox.
Nasty little bug, this one.
As illustrated in Android ticket 6721, the Android browser seems to not respect z-index when absolutely positioned elements are laid over the top of <a> or <input> tags.
I am desperate for any sort of workaround. Has anybody conquered this one before?
Thanks in advance!
This problem is probably related to controls and their being special for the browser. While looking at your problem (in chromium) I found a related problem that when you press the tab key you will still be able to focus the input elements. You probably don't want this either (regardless of bleedthrough). The solution is surprisingly simple, you write your script to add the disabled attribute to all input/button/etc. elements that are overlayed. A disabled input will not be able to receive focus (by keyboard or otherwise), and clicking it should be impossible.
As this also disables silly keyboard circumnavigation it is not even a workaround, but a better design that also works with keyboard based navigation as expected.
To answer the question properly it's important to read the bug page. The problem is not about visibility of the input below, but its "clickability".
I can't test it, but these are possible workarounds:
0 Forget absolute positioning and just put two divs there and toggle visibility.
If this doesn't satisfy You...
1 try setting CSS position to absolute or relative for all a and input tags (Yup, this might force You to rewrite CSS to keep the layout, but isn't it worth it?)
2 make a <a>-tag container:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
This will need some more CSS to make the content look ok. But I expect something like this would solve the problem.
if 1 and 2 aren't helping try them both at once ;)
3 if it still happens You might want to check in details what happens when You click. Bind click and mousedown events to: link on top, container on top, input in the bottom and log them. If You get any of those events for the top link You can try and stop the bubbling at some moment or prevent the event on the input in the bottom.
This would be difficult, but I can help a bit. jQuery would be quite necessary.
Past fixes for this issue for IE include, but are probably not limited to the following list. These may help solve the problem in Android for you.
Put an iframe behind the absolute content. The iframe may obscure those elements for you
When you display your absolute content, hide all of the problem elements with JavaScript
Define the div's in the opposite order
Point number 1 is deemed the most reliable fix for IE, but may not be the nicest fix for you.
Add this to the CSS of every element that creates a problem:
-webkit-backface-visibility: hidden;
Simulate INPUT and A with DIVs.
[PSEUDO JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$('div[rel=a]).click(function() {
location.href = $(this).attr('href');
});
$('.field > div').click(function() {
$(this).hide();
$('.field > input').show();
});
$('.field > input').blur(function() {
$(this).hide();
$('.field > div').html($(this).val()).show();
});
</script>
IE has this same problem and the solution there is to make sure that every element that is involved in the positioning and even their containers have a z-index applied to them. Basically if you add a z-index to 1 element in the dom then IE gets understands its z position but doesn't understand its z position relative to what its next to and/or over.
container - z-index 0
child (on top container) - z-index 1
child 2 (above all) - z-index 999
Of course this is all based on stupid IE but its worth a try in android also.
Second Try :)
I am not familiar with the android browser at all, but I hope to maybe lead you down a path to solve your issue. Superfish is a javascript menu that has implemented a solution for z-index menu items when they drop down over select boxes in browsers. BgIframe is the js that they use to achieve this. Your answer may lie there, hopefully.
http://users.tpg.com.au/j_birch/plugins/superfish/#sample2
Put the under html in a div and set the display:none using javascript, so then the under content is gone, instead of being clickable and modal.
if you want to solve this problem, first of all you must add z-index to parent wrapper and clearly add z-index to your other elements, solution is that all elements will have a zero point for anderstanding z-index property correctly