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.
Related
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.
I want that the div container extend over the entire HTML page with horizontal scroll bar, here's a picture that show my problem.
Image
The div container don't extends when a horizontal scrollbar is necessary.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
showMathMenu: false,
jax: ['input/TeX','output/HTML-CSS'],
displayAlign: "left",
extensions: ['tex2jax.js','toMathML.js'],
TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] },
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
<style>
.titulo{
width:100%;
border-bottom:solid 2px;
border-color: black;
background-color:lightgrey;
font-family:arial;
font-weight:bold;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="titulo">Data</div>
<div>$$\vec{v_r}=\vec{v_1}+\vec{v_2}\\\vec{v_r}=\left(x_1+x_2,\;y_1+y_2\right)$$</span>
<div class="titulo">Operations</div>
<div>$$\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000,\;3000000\right)+\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000+500000,\;3000000+2000000\right)\\\vec{v_r}=\left(1500000,\;5000000\right)$$</div>
</body>
</html>
How can I fix this? I use MathJax to display math formulas, and I don't know if it is interfering.
When you provide width:100% for the outer div it take the 100% of the window / document width. But because of your 1 div text is not wrapping (without space in between) so that div is going out of viewport so you are getting that horizontal scrollbar. So to avoid that wrap your text eg. word-wrap: break-word; use this css property where your text is going out.
I trying to use a Google Map as a full screen background to a web app I am developing. I have used a div to hold the map and so far I cannot seem to find a method to effectively make it full screen.
When using absolute positioning, I can get it to fill the browser window, however if there are scroll bars on the page, and I scroll down, the background does not fill the remaining space below the browser window.
I have also tried using fixed positioning but that doesn't seem to work either. It pushes the rest of the content under the background unless I wrap it all and position it absolutely over the top, but that still doesn't fix the scroll problem.
This is an idea of how I have it at the moment:
<body>
<div id="background"></div>
<div id="wrapper" class="grid-container">
<!-- Content -->
</div>
<footer>
<!-- Footer -->
</footer>
</body>
And the CSS:
#background {
position:absolute;
width:100%;
min-height:100%;
top:0px;
left:0px;
z-index:-1;
}
The reason I have the footer outside of the wrapper div is because I am using a sticky footer (http://www.cssstickyfooter.com/) and I am using a responsive grid system called Unsemantic (http://unsemantic.com/).
Any help would be greatly appreciated!
Thanks,
Aaron
You got to wrap the map in a div, and call the script the the header calling the div name class or ID. give the div 100% width and a height in css. if you want the exact window height call a jquery
$(document).ready(function(e) {
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
$(window).resize(function(){
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
});
});
<html>
<head>
<style>
#map_canvas {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
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'});
});
I'm trying to create a website with the following.
On top there's just a basic horizontal menu. Below that, on the left side, is another subcategory. The content will be on the right of the subcategory and can be very long.
Now what I would like is that when you scroll anywhere on the page, it only scrolls the content div while everything else stays at its original position. I have been thinking about it for some hours now but I cannot really come up with a solution on how to do this.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
</body>
</html>
.container {
width:1000px;
}
.left_side {
float:left;
width:250px;
height:500px;
background:green;
}
.right_side {
float:right;
width:750px;
height:1500px;
background:yellow;
}
Any idea on how to do this?
Thanks in advance.
Answer was given by #jao's comment. Setting all divs, except for the content one, to position: fixed.
Add the overflow:auto style to its class.
Full explanation: http://www.w3schools.com/cssref/pr_pos_overflow.asp