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>
Related
I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.
This is how it looks like:
I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)
I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...
Index.html :
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 1;
background-image: url("hero-img.jpeg");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
}
.text span {
position: relative;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Text On Scroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
<script>
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
</script>
</body>
</html>
You need to commented highlight css property on class .image-container{overflow: hidden; z-index: 1;} and increase top:50% to top:70% on class .text.text-dark{top: 70%;}
Note: Check on Full page
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
/* overflow: hidden; */
/* z-index: 1; */
background-image: url("https://i.stack.imgur.com/fcbpv.jpg?s=48&g=1");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
top: 70%;
}
.text span {
position: relative;
display: block;
}
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
This question already has answers here:
onclick calling hide-div function not working
(3 answers)
JavaScript function close() {} [duplicate]
(3 answers)
Closed 4 years ago.
i'm making a cookie clicker, and the shop opens fine. The problem is, it doesn't close. There are two functions: the opener, and the closer. Since the opener is being hidden, then the closer opens. I don't know why this isn't really working, and not closing. Again, the opener works fine like it is supposed to, but the closer doesn't do anything at all. I even tried using console.log it just doesn't run the function. Thanks Here is my code:
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function close() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="close();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
It looks like "close" might be a reserve word. I changed the function name to "closed" and updated the reference in the button and it's working.
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function closed() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="closed();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
Simply rename the function to something else than close() since it is a reserved word for closing the window.
From the following page:
In addition to the above reserved words, you'd better avoid the following identifiers as names of JavaScript variables. These are predefined names of implementation-dependent JavaScript objects, methods, or properties (and, arguably, some should have been reserved words): ... close ...
Here is your code with close() renamed to closeShop().
var clicks = 0;
var newthing;
var deg;
function add() {
clicks = clicks + 1;
newthing = 20 * clicks;
deg = newthing + "deg"
document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}
function toggleshop() {
document.getElementById('shop').classList.toggle('hide');
document.getElementById('toggler1').classList.toggle('hide');
}
function closeShop() {
console.log('asdf');
document.getElementById('shop').classList.toggle('hide');
console.log('asdfad');
document.getElementById('toggler1').classList.toggle('hide');
}
body {
background: linear-gradient(#ff8080, lightgreen, skyblue);
height: 100vw;
text-align: center;
}
h1 {}
.cookie {
margin-top: 0px;
background-image: url(cookie.png);
padding: 150px;
display: inline-block;
color: black;
background-position: center;
background-repeat: no-repeat;
margin: auto;
transition: 1s;
position: relative;
text-align: center;
margin-right: auto;
}
.cookie:hover {
border: 2px solid black;
border-radius: 1000000000px;
/* padding-left: -10px;
padding-top: 180px; */
}
#inner {
max-width: 50%;
margin: auto;
}
#inner:hover {}
#shop {
width: 75%;
border: 2px solid black;
margin: auto;
margin-top: 90px;
}
#row1 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
#row2 {
width: 49%;
border: 1px solid black;
height: 300px;
display: inline-block;
}
button {
width: 75%;
background-color: black;
color: white;
height: 10%;
font-size: 100%;
cursor: pointer;
}
.hide {
display: none;
}
#shop {
background-color: white;
position: relative;
z-index: 10;
bottom: 400px;
opacity: .9;
}
.hide1 {}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Baker</h1>
<p>Click the Cookie to make cookies!</p>
<div class="cookie" onclick="add();">
<h1 id="inner">Click Me!</h1>
</div>
<button onclick="toggleshop();" id="toggler1">Open Shop</button>
<div id="shop" class="hide">
<h1>Shop</h1>
<button onclick="closeShop();">Close Shop</button>
<div id="row1">
<h2>Click Multipliers:</h2>
<button>2x per click</button>
<button>3x per click</button>
<button>5x per click</button>
<button>10x per click</button>
<button>15x per click</button>
</div>
<div id="row2">
<h2>Auto Clickers</h2>
<button>+1 per second</button>
<button>+2 per second</button>
<button>+3 per second</button>
<button>+5 per second</button>
<button>+10 per second</button>
</div>
</div>
</body>
</html>
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/
Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ัั-ะพัั]</label>
<label for="in-2">Perfect World [ัั-ะพัั]</label>
<label for="in-3">Lineage 2 [ัั-ะพัั]</label>
</div>
</div>
</div>
See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ัั-ะพัั]</label>
<label for="in-2">Perfect World [ัั-ะพัั]</label>
<label for="in-3">Lineage 2 [ัั-ะพัั]</label>
</div>
</div>
</div>
My goal is to have five or so divs inside a parent div. When a div is clicked it should expand over the other divs. What confuses me is how to get said div to expand above the other divs so when the reset/back/close button is clicked all of the divs are shown once again.
When hovered, the div should expand slightly.
The parent container is 1900 by 500.
My code:
.one {
height: 100%;
width: 20%;
background-color: #ffccaa;
float: left;
}
.two {
height: 100%;
width: 20%;
background-color: #ffffcc;
float: left;
}
.three {
height: 100%;
width: 20%;
background-color: #aabbcc;
float: left;
}
.four {
height: 100%;
width: 20%;
background-color: #cccccc;
float: left;
}
.five {
height: 100%;
width: 20%;
background-color: #ff11bb;
float: left;
}
* {margin: 0; padding: 0;}
.header {height: 50vh; width: 100vw; background-color: #000;}
.navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
.logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
.content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
.footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/file.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="navi">
<div class="logo"></div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
In this example the clicked div is given 100% width and its siblings have their width removed. The transition gives a smooth animation.
Create the hover with the :hover pseudo class on the div. In this example, the div is scaled slightly using the transform scale property like this:
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
The scale is removed when selected with .selected:hover { transform: scale(1) }
Working Example
Note: I have changed all the ids to classes and condensed all the duplicate styles into body > div; all the direct div children of body have the same width, height, transition, and are floated to the left.
$('body > div').on('click', function() {
$(this).toggleClass('selected').siblings().toggleClass('hide');
});
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body > div {
transition: all 0.3s;
float: left;
height: 100%;
width: 20%;
}
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
.one {
background-color: #ffccaa;
}
.two {
background-color: #ffffcc;
}
.three {
background-color: #aabbcc;
}
.four {
background-color: #cccccc;
}
.five {
background-color: #ff11bb;
}
.selected {
width: 100%;
}
.selected:hover {
transform: scale(1);
}
.hide {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>