I'm trying to create a reviews area within my website, to display some clients reviews I gathered + their logo. For now, I've managed to change both (review+logo) every 5 seconds :)! it works!
What I'm trying to achieve now is to fade/out and fade/in the next review + logo. I'm not sure where should I search about it, can someone point me towards the right post or article? thanks
var review = new Array();
review.push("Text1");
review.push("Text2");
review.push("Text3");
var clientlogo = new Array();
clientlogo.push("");
clientlogo.push("");
clientlogo.push("");
var point = 0;
function changeText(){
$('.review').html(review[point]);
$('.client-logo').attr('src',clientlogo[point]);
if(point < ( review.length - 1 ) ){
point++;
}else{
point = 0;
}
}
setInterval(changeText, 5000); /*Call it here*/
changeText();
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #4d4d4d;
margin: 0 auto;
}
.review-container {
width: 400px;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #4d4d4d;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="review-container">
<div class="review"></div>
<img class="client-logo" src=""/>
</div>
jQuery includes stuff for fading: https://api.jquery.com/category/effects/fading/
It takes a callback function that's called once the animation is finished. You can use this to fade in the next review after the previous one is finished fading out.
previousReview.fadeOut(delay, function() { nextReview.fadeIn(delay) });
And then you can still use your setInterval call to know how often to run this.
Related
A function that takes 2 arguments: amount and color. The function is gonna create as many boxes as amount and in the color that is given in the argument. The boxes shall lay next to eachother in a row. With margin to seperate the boxes.
I have problem to get them in a row. I have tried flex-direction: row but it doesnt seem to work, they just land in top of eachoter like in a column..
Script:
function antalFärg(a, f){
for(let i=0; i< a; i++){
const div3 = document.createElement('div')
div3.className = 'div3'
div3.style.backgroundColor = `${f}`
console.log(div3)
document.body.appendChild(div3)
}
}
antalFärg(4, 'blue')
Css:
<style>
.div3{
margin: 3px;
display: flex;
flex-direction: row;
height: 100px;
width: 100px;
}
</style>
Your mistake is you have appended it to a body.
Instead, you can create a div and append to it... with basic styles display: flex; flex-direction: row;
function antalFärg(a, f) {
for (let i = 0; i < a; i++) {
const div3 = document.createElement('div')
div3.className = 'div3'
div3.style.backgroundColor = `${f}`
console.log(div3)
document.getElementById("firstDiv").appendChild(div3)
// document.body.appendChild(div3)
}
}
antalFärg(4, 'blue')
.firstDiv {
display: flex;
flex-direction: row;
}
.div3 {
margin: 3px;
height: 100px;
width: 100px;
}
<body>
<div id="firstDiv" class="firstDiv"></div>
</body>
I'm actually coding an infinite slider in vuejs (using Nuxt 3 RC.10) and I'm facing a problem : my scrollLeft don't want to be reset.
Let me explain. I got two rows of images, and when the left side of the second row collides with the left side of the container, I want to set the scrollLeft to 0. This works perfectly on both browser with Svelte, but I did not succeed with Vuejs. For some reason the second row is glitching.
After debuging, my condition is comes true but the problem seems to come from instruction slider.value.scrollLeft = 0
Thanks in advance for your help
Here my component Slider:
(PS: the commented overflow: hidden is for test purposes.
<script setup>
const slider = ref(null)
const scrollEnabled = ref(true)
const centeredComputed = computed(() => {
return scrollEnabled.value ? "" : "justify-content: center;"
})
function scroll() {
let rows = document.getElementsByClassName('row')
slider.value.scrollLeft += 20
if (scrollEnabled.value && rows[1].getBoundingClientRect().left <= slider.value.getBoundingClientRect().left) {
slider.value.scrollLeft = 0
}
scrollEnabled.value = rows[0].clientWidth > slider.value.clientWidth
}
onMounted(() => {
slider.value.addEventListener('scroll', scroll)
window.addEventListener('load', scroll)
window.addEventListener('resize', scroll)
})
onUnmounted(() => {
window.removeEventListener('load', scroll)
window.removeEventListener('resize', scroll)
})
</script>
<template>
<div ref="slider" class="slider" :style="centeredComputed">
<div class="row">
<img v-for="id in 32" class="logo" :src="`../assets/images/partenaires/${id}.png`" :alt="'Partenaire numéro ' + id">
</div>
<div v-if="scrollEnabled" class="row">
<img v-for="id in 32" class="logo" :src="`../assets/images/partenaires/${id}.png`" :alt="'Partenaire numéro ' + id">
</div>
</div>
</template>
<style lang='scss' scoped>
.slider {
width: 100%;
height: 100%;
white-space: nowrap;
//overflow-x: hidden;
overflow: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.row {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
height: 100%;
}
.logo {
display: inline-flex;
margin: 0 2rem;
height: 100%;
}
</style>
Bit of an odd one:
I'm making an input element that displays suggested results, and highlights the input value as a substring of each result.
So for example if I typed 'cat' it would suggest and highlight category
I'm just adding a strong tag to the result: content.innerHTML = ${arr[x].substr(0, index)}<strong>${arr[x].substr(index, match.length)}</strong>${arr[x].substr(index+match.length)};
Stripped down codepen example here
My problem - which I can't seem to replicate in the codepen above despite it being the same innerHTML code - is that if the match is next to a space, that space disappears. Eg: 'tes' => 'This is atest'.
The space is in the html (below), and the string outputs correctly to the console, so I feel like this has to be down to the strong tag?
No doubt I'll kick myself when someone points out my mistake, but I just can't see it
In the screenshot of the dev tools I can see that the containing div is a flexbox, where the codepen it is not. It is the flexbox that is causing this.
See snippet below
const content = document.querySelectorAll(".content");
const arr = ["Red square", "Blue circle", "Green rectangle"];
const match = "rec";
content.forEach((element) => {
for (let x = 0; x < arr.length; x++) {
if (arr[x].toUpperCase().indexOf(match.toUpperCase()) !== -1) {
const index = arr[x].toUpperCase().indexOf(match.toUpperCase());
element.innerHTML = `${arr[x].substr(0, index)}<strong>${arr[x].substr(
index,
match.length
)}</strong>${arr[x].substr(index + match.length)}`;
}
}
});
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: lightgrey;
}
.content {
height: 10rem;
width: 20rem;
font-size: 1.7rem;
background-color: white;
margin-bottom: 1rem;
}
.withFlex {
display: flex;
}
<div class="wrapper">
<div>No Flexbox</div>
<div class="content"></div>
<div>With Flexbox</div>
<div class="content withFlex"></div>
</div>
So I am trying to sort an array of numbers when a user clicks on the button sort or reverse and my buttons names are #sort-cards and #reverse-cards. I feel like this is something very simple I am missing but I just cannot figure out what exactly.
(function () {
var cardElements, cardValues; // Do not declare more variables here.
// WRITE CODE HERE TO MAKE THE #cards ELEMENT WORK
//Get an array of all div elements inside the #cards element.
cardElements = Array.from(document.querySelectorAll('#cards div'));
//Initialize the cardValues variable as an empty array.
cardValues = [];
//Use a forEach loop to iterate through each of the div elements (the cards) one by one.
cardElements.forEach(function (cardElements) {
//Generate a card value, a random integer between 1 and 99.
cardElements.textContent = Math.floor(Math.random() * 99) + 1;
//Push it onto the end of the cardValues array and put it in the current div element.
cardValues.push(cardElements);
//Create an event handler that moves the card to the right end whenever it is clicked, leaving the other cards in the same order, and outputs all the new card values to the card divs.
//cardElements.addEventListener('click', function() {
//}
//Do things when the sort button is clicked
document.querySelector('#sort-cards').addEventListener('click', function () {
cardElements.sort(function (a, b){
return a - b;
});
});
//Do things when the reverse button is clicked.
document.querySelector('#reverse-cards').addEventListener('click', function () {
cardElements.reverse();
});
});
}());
You are shadowing cardElements variable in the forEach callback. Also, add the event listeners once, not for every card.
document.querySelectorAll('#cards div') returns a NodeList. If you want to change the DOM, you need to manipulate it, not the JS Array you made out of it.
You can iterate over NodeLists with for ... of.
In order to be DRY, I've added the renderCards function that mutates the DOM.
(function () {
var cardElements, cardValues;
cardElements = document.querySelectorAll('#cards div');
cardValues = [];
function renderCards(newCards) {
for (let i = 0, max = cardElements.length; i < max; i++ ) {
cardElements[i].textContent = newCards[i]
}
}
for (let cardElement of cardElements){
cardElement.textContent = Math.floor(Math.random() * 99) + 1;
cardValues.push(cardElement.textContent);
};
document.querySelector('#sort-cards').addEventListener('click', function () {
cardValues.sort(function (a, b){
return a - b;
});
renderCards(cardValues);
});
document.querySelector('#reverse-cards').addEventListener('click', function () {
cardValues.reverse();
renderCards(cardValues);
});
}());
#cards {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.card {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 1em;
padding: 1em;
border: 1px solid #ccc;
width: 2em;
height: 2em;
}
#btns {
margin: 1.6em;
}
.btn {
cursor: pointer;
background-color: lightgreen;
padding: 1em;
margin: 0 1.6em;
}
<div id="btns">
<a class="btn" role="btn" id="sort-cards">Sort cards</a>
<a class="btn" role="btn" id="reverse-cards">Reverse cards</a>
</div>
<div id="cards">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</div>
I am having difficulty getting my image to rotate when I click on it.
I've attached a link to fiddle with my HTML, CSS and JS
http://jsfiddle.net/5x9tgo07/32/
Here is my HTML
<html>
<header>
<h1 id='heading'>SELF</h1>
</header>
<hr>
<body>
<div class='introCard'>
<img id='self' src="https://image.ibb.co/djffuz/self_eye_centered.jpg"/>
</div>
</body>
</html>
Here is my CSS
header {
width: 100%;
height: 75px;
display: flex;
flex-direction:column;
align-items: center;
}
.introCard {
width: 100%;
margin-top: 35px;
margin-bottom: 25px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center
}
div img {
width: 35%;
}
hr {
width: 50%
}
Here is my JS
let imageToSpin = document.getElementById('self');
function spinImage() {
imageToSpin.rotate(20 * Math.PI/180);
}
imageToSpin.onclick = spinImage;
rotate is not a method of the Element object.
A proper way to rotate the image would be adding (or toggling) a CSS class and rotate it using a rotate().
Using your example:
JS File
let imageToSpin = document.getElementById('self');
imageToSpin.onclick = function () {
imageToSpin.classList.toggle('rotated')
};
CSS File
.rotated {
transform: rotate(90deg)
}
And of course the image with self id in the HTML somewhere.
Here is your JSFiddle updated.
If you need to calculate the deg in JS, then you can set the CSS property by hand in the onclick function directly.
create a closure around the stuff you want to use, and then use the style.transform like so:
let imageToSpin = document.getElementById('self');
function spinImage(imageToSpin) {
var count = 0
return function() {
count += 10;
imageToSpin.style.transform = `rotate(${count}deg)`;
}
}
imageToSpin.onclick = spinImage(imageToSpin);
Here's how you could set it up in a quick and short way:
var rotate_angle = 0;
<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>