Just wondering if it would be possible to scroll a page from top to top indefinitely ?
Not going straightly back to the top with #a but showing the top below the bottom after reaching it, also meaning you can see the bottom above the top by scrolling up. A 3d cylinder page ?
Sadly all I found was about blog style infinite top to bottom scroll.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>infinitescroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background: #000;
margin:0;
text-align: center;
overflow-x:hidden;
}
#frame {
width: 100%;
height: 100%;
}
.strip div {
position: relative;
text-align:center;
height: 200px;
}
.strip #div01 {
background-color:#942192;
}
.strip #div02 {
background-color:#5228cc;
}
.strip #div03 {
background-color:#0433ff;
}
.strip #div04 {
background-color:#009292;
}
.strip #div05 {
background-color:#00f900;
}
.strip #div06 {
background-color:#cafa00;
}
.strip #div07 {
background-color:#fffb00;
}
.strip #div08 {
background-color:#ffc700;
}
.strip #div09 {
background-color:#ff9300;
}
.strip #div10 {
background-color:#ff5100;
}
.strip #div11 {
background-color:#ff2600;
}
.strip #div12 {
background-color:#d82253;
}
</style>
</head>
<body >
<div id="container">
<div class="strip">
<div id="div01"><br/>↓ ↑</div>
<div id="div02"><br/>↓ ↑</div>
<div id="div03"><br/>↓ ↑</div>
<div id="div04"><br/>↓ ↑</div>
<div id="div05"><br/>↓ ↑</div>
<div id="div06"><br/>↓ ↑</div>
<div id="div07"><br/>↓ ↑</div>
<div id="div08"><br/>↓ ↑</div>
<div id="div09"><br/>↓ ↑</div>
<div id="div10"><br/>↓ ↑</div>
<div id="div11"><br/>↓ ↑</div>
<div id="div12"><br/>↓ ↑</div>
</div>
</div>
</div>
<script>
$('document').ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
</script>
</body>
</html>
I did something like that once, but only for the case of list of items - not an arbitrary html.
Basic idea is a virtual list - you have limited number of items on the screen - so called sliding window. While scrolling additional items get pumped up and out of view items get deleted.
In such case infinite scroll is trivial - when you scroll past last item of record set you start loading items at index 0.
For arbitrary markup / styling I don't think it is even possible in 100%. All that absolute positioned elements, floats, etc....
Related
I have a hidden class fadeThis, which does not appear when I hover over the button.
Perhaps it is clashing with another class/div?
What I'm essentially trying to do is create a red fade in over the grey box, when the cursor hovers over the button, and then when the cursor leaves the box(not the button), I want it to return back to it's original state.
I've also added the CSS to help demonstrate
HTML
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
CSS
.imageOne{
height: 300px;
width: 400px;
background-color: grey;
}
.centerButton{
display: flex;
justify-content:center;
padding-top:150px;
}
.btn{
height: 30px;
width:170px;
}
.onClickThis{
height: 300px;
width: 400px;
background-color: tomato;
}
JavaScript
$(document).ready(function () {
$(".onClickThis").hide();
$(".fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(this).addClass("fadeThis onClickThis");
$(".btn").remove();
});
$(".onClickThis").mouseleave(function () {
$(this).removeClass("fadeThis onClickThis");
});
});
});
I don't understand exactly what you are looking for. Maybe you could provide more details.
Here is a demo started from your code with some changes added.
$(document).ready(function () {
$(".onClickThis, .fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(".onClickThis, .fadeThis").fadeIn( 250 );
$(".btn").fadeOut();
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
<style>
#first
{
width:100%;
height:1000px;
background:red;
}
#second
{
width:100%;
height:1000px;
background:blue;
}
</style>
<body>
<div id="first">
</div>
<div id="second">
<h1 id="welcome">Welcome</h1>
</div>
</body>
What I want to achieve here is that on scrolling down the document I wanted the "h1 tag to fade in and appear as soon as I reach id="second". How to do that with JS. I have tried a couple of things, but nothing is working out the way I want. I also browsed regarding animation on scrolling and got results but I m not getting what's happening really. Can someone plz help me out in this? I m completely new to JS and trying out various kinds of stuff.
Thank you.
If you want to use the fade-in for multiple elements. Give a class to these elements and use the loop which is already commented.
$(document).ready(function() {
$(window).scroll( function(){
// $('.fadein').each( function(i){
var bottom_of_element = $('#welcome').offset().top + $('#welcome').outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_element ){
$('#welcome').animate({'opacity':'1'},1000);
}
// });
});
});
div {
height: 600px
}
#first {
background: red;
}
#second {
background: green;
}
#welcome {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h1 fade-in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="first">
</div>
<div id="second">
<h1 id="welcome">Welcome</h1>
</div>
</body>
</html>
I have a bootstrap container. As this is common for it, it doesn't take the hole page width, but is centered with a lot of margin on the left and right side.
What I'm trying to achieve is, that on the left and the right side (so besides the div with the container class, there are 2 centered arrows, left side pointing to left and right side pointing to the right.
You wonder, why I want to do that? I try to make something like a Carousel, but with pages, so when I click on the right arrow, there comes the content of the next page, clicking on the left arrow then, I get back to the other page.. I hope you know what I mean...
What I have is this:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
</body>
</html>
You could do it globally as Bootstrap does with the arrow in the carousel :
Having parents containers in each side of the page, fixed to the top AND with the screen's height as fixed height (easy to do with JQuery).
<body>
<div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
<div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
<div class="container"></div>
</body>
You could have a another parent for all of them to have a different structure or anything. (in this case change position fixed to position absolute)
And in css :
.parentofarrow {
position: fixed; // or absolute to a specific parent (relative)
top: 0px;
// height fixed with screensheight using Jquery
width: // as you wish;
text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }
And in these parents, having a vertical and horizontal align arrow with a specific action linked to change page content as you wish.
Should be enough!
Note that this solution is not the easiest but it offers a certain modularity (change height, parent, position...).
The simplest way without taking your elements position in consideration would be using negative margins. (fiddle here)
html:
<div id="arrow">←</div>
css:
#arrow {
margin-left: -100px;
}
Another viable way is to use position: absolute like this:
#container {
position: relative;
}
#left-arrow {
position: absolute;
top: 40%;
bottom: 40%;
height: 10%;
line-height: 100%;
left: -5%;
}
The easiest solution is too use the grid system.
<div class="container fill">
<div class="row">
<div class="col-xs-1">Left</div>
<div class="col-xs-10 main-stage">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
<div class="col-xs-1">Right</div>
</div>
</div>
</body>
I'm really stuck with trying to keep div blocks centered with the exception of the last row.
Someone else already created this fiddle that kind of demonstrates my question. You can see how the blocks in the result panel stay centered even when the window is resized. I would like to have similar behavior BUT if the last row contains less blocks than the rows above, then that last row should not get centered but left aligned.
Here is the fiddle:
http://jsfiddle.net/zbbHc/1/
Someone might ask why I don't just use float:left. The problem with that is that I couldn't find a way of centering my blocks using that method without also specifying a fixed width for my wrapper. I'm trying to keep everything as liquid as possible.
Try this fiddle http://jsfiddle.net/zbbHc/45/
Not sure, but I think this is the maximum we can do using CSS alone.
Update: (THis will not work in all cases, check the code below which work in all cases [I guess])
HTML
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB hide"></div>
<div class="iB hide"></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
Here is the quick and dirty method using jQuery. This will add invisible elements automatically
Fiddle here http://jsfiddle.net/fD6fn/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
width: 100%;
background: red;
text-align: center;
text-align-last: left;
}
.iB {
display:inline-block;
width: 200px;
height: 100px;
background: green;
}
.iB.hide {
visibility:hidden;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
itemWidth = "200",
count = "",
itemCount = 7;
count = $wrapper.width()/itemWidth;
// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}
function addInvisibleElements()
{
// Delete invisible items
$("#wrapper .iB.hide").remove();
var c = findHiddenElementCount();
for(var i = 0; i < c;i++)
{
$("#wrapper").append('<div class="iB hide"></div>');
}
}
$(window).bind("resize",addInvisibleElements); // resize handler
$(document).ready(addInvisibleElements); // take care during page load
</script>
</body>
</html>
Why don't you use percentage? http://jsfiddle.net/zbbHc/38/ that's how most of fluid layouts usually work
When you say 'if' the last row has fewer blocks do you mean that it's dynamic content? If you know it will have one then you can just position it relatively to the value of half its own width(and any margins etc)
.iB:last-child{
position:relative;
left:-100px;
background:blue;
}
http://jsfiddle.net/zbbHc/54/
It may be possible to do this with a table (though I tend to try to avoid tables). Table-cells' dimensions are determined by their contents (of course, you can add your own, or max/min dimensions). You could have a table with one column and (although it's not best practice) embed divs into the table (each div being a block).
The width of the table would be fluid because it would be based on the width of the widest cell (thus, the blocks will line up nicely and will look very neat), and you could hard-code or script (of course, I suggest scripting) a style/method to check if the last row contains less blocks, and if it does to set the text-align to left for that cell, only.
This solution could probably use some improvement, but it may be a good start, depending on what your going to use this for.
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}