Enable scrolling of content in slide in panel on iPhone - javascript

http://www.daneliandesigns.co.uk/BKS/
The form does not scroll down on iPhone (you have to click the [+] button to activate slide in panel). I have FullPage.js enabled and this is working well. The content in the second section is scrollable on mobile but when the slide in panel is activated you can no longer scroll down on iPhone.
I have tried the following CSS but to no avail:
#media (max-width: 480px) {
.form-live, .nks-content, .fp-enabled body {
overflow:visible!important;
overflow:scroll;
-webkit-overflow-scrolling:touch;
z-index:9999999999999999999999!important;
}
}
I have also tried adding to normalScrollElements:
function(isResponsive){
normalScrollElements: '#S2', '.nks-content';
}
I am not sure this second solution would work considering the slide in panel is not part of the FullPage.js
I just want to be able to scroll the slide in content down to the SUBMIT button on mobile - namely - iPhone

I have had this issue before and It was because there was no height set. Try setting height to 100% and see if that works

Related

How to Stop background scroll on IOS?

Hello, I'm currently stuck on an issue that only happens on IOS. I have a dropdown menu that only shows on mobile & tablet mode. When the burger icon is clicked, it fixes the html & body, this works on all devices, except IOS, I tested this on an iPhone 5C.
Below I have listed the code that I have used stop the background scrolling. Once the burger icon is clicked it toggles the class noScroll. The class noScroll consists of overflow:hidden; which is then applied to the html & body.
I have absolutely no idea why this is not working with IOS, maybe because of the bounce scrolling? I am unsure.
The website that I am working on is Redec
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
.noScroll {
overflow: hidden;
/* position: fixed */
}
sorry for posting this as a solution but I don't have enough reputation to comment yet, I think you can find the solution here => Does overflow:hidden applied to <body> work on iPhone Safari?

Bootstrap 3 multi level dropdown menu not working in mobile

Bootstrap 3 multi level dropdown menu not working on mobile devices. I checked many solution in StackOverflow. That solution for Desktop not for mobile. Below is the best solutions for multi lebel dropdown menu.
Bootstrap 3 dropdown sub menu missing
https://github.com/djokodonev/bootstrap-multilevel-dropdown
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
Above code is working well for desktop.
Live example: http://rahulmoral.com/portfolio/essanet/
Please view on mobile devices. Second level dropdown-menu will not work on mobile devices.
It's actually working just fine. You need to scroll in order to see the expanded menu. However, to get it to work as you'd like, simply overwrite the max-height:
.navbar-collapse {
max-height: none;
}
i got it to working by adding this to my css
#media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
max-height:100%;
} }
but instead of 100% you can also use none. i am using a fixed nav which is why i have navbar fixed top. u can change it to static or w.e. you are using.

Mobile Menu - expanding and collapsing

I have created a responsive mobile menu using jquery. Everything works fine except the toggling of the menu. By default the menu is expanded. I want the menu to be collapsed by default and when the word menu is clicked it expands and is then able to expand and collapse on selection. The only point of consideration in this is that there is also a normal navigation menu, which is displayed and layout differently. I wish for this menu to be always active. I only want the mobile menu to be hidden (collapsed) by default and then expanded on when clicked.
I have uploaded the projected onto jsfiddle: linkhttp://jsfiddle.net/qdhg0r9d/
thanks
Just add
#media screen and (max-width: 600px) {
#collapse-menu{
display:none;
}
}
To your CSS this will hide it by default when the screen width is less than 600px, then when you click the toggle jQuery will over ride it for you by adding the inline style display:block; and display it again
$(document).ready(function () {
if($(window).width() <= 640){
$("#collapse-menu").toggle();
$("#pull").on('click',function () {
$("#collapse-menu").toggle();
});
}
});
it only works depending on the screen width

Bootstrap admin template responsive menu not working

I'm trying to get responsive menu working on Metis Admin
http://demo.onokumus.com/metis/
When the screen width is less than 768px, the side menu buttons get smaller which is fine but for the submenus it seems to expand to the right and it's invisible. It's position absolute and I've tried increasing z-index but it still does not show up.
I can see using css inspector that the submenu list is still there and working.
Is there a way to make it displayable?
There is an overflow:hidden in your main.css line 399.
Remove this
#menu {
/*other styles*/
overflow: hidden; /*remove this line*/
}
Now it should work as expected.

Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution

I have a website using css media queries to detect browser resolution and modify my site accordingly.
I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both display:none; and visibility:hidden; because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.
Here is a stack overflow page reference:
Setting a div to display:none; using javascript or jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?
You can do it by comparing the screen-size:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
You can use !important to force to origional state via media queries.
This will over-ride the "display:none" from your js.
Example:
#media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none"
you maximize the window and the below resets your origional style.
#media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}

Categories