Replace div content when selecting - javascript

I'm working on palette board project and struggling when changing to different theme.
Initial page will have Warm color palette, but I want to change this after clicking All theme.
Users will have options to choose different theme if you tap the dropdown menu just like the image I posted.
Below you will find images that I imagine.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">×</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name" id="">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

it can be implemented by using Jquery click and addClass.
https://api.jquery.com/click/
https://api.jquery.com/addclass/
http://api.jquery.com/toggleclass/
after clicking modal item, the written jquery should add or change top div's class.
like
<div class'board-pages [theme]'>
... content
</div>
[theme] and its children's css should be defined as well.
or this solution could be another option
Replacing css file on the fly (and apply the new style to the page)

Related

Progress Indicator color change depending on the section background color (fullpage.js)

I have a fullpage.js imported into my code and a progress bar indicator (div class="progress-section"). My question is, how do I change the progress bar indicator depending on the background color of a section? (E.g. progress indicator in black when section background color is white, and indicator in white when section bg is black.) I appreciate you all so much :)
I have added the code below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Aaron</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<!-- Navigation -->
<!-- <header>
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li> CONTACT</li>
</ul>
</nav>
</header> -->
<div class="progress-section">
<div class="progress-bar-wrap" data-bg="fuchsia">
<div class="progress-bar" ></div>
</div>
<div class="progress-num"></div>
</div>
<div>
<div id="fullpage">
<div class="section one">
Section ONE
</div>
<div class="section two">
Section TWO
</div>
<div class="section three">
Section THREE
</div>
<div class="section four">
Section FOUR
</div>
</div>
</div>
<!-- Main Container Ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="scripts.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color:#111111;
color: white;
}
body::-webkit-scrollbar {
display: none;
}
.progress-section {
position: fixed;
right: 50px;
top: 40%;
width: 60px;
height: 20%;
display: flex;
justify-content: space-between;
will-change: transform;
transition: 0.3s ease-out;
z-index: 1;
}
.progress-bar-wrap {
position: relative;
width: 1px;
border: 0;
border-radius: 10px;
overflow: hidden;
background-color: rgb(70, 70, 70);
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background-color: rgb(189, 189, 189);
}
.white {
background: white;
}
.one {
background: gray;
}
.two {
background: green;
}
.three {
background: blue;
}
.four {
background: purple;
}
#fullpage {
height: 1000px;
}
JAVASCRIPT
let progressSection = document.querySelector('.progress-section');
let progressBar = document.querySelector('.progress-bar');
let progressNum = document.querySelector('.progress-num');
let x, y;
function updateProgressBar() {
progressBar.style.height = `${getScrollPercentage()}%`;
progressNum.innerText = `${Math.ceil(getScrollPercentage())}%`
requestAnimationFrame(updateProgressBar)
}
function getScrollPercentage() {
return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100)
};
updateProgressBar()
new fullpage('#fullpage', {
licenseKey: 'LICENSE',
autoScrolling: true,
scrollBar: true,
})
You can use fullpage.js state classes for that.
For example:
/* On section 2 slide 0 */
.fp-viewing-page2-0 #nav{
color: red
}
Here's a working example:
https://codepen.io/alvarotrigo/pen/VwbxbYR

How to show information in the back of an image?

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 box 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>
UPDATE 1
OP modified question to reflect actual requirements.
New answer:
all your .items need to look like the first .flip-card.
you are combing some previous try (items) with a new try (flipcard) but forgot to properly adjust the CSS and the JS to reflect the changes. I changes the item eventlistener to work with flipcard and flipcard ONLY.
modified second <h1> in the flipcard, <h1 id="item1">
Modified the calculations in the flipcard.onclick to show the amounts
The code of this answer is from your codepen modified with my changes.
UPDATE 2
Major HTML change: turned all items into flipcards. One of the problems was that you assigned values to elements that cannot have values. jQuery val() function only operates on elements that can have values like <input>
removed all references to item from CSS
UPDATE 3
Fixed NaN problem, flipcard child elements needed to ignore click event (CSS), as JS got the wrong element reference. CSS and JS corrected. Also added .price in HTML for JS to easily find the price tag.
Leaving finetuning and this 'n thats to you...
$(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;
var txtArea = $("#txtArea");
var orderList = "";
// onclick, CHANGED
// Events, CHANGED
$(".flip-card").click(function(event) {
var priceTag = $(event.target).find('.price');
var price = Number(priceTag.val());
Amount += price;
orderList += price + "$ - " + priceTag[0].id + "\n";
txtArea.text(orderList);
// Only round the final value
Total.html("Total: " + Amount.toFixed(2) + "$");
});
//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;
}
/* MODIFIED */
/* IDs starting with 'flip' */
[id^="flip"] { background-size: cover }
/* flipcard front images */
#flip1 { background-image: url("https://i.postimg.cc/2yCtXwNn/img1.jpg") }
#flip2 { background-image: url("https://i.postimg.cc/vTXKRVGk/img2.jpg") }
#flip3 { background-image: url("https://i.postimg.cc/J7QvH9jx/img3.jpg") }
#flip4 { background-image: url("https://i.postimg.cc/hh6pg86y/img4.jpg") }
#flip5 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
#flip6 { background-image: url("https://i.postimg.cc/vZ4NjTk2/img5.jpg") }
/**/
/* ADDED */
.flip-card * {
/*
needed for jQuery onclick,
flipcard children (h1,#item,etc) must ignore clicksss.
*/
pointer-events: none;
}
[id^="item"] {
width: 300px;
border: none;
background-color: transparent;
color: currentColor;
font-size: 2em;
font-weight: bold;
text-align: center
}
#txtArea {
width: 60%;
height: 150px;
}
.last-footer-line {
width: 100%;
height: auto;
margin-bottom: 20px;
}
/* OBSOLETE
.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);
}
/* little debug helper */
[outlines="1"] * { outline: 1px dashed Crimson }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body outlines="0">
<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 id="flip1" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Espresso</h1>
<input class="price" id="item1" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip2" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Chocolat Milk</h1>
<input class="price" id="item2" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip3" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cappuchino</h1>
<input class="price" id="item3" type="text" readonly>
</div>
</div>
</div>
</div>
<div class="row2">
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip4" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Coffee</h1>
<input class="price" id="item4" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip5" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cookie 1</h1>
<input class="price" id="item5" type="text" readonly>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div id="flip6" class="flip-card-front">
<div class="flip"></div>
</div>
<div class="flip-card-back">
<h1>Cookie 2</h1>
<input class="price" id="item6" type="text" readonly>
</div>
</div>
</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>
</div>
</body>

Trying to use a swipe.js function on a page

I write a webapp using a swipe.js function to swap between the two pages. Problem is that it that i wont swipe trough the first page, if i remove the html code to the first page it will swipe back and forth without problems between the two pages. I cant load the second page when the first page is on. Anyone who knows what the problem could be?
code:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles1</h1>
</div>
<div data-role="content">
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
</head>
<body>
<div class="colunm">
<h>
<p>
<p>
<div class="pie">
<span class="overlay"></span>
</div>
<style>
.pie {
margin: auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
overflow: hidden;
}
.pie::after {
transform: rotate({{temp_x}}deg); /* set rotation degree */
background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
transform-origin: center bottom;
}
.pie::before {
border: 2px solid black;
}
.pie .overlay{
top: 8px; /* match border width */
left: 8px; /* match border width */
width: calc(100% - 16px); /* match border width times 2 */
height: calc(200% - 10px); /* match border width times 2 */
border-radius: 100%;
background: #062F43;
z-index: 1; /* move it on top of the pseudo elements */
}
.pie *,
.pie::before,
.pie::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;
}
</style>
</body>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2> </center>
<p> <center style="color: white;">14:42</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2> </center>
<p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2> </center>
<p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2> </center>
<head>
<style="color=white">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head><body onload="startTime()">
<div> <center id="txt"></div> </center>
</div>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
<style>
.button {
background-color: #07969E;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {background-color: #008a93}
.button:active {
background-color: #008a93;
box-shadow: #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<button class="button">Button</button>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2>
<center> <button class="button">Button</button> </center>
<style="color=white">
<div> <center id="txt"></div>
</div>
</div>
<div>
<div class="row">
</div>
<center div class="column1" align="cente">
<h2> <center style="color: #07969E;">Live graph</h2>
<h3> <center style="color: white;"> Click Me </h3>
</div>
<div id="sidebar">
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
</script>
</html>
You got your markup mixed up quite a tad there. There's multiple <head> and <body> tags while the standard only allows one of each.
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
You will need to reduce your code to a valid HTML document to make this work. It looks like you copied the source of multiple individual files into one, you have to combine the different elements, though.
Start off with the basic HTML structure
Copy all elements from the individual headparts into the <head>
Copy all <style> tags to the <head>
Copy all markup of each individual page into the <body> element
Copy all <script> tags to the <body>
While you do this, make sure to get rid of redundant code. The style tags look fairly close to each other, for example.

How do I maintain my menu, and footer in the same place while horizontal scrolling?

edit/update
I have updated my code and fixed some errors. Now I am trying to fix my footer to stay at the bottom, my menu will not center, and I am trying to have the gallery between header and footer without being clipped by the header. Everything was working until I added the horizontal scroll gallery.
I am trying to achieve the layout:
header top
menu in a line
content/horizontal scroll gallery middle
footer/social icons bottom
Please help
codepen link
/**********************************
General
**********************************/
body {
font-family: 'Roboto', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
/**********************************
Heading
**********************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 150px;
position:fixed;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Passion One', cursive;
margin: 15px 0;
font-size: 5em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Comfortaa', cursive;
font-size: em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************************
Navigatoin
**********************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
position: fixed;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**********************************
Body
**********************************/
#content {
height: 100%;
margin: 0 0 0 0;
top: 0;
}
/**********************************
Footer
**********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
position: fixed;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
.fttext {
text-align: center;
}
/**********************************
Colors
**********************************/
/* site body */
body {
background-color: #C9BD7C;
color: #5B0123;
}
/* green header */
header{
background: #5B0123;
border-color: #5B0123;
}
/* nav background on mobile devices */
nav {
background: #B41C42;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #C86347;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #F8D295;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<!-- content goes here-->
<body>
<header>
<a href="index.html" id="logo">
<h1>Natalie Davis</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="content">
<div id="img-container">
<div class="picture_holder" style="width: 573px;">
<div class="picture" style="width: 543px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
<div class="captioning">
<div class="title">link - Test caption and link</div>
<div class="caption">stuff </div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1124px;">
<div class="picture" style="width: 1094px;">
<img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 382px;">
<div class="picture" style="width: 352px;">
<img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 439px;">
<div class="picture" style="width: 409px;">
<img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 752px;">
<div class="picture" style="width: 722px;">
<img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 1094px;">
<div class="picture" style="width: 1064px;">
<img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
<div class="captioning">
<div class="caption"><i>CAPTION</i></div>
</div>
</div>
</div>
<div class="picture_holder" style="width: 1525px;">
<div class="picture" style="width: 1495px;">
<img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<div class="picture_holder" style="width: 560px;">
<div class="picture" style="width: 530px;">
<img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
<div class="captioning"></div>
</div>
</div>
<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else
;
}
function wheel(event) {
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
#img-container {
width: 6450px;
}
#img-container #text {
float: left;
width: 675px;
}
#img-container #text p {
width: 600px;
}
#img-container .picture_holder {
float: left;
}
#img-container .picture {
/* padding-top: 100px; */
}
#img-container .captioning .title {
margin-top: 12px;
font-weight: bold;
}
#img-container .captioning .caption {}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</section>
</div>
<footer class="fttext">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
<p>© 2018 Natalie Davis.</p>
</footer>
</body>
</html>
Looking at the code you've posted, in your CSS, your menu styles were targeting an ID, whereas, in your HTML, your menu code had a class instead. Changing the CSS for menu to a class instead of an ID, the styles are then applied, and if the position is changed from absolute to fixed, it then behaves as desired.
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}

How to combine material tab's with swiper slider? Framework7

I'm working with Framework7.
Is it possible to combine the material tab's with the swiper slider?
I want to make tabs accessible over tabbing the tab-bar. And also want to swipe to the next “tab” by swiping left/right. Is that possible? I tried this, but it doesn't work for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Soziale Medien durchsuchen</title>
<link rel="stylesheet" href="css/framework7.material.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body>
<div class=“views”>
<div class=“view view-main”>
<div class=“pages”>
<div data-page=“home” class=“page toolbar-fixed navbar-fixed”>
<!— navi —>
<div class=“navbar”>
<div class=“navbar-inner”>
<div class=“center”>
<div class=“list-block”>
<div class=“item-inner”>
<div class=“item-input”>
<input type=“text” placeholder=“ Suchbegriff” style=“width: 100%; border-radius:5px; font-size: 13px;”>
</div>
</div>
</div>
</div>
</div><!— navbar inner —>
</div><!— navbar —>
<div class=“toolbar tabbar tabbar-scrollable”>
<div class=“toolbar-inner”>
<a href=“#tab-1” class=“tab-link active” style=“color: black;”>Link 1</a>
<a href=“#tab-2” class=“tab-link” style=“color: black;”>Link 2</a>
<a href=“#tab-3” class=“tab-link” style=“color: black;”>Link 3</a>
</div>
</div>
<div class=“page-content”>
<div class=“swiper-container”>
<div class=“swiper-wrapper”>
<!— Tabs —>
<div class=“tabs”>
<div id=“tab-1” class=“tab active swiper-slide”>
<div class=“content-block”>
content1
</div>
</div>
<div id=“tab-2” class=“tab swiper-slide”>
<div class=“content-block”>
content2
</div>
</div>
<div id=“tab-3” class=“tab swiper-slide”>
<div class=“content-block”>
content3
</div>
</div>
</div><!— Tabs ende —>
</div>
</div><!— swipe —>
</div><!— page content —>
</div><!— div class home —>
</div>
</div>
</div>
<script type=“text/javascript” src=“js/framework7.js”></script>
<script>
var myApp = new Framework7({
material: true,
statusbarOverlay: false
});
var mySwiper = new Framework7();
var mySwiper = mySwiper.swiper('.swiper-container', {
pagination:'.swiper-pagination'
});
</script>
<script type=“text/javascript” src=“cordova.js”></script>
</body>
Here is my custom CSS:
/* framework7.material.css custom */
.navbar, .toolbar {
background-color: #fff;
color: #000;
}
.tab-link {
color: #000;
font-size: 8px;
}
.tabbar a.tab-link,
.tabbar a.link {
font-size: 12px;
}
.item-input {
color: #000;
}
.center {
width: 100%;
}
/* eigene stylesheets */
.contactscontainer {
width: 100%;
}
.contactstext {
float: left;
width: 70%;
font-size: 13px;
vertical-align: top;
}
.contactsbutton {
float:right;
width: 15%;
vertical-align: top;
margin-top: -15px;
}
.mynetcontainer {
width: 100%;
vertical-align: top;
}
.myneticon {
width: 10%;
float: left;
vertical-align: top;}
.mynettext {
width: 90%;
float: right;
vertical-align: top;
}
.mediathekcontainer {
width: 100%;
}
.mediathekpic {
float: left;
width: 35%;
margin-top: 3px;
}
.mediathektext {
float: left;
width: 65%;
}
/* Swiper */
.swiper-container {
height: 100%;
}
.swiper-slide {
background:#fff;
}
.swiper-slide span {
text-align:center;
display:block;
margin:20px;
font-size:21px;
}

Categories