I have a problem with my code that I use for item descriptions in my Prestashop store. The point is that when I add a description in html to the store, I do not provide the "ALT" attribute of the photo. I have scripts that do this automatically.
Here is the html code that I add to the full description of the item:
<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">
After saving the changes, the code displayed in the browser looks like this:
<img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" alt="hearts icons vectors illustrations" width="200" height="300"><p class="alt">hearts-icons-vectors-illustrations.jpg</p>
The second part of the code that was added by the script is used to display the name of the photo when hovering over it.
And here is the problem. The point is that the script adds the same data that another script adds to the "ALT" of the photo. Without "-" and ".jpg" characters.
JS and CSS files are in the theme folder: "custom css" and "custom JS"
Here is the full code that I am using in my Prestashop store:
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
}
});
});
.img2 {
max-width: 100%;
height: 100%;
margin: 0;
padding: 0px;
column-count: max-width;
background-color: white;
}
.img-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.img {
display: block;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 5px solid transparent;
border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
transition: all 10ms linear;
transition-delay: 300ms;
text-align: center;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
text-align: center;
font-weight: 900;
color: white;
font-size: 150%;
border: 20px solid transparent;
margin-left: 1%;
margin-right: 1%;
text-shadow: 0 0 10px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">
How can I change/optimize the above codes so that the name of the photo is displayed without the "-" and ".jpg" signs after hovering the mouse cursor?
Here on hover it shows "undefined" on my website it shows "hearts-icons-vectors-illustrations.jpg" I want it to show without "-" and ".jpg".
Prestashop version 1.7.7.3.
it's showing undefined that's why i am doing it by adding innerHTML
$(".alt").html(altText.replace(/-/g, " "));
I just added this line in your code it will replace all - with space so output will be what you want "hearts icons vectors illustrations"
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function () {
$(this).after('<p class="alt">' + $(this).attr("alt") + "</p>");
});
$(document).ready(function () {
$("img").each(function () {
var $img = $(this);
var filename = $img.attr("src");
let text = filename
if (typeof attr == typeof undefined || attr == false) {
var altText = filename.substring(
filename.lastIndexOf("/") + 1,
filename.lastIndexOf(".")
);
altText = altText.replace("-", " ").replace(".jpg", "");
$img.attr("alt", altText);
// it's showing undefined that's why i am doing it by adding innerHTML
$(this).next().html(altText.replace(/-/g, " "));
}
});
});
.img2 {
max-width: 100%;
height: 100%;
margin: 0;
padding: 0px;
column-count: max-width;
background-color: white;
}
.img-wrap {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.img {
display: block;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 5px solid transparent;
border-image: linear-gradient(to right, green 25%, yellow 25%, yellow 50%,red 50%, red 75%, magenta 75%) 5;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
transition: all 10ms linear;
transition-delay: 300ms;
text-align: center;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
text-align: center;
font-weight: 900;
color: white;
font-size: 150%;
border: 20px solid transparent;
margin-left: 1%;
margin-right: 1%;
text-shadow: 0 0 10px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img2"><div class="img-wrap"><img class="img" src="https://static.vecteezy.com/system/resources/previews/000/547/596/original/hearts-icons-vectors-illustrations.jpg" width="200" height="300">
Related
How do I do this to the progress bar like below:
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
}
.detail-load-text {
position: absolute;
right: 0;
left: 0;
top: 10px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 17px;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="width: 80%;"></div>
</div>
<div class="detail-load-text">80%</div>
</div>
The progress bar I want to make is like the image I shared above. Can anyone help?
You could use the clip-path property to achieve your desired result. I included some dummy javascript in the snippet to simulate loading.
You can set --loading-color-primary and --loading-color-secondary to any two colors you'd like.
const front = document.getElementById('progress-front');
const back = document.getElementById('progress-back');
let progress = 0;
setInterval(() => {
front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`;
if(++progress >= 100) {
progress = 0;
}
front.innerHTML = back.innerHTML = progress + "%";
}, 50);
:root {
--loading-color-primary: purple;
--loading-color-secondary: white;
}
.progress {
position: relative;
display: flex;
font-size: 50px;
border: 2px solid var(--loading-color-primary);
overflow: hidden;
width: 100%;
}
.back {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: var(--loading-color-primary);
color: var(--loading-color-secondary);
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
width: 100%;
right: 0;
top: 0;
bottom: 0;
background: var(--loading-color-secondary);
color: var(--loading-color-primary);
}
<div class="progress">
<div class="back" id="progress-back">0%</div>
<div class="front" id="progress-front">0%</div>
</div>
This is an example of what you want to accomplish:
https://codepen.io/robinrendle/pen/wKqmbW
<div class="wrapper">
<div class="bg">
<div class="el"></div>
</div>
</div>
$loadingTime: 10s;
$color: rgb(255,0,0);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,255);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
The key item here is the mix-blend-mode property which defines how an element's content should blend with its background.
You can learn more about it here and here.
I used a different approach, where you can set a CSS variable to control the length of the loading progress as well as displaying the value.
Because I used a pseudo-class to display the value, I needed to use a number hack, using counter-reset on the ::after pseudo-element.
As for having the dark text turn white, you can use mix-blend-mode: color-dodge. It's not perfect, as you can see, but perhaps good enough?
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
/* ADDED */
width: calc(var(--progress) * 1%);
position: relative;
}
.detail-load > .detail-loading::after {
font-weight: 600;
font-size: 17px;
/* ADDED */
counter-reset: number-hack var(--progress);
content: counter(number-hack)"%";
position: absolute;
right: 0px;
top: 50%;
transform: translate(50%, -50%);
color: #d2b6ff;
mix-blend-mode: color-dodge;
}
.detail-load > .detail-loading.grey-text::after {
color: #b5b5b5;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="--progress: 30"></div>
</div>
</div>
<div class="detail-pop-item">
<div class="detail-load">
<div class="grey-text detail-loading" style="--progress: 60"></div>
</div>
</div>
Following Veselin's answer, you just need to change the color attributes as follows:
$color: rgb(255,0,0); becomes $color: rgb(255,0,255);
and
.el{
...
&:after {
...
color: rgb(0,255,255);
}
}
becomes
.el{
...
&:after {
...
color: rgb(0,255,0);
}
}
The result is:
$loadingTime: 10s;
$color: rgb(255,0,255);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,0);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
im in the process of taking two projects that i found on instagram. i am making a random color generator and on the side of the text it shows a clipboard button so i can or who ever can randomly generate a color and copy the hex code. i have went over the code and both projects and i am getting a "Uncaught TypeError: Cannot read property 'select' of null " in the console.
the project can be found at the following link https://codepen.io/nhmalbone0311/pen/KKmYQbQ.
let letters = "0123456789ABCDEF";
const body = document.querySelector("body");
const colorElement = document.querySelector("#color");
function getColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
body.style.backgroundColor = color;
colorElement.innerHTML = color;
}
function copyText() {
var copyText = document.getElementById("#color");
copyText.select();
document.execCommand("copy");
document.getElementById("notification").style.opacity = "1";
setTimeout(() => {
document.getElementById("notification").style.opacity = "0";
}, 1000);
}
console.log(copyText);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #494e6b;
transition: 0.1s;
}
/* p field */
.colors {
float: left;
margin-bottom: 20px;
font-size: 26px;
padding: 10px 57px;
text-align: center;
color: #fff;
background: #000;
}
/* btns */
.btn {
cursor: pointer;
width: 50px;
height: 47px;
border: none;
margin: 0 5px 0;
font-size: 25px;
}
.g-color {
padding: 5px 13px;
border: 3px solid #111;
letter-spacing: 1px;
outline: none;
font-size: 25px;
transition: 100ms ease-in-out;
cursor: pointer;
}
.g-color:hover {
outline: none;
color: red;
}
.tooltip {
position: relative;
display: flex;
align-item: center;
justify-content: center;
width: 180px;
height: 50px;
font-size: 20px;
padding: 10px;
border-radius: 10px;
bottom: 7rem;
left: 14rem;
color: #fff;
background: #98878f;
opacity: 0;
transition: .5s;
}
.tooltip:after {
position: absolute;
content: "";
width: 25px;
height: 25px;
top: -8rem;
right: 50px;
background: #985e6d;
transform: rotate(45deg);
}
<div class="container">
<p id="color" class="colors">#</p>
<button onclick="copyText()" class="btn"><i class="far fa-copy"></i></button>
<div class="generate-color">
<button onclick="getColor()" class="g-color">Generate Color</button>
</div>
<!-- notification -->
<div class="tooltip" id="notifaction">
<p>Text Copied!</p>
</div>
</div>
im using code pen as i do this as a hobby for now in its just easier for me to show my work off and have people me if i need it.
im just now working on getting out of tutorial hell and founding projects on the web in intergrading them into my own style and changing things up.
remove the # from the "#color" in var copyText = document.getElementById("#color");
Is there a way I can hard code a number into the code instead of having "Goals completed: " and the progress bar still complete based on percentage? I do not want the users to see "Goals Completed" or have a input bar where they enter a number. I want to do all of that behind the scenes.
What I am really trying to do is get rid of the whole "Goals Completed: (input box)" prompt. So that I, for example, can just hard code: goals = 69 and then the progress circle reacts and shows 60% in the middle and 69 of 115 goals completed AND the green circle on the outside matches that. I do not want the user to be able to enter anywhere how many goals were completed or see a input prompt. I want to only be able to modify the number of goals completed behind the scenes in the JS code.
Here is my current code:
document.querySelector('.goals').addEventListener('change', function() {
var goals = parseInt(this.value);
var circle = document.querySelector('circle');
var percentdiv = document.querySelector('.percent');
var completed = document.querySelector('.completed');
completed.innerHTML = goals;
var totaldiv = document.querySelector('.total');
var total = totaldiv.innerHTML;
var pc = goals * 100 / total;
var r = circle.getAttribute('r').replace('%', '') * percentdiv.clientWidth / 100; //actual radius of the circle
var c = Math.PI * (r * 2); //circumference is 2*pi*r
if (isNaN(goals)) {
pc = 100;
} else if (pc < 0) {
pc = 0;
} else if (pc > 100) {
pc = 100;
}
document.querySelector('.number h2').innerHTML = Math.floor(pc) + '<span>%</span>';
var length = pc * c / 100;
circle.style.strokeDasharray = length + ' ' + (c - length);
circle.style.strokeWidth = (length > 0) ? '5%' : 0;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border-color: transparent;
border-width: 0;
border-style: none;
rbox-shadow: inset 0 0 50px #000;
background-image: radial-gradient(#444 0%, #222 70%, transparent 70%, transparent 100%);
rbackground: #222;
z-index: 1000;
}
.percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.percent .number h2 {
color: #777;
font-weight: 700;
font-size: 40px;
transition: 0.5s;
}
.card:hover .percent .number h2 {
color: #fff;
font-size: 60px;
}
.percent .number h2 span {
font-size: 24px;
color: #777;
transition: 0.5s;
}
.card:hover .percent .number h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 40px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
svg {
width: 100%;
height: 100%;
z-index: 1000;
}
svg circle {
fill: none;
stroke-width: 0;
stroke-linecap: round;
stroke: #00ff43;
}
<div class="container">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="50%" cy="50%" r="47.5%"></circle>
</svg>
<div class="number">
<h2>0<span>%</span></h2>
</div>
</div>
<h2 class="text"><span class="completed">0</span> of <span class="total">115</span> Goals Completed</h2>
</div>
</div>
</div>
Goals completed: <input class="goals" type='number' />
Rather than having your logic for updating the circle stored in the event handler for the input, have it as a separate function which you can then call with any number, e.g. setGoals(50) would update the circle to say 50 of 115 goals completed and 43%.
You can then optionally include the input box to change the displayed value in the circle, or just call setGoals(<some number here>) anywhere in your code.
This gives you the code snippet:
function setGoals(goals) {
const circle = document.querySelector('circle');
const percentdiv = document.querySelector('.percent');
const completed = document.querySelector('.completed');
completed.innerHTML = goals;
const totaldiv = document.querySelector('.total');
const total = totaldiv.innerHTML;
let pc = goals * 100 / total;
const r = circle.getAttribute('r').replace('%', '') * percentdiv.clientWidth / 100; //actual radius of the circle
const c = Math.PI * (r * 2); //circumference is 2*pi*r
if (isNaN(goals)) {
pc = 100;
} else if (pc < 0) {
pc = 0;
} else if (pc > 100) {
pc = 100;
}
document.querySelector('.number h2').innerHTML = Math.floor(pc) + '<span>%</span>';
const length = pc * c / 100;
circle.style.strokeDasharray = length + ' ' + (c - length);
circle.style.strokeWidth = (length > 0) ? '5%' : 0;
}
// For testing purposes, set up the input box to edit the number of displayed goals
document.querySelector('.goals').addEventListener('change', (e) => {
const goals = parseInt(e.target.value);
setGoals(goals);
});
// On page load, manually set the goals to 50 for demonstration purposes
setGoals(50);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border-color: transparent;
border-width: 0;
border-style: none;
rbox-shadow: inset 0 0 50px #000;
background-image: radial-gradient(#444 0%, #222 70%, transparent 70%, transparent 100%);
rbackground: #222;
z-index: 1000;
}
.percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.percent .number h2 {
color: #777;
font-weight: 700;
font-size: 40px;
transition: 0.5s;
}
.card:hover .percent .number h2 {
color: #fff;
font-size: 60px;
}
.percent .number h2 span {
font-size: 24px;
color: #777;
transition: 0.5s;
}
.card:hover .percent .number h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 40px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
svg {
width: 100%;
height: 100%;
z-index: 1000;
}
svg circle {
fill: none;
stroke-width: 0;
stroke-linecap: round;
stroke: #00ff43;
}
<div class="container">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="50%" cy="50%" r="47.5%"></circle>
</svg>
<div class="number">
<h2>0<span>%</span></h2>
</div>
</div>
<h2 class="text"><span class="completed">0</span> of <span class="total">115</span> Goals Completed</h2>
</div>
</div>
</div>
Goals completed: <input class="goals" type='number' />
...It's a little difficult to test here on Stack Overflow, but if you call setGoals(50) (or another number) then it'll update the displayed goals in the circle. I added the line setGoals(50) to the above code snippet as an example to show 50 goals on page load.
I made a program showing the price for BTC and i was going to make an chrome extension out of it.
But sadly, i wrote it in PHP. which google extensions does not support.
I looked up a script on Codepen.io to see if it will work at all,
and i found this one - https://codepen.io/magnificode/pen/KyMMOB?q=bitcoin+price+&limit=all&type=type-pens
JS file ->
const app = new Vue({
el: '.btc-badge',
data: {
btcUSD: '0.00',
upDown: 'up',
},
mounted() {
this.getInfo();
setInterval(()=> {
this.getInfo();
}, 1000*60);
},
methods: {
getInfo() {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
const oldPrice = this.btcUSD
const newPrice = parseFloat(response.data.bpi.USD.rate_float).toFixed(2)
if (newPrice > oldPrice) {
this.upDown = 'up'
} else {
this.upDown = 'down'
}
this.btcUSD = newPrice
});
}
},
});
CSS file ->
body,html {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
background-image: linear-gradient(to right, #ece9e6, #ccc);
font-smoothing: antialiased;
align-items: center;
color: #fafafa;
display: flex;
font-family: "macha";
height: 100%;
justify-content: center;
}
.card {
align-items: center;
background-image: linear-gradient(to top right, #141e30, #243b55);
border-radius: .4em;
box-shadow: 0 0 66px rgba(#000, 0.3);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
padding: 1em;
position: relative;
width: 250px;
height: 300px;
z-index: 0;
&:after {
mix-blend-mode: overlay;
border: 1px solid #eee;
border-radius: .4em;
content: '';
height: calc(100% - 2em);
left: 0;
margin: 1em;
position: absolute;
top: 0;
width: calc(100% - 2em);
z-index: 1;
}
}
h1 {
letter-spacing: 0.05em;
margin: 0;
}
p {
margin: 0;
}
.up {
color: #42ffa8;
}
.down {
color: #ff0740;
&:after {
transform: rotate(180deg);
}
}
.up,
.down {
align-items: center;
display: flex;
&:after{
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent currentColor transparent;
content: "";
height: 0;
margin-left: .5em;
margin-top: .1em;
width: 0;
}
}
svg {
bottom: -50%;
fill: #999;
left: -20%;
mix-blend-mode: overlay;
position: absolute;
transform: scaleX(-1);
width: 150%;
z-index: -1;
}
and the html file ->
try{Typekit.load({ async: true });}catch(e){}
<div class="btc-badge">
<div class="card">
<p>Current Bitcoin price</p>
<h1>${{ btcUSD }}</h1>
<p :class="upDown">{{upDown}}</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 30L30 40 10 10v80h80V50L70 60"/></svg>
</div>
</doesnt took the code and put it in a folder, uploaded it and i pressed the little icon for my app. but now i saw that the prices doesn't show up.
Does anyone of you have any idea as to why this is happening?
Thanks - Jonas.
Good day or night to the whole stackoverflow community! (Especially for those who are reading this 😀)
The thing is I have a big container.
Several divs of the fixed height are appended into it on user's click.
Those divs have header blocks and description blocks in them.
In the end I need their description blocks to have transform: translateY(dynamicHeight), where dynamicHeight is their height value which is dependent on the header block height (header height is not universal for all items. Each item may have its own header height). (Overall div height is 200px and if header block is 53px height, description block should take the rest 147px)
$(function () {
var itemsNumber = 4; //Say, I've got this number of items from a database.
$("#btn").on("click", function () {
for (i=0; i < itemsNumber; i++) {
$("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\">Hi! I'm header.</div><div class=\"description\">Howdy. I am the content.</div></div></div>"));
}
});
});
#btn {
background-color: green;
color: black;
cursor: pointer;
display: inline-block;
margin-bottom: 16px;
padding: 10px 30px;
}
#container {
border: 1px solid #aaa;
display: flex;
justify-content: space-between;
min-height: 150px;
padding: 10px;
width: 550px;
}
.item {
border: 1px solid #999;
height: 200px;
overflow: hidden;
width: 120px;
}
.moving {
transform: translateY(147px); /* Need to calculate this value using jQuery or vanilla JavaScript (itemHeight - headerHeight) but have no idea how to do it, because items are added dynamically.. */
transition: transform .4s ease-in-out;
}
.item:hover .moving {
transform: translateY(0);
}
.moving div {
padding: 10px;
text-align: center;
}
.header {
background-color: red;
height: 53px; /* This value isn't going be the same for each item */
text-transform: uppercase;
}
.description {
background-color: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div> <!-- Items are added to this div -->
You can calculate dynamic height like this $("#container").height() - $(".header").height(); and use this function $(document).on("mouseenter", ".item", function() to bind hover evcent to dynamically created elements like this
$(function() {
var itemsNumber = 4; //Say, I've got this number of items from a database.
$("#btn").on("click", function() {
for (i = 0; i < itemsNumber; i++) {
$("#container").append($("<div class=\"item\" id=" + i + "><div class=\"moving\"><div class=\"header\" >Hi! I'm header.</div><div class=\"description\" >Howdy. I am the content.</div></div></div>"));
}
var hei = $("#container").height() - $(".header").height();
$(".moving").css("transform", "translateY(" + hei + "px)"); //translate using dynamic height
$(".description").css("height", hei-2+"px"); //set height of description dynamically
});
$(document).on("mouseenter", ".item", function() {
$(this).find(".moving").css("transform", "translateY(0)");
$(this).find(".moving").css("transition", " transform .4s ease-in-out");
});
$(document).on("mouseleave", ".item", function() {
var hei = $("#container").height() - $(".header").height();
$(this).find(".moving").css("transform", "translateY(" + hei + "px)");
$(this).find(".moving").css("transition", " transform .4s ease-in-out");
});
});
#btn {
background-color: green;
color: black;
cursor: pointer;
display: inline-block;
margin-bottom: 16px;
padding: 10px 30px;
}
#container {
border: 1px solid #aaa;
display: flex;
justify-content: space-between;
min-height: 150px;
padding: 10px;
width: 550px;
}
.item {
border: 1px solid #999;
height: 200px;
overflow: hidden;
width: 120px;
}
.moving div {
padding: 10px;
text-align: center;
}
.header {
background-color: red;
height: 53px;
/* This value isn't going be the same for each item */
text-transform: uppercase;
}
.description {
background-color: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">Add tems</div>
<div id="container"></div>
<!-- Items are added to this div -->
P.S. Also set height of description dynamically like this $(".description").css("height", hei-2+"px"); : -2px is of borders each 1px on item and container