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>
Related
I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!
Here is the html and css code:
HTML:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
CSS:
#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}
#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}
So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.
Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this:
right after touch
My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch:
want
I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.
This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/
<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
CSS
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}
#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}
For this, a good option would be to use a container with a specified width and text-align: center. Then en lieu of floats, set the boxes to be display:inline-block elements. As inline elements, they will then follow whatever text alignment their parent container specifies.
HTML
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS
#container{
text-align:center;
width: 100%;
}
#container .box {
width: 300px;
height: 150px;
background-color: #75A9F9;
margin-top: 50px;
border-radius: 5px;
display: inline-block;
}
https://jsfiddle.net/qacnL2yr/
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 trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>
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.