create loader using css

create loader using css - javascript

I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}

So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}

I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>

For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/

Related

showing the information with mouse hover

I'm trying to create an application that lets the user place an order from the menu. My problem is When the user hovers the mouse over one of the images in the menu, another image should be displayed with the description and price of the item. The id attribute of each image identifies the image to be displayed when it’s rolled over. I tired to manged the first image to flip and show the description and price but the problem is when you click on the first image it does not show the price on the order box and the image is not showing either
$(function(){
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
item.click(function(event){
Amount+=parseFloat($(event.target).val());
orderList+=parseFloat($(event.target).val())+"$ -"+event.target.id +"\n";
txtArea.val(orderList);
Total.html("Total: "+Amount.toFixed(2)+"$");
});
//Events
item.hover(function(){
$(event.target).text($(event.target).val()+"$");
$(event.target).addClass("dark");
}, function(){
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function(){
Amount = 0;
Total.html("Total: "+Amount.toFixed(2));
orderList ="";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body{
margin:0px;
padding:0px;
}
.Outside-Container{
margin:10px;
position:absolute;
border:2px solid black;
border-radius:5%;
width:60%;
height:auto;
left:20%;
overflow:hidden;
}
.container{
position:relative;
width:70%;
height:auto;
left:15%;
overflow:hidden;
}
.top-logo-holder{
width:100%;
height:auto;
}
.logo-img{
width: 31%;
display: block;
margin: 0 auto;
}
.line{
height:2px;
width:100%;
position:relative;
background:teal;
border-radius:25%;
}
.main-section{
width:100%;
position:relative;
height:auto;
}
.row1{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
}
.row2{
display:flex;
flex-wrap:no-wrap;
flex-direction: row;
transition:0.8s;
}
.item{
width:300px;
height:17vh;
background:pink;
margin:5px;
color:#fff;
transition:0.3s;
font-size:20px;
cursor:pointer;
}
.row1 .item:nth-child(1){
background:url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size:cover;
}
.row1 .item:nth-child(2){
background:url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size:cover;
}
.row1 .item:nth-child(3){
background:url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size:cover;
}
.row2 .item:nth-child(1){
background:url("[img4.jpg](https://postimg.cc/hh6pg86y)");
background-size:cover;
}
.row2 .item:nth-child(2){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
.row2 .item:nth-child(3){
background:url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size:cover;
}
#txtArea{
width:60%;
height:150px;
}
.last-footer-line{
width:100%;
height:auto;
margin-bottom:20px;
}
.dark{
filter:brightness(0.7);
text-align:center;
font-size:20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class = "container">
<div class="top-logo-holder">
<img src ="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img"/>
<div class="line"></div>
</div>
<div class="main-section">
<div class ="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<h1>7.22$</h1>
</div>
</div>
</div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class ="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>

$(function() {
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
$('.flip-card-back').click(function() {
var price = $('.flip-card-back .Item1_price').text().slice(0, -1);
Amount += parseFloat(price);
orderList += parseFloat(price) + "$ -item1 \n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
item.click(function(event) {
Amount += parseFloat($(event.target).val());
orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//Events
item.hover(function() {
$(event.target).text($(event.target).val() + "$");
$(event.target).addClass("dark");
}, function() {
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function() {
Amount = 0;
Total.html("Total: " + Amount.toFixed(2));
orderList = "";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body {
margin: 0px;
padding: 0px;
}
.Outside-Container {
margin: 10px;
position: absolute;
border: 2px solid black;
border-radius: 5%;
width: 60%;
height: auto;
left: 20%;
overflow: hidden;
}
.container {
position: relative;
width: 70%;
height: auto;
left: 15%;
overflow: hidden;
}
.top-logo-holder {
width: 100%;
height: auto;
}
.logo-img {
width: 31%;
display: block;
margin: 0 auto;
}
.line {
height: 2px;
width: 100%;
position: relative;
background: teal;
border-radius: 25%;
}
.main-section {
width: 100%;
position: relative;
height: auto;
}
.row1 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
}
.row2 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
transition: 0.8s;
}
.item {
width: 300px;
height: 17vh;
background: pink;
margin: 5px;
color: #fff;
transition: 0.3s;
font-size: 20px;
cursor: pointer;
}
.row1 .item:nth-child(1) {
background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size: cover;
}
.row1 .item:nth-child(2) {
background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size: cover;
}
.row1 .item:nth-child(3) {
background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size: cover;
}
.row2 .item:nth-child(1) {
background: url("[img4.jpg](https://postimg.cc/hh6pg86y)");
background-size: cover;
}
.row2 .item:nth-child(2) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
.row2 .item:nth-child(3) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.dark {
filter: brightness(0.7);
text-align: center;
font-size: 20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class="container">
<div class="top-logo-holder">
<img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />
<div class="line"></div>
</div>
<div class="main-section">
<div class="row1">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<h1 class='Item1_price'>7.22$</h1>
</div>
</div>
</div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/tabs.js"></script>
</body>
</html>

i added rotate card on hover for any item & set item1 as first item
item.mouseleave(function() {
$('.flip-card-inner').removeClass('flipcard');
});
$('.flip-card-inner').addClass('flipcard');
added css class.flipcard {
transform: rotateY(180deg);
}
also added img & price onhover event using$('.flip-card-back').html($(event.target).val()+'$');
$('.flip-card-back').css('background', $(event.target).css('background'));
.
is this what you want😘
$(function() {
//declare prices and varaibles
var item1 = $("#item1");
item1.val(7.99);
var item2 = $("#item2");
item2.val(1.99);
var item3 = $("#item3");
item3.val(9.99);
var item4 = $("#item4");
item4.val(12.99);
var item5 = $("#item5");
item5.val(17.99);
var item6 = $("#item6");
item6.val(3.99);
var Total = $("#Total");
var Amount = 0;
//onclick
var item = $(".item");
var txtArea = $("#txtArea");
var orderList = "";
//Events
item.hover(function(event) {
$('.flip-card-back').html($(event.target).val() + '$');
$('.flip-card-back').css('background', $(event.target).css('background'));
$('.flip-card-inner').addClass('flipcard');
}, function() {
$('.flip-card-inner').removeClass('flipcard');
});
item.click(function(event) {
Amount += parseFloat($(event.target).val());
orderList += parseFloat($(event.target).val()) + "$ -" + event.target.id + "\n";
txtArea.val(orderList);
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//Events
item.hover(function() {
$(event.target).text($(event.target).val() + "$");
$(event.target).addClass("dark");
}, function() {
$(event.target).text("");
$(event.target).removeClass("dark");
});
//Clear Button
var ClearOrder = $("#ClearOrder");
//Events
ClearOrder.click(function() {
Amount = 0;
Total.html("Total: " + Amount.toFixed(2));
orderList = "";
txtArea.val(orderList);
});
})
* {
box-sizing: border-box;
font-family: "san-serif";
}
body {
margin: 0px;
padding: 0px;
}
.Outside-Container {
margin: 10px;
position: absolute;
border: 2px solid black;
border-radius: 5%;
width: 60%;
height: auto;
left: 20%;
overflow: hidden;
}
.container {
position: relative;
width: 70%;
height: auto;
left: 15%;
overflow: hidden;
}
.top-logo-holder {
width: 100%;
height: auto;
}
.logo-img {
width: 31%;
display: block;
margin: 0 auto;
}
.line {
height: 2px;
width: 100%;
position: relative;
background: teal;
border-radius: 25%;
}
.main-section {
width: 100%;
position: relative;
height: auto;
}
.row1 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
}
.row2 {
display: flex;
flex-wrap: no-wrap;
flex-direction: row;
transition: 0.8s;
}
.item {
width: 300px;
height: 17vh;
background: pink;
margin: 5px;
color: #fff;
transition: 0.3s;
font-size: 20px;
cursor: pointer;
}
.row1 .item:nth-child(1) {
background: url("https://i.postimg.cc/2yCtXwNn/img1.jpg");
background-size: cover;
}
.row1 .item:nth-child(2) {
background: url("https://i.postimg.cc/vTXKRVGk/img2.jpg");
background-size: cover;
}
.row1 .item:nth-child(3) {
background: url("https://i.postimg.cc/J7QvH9jx/img3.jpg");
background-size: cover;
}
.row2 .item:nth-child(1) {
background: url("https://www.gourmesso.co.uk/blog/wp-content/uploads/sites/4/2017/03/Tiramisu-Coffee-in-a-Glass-Recipe-Italian-dessert-speciality.jpg");
background-size: cover;
}
.row2 .item:nth-child(2) {
background: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg");
background-size: cover;
}
.row2 .item:nth-child(3) {
background: url("http://hopecoffeeco.com/wp-content/uploads/2017/01/Grid-home-item-show-img.jpg");
background-size: cover;
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.dark {
filter: brightness(0.7);
text-align: center;
font-size: 20px;
line-height: 5em;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flipcard {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/tabs.js"></script>
<head>
<title>Test</title>
</head>
<body>
<div class="Outside-Container">
<div class="container">
<div class="top-logo-holder">
<img src="https://i.postimg.cc/pL36txtW/logo.png" class="logo-img" />
<div class="line"></div>
</div>
<div class="main-section">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1></h1>
<h1></h1>
</div>
</div>
</div>
<div class="row1">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
</div>
<div class="row2">
<div class="item" id="item4"></div>
<div class="item" id="item5"></div>
<div class="item" id="item6"></div>
</div>
<div class="line"></div>
<p>Your Order:</p>
<textarea name="message" id="txtArea"></textarea>
<p id="Total">Total: </p>
</div>
<div class="last-footer-line">
<button id="PlaceOrder">Place Order</button>
<button id="ClearOrder">Clear Order</button>
<div>
</div>
</div>
</div>
<script src="js/tabs.js"></script>
</body>
</html>

Move in Text animation visible outside div

I am trying to move in text from bottom of the div that is a red tile on hover , but when i hover the text is visible from outside the tile ,and moves in , what i want is for it to seem like it moved in from bottom of the tile.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>
</body>
</html>
CSS:
body{
background-color: black;
}
.tile{
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
z-index:-1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index:-1;
}
.back{
top: 100px;
position: absolute;
}
Jquery:
$(document).ready(function(){
$(".tile").hover(function(){
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({top:'-=100px',opacity:"1"},"slow");
},function(){
$(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});

.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden; // add this line
z-index: -1;
}
overflow: hidden;
Content is clipped if necessary to fit the padding box. No scrollbars
are provided.
which means the text outside the range of .tile will be invisible.
See MDN
$(document).ready(function() {
$(".tile").hover(function() {
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({
top: '-=100px',
opacity: "1"
}, "slow");
}, function() {
$(".back").animate({
top: "+=100px",
opacity: "0"
}, "fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});
body {
background-color: black;
}
.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden;
z-index: -1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index: -1;
}
.back {
top: 100px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>

How to make a fixed sidebar stop at the end of a container

I have a container with two columns, one of which holds a sidebar.
JSFiddle
The sidebar is fixed, and when it gets near the bottom I used jQuery to alter the bottom to have it roughly stay at the bottom of the container.
How can I make it so it stops moving perfectly when it hits the bottom of the container (outlined in red)? It would have to work for a sidebar of any height.
HTML
<div class="container">
<div class="col-left">
<div class="sidebar">
fixed sidebar
</div>
</div>
<div class="col-right">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div>
<footer>Footer</footer>
CSS
.container {
outline: 1px solid red;
position: relative;
}
.col-left {
width: 58%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
height: 100%;
}
.col-right {
width: 40%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
}
.sidebar {
position: fixed;
top: 50px;
left: 50px;
height: 200px;
width: 100px;
background: #fff;
}
footer {
background: #000;
width: 100%;
height: 300px;
margin-top: 100px;
color: #fff;
}
jQuery (Doubt it'll be of use I think it needs to be rethought)
jQuery(window).scroll(function(){
var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height();
console.log(scrollBottom);
if (scrollBottom < 300){
jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420));
jQuery('.sidebar').css('top', 'auto');
} else {
jQuery('.sidebar').css('bottom', 'auto');
jQuery('.sidebar').css('top', '50px');
}

Here's a jQuery solution whipped up by calculating heights of the relevant elements, and factoring in the current scroll position of the page. When the sidebar would normally move outside of its container, a .lock class is added to it that unfixes it with CSS.
Working example below:
var $sidebar = $('.sidebar');
var $container = $('.container');
var sideBottom = $sidebar.offset().top + $sidebar.height();
var contBottom = $container.offset().top + $container.height();
$(window).scroll(function() {
if (window.scrollY + sideBottom > contBottom) {
$sidebar.addClass('lock');
} else if ($sidebar.hasClass('lock')) {
$sidebar.removeClass('lock');
}
});
body {
background: #eee;
margin: 0;
}
.container {
outline: 1px solid red;
position: relative;
}
.col-left {
width: 58%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
height: 100%;
}
.col-right {
width: 40%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
}
.sidebar {
position: fixed;
top: 50px;
left: 50px;
height: 140px;
width: 100px;
background: #fff;
}
.sidebar.lock {
position: absolute;
bottom: 0;
top: auto;
}
footer {
background: #000;
width: 100%;
height: 400px;
margin-top: 100px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-left">
<div class="sidebar">
fixed sidebar
</div>
</div>
<div class="col-right">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div>
<footer>Footer</footer>

Try this once it might help you.
.sidebar{
position: -webkit-sticky;
position: sticky;
top: 0;
}

clipping labels with z-index

I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!

Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>

Div Slideshow (html, css, js)

I'm starting my journey in creating webpages. I crave something to try to imitate windows 10 start UI as well as there animation on browser. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
#font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
JavaScript
function slideShow() {
setInterval( function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}

Use slideShow(); at the end of your javascript code.
Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.

Hi Please check this code now working you define the wrong semicolon symbol the next++; and element id is wrong in js wrong i have fixed this issue check now this code.
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<style>
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
</style>
<script type="text/javascript" >
function slideShow() {
var next = 0;
setInterval( function show(){
if (next == 0) {
animate();
next++;
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('savDesc').style.marginTop = "-2%";
document.getElementById('savDesc1').style.marginTop = "25%";
document.getElementById('savDesc1').style.opacity = "1";
document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('savDesc').style.marginTop = "17%";
// document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('savDesc1').style.opacity = "0";
document.getElementById('savDesc').style.opacity = "1";
}
</script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>

For the setInterval function in slideShow(), put either
setInterval('animate()', 1000);
Or
setInterval(animate, 1000);

Develop Reference

JavaScript is the programming language of the Web.

create loader using css - javascript

Related

showing the information with mouse hover

Move in Text animation visible outside div

How to make a fixed sidebar stop at the end of a container

clipping labels with z-index

Div Slideshow (html, css, js)

Categories

Resources