I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.
Related
Here is a simplified version of my layout:
<body>
[... a bunch of content ...]
<div id="modal-overlay">
</div>
</body>
body contains enough content that the entire page scrolls.
#modal-overlay is styled like this:
#modal-overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
In response to a user action, I'll display the #modal-overlay by setting display: block;
The #modal-overlay then fills the entire viewport.
Here's the trouble...
SOMETIMES, when you swipe vertically on the the #modal-overlay - its content scrolls as it should.
However, SOMETIMES, the body scrolls instead, and the content in #modal-overlay doesn't scroll at all. It's as if I'm scrolling body through the #modal-overlay, which is exactly what I don't want.
In fact - it seems totally random whether #modal-overlay or body scrolls in response to the swipe gesture.
I've read about a few hacks (e.g., applying overflow:hidden to the body but I don't want to do that, since it loses the correct scroll position, and causes other problems as well.) I also would like to have a solution that works with any number of nested layers. I'm really trying to prevent scrolling through the uppermost layer, not fiddling with the underlying layers.
This is particularly problematic on iOS, since scrolling the body reduces the height the browser chrome, which expands the viewport, which messes with the layout of the #modal-overlay, since it's sized to fill the viewport. Aaargh.
Thanks in advance for any advice or guidance!
I haven't tried to achieve this on ios, but you can at least give a try using slimscroll jquery plugin if you are dealing with multiple layers and prevent scrolling of other layers.
Hope it helps
Body should be overflow-hidden and
add dynamically position: absolute; width: 100%; height: 100% CSS properties to other content wrapper (content container inside the body) in the body when modal open.
When open the Modal
<style>
.modal-open {
overflow: hidden;
}
.modal-open .container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body class="modal-open">
<section class="container">
Site content will be here
</section>
<div class="modal">
Modal content will be here
</div>
</body>
Add this "modal-open" class dynamically when open the modal and remove it when it close.
Since your modal-overlay covers the body 100%, I believe adding position:fixed to body when you display the #modal-overlay will fix your issue.
See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?
I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!
#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}
It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}
I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/
A client is opening our website into a popup window using JavaScript with window.open. They are turning off scrollbars and making the window a fixed height, causing the pages to not be scrollable. I control the code of the website being loaded this way, but not the calling JavaScript. Is there any way I can force the display of scrollbars?
body { overflow: auto }
should bring back the scroll bars. If it doesn't, and the scrollbar directive in fact turns off the body's scroll bars (I don't know right now whether that is the case), add a wrapper DIV in the body:
html, body { height: 100% }
.wrapper {
width: 100%;
height: 100%;
overflow: auto
}
<div class="wrapper"> ......