I'm trying to move an existing element from oneplace in the DOM to another. I'm using a plugin for chrome "User Javascript and CSS" and the page I'm manipulate is https://www.kappahl.com/sv-SE/rea/herr/rea/?
I want to move the span element "product-card__percent--sale" below "grid-item__image-spacer". But nothing happens down in the grid with ID #Productlist. And as told, now I'm going crazy.
I know it's created in a function and I have to check if the function is done before calling the elements.
So far I have come to this point Top line is fine but not the rest of the products.
The result should be that in the bottom right corner of each image of the products would have the "50%" "sign".
I have search through every space from google to youtube but I can't understand what I'm doing wrong.
I know that just create a variabel won't work and I thought ready function would work. I also tried with length etc.
I have tried following:
let a = $(".product-card__percent--sale");
let b = $(".grid-item__image-spacer");
a.insertAfter(b);
And:
$(document).ready(function(){
if($(".product-card__percent--sale").insertAfter($("header .grid-item__image-spacer")));
});
This is how my code look like a the moment
JS
$(".product-card__wrapper").each(function () {
var newprice = $(this).find('.product-card__percent--sale');
$(this).find('.grid-item__image-spacer').parent().after(newprice );
});
CSS:
/*Override the old grid*/
#ProductList {
grid-template-columns: repeat(4, 25%);
grid-gap: 18.5px;
}
/*Create sale-percent look*/
.product-card__percent--sale {
color: white;
background-color: #ee324c;
border-radius: 50%;
height: 65px;
width: 65px;
float: right;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
/* display:inline-block;*/
font-size: 18px;
padding: 20px 5px 5px 10px;
}
It's hard to show the code when I'm just editing an existing page. Sorry for that but if someone could help me out it would just be beautiful! :)
Edit: As per the comment and the updated code in your post, the code below might fit your need.
$(function(){
setInterval(function() {
$(".product-card__percent--sale").each(function(){
$(this).closest(".product-card")
.find(".grid-item__image-spacer")
.append($(this));
});
}, 200);
})
or
$(function(){
setInterval(function() {
$(".product-card__wrapper").each(function () {
var newprice = $(this).find('.product-card__percent--sale');
$(this).find('.grid-item__image-spacer')
.parent().after(newprice );
});
}, 200);
})
both should work.
And here's the CSS
/*Override the old grid*/
#ProductList {
grid-template-columns: repeat(4, 25%);
grid-gap: 18.5px;
}
/*Create sale-percent look*/
.product-card__percent--sale {
color: white;
background-color: #ee324c;
border-radius: 50%;
height: 65px;
width: 65px;
float: right;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
/* display:inline-block;*/
font-size: 18px;
padding: 20px 5px 5px 10px;
}
.grid-item__image-spacer{
position: relative;
}
.product-card__percent--sale{
position: absolute;
bottom: 0;
right: 0;
}
You have to run the code after the dom elements are created and
let a = $(".product-card__percent--sale");
let b = $(".grid-item__image-spacer");
a.insertAfter(b);
would insert all the numbers to all the images, so it could be
setTimeout(function() {
$(".product-card__percent--sale").each(function(){
$(this).closest(".product-card__bottom--wrapper")
.find(".product-card__infoicons").prepend($(this));
});
}, 10);
or
setInterval(function() {
$(".product-card__percent--sale").each(function(){
$(this).closest(".product-card__bottom--wrapper").find(".product-card__infoicons").prepend($(this));
});
}, 200);
And you'll need these to set the position
.product-card__percent--sale{
line-height: 25px;
left: 10px;
position: relative;
}
so as you say you need to show the element below Pictures.
$(".product-card__wrapper").each(function () {
var newprice = $(this).find('.product-card__percent--sale');
$(this).find('.grid-item__image-spacer').parent().after(newprice );
});
First of all, get your all elements on your needs. then include what elements do you want to change(new price). then you can change them. I don't have the source to try it but I think it will be work fine. If it's not working try with .parent() to see what element jquery get.I hope it helps
Related
I have the following code:
<div className='file-upload-wrapper' data-text='Select your file!'>
<input
type='file'
id='upload'
className='file-upload-field'
placeholder='Enter Item Name'
required
onChange={(e) => setUpload(e.target.value)}
onClick={changeUploadTxt}
></input>
</div>
The CSS for this:
.file-upload-wrapper {
position: relative;
width: 400px;
height: 40px;
}
.file-upload-wrapper::after {
content: attr(data-text);
font-size: 18px;
position: absolute;
top: 0;
left: 0;
background: #fff;
padding: 10px 15px;
display: block;
width: calc(100% - 40px);
pointer-events: none;
z-index: 20;
height: 40px;
line-height: 40px;
color: #999;
border-radius: 5px 10px 10px 5px;
font-weight: 300;
}
.file-upload-wrapper::before {
content: "Upload";
position: absolute;
top: 0;
right: 0;
display: inline-block;
height: 60px;
background: #4daf7c;
color: #fff;
font-weight: 700;
z-index: 25;
font-size: 16px;
line-height: 40px;
padding: 0 15px;
text-transform: uppercase;
pointer-events: none;
border-radius: 0 5px 5px 0;
}
.file-upload-wrapper::hover {
background: darken(#4daf7c, 40%);
}
I was trying to do something with this, but it didn't worked:
const changeUploadTxt = () => {
//const txtDiv = document.getElementsByClassName("file-upload-wrapper");
};
I also changed the CSS content with before and after, but it didn't worked. Do you know a method for making sure that files are uploaded and change the text after inside the div tag?
This isn't how React works. Don't think of it in terms of directly manipulating the DOM in an event handler. Instead, think of it in terms of managing state.
The render operation displays a state value
The event updates the state value
So in the start of your component (assuming a function component, since that's the preferred approach for new development at this time) you might declare a state value:
const [uploadText, setUploadText] = useState('Select your file!');
Then you'd use that value in your rendering:
<div className='file-upload-wrapper' data-text={uploadText}>
Now all you have to do is update the state value any time you want it to change:
const changeUploadTxt = () => {
setUploadText('Some new value');
};
Any time you update state, that will trigger the component to re-render. Which is also why you don't directly manipulate the DOM in React (unless you really know what you're doing under the hood in the framework), because a re-render will break whatever changes you made to the DOM.
you can use innerHtml for adding a text.
const changeUploadTxt = () => {
document.getElementsByClassName("file-upload-wrapper").innerHTML += "Upload";
};
I'm new to coding, and I'm trying to learn the basics. I wanted to practice what I learned by making flashcards (nothing complicated like saving it, importing it, or exporting it). So far, I made a table that the user can edit. I know how to gather data from the table, but I don't know how to make a CSS flashcard appear every time the user adds a card to the table. I am aware that the code will not work since I put the CSS in JavaScript since this code is just meant to show what I am trying to do. Also, if I am taking a completely wrong approach, please let me know. Thank you! Please excuse the poor variable naming, I was just testing some things.
<script>
function getFlashcardValue() {
for (var repeat = 0; repeat < 200; repeat++) {
var Table = document.getElementById('flashcardsTable');
var column1 = 0;
var column2 = 1;
var numberOfFlashcards = 2;
for (var row = 0; row < numberOfFlashcards; row++) {
var Cells = Table.rows.item(1).cells;
var Question1 = Cells.item(column1).innerHTML;
var Cells1 = Table.rows.item(1).cells;
var Answer1 = Cells.item(column2).innerHTML;
document.getElementById("myFlashcardQuestion" + row).innerHTML = Question1;
document.getElementById("myFlashcardAnswer" + row).innerHTML = Answer1;
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<span id="myFlashcardQuestion1"></span>
</div>
<div class="flip-card-back">
<span id="myFlashcardAnswer1"></span>
</div>
</div>
</div>
}
}
}
</script>
<p style = "font-size: 25px">Hover over the flashcard to flip it!</p>
<style>
.flip-card {
background-color: transparent;
width: 350px;
height: 175px;
margin: auto;
padding: 5px 5px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
background-color: lightblue;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: lightblue;
width: 350px;
height: 175px;
color: black;
font-size: 35px;
text-alignment: center;
}
.flip-card-back {
background-color: red;
color: white;
font-size: 35px;
text-alignment: center;
transform: rotateY(180deg);
}
</style>
So first of all you can create a code snippet in stackoverflows editor (see below), or use jsfiddle and post a shared-link.
It depends on which action the user has to do after he enters the data.
If it is, for example, a button click, then it is possible to call a function that shows the user's input in the flashcard. Now if you want that for every single Q&A you have to create Elements in the for loop and edit them there. Here a little example.
var allCards = document.getElementById("allCards");
for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data
var question = document.createElement("div");
question.textContent = "Question " + i;
question.classList.add("flip-card");
allCards.appendChild(question);
}
.flip-card {
background-color: lightblue;
width: 350px;
height: 175px;
margin: 10px auto;
padding: 5px 5px;
font-size: 35px;
text-align: center;
}
<div id="allCards"></div>
Edit:
As promised, here is an example of how you can set up the flip cards.
https://jsfiddle.net/ybu59hfp/1/
Your concern should now be resolved. If you have any further questions, feel free to write to me in the chat or read a little about JavaScript on the Internet.
For some reason I can not remove any of the building-x elements that JavaScript generates. So I'm wondering why?
So I change my code a bit and I ended up adding building-x to the HTML to see if that will do the trick and as soon as I did that, it removed the generated HTML version of building-x but I still can not remove the generated JavaScript version of building-x.
What would I have to do to also be able to remove the JavaScript generated version of building-x?
Here is my code
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
if(document.querySelector('.building-x')){
var buildingXs= document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
}
/*</Remove the targeted buildingX>*/
});
#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}
<button id='add-another-building'>Add another building</button>
<div id='buildings'>
<div id='first-building'></div><!--</first-building>-->
<div class='building-x'></div><!--</building-x>-->
</div><!--</buildings>-->
The original problem was that the part of the code that adds listeners was only run once at the beginning, when there were no building-x. Thus no js-generated building-x ever got a listener.
When you added a starting html building-x, that one got a listener but not subsequent js-generated building-x.
The solution is to call the add-listener code after adding a js-building x. In the below example, I have removed the html-starting building-x.
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
addListener();
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
function addListener() {
var buildingXs = document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
if (buildingXs[i].classList.contains("listening") === false) {
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
buildingXs[i].classList.add("listening");
}
}
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
});
#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}
<button id='add-another-building'>Add another building</button>
<div id='buildings'>
<div id='first-building'></div><!--</first-building>-->
</div><!--</buildings>-->
In the following code, when I put the div with class thumb-bar, the JavaScript I have written works but if place use it after full-img div tag, it doesn't work also the CSS attribute cursor: pointer for the thumb-bar div is not applied.
Edit - I mean the click listeners I apply using JavaScript are not working
CSS:
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
HTML:
<div class="thumb-bar"></div>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<button class="dark">Darken</button>
</div>
JavaScript:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for (var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.addEventListener('click', function(e) {
displayedImage.setAttribute('src', e.target.getAttribute('src'))
});
}
Because you're floating .thumb-bar img, those images are taken out of the page flow which results in the .thumb-bar element to have a height of 0, which in turn causes subsequent content to not be pushed down. That means that the .full-img element is rendered on top of the images and obscures them from the mouse pointer.
You need to clear the floats in order to get the .full-img element to render below them. This can be done by either making sure the .thumb-bar clear it's own content:
.thumb-bar {
overflow: hidden;
}
... or make the .full-img element itself clear them:
.full-img {
clear: both;
}
I have a container that holds three items.
One is floated left, another is centered and the last is floated right. If I remove the center item and add it back the right most item gets pushed down and I don't know why.
If you select the right item and view it in Chrome dev tools you can toggle the float: right off/on and then it will be positioned correctly.
This happens in Chrome but does not happen in FireFox. (I have not tested in IE)
I have a demo of the issue here: http://codepen.io/anon/pen/rVyRmy?editors=001
var on = true;
var l = $('<div class="left"></div>');
var r = $('<div class="right"></div>');
var clicky = function() {
if (on) {
$('.container').empty();
$('.container').append(l);
$('.container').append($(
'<div class="fill">' +
'<span>text</span>' +
'<span>text</span>' +
'<span>text</span>' +
'<span>text</span>' +
'</div>'
));
$('.container').append(r);
on = false;
} else {
$('.container').empty();
$('.container').append(l);
$('.container').append($('<input type="text" />'));
$('.container').append(r);
on = true;
}
$('.right').on('click', clicky);
};
$('.right').on('click', clicky);
.container {
width: 400px;
height: 20px;
text-align: center;
background-color: lightgray;
}
.left, .right {
display: inline-block;
width: 14px;
}
.left {
position: relative;
float: left;
}
.left:before {
position: absolute;
top: 4px;
left: 4px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8.7px 5px 0;
border-color: transparent orange transparent transparent;
}
.right {
position: relative;
float: right;
}
.right:before {
position: absolute;
top: 4px;
right: 4px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent orange;
}
span {
width: 93px;
background-color: green;
display: block;
float: left;
}
div span:first-child {
margin-left: 14px;
}
<div class="container">
<div class="left"></div>
<input type="text" />
<div class="right"></div>
</div>
In the above I clear everything and redraw, I have also tried leaving the left and right elements and just removing/adding the center back but I get the same result.
You can fix this by forcing a redraw on the right element. There are a couple of ways to do this, but my preferred way is $(r).hide().show(0);
$(r).offsetHeight has been known to work, though it doesnt work in the codepen you linked to and it doesnt work in safari. For background I added the code as follows:
else {
$('.container').empty();
$('.container').append(l);
$('.container').append($('<input type="text" class="middle" />'));
$('.container').append(r);
$(r).hide().show(0);
on = true;
}
The original SO post from which I got my answer when I ran into a similar problem the other day: Force DOM redraw/refresh on Chrome/Mac