I'm trying to make an iframe scroll behind my footer div, so I don't want the page itself to scroll at all. If you've got Facebook you'll know what I mean when I say I'd like it to be like Facebook Messages. The scroll bar scrolls the messages div rather than the actual page.
The HTML I have right now is:
<div class="content">
<iframe src="http://192.168.0.122/bf2sclone/?pid=28999999" style="width:100%;height:200px;"></iframe>
</div>
<div class="footer">
</div>
And the CSS I have is:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
position: fixed;
bottom: 0;
z-index: 1;
margin-bottom: 20px;
}
div.content {
position: relative;
width: 980px;
height: 300px;
float: left;
border-left: 1px solid #000;
}
Facebook message doesn't use iframe, you can get this effect by set the left part of the page fixed(set in css: position: fixed).
So, just set footer fixed, and it should work fine.
Related
I'm trying to replicate a modal similar to Reddit's and I'm not sure how they accomplish the following
When the modal is open, scroll is disabled
When the window is smaller than the modal, scroll is enabled
I've tried turning on and off some of the CSS properties in the Chrome dev tools, but none of them seem to effect scroll. I have tried adding a scroll disabling function, but the problem with it is that it disabled all scroll, so when the window is smaller than the modal, scroll is still disabled.
When the modal is open, the <body> tag is given a class of modal-open, which disables the scrollbars of the page itself.
The modal itself is positioned to fill the entire viewport, and is set to overflow: auto, which means that scrollbars are only displayed on the modal element when the contents of the modal are larger than the viewport.
You can see a minimal proof of concept below:
/* when modal is closed: */
#body {
text-align: center; padding: 30px;
}
#body:not(.modal-open) {
overflow: auto;
}
#body:not(.modal-open) #modal {
display:none;
}
/* when modal is open: */
#body.modal-open {
overflow: hidden;
}
#body.modal-open #modal {
overflow: auto;
padding: 10px;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
}
#modal_inner {
width: 100px;
height: 200px;
background: #fff;
border: 1px solid #000;
text-align: center;
padding: 50px;
margin: auto;
}
<html>
<body id="body">
<div style="width: 200%; height: 300%">
<button onclick="document.getElementById('body').classList.toggle('modal-open')">open modal</button>
</div>
<div id="modal">
<div id="modal_inner">
This is the modal!
<button onclick="document.getElementById('body').classList.toggle('modal-open')">close modal</button>
</div>
</div>
</body>
</html>
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
This is a very simple example of sticking an element at the top of another element's visible area. When .container is scrolled, .fixed stays at the top.
<div class="container">
<div class="fixed">fixed content</div>
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
<style type="text/css">
.container {
position: relative;
border: 1px solid blue;
overflow: auto;
width: 250px;
height: 250px;
}
.content {
height: 500px;
width: 500px;
}
.fixed {
position: absolute;
width: 500px;
margin-top: 2rem;
border 1px solid red;
}
</style>
<script type="text/javascript">
$('.container').scroll(function () {
var top = $('.container').prop('scrollTop');
console.log(top);
$('.fixed').css('top', top);
});
</script>
The problem with this is that if the browser is not fast enough, the .fixed element flickers when I scroll. It lags behind the scroll (compare the position of the text in .fixed to the text in .content as you're scrolling). On my desktop it works flawlessly, but when I try running this in Chromium in a virtual machine, I can see the flicker.
Is there any other way to catch the scroll event and set the position of my .fixed element before the browser renders the page?
edit Updated example to include horizontal scrolling. The fixed element should only be fixed vertically.
Use a double container:
<div class="container-wrapper">
<div class="fixed">fixed content</div>
<div class="container">
<div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>
</div>
With the CSS:
.container-wrapper {
position: relative;
border: 1px solid blue;
overflow: hidden;
width: 250px;
height: 250px;
}
.container {
overflow: auto;
width: 100%;
height: 100%;
}
.content {
height: 500px;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
width: 245px;
border 1px solid red;
z-index: 10;
}
This way you won't need jQuery to reposition the .fixed div when you scroll, and it won't flicker.
EDIT To address the horizontal scrolling...
$('.container').on('scroll', function() {
var left = this.scrollLeft;
$('.fixed').css('left', -left + 'px');
});
This should move the .fixed div without flickering. In your solution, the flickering was caused because the browser moved your div while scrolling, and the event handler then moved it again. Now it will only move once.
I am writing a web-app for iPhone and Android using HTML5 and CSS3.
I have a background div and a menu div on top of it. (larger z-index) and both div's have overflow and are scrollable.
The problem is, even when I swipe my finger over the top div (the menu) the bottom div (the background) is still scrolling. Sometimes both are scrolling at the same time and sometimes only one of them.
I wish only for the menu to scroll when I am swiping the finger over the menu area.
Can anyone help?
Here is my code :
HTML:
<html>
<body>
<div id="main">
<div id="menu">
<!-- menu content goes here -->
</div>
</div>
</body>
</html>
CSS:
#main: {
height: 3000px;
overflow: scroll;
}
#menu: {
height: 2500px;
padding-left: 10px;
overflow-y: scroll;
}
I made something similar. Your question is a bit unclear... But I had to make a scrollable div that was not visible... Here is my css...
#sidebar{
width: 1000px;
height: 670px;
border: 0px solid transparent;
overflow: hidden;
text-align: center;
padding-left: 0.5%;
background-color: transparent;
color: transparent;
}
#sidebar #scroller{
width: 1000px;
height: 545px;
padding-bottom: 15px;
overflow: scroll;
overflow-x: hidden;
text-align:center;
background-color: transparent;
}
and now in my html...
<div id="sidebar">
div id="scroller">
// the things i add in my scrollable menu...
</div>
</div>
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}