How can I hide the list of products, and show the results only when searching using the search bar?
Every time I hide the list of products, when I search the entire list appears and not only the search result.
I want to show only the search result when searching using the search bar.
function search() {
var searchBar, ProductsList, Products, ProductsTitle, TextValue, Element
searchBar = document.getElementById('searchBar').value.toUpperCase()
ProductsList = document.getElementById('product-list')
Products = document.querySelectorAll('.product')
ProductsTitle = ProductsList.getElementsByTagName('h2')
for (let i = 0; i < ProductsTitle.length; i++) {
TextValue = Products[i].getElementsByTagName('h2')[0];
if (TextValue) {
Element = TextValue.textContent || e.innerHTML
if (Element.toUpperCase().indexOf(searchBar) > -1) {
Products[i].style.display = ""
} else {
Products[i].style.display = "none"
}
}
}
}
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
position: absolute;
top: 50px;
z-index: 2;
}
.product {
float: right;
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>
You can use classList in parent .products
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
When class is active the wrapper as display:flex
Note: I improved a bit your code
const searchBar = document.getElementById('searchBar')
function search() {
const searchBarValue = document.getElementById('searchBar').value.toUpperCase()
const productsList = document.getElementById('product-list')
const products = document.querySelectorAll('.product')
const productsTitle = productsList.getElementsByTagName('h2')
searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')
for (let i = 0; i < productsTitle.length; i++) {
const textValue = products[i].getElementsByTagName('h2')[0];
if (textValue) {
const element = textValue.textContent.toUpperCase()
products[i].style.display = element.indexOf(searchBarValue) > -1 ? "" : "none"
}
}
}
searchBar.addEventListener('keyup', search)
.search-result {
max-width: max-content;
background-color: rgba(0, 0, 0, 0.6);
height: max-content;
}
.products {
padding: 10px;
width: 100%;
display: none;
position: absolute;
top: 50px;
z-index: 2;
}
.products.active {
display: flex;
flex-direction: column;
}
.product {
display: flex;
align-items: center;
direction: rtl;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
border-bottom: 2px solid red;
}
.product text {
float: left;
}
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px;
}
.search input {
border-radius: 20px 0px 0px 20px;
outline: none;
width: 250px;
border-color: red;
padding-left: 20px;
}
.search button {
border-radius: 0px 20px 20px 0px;
padding: 5px 20px;
background-color: red;
color: white;
font-size: 1.2rem;
border-color: red;
cursor: pointer;
outline: none;
border: none;
}
<div class="search">
<input id="searchBar" type="text" placeholder="Search">
<button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
<img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
<div class="product">
<img src="images/img/2.png" alt="" style="width:150px;">
<div class="text">
<h2>Mango</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/3.png" alt="" style="width:150px;">
<div class="text">
<h2>pomegranate</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/4.png" alt="" style="width:150px;">
<div class="text">
<h2>Grape</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/5.png" alt="" style="width:150px;">
<div class="text">
<h2>apple</h2>
<h4>1.50€</h4>
</div>
</div>
<div class="product">
<img src="images/img/6.png" alt="" style="width:150px;">
<div class="text">
<h2>fig</h2>
<h4>1.50€</h4>
</div>
</div>
</div>
Related
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
//jshint esversion: 6
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', {
day: 'numeric',
month: 'long',
year: 'numeric'
});
var numberOfbuttons = document.querySelectorAll(".r").length;
console.log(numberOfbuttons);
for (i = 0; i < numberOfbuttons; i++) {
document.querySelectorAll(".r")[i].onmouseover = function() {
mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function() {
mouseOut([i]);
};
}
function mouseOut(key) {
document.querySelectorAll(".r")[key].style.opacity = 0;
}
function mouseOver(key) {
document.querySelectorAll(".r")[key].style.opacity = 1;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/bg4.jpg);
background-size: cover;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
span {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
h1 {
/* width: 580px; */
font-family: 'Sofia', cursive;
font-size: 3.4rem;
text-align: center;
margin: 10px auto;
padding-top: 15px;
padding-bottom: 15px;
}
h2 {
font-family: 'Sofia', cursive;
font-size: 2rem;
}
#btn1 {
opacity: 0;
}
#btn2 {
opacity: 0;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
}
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
#no2 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
#no3 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 8px;
}
#no4 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
margin-top: 9px;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.container2 {
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container3 {
width: 1100px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.container4 {
width: 1300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
text-align: center;
margin: auto;
font-weight: bold;
font-size: 11px;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
.white_bg {
background-color: white;
}
.container1_row4 {
display: flex;
justify-content: center;
margin-left: 240px;
position: relative;
right: 10px;
}
.container2_row4 {
display: flex;
justify-content: center;
margin-left: 35px;
margin-right: 150px;
position: relative;
right: 25px;
}
.container3_row4 {
display: flex;
justify-content: center;
margin-right: 240px;
}
.level1 {
height: 3px;
width: 110px;
border-style: hidden solid solid solid;
border-width: thick;
margin-left: 230px;
}
.oblique1 {
width: 88px;
transform: rotate(-30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique2 {
width: 88px;
transform: rotate(30deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.oblique_row {
display: flex;
margin-left: 200px;
margin-top: 17px;
}
.line_container2 {
display: flex;
}
.first_arrow_row2 {
position: relative;
right: 125px;
}
.second_arrow_row2 {
position: relative;
right: 150px;
}
.second_arrow_row2>.oblique_row>.oblique1 {
border-style: hidden;
}
.line_container3 {
display: flex;
}
.line2 {
width: 45px;
transform: rotate(90deg);
border-width: thick;
border-style: hidden hidden solid hidden;
}
.first_arrow_row3 {
position: relative;
right: 165px;
}
.second_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3 {
position: relative;
right: 295px;
}
.third_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.second_arrow_row3>.oblique_row>.line2 {
position: relative;
left: 70px;
}
.first_arrow_row3>.oblique_row {
position: relative;
right: 25px
}
.first_arrow_row3>.level1 {
position: relative;
left: 60px
}
.first_arrow_row3>.oblique_row>.oblique1 {
width: 155px;
transform: rotate(344deg);
}
.first_arrow_row3>.oblique_row>.oblique2 {
width: 155px;
transform: rotate(16deg);
}
#datetime {
text-align: center;
}
<link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
<div class="container1">
<h1>_ _ _ Family tree _ _ _</h1>
<div id="no1">
<div class="tree homer">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
<span>
Homer Simpson
</span>
</div>
<div class="tree marge">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
<span>
Marge Simpson
</span>
</div>
</div>
<div class="line_container1">
<div class="level1"></div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
<div class="container2">
<div id="no2">
<div class="tree">
<img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
<button id="btn3" class="refresh r"></button>
<span>
Bart Simpson
</span>
</div>
<div class="tree">
<img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
<button id="btn4" class="refresh r"></button>
<span>
Lisa Simpson
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
<button id="btn5" class="refresh r"></button>
<span>
Abraham Simpson
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
<button id="btn6" class="refresh r"></button>
<span>
Maggie Simpson
</span>
</div>
</div>
<div class="line_container2">
<div class="first_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row2">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="oblique2"></div>
</div>
</div>
</div>
</div>
<div class="container3">
<div id="no3">
<div class="tree">
<img class="white_bg" src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
<button id="btn7" class="refresh r"></button>
<span>
Ned Flanders
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
<button id="btn8" class="refresh r"></button>
<span>
Elizabeth Hoover
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
<button id="btn9" class="refresh r"></button>
<span>
Seymour Skinner
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://www.personality-database.com/profile_images/20160.png">
<button id="btn10" class="refresh r"></button>
<span> Edna Krabappel
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
<button id="btn11" class="refresh r"></button>
<span>
Barney Gumble
</span>
</div>
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
<button id="btn12" class="refresh r"></button>
<span>
Selma Bouvier
</span>
</div>
</div>
<div class="line_container3">
<div class="first_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="oblique1"></div>
<div class="line2"></div>
<div class="oblique2"></div>
</div>
</div>
<div class="second_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
<div class="third_arrow_row3">
<div class="level1"> </div>
<div class="oblique_row">
<div class="line2"></div>
</div>
</div>
</div>
</div>
<div class="container4">
<div id="no4">
<div class="container1_row4">
<div class="tree">
<img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
<button id="btn13" class="refresh r"></button>
<span>
Kent Brockman
</span>
</div>
<div class="tree">
<img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
<button id="btn14" class="refresh r"></button>
<span>
Mayor Quimby
</span>
</div>
<div class="tree">
<img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
<button id="btn15" class="refresh r"></button>
<span>
Sideshow Bob
</span>
</div>
</div>
<div class="container2_row4">
<div class="tree">
<img class="white_bg" src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
<button id="btn16" class="refresh r"></button>
<span>
Clancy Wiggum
</span>
</div>
</div>
<div class="container3_row4">
<div class="tree">
<img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
<button id="btn17" class="refresh r"></button>
<span>
Nikki McKenna
</span>
</div>
<div class="tree">
<img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
<button id="btn18" class="refresh r"></button>
<span>
Milhouse Van Houten
</span>
</div>
</div>
</div>
</div>
<div class="datetime">
<h2 id="datetime"></h2>
</div>
<!-- script loaded here -->
I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly.
It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)
and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);
Probably if you convert the NodeList to a proper Array the code is cleaner and less prone to errors. something like:
Array.from(document.querySelectorAll(".r"))
.forEach(el => {
// I'd rather user el.addEventListener("mouseover",...
el.onmouseover = () => el.style.opacity = 0;
el.onmouseout = () => el.style.opacity = 1;
});
How to add page break automatically when the page will be printed, I use jspdf plugin in vuejs 2, is it possible to add page break using those plugins?
Currently, the 2nd div appears broken in the exported file hence I would like to have the div and footer will appear from the next page.
Here's my code:
.final-proof-container {
width: 1296px;
height: 775px;
/* background-color: #e8e8e8; */
border-top: 6px solid #383434;
border-left: 6px solid #383434;
border-right: 6px solid #383434;
/* padding: 10px 10px 10px 10px; */
/* display: inline-flex;
flex-direction: column;
flex-wrap: wrap; */
}
.final-proof-content {
/* width: 330px; */
min-height: 350px;
background-color: #474747;
display: flex;
flex-direction: row;
color: white;
border-radius: 5%;
/* margin-left: 8px;
margin-right: 4px; */
font-weight: 400;
font-family: "Open Sans", sans-serif;
font-size: 12px;
/* padding: 10px 10px 10px 10px; */
/* margin: 10px 10px 10px 10px; */
/* margin-bottom: 10px; */
}
.material-type {
display: flex;
flex-direction: row;
align-items: center;
}
.left-content {
width: 60%;
padding-top: 10px;
padding-left: 10px;
}
.right-content {
width: 40%;
padding-top: 10px;
padding-left: 5px;
padding-right: 10px;
}
.right-content img {
width: 100%;
height: 50%;
}
.dimensions {
list-style: none;
}
.option-logo {
width: 20px;
height: 12px;
}
.material-circle {
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
}
.final-proof-footer {
background-color: black;
width: 1296px;
}
.top-section {
background-color: #303030;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
color: white;
font-weight: bolder;
font-family: "Open Sans", sans-serif;
}
.bottom-section {
display: flex;
flex-direction: row;
color: white;
flex-wrap: wrap;
justify-content: center;
height: 175px;
}
.logo {
width: 20%;
display: flex;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
min-width: 300px;
}
.order {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.location {
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-right: 1.5px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
flex-wrap: wrap;
min-width: 300px;
}
.shipping {
width: 26.8%;
display: flex;
flex-direction: row;
align-items: center;
border-right: 4px solid #686767;
border-top: 3px solid #686767;
border-left: 3px solid #686767;
border-bottom: 3px solid #686767;
justify-content: center;
flex-wrap: wrap;
}
.order img {
width: 40px;
height: 40px;
}
.location img {
width: 40px;
height: 40px;
}
.shipping img {
width: 40px;
height: 40px;
}
.text-content {
display: flex;
flex-direction: column;
line-height: 0.1;
font-size: 14px;
}
.order-type {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-weight: bolder;
font-size: 20px;
text-align: center;
margin-right: 30px;
}
.logo img {
width: 200px;
height: 150px;
}
<template>
<div>
<v-btn color="primary" #click="generateReport">Generate</v-btn>
<div ref="order_details">
<div class="final-proof-container">
<v-layout row wrap style="padding: 10px !important">
<v-flex
xs4
md4
lg4
v-for="(item, index) in order.carts"
:key="index"
class="pa-0"
style="margin-bottom: 10px !important"
>
<div class="final-proof-content" style="margin: 10px !important">
<div class="left-content">
<p>Product(s): {{ getSectionNo(item) }}</p>
<p class="mb-1">Material Type:</p>
<div class="materia-type mb-2">
<span>
<div
class="material-circle"
:style="`background-color:${item.material.material_type.color}`"
></div>
{{ item.material.material_type.name }}
</span>
</div>
<p class="mb-1">Dimensions:</p>
<ul
v-if="Array.isArray(getDimensions(item))"
class="dimensions mb-2"
>
<li
v-for="(dimension, key) in getDimensions(item)"
:key="key"
>
{{ dimension.section_no }} - W: {{ dimension.width }}"| H:
{{ dimension.height }}"
</li>
</ul>
<p class="mb-1">Options:</p>
<!--Addition of option list in table layout-->
<table class="option-list" id="option-list">
<tr>
<td>
<img
src="/assets/img/price_point.png"
class="option-logo"
alt="Logo"
/>
</td>
<td><p class="mb-1 pl-1">Price Point: 2/$4.00</p></td>
</tr>
</table>
<table class="option-list">
<tr>
<td>
<img
src="/assets/img/comments.png"
width="20"
height="15"
alt="Comments"
/>
</td>
<td>
<p class="mb-1 pl-1">
Comments/Text: "Thanks for Shopping"
</p>
</td>
</tr>
</table>
<table class="option-list">
<tr>
<td>
<img
src="/assets/img/image.png"
width="20"
height="15"
alt="Logo"
/>
</td>
<td><p class="mb-1 pl-1">Logo: logo.png</p></td>
</tr>
</table>
<table class="quantity-table mt-2">
<tr>
<td>
<img
src="/assets/img/qty.png"
width="21"
height="8"
alt="Quantity"
/>
</td>
<td><p class="mb-2 pl-1">Quantity: 2</p></td>
</tr>
</table>
</div>
<div class="right-content">
<!-- <img :src="item.product.img_path" alt="" /> -->
</div>
</div>
</v-flex>
</v-layout>
</div>
<!-- footer -->
<div class="final-proof-footer">
<div class="top-section">
<div style="margin-top: 12px; margin-bottom: 8px">
ORDER # MEC_EO-150454_AbingstonStopNGas
</div>
<div style="margin-top: 12px; margin-bottom: 10px">
<!-- PAGE <span style="margin-left: 8px">1</span> OF 1 -->
</div>
<div style="margin-top: 12px; margin-bottom: 10px">
Designer: Ryan Strawn
</div>
</div>
<div class="bottom-section">
<div class="logo">
<img src="/assets/img/ww.png" alt="" />
</div>
<div class="order">
<div class="order-type">
<img src="/assets/img/man.png" alt="" />
<div style="margin-top: 12px">Ordered By</div>
</div>
<div class="text-content">
<p>Johnboy VanSampson</p>
<p>johnboy#cocacola.com</p>
<p>720-555-5698</p>
</div>
</div>
<div class="location">
<div class="order-type">
<img src="/assets/img/shop.png" alt="" />
<div style="margin-top: 12px">Project</div>
<div>Location</div>
</div>
<div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div>
</div>
<div class="shipping">
<div class="order-type">
<img src="/assets/img/car.png" alt="" />
<div style="margin-top: 12px">Shipping</div>
</div>
<div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { jsPDF } from "jspdf";
export default {
props: {
value: {
type: Object,
},
},
data() {
return {
order: {},
htmlToPdfOptions: {
html2canvas: {
useCORS: true,
scale: 2,
},
jsPDF: {
// unit: "px",
format: "letter",
orientation: "landscape",
},
},
};
},
watch: {
value(val) {
this.order = val;
},
},
mounted() {
const vm = this;
// vm.generateReport();
},
methods: {
async generateReport() {
const vm = this;
const doc = new jsPDF({
orientation: "l",
unit: "px",
format: "letter",
hotfixes: ["px_scaling"],
compress: true,
});
doc.html(vm.$refs.order_details, {
margin: 10,
autoPaging: "slice",
html2canvas: {
scale: 0.8,
},
pagesplit: true,
callback: function (doc) {
doc.save("test.pdf");
},
});
},
},
};
</script>
atm, I don't see any property or function to support page break when printing HTML element, you just can do it manually via doc.addPage().
To add header and footer on each page, you can iterate each page of doc, then attach your header and footer to suitable position.
For example:
for (let i = 1; i <= doc.getNumberOfPages(); i++) {
doc.setPage(i)
doc.text('This is header', 10, 30)
}
I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!
I have 4 buttons which when i click it, it will slide down the content bar beneath it but when i do the, the 3 others button will slide down unintentionally as well. I wanted the buttons to stay onto the container, so how do i do it?
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
display: inline-block;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>
Just add vertical-align: top; to div which contains the button and the content (.btn1,.btn2,.btn3,.btn4 ... )
OR use float:left instead of display:inline-block;
Note: you could have used just one class and applied it to all the div instead of using for each div a different class
$(document).ready(function() {
$(".click").on("click", function() {
var clickid = $(this).attr("data-panbodnum");
$("." + clickid).slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody1,
.panbody2,
.panbody3,
.panbody4 {
display: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn1,
.btn2,
.btn3,
.btn4 {
float: left;
}
.panhead1,
.panhead2,
.panhead3,
.panhead4 {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn1">
<div class="panhead1">
<a class="click" data-panbodnum="panbody1" href="#">News</a>
</div>
<div class="panbody1">
<a id="click1" href="#">Content 1</a>
</div>
</div>
<div class="btn2">
<div class="panhead2">
<a class="click" data-panbodnum="panbody2" href="#">Contact</a>
</div>
<div class="panbody2">
<a id="click2" href="#">Content 2</a>
</div>
</div>
<div class="btn3">
<div class="panhead3">
<a class="click" data-panbodnum="panbody3" href="#">About</a>
</div>
<div class="panbody3">
<a id="click3" href="#">Content 3</a>
</div>
</div>
<div class="btn4">
<div class="panhead4">
<a class="click" data-panbodnum="panbody4" href="#">Forum</a>
</div>
<div class="panbody4">
<a id="click4" href="#">Content 4</a>
</div>
</div>
</div>
</div>
Before addressing your question, you should note that you can make a couple of improvements to your HTML. Firstly, you're completely missing the point of classes. They are supposed to group elements together, yet making them incremental goes entirely against this. Give all the groups of elements the same class. You can then use DOM traversal to find the required element in the click event handler.
Secondly, you're also repeating the same id on several elements when they should be unique.
To fix your problem, place position: absolute on the .panbody in your CSS:
$(document).ready(function() {
$(".click").on("click", function() {
$(this).closest('.btn').find('.panbody').slideToggle(300);
});
});
html {
font-family: Open Sans, sans-serif;
}
.btn {
border-right: 1px solid black;
}
a {
text-decoration: none;
color: #353535;
}
.panbody {
display: none;
position: absolute;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.navcon {
max-width: 960px;
margin: 0 auto;
align-items: center;
position: relative;
height: 46px;
flex-wrap: wrap;
border: 1px solid black;
}
.btn {
display: inline-block;
}
.panhead {
height: 46px;
line-height: 46px;
vertical-align: middle;
color: #353535;
font-weight: 400;
padding: 0 15px;
text-align: center;
}
.navbar {
font-size: 14px;
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="navbar">
<div class="navcon">
<div class="btn">
<div class="panhead">
<a class="click" href="#">News</a>
</div>
<div class="panbody">
Content 1
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Contact</a>
</div>
<div class="panbody">
Content 2
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">About</a>
</div>
<div class="panbody">
Content 3
</div>
</div>
<div class="btn">
<div class="panhead">
<a class="click" href="#">Forum</a>
</div>
<div class="panbody">
Content 4
</div>
</div>
</div>
</div>
I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle
1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID