Need to attach a footer to the bottom of the browser. And when you are scrolling the page, footer does't move.
How can I do it?
#footer{
position: absolute;
height: 60px; //or other fixed
bottom: 0;
left: 0;
right: 0;
}
This style should wrap all your footer content. This will make it stick on the bottom of the page, no matter how much you scroll down.
To make the same thing up or on a side, you also should use absolute.
Related
I have an HTML page running in a webview, that has a header - list - footer.
When the list scrolls, it becomes visible behind the header, that must be static:
This is the header:
.q-layout-header {
background-color: #343a40;
position: fixed;
top: 0;
z-index: 10;
}
This only happened in iOS devices/Simulators. On Android, it works.
In your q-layout change your view property
<q-layout view="lhh Lpr lff">
and unedit the css class u edited
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).
I want to show a menu on clicking on a link. The menu should appear from right to left with show function.
I have already tried
$('.amenu').show("slide", { direction: "right" }, "fast");
But it comes sliding. I want the same effect as
$('.amenu').show("fast");
but menu originating from top right corner.
I've made this fiddle for you which you can use in any way. The idea is that the menu is put in position with this css:
position: absolute;
top: 0;
right: 0;
If you play around you can make it stick anywhere.
The animation is also done with CSS using this class and you can leave only width if you want a slide animation:
.animate {
height: 100px;
width: 300px;
transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
}
And a simple jQuery to toggle the class.
https://jsfiddle.net/mtucpL3v/
Further reading: CSS transitions
I'm creating an iOS app with partially native code and partially html5. A splash screen followed by a webview, that's all for native code, the rest of the content are implemented by html5 and will be shown in the webview. In the webview, the page is divided to 3 parts, titlebar on the top, content in the middle and tabbar on the bottom. I want the titlebar and tabbar each stay in their position, that is the very top and the very bottom in the webview no matter how the user scrolls the page, the content is scrollable of course, now how can I achieve this? What I have so far is the following, but when keep scrolling until hit the very top/bottom there will be a white gap at the top of the titlebar or at the bottom of the tabbar, like most iOS app, how can I avoid this?
.mobile-titlebar {
height: 44px;
border-bottom: 1px solid #border-color;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.page-content {
padding-top: 44px;
padding-bottom: 49px; /* Height of the footer element */
}
.mobile-tabbar {
height: 49px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
I managed to figure it out by adding the following line in my iOS native code:
self.webview_main.scrollView.bounces = NO;
Hope this helps someone.