I am using the following CSS to provide scroll bar when window is re-sized. I have two problems. One is the vertical scroll bar is visible by default. I want it to appear only if window is re-sized. I have tried with different heights but that didn't go. Second problem is when window is re-sized, the background color of the part of div which is viewed after scrolling is not applied. How do I fix these? This is my CSS and div
<div class = "gridclass" id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid"
query="{ name: '*' }"data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10"></div>
</div>
#grid1{
overflow-x:auto;
overflow-y:auto;
height:60%;
width: 106.5%;
}
Set overflow: hidden; on the body tag :
<style type="text/css">
body
{
overflow:hidden;
}
</style>
To hide only the vertical scrollbar, use overflow-y:
To hide only the Horizontal scrollbar, use overflow-x:
<style type="text/css">
body
{
overflow-y:hidden; or overflow-x:hidden
}
</style>
Second Problem :
Try this one..
Fiddle
$(window).scroll(function(){
if($(window).scrollTop()<800){
$('#fixed').css('background-color','Yellow');
}else{
$('#fixed').css('background-color','White');
}
})
css style:
body{
overflow:hidden;
}
and javascript:
$(window).resize(function() {
$('body').css({'overflow':'auto'});
});
Related
How do I add a Scroll Bar inside the popup window so that I can access the search results inside the PopUp window?
My code for popup window:
<html>
<body>
<link rel="stylesheet" type="text/css" href="https://secure.duoservers.com/tld-search/api-search.css?color=0000ff&width=700"/>
<script type="text/javascript" src="https://secure.duoservers.com/tld-search/api-search.js?lang=en&store=7xhosting"></script>
<script type="text/javascript">
searchApiOptions = {
store: "7xhosting",
containerId: "divID",
submitURL: "",
selectedTld: "com",
popupBox: true,
floatingBox: false
};
</script>
<div id="divID"></div>
</body>
</html>
To force the scrollbar, set overflow-y to scroll on the element which you want to receive it, like this.
#divID {
overflow-y: scroll;
}
Have some min-height and height set in css for
div#divId
{
min-height:300px;
height:300px;
overflow:scroll;
}
and then set overflow:scroll
.divID{
overflow-x:hidden;
overflow-y:auto;
min-height:200px;
max-height:250px;
}
instead of id give class to your div.
I have given overflow-y:auto so the scrollbar only visible if there is an overflow in div.
Hope this helps.
I'm putting the control element above the div with my map and vertical scrollbar appears. Can anybody tell me how to put the elements one above the other, so that they will fill the entire height of the screen without vertical scrollbar?
<style type="text/css">
html, body, #map {
height: 100%;
}
#mySelector {
margin-top:10px;
width:400px;
}
#map {
margin-top:10px;
}
</style>
<select id="mySelector"></select>
<div id="map"></div>
The code:
http://jsfiddle.net/anton9ov/n3LshvLL
Here is updated fiddle - http://jsfiddle.net/n3LshvLL/5/
I have added overflow:hidden and given height:90% to map. Please not that, the moment you increase height more than 90% than it will create problem, as you are telling map to cover entire area.
Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.
HTML:
<div id='topbar'>
<div id='menu'> <a href='#'>Link1</a>
<a href='#'>Link2</a>
<a href='#'>Link3</a>
<a href='#'>Link4</a>
</div>
</div>
<div id='container'>
<div id='pushfix'></div>
<div id='ad_container'>
<div id='ad1'>ad</div>
<div id='ad2'>ad</div>
</div>
Lorem ipsum placeholder text
</div>
CSS:
body, html {
height:100%;
}
body {
margin:0;
}
#topbar {
width:100%;
background-color:#DCDCDC;
height:40px;
position:absolute;
}
#menu {
width:250px;
background-color:#B3B3B3;
margin:0 auto;
height:100%;
text-align:center;
line-height:40px;
}
#menu a {
color:#fff;
}
#container {
height:100%;
background-color:#808080;
width:240px;
padding:0 5px;
margin:0 auto;
}
#pushfix {
height:40px;
}
#ad_container {
position:relative;
width:240px;
}
#ad_container div {
width:100px;
background-color:yellow;
height:300px;
position:absolute;
}
#ad1 {
left:-105px;
}
#ad2 {
right:-105px;
}
Exact layout replica: http://jsfiddle.net/8UkQA/
Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.
Here's a working example: http://jsfiddle.net/8UkQA/1/
I may like to further add, if the same problem is being faced and by using the solution suggested by #Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,
overflow-x: hidden;
This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.
Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.
#media (min-width: 1500px) {
body {
overflow-x: hidden;
}
}
You need to give the child coordinates a.k.a. top: 0; left: 0;
// need to disable AutoScroll first, otherwise disabling the horizontal scrollbar doesn't work
flowLayoutPanel.AutoScroll = false;
// disable horizontal scrollbar
flowLayoutPanel.HorizontalScroll.Enabled = false;
// restore AutoScroll
flowLayoutPanel.AutoScroll = true;
Hope this will resolve your issue.
Say, for example, I have two divs like so:
<body>
<div id="header">
MY CONTENTS
</div>
<div id="main">
MY OTHER CONTENTS
</div>
</body>
The first div has the attributes position:fixed; and width:100%; in CSS, the other div is just a div with much content inside.
Ok, there is a scrollbar in the right side, as usual. But this scrollbar affects all of the divs. I want the scrollbar to only affect the second div, is possible?
I tried everything with overflow:auto, overflow:hidden, and overflow:scroll but I didn't reach my goal...
EDIT: Here my jsfiddle: http://jsfiddle.net/upcfp/
Do you want to do something like that?
jsfiddle Example 1
I edited your jsfiddle and removed some of the not needed parts for your question:
edited version of your jsfiddle
seems like there was a
</div>
missing in the #header, but is that what you wanted to get?
Is this what you had in mind?
This is a simple method. I have the header at the top, absolutely positioned, at a height of 100 pixels. Below that, I have the main content area, which has a height of 100%, a transparent top border of 100 pixels (so the content appears below the absolutely positioned header).
The box-sizing property in CSS allows us to fit the entire element into the width and height we specify, including padding and borders. So including the top border, the height of the main content is 100%, and the scrollbar appears only on the main content div.
The trick here, by the way, is setting the height of both html and body to 100%. This wouldn't work otherwise.
CSS:
html,body {
height:100%;
}
#header {
position:absolute;
width: 100%;
height: 100px;
background:#c3c3c3;
z-index:1;
}
#main {
background: #eee;
height:100%;
border-top:100px solid transparent;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Here is your fiddle using my solution.
Try:
#div2 {
overflow-y: scroll;
}
That will only put the scrollbars when needed. To always display them use overflow-y: scroll;. I had prefixed the second div's ID with div as you should not use only numbers for IDs or attributes in general.
The # signifies that the rule will apply to an element with the ID that follows the #. If you wanted it applied to all div then you would use a class instead.
Demo: http://jsfiddle.net/6EVtN/
Without seeing more code, the issue could be due to browser compatibility. Example above was tested in Mozilla Firefox 13.0.1 and IE 8.
Updated Demo: http://jsfiddle.net/j4uAM/
Ok, I solved my problem, I used this code:
body{
overflow: hidden;
}
#main{
overflow: scroll;
}
#maincontent{
height: 1500px;
}
I specified the height in content of #main and it just worked, thanks to everybody!
This a perfect solution, but I don't know how to keep code format in stackoverflow:
<script>
$("#cart").bind("mousewheel", function(e){
var intElemScrollHeight = document.getElementById("cart").scrollHeight;
var intElemClientHeight = document.getElementById("cart").clientHeight;
if( intElemScrollHeight - $("#cart").scrollTop() === intElemClientHeight) {
$(document).bind("mousewheel", function(event) {
event.preventDefault();
});
}
if(e.originalEvent.wheelDelta /120 > 0 ) {
if($("#cart").scrollTop() != 0) {
$(document).unbind("mousewheel");
} else {
event.preventDefault();
}
}});
$("#cart").on("mouseleave", function(event) {
$(document).unbind("mousewheel");
});
</script>
I'm trying to make a web-page with a 100% with div with padding, but when I do this I end up with a horizontal scroll bar. So I'm adding overflow: hidden to the bod to fix it, but it prevents me from scrolling on the y-axis. So How can I get just the x axis to be overflow: hidden?
You don't need to mess with the scrollbars. Just create another div in the current one for padding.
[Demo]
<style>
#outer { width:100%; }
#inner { padding:50px; }
</style>
<div id="outer">
<div id="inner">100% width with padding</div>
</div>
try overflow-x:hidden; This should work