I'd like to achieve a continuous scrolling html page.
I've found this continuous scrolling of a div example, but I am unable to modify the code so it works on a whole html page:
Here is a jsfiddle of my code:
http://jsfiddle.net/howderek/N9PWn/
Any help in pointing me in the right direction is greatly appreciated.
What if you set the width/height of the div to 100% of the space?
UPDATE:
#verticalScroller {
position: absolute;
width: 52px;
height: 98%;
border: 1px solid red;
overflow: hidden;
}
jsFiddle
The naive answer would be to have any content for your page to exist inside the scrolling div.
you need to adjust the width in your CSS.
#verticalScroller {
position: absolute;
width:100%; //set the width to 100% to take over the space
height: 180px;
border: 1px solid red;
overflow: hidden;
}
#verticalScroller > div{
position:absolute;
width:100%; //set the width to 100% there also
height:50px;
border: 1px solid blue;
overflow:hidden;
}
Have you looked at Infinite scrolling?
Related
I have a web page width large size
examble : width:3000px - height: 3000px;
in my page, have a div container and some elements as p, img, button.
I want each time access this page by any browsers, browser screen always center on content of webpage.
you can see picture below:
Check Following what you want. It will center vertical and horizontal of the screen.
$(function () {
scrollTo((($(document).width() - $(window).width()) / 2),(($(document).height() - $(window).height()) / 2));
});
.main{
width:1200px;
height:1200px;
display:table;
text-align:center;
}
.sub{
vertical-align:middle;
display:table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<div class="sub"><h2>I am center</h2></div>
</div>
Check Fiddle.
Hope it helps.
I don't really see the purpose, but you can manage that by using absolute positioning:
div {
width: 3000px;
height: 3000px;
position: absolute;
top: 50%;
margin-top: -1500px; /* 50% of the height */
left 50%;
margin-left: -1500px; /* 50% of the width */
background: lightblue;
}
I assume you want the browser to scroll to the center if its too large for the screen and not be at the top-left of the page.
use scrollIntoView() in your script after page load
document.getElementById("#theDivInTheCenter").scrollIntoView()
refer this question
HTML:
<div class="container">
<div class="section">
</div>
</div>
CSS
.container{
border: 1px solid red;
width: 600px;
height: 600px;
}
.section{
border: 1px solid green;
width: 300px;
height: 300px;
position: relative;
left:25%;
top: 25%;
}
You can try below link to Fiddle to achieve the same:
DEMO
The Title says it all: "How to make the parent div adjust in size to contain the CSS-Rotated child div?"
This is what I get currently:
HTML:
<div id="container">
<div id="rotator">
<h1>TEXT</h1>
</div>
</div>
CSS:
#container {
display: inline-block;
border: 1px solid gray;
padding: 10px;
overflow: hidden;
}
#rotator {
display: inline-block;
width: 200px;
height: 500px;
background-color: rgb(130, 310, 130);
border: 1px solid blue;
text-align: center;
line-height: 500px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Live Example
So, is there anyway to make the parent resize with child?
A CSS only solution would be best. If that's impossible, what's the best javascript way to do that?
Should support IE9
Based on #misterManSam's suggestion I update the live example to show the solution.
found here
Change the width of the div.container when rotated. Add negative margin and left margin to #rotator.deg90in CSS.
Look at this example :)
Javascript
function to90() {
var elm = document.getElementById("rotator");
console.log(elm);
elm.className = "deg90";
//add these lines
document.getElementById('container').style.width = "500px";
document.getElementById('container').style.height = "200px";
}
CSS
#rotator.deg90 {
/*add this*/
margin-top: -150px;
margin-left: 200px;
-moz-transform:rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Here you go: http://jsbin.com/viyacaji/11/edit
Just rotate the container in the jS functions, don't move the rotator div. Because basically, what you're trying to achieve is the same as when you rotate the parent div.
Any query?
I have a problem with a div that i want to put a lot of images in.
But when the images reach the limit of the div the new images go in a new line, not in the same line.
What i want:
<div>-------------------------------------------------- n</div>
scrollbar right-left
What i get:
<div>--------------------------
------------------------ n</div>
scrollbar top-down
Actually the div css is that:
<style>
div {
text-align: center;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
overflow-x: scroll;
overflow-y: hidden;
width: 900px;
height: 120px;
border: 0px;
padding: 0px;
}
</style>
Hope i explained myself and you can help me.
Is this what you need: http://jsfiddle.net/edm53/1/
The trick here is:
white-space:nowrap;
I have 3 divs aligned horizontally.
Div 1 is my sidebar
display:block;
float:left;
width:180px;
height:100%;
Div 2 is the middle (sub-content)
display:block;
float:left;
width:200px;
height 100%;
Div 3 is the right part
width:100% on Div 3 places it below Divs 1 and 2. How can I make it stretch up the right side of the page instead?
If you don't want to use the calc() function, try the following:
<div class="wrapper">
<div class="sidebar">sidebar</div>
<div class="panel">panel</div>
<div class="main">main</div>
</div>
.wrapper {
border: 1px dotted blue;
height: 400px;
}
.sidebar {
width: 100px;
height: 100%;
background-color: tan;
float: left;
}
.panel {
width: 200px;
height: 100%;
background-color: pink;
float: left;
}
.main {
width: auto;
height: 100%;
border: 1px solid red;
overflow: auto;
}
See demo: http://jsfiddle.net/audetwebdesign/6qdYK/
The overflow: auto on .main will keep the div as a column without wrapping around the floated elements, which may be what you need.
The problem occurs because the remaining width isn't 100% but 100% is the width of full window.
So you could use css3 calc() function
.div3{
width: calc(100% - 180px - 200px)
}
See this before using calc() function can i use calc
Or if you want to use the width by calculating yourself define the width in pixel deducting main container width to (180+200)px.
Else, you can define the width auto which might be better for you.
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />