I'm working on a menu panel for my jquery mobile website. Sadly I have a issue with overflow. What I want is that the menu comes in from the left and pushes the jquery mobile page to the right and partly outside the viewport.
This works all good on desktop browsers, but for some reason I get a horizonal scrollbar and I can 'scroll' away from the panel to the right(in to the actual page). I don't want this beheaviour ofcourse.
Tried various things with overflow and position but I can't seem to fix it.
I have created a stripped down version from my website on jsbin:
http://jsbin.com/uhucec/4
Any help would be realy appreciated.
Found a fix to this problem.
I have added a css class:
.ui-page-fixed
{
position: fixed !important;
}
I apply this class to the current page when the panel is open, and remove it when the panel is closed.
Related
Help me. I need to make a button that does not move along with scrolling the page
It can be a button fixed on the page and
It can be a sticky button
it can be a popup button
are you using position: sticky and are you giving it a top or bottom value? Without top or bottom it won't just work.
Have you checked if you browser does support position: sticky? That could be the cause as well. If your browser doesn't support it you might need to implement some javascript fallback
I have put together very recently an article on medium that you can check here if you want to know the insights of it and some examples that might figure out what's wrong
I'm creating my web-page by using fullpageJs https://alvarotrigo.com/fullPage/ plugin, and trying to make accordion FAQ page.
Basically the accordion refers to https://bootsnipp.com/snippets/QXdqR
The problem is when accordion exceeds the page height, the scrollbar doesn't work properly. (I'm activating "scrollOverflow" option)
Here is my current jQuery:
$(document).ready(function() {
$('.accordion').find('.accordion-toggle').click(function() {
$(this).next().slideToggle('600');
$(".accordion-content").not($(this).next()).slideUp('600');
});
$('.accordion-toggle').on('click', function() {
$.fn.fullpage.reBuild();
$(this).toggleClass('active').siblings().removeClass('active');
});
});
I just added $.fn.fullpage.reBuild();, trying to solve the problem.
However, I'm still stucking with three problems below;
It works only when the scrollbar is originally shown in the screen. (When "Q" content exceeds the height of screen)
Whole accordion move to unpredicted position after opening & closing answer.
(This happens when scrollbar originally isn’t displayed on the screen and then exceeds the height when the accordion opens. (This is hard to explain in words, and I hope the explanation makes sense…))
It seems adding $.fn.fullpage.reBuild(); makes the page slow to load. (especially on mobile). Is there any way to solve this?
By the way, I could get an ideal result when I resized browser each time after opening & closing answers.
...That’s it.
I would appreciate it very much if someone taught me any suggestions.
Try this:
$('#fullpage').fullpage({
scrollOverflow: true
});
I'm working on a site, http://six03.com/ART which is currently in development. I thought I had everything all wrapped up for deployment until I had gone back in 320x480 mode on mobile and none of the links on the slideout menu do not work on any mobile device I have tested, at any resolution, on any page.
I have updated and reverted back to a working copy of jQuery, I have tried z-index:1; I have thought of all I could and researched all I could with no avail. Now I am asking for some help here.
I'll do some research in here as well to see if there are any similar problems, or if anyone knows of a thread similar to this, a point in that direction would be greatly appreciated also. Thanks.
I'm going to assume that you mean only the 'testimonials' and 'contact' links in the menu don't work, on the homepage only.
If this is the case, your problem has nothing to do with jQuery.
Your .region element is also positioned, and so it is being rendered over the menu.
Setting nav {z-index: 1} and .region {z-index: 0} should fix the problem, as it will bring the menu over the other positioned content.
I ended up getting rid of the repetitive icon that I had in the menu, I didn't need it, placed a z-index: 1; on the nav container. I also changed the positioning of the menu-icon to relative instead of fixed and that fixed the problem in the mobile devices I have been able to test in.
unless this was a design feature, the hamburger icon is no longer on the top left and in the hero image when the desktop browser is scaled to narrow width.
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I am using a Superfish plugin to display menu pop-ups but the problem is when a menu item is big it gets overflow from viewport.
How can I adjust the position of pop-up menu to always keep it in the viewport.
I've helped someone turn superfish into a megadropdown and I think this may be a nice clean way to reformat your code with only HTML & CSS changes. Otherwise, I think you'd have to resort javascript/jQuery.