How not to repeat the random src of the images in jQuery? - javascript

I am making a simple memory game in jQuery. I have eight img tags and the 'imgs' array with eight pictures (they double). I want every img have a unique src from the 'imgs' array (so that every img element has its' match). Can anyone help me so that the images don't repeat? I know it could be done in pure JS but I need jQuery... Thank you very much for your time :)
$(document).ready(() => {
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
$('.card').flip();
$('img').each((i, item) => {
$(item).attr('src', function() {
const imgsCopy = imgs.slice();
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});
body {
margin: 0 auto;
text-align: center;
}
#game-container {
padding: 3% 10%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.card {
width: 200px;
height: 200px;
margin: 20px 20px;
}
.front {
background-color: lightblue;
}
.back {
background-color: lightskyblue;
box-sizing: border-box;
padding: 25% 20%;
}
<!DOCTYPE html>
<html>
<head>
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="memory.css" />
</head>
<body>
<div id="game-container">
<!--CARD 1-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 1-->
<!--CARD 2-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 2-->
<!--CARD 3-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 3-->
<!--CARD 4-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 4-->
<!--CARD 5-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 5-->
<!--CARD 6-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 6-->
<!--CARD 7-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 7-->
<!--CARD 8-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 8-->
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="memory.js"></script>
</body>
</html>


OK, I made a slight mistake! I took out the const imgsCopy = imgs.slice(); out of the jQuery 'each' statement and it works fine! :) Thx again for your time!
$(document).ready(() => {
$('.card').flip();
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
const imgsCopy = imgs.slice();
$('img').each((i, item) => {
$(item).attr('src', function() {
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});

Related

how to toggle one div at the time

On my portfolio website, I have a full-width column of projects, where Ii wish that upon clicking the title the project display /.content slidetoggles downwards. Upon clicking any other project the former active project slides up and closes, whereas the new project displays. What is thee best way of targetting individual projects on click?
I have tried several things, from assigning a parent to the Title-Line-01, to straight-forward toggle jQuery, to assigning a different code to every single project I've read. through several articles here on Stack Overflow. But I still have not achieved the result I want. In the code below upon clicking any title - every projects displays.
$(document).ready(function(){
$(".content").hide();
$(".Title-line-01").click(function(){
$(this).find('.content').toggle();
});
});
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</class>
<div class="Title-line-02">
</class>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Would it be a bad idea to set id's for your elements?
Set id's for the class "content" divs, and set onclick event for the class "Project" divs.
Class "content" display is initially set to "none".
Of course, add a little code for the onclick event.
In time: in your code there's a few divs closed with </class>. I fixed that.
/* This code closes the project when you click on it,
cause it tracks the outter div (class "Project")
var iShown = 0;
function Show_Content(iContent) {
if (iShown > 0) {
document.getElementById("content" + iShown).style.display = "none";
}
if (iContent !== iShown) {
document.getElementById("content" + iContent).style.display = "block";
iShown = iContent;
} else {
iShown = 0;
}
}
*/
/*This code only closes a project when you open a different one*/
var iShown = 0;
function Show_Content(iContent) {
if (iShown == 0) {
document.getElementById("content" + iContent).style.display = "block";
} else if (iContent !== iShown) {
document.getElementById("content" + iShown).style.display = "none";
document.getElementById("content" + iContent).style.display = "block";
}
iShown = iContent;
}
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: none;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div onclick="Show_Content(1)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div id="content1" class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(2)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content2" class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(3)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content3" class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(4)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content4" class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(5)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content5" class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(6)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content6" class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(7)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content7" class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(8)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content8" class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(9)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content9" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(10)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content10" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Equals high of div-containers in cards

I need to make cards in same heigth.
I don't mean the card them self, I mean the containers in the cards.
My code is looking like this
.card-text {
border: 1px solid lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>
Has anybody an solution, how to make the card-text equal height?

.card-text {
border: 1px solid lightgrey;
}
.card {
height: 100%
}
.card-body {
display: flex;
flex-flow: column;
}
.card-text {
flex-grow: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>

You can use flexbox and the property align-items for that.
See this
.card-group {
display: flex;
align-items: stretch;
}
.card {
height: 100%;
border: 1px solid black
}
https://codepen.io/moisesnandres/pen/dqVzGE

Why dont use .card-deck instead of .card-group?
Like: http://getbootstrap.com/docs/4.1/components/card/#card-decks
It is made for having differend cards, all with the same hight.
They will also expand the sourrounding .row element.

How to fix this in jquery?

I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?

What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>

$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it

You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().

Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});

You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});

When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.

Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>

How to keep user from scrolling to portion of a page until an audio file has played for certain amount of time?

I want to block the user from scrolling past the "[just after]" picture of foggy trees until a certain point in the song is reached.
All the css is just font's and what not. I'd like to stop scrolling right before section SIX.
Here's the html:
<!DOCTYPE html>
<html>
<title>LMC 3255 Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="morefonts.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
.bgimg-1 {
background-image: url('images/snowyMountains.jpg');
}
.bgimg-2 {
background-image: url('images/blackbirdEye.jpg');
}
.bgimg-3 {
background-image: url('images/birdsInTree.jpg');
}
.bgimg-4 {
background-image: url('images/birdsOfFire.jpg');
}
.bgimg-5 {
background-image: url('images/areOne.jpg');
}
.bgimg-6 {
background-image: url('images/justAfter.jpg');
}
.bgimg-7 {
background-image: url('images/menOfHaddam.jpg');
}
.bgvid {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
width: 100%;
}
.animatedBG {
animation-name: lightning;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<audio autoplay>
<source src="images/OpenCountryJoy.mp3" type="audio/mp3">
</audio>
<!-- First Parallax Image with Title Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">BLACKBIRD</span>
</div>
</div>
<!-- Container-->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">Tucker LoCicero</h3>
<p class="w3-center">
A remediation of<br>
<em>Thirteen Ways of Looking at a Blackbird</em><br>
by Wallace Stevens<br>
</p>
</div>
<!--ONE-->
<div class="bgimg-2 w3-display-container w3-opacity-min" id="stanza1bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">ONE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza1">
<h3 class="w3-center">Among twenty snowy mountains,<br>
The only moving thing<br>
Was the eye of the blackbird.<br>
</h3>
</div>
<!--TWO-->
<div class="bgimg-3 w3-display-container w3-opacity-min" id="stanza2bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">TWO</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza2">
<h3 class="w3-center">I was of three minds,<br>
Like a tree<br>
In which there are three blackbirds.<br>
</h3>
</div>
<!--THREE-->
<div class="bgimg-4 w3-display-container w3-opacity-min" id="stanza2bg">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">THREE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza3">
<h3 class="w3-center">The blackbird whirled in the atumn winds.<br>
It was a small part of the pantomime.<br>
</h3>
</div>
<!--FOUR-->
<div class="bgimg-5 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">FOUR</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza4">
<h3 class="w3-center">A man and a woman<br>
Are one.<br>
A man and a woman and a blackbird<br>
Are one.<br>
</h3>
</div>
<!--FIVE-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza5bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="bgvid">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">FIVE</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza5">
<h3 class="w3-center">I do not know which to prefer,<br>
The beauty of inflections<br>
Or the beauty of innuendoes,<br>
The blackbird whistling<br>
Or just after.<br>
</h3>
</div>
<div class="bgimg-6 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-wide">[just after]</span>
</div>
</div>
<!--SIX-->
<div class="w3-content w3-container w3-padding-64" id="stanza6">
<h3 class="w3-center">Icicles filled the long window<br>
With barbaric glass.<br>
The shadow of the blackbird<br>
Crossed it, to and fro.<br>
The mood<br>
Traced in the shadow<br>
An indecipherable cause.<br>
</h3>
</div>
<!--SEVEN-->
<div class="bgimg-7 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">SEVEN</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<h3 class="w3-center">O thin men of Haddam,<br>
Why do you imagine golden birds?<br>
Do you not see how the blackbird<br>
Walks around the feet<br>
Of the women about you?<br>
</h3>
</div>
<!--TEN-->
<div class="bgvid w3-display-container w3-opacity-min" id="stanza10bg">
<video loop autoplay poster="img/videoframe.jpg" class="bgvid">
<source src="images/greenLight.mp4" type="video/mp4">
</video>
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">TEN</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="stanza10">
<h3 class="w3-center">At the sight of blackbirds<br>
Flying in a green light,<br>
Even the bawds of euphony<br>
Would cry out sharply.<br>
</h3>
</div>
<!--THIRTEEN-->
<div class="w3-display-container w3-opacity-min">
<img src="images/eveningAllAfternoon.jpg" style="width: 100%">
<div class="w3-display-middle">
<h3 class="w3-center w3-text-light-grey" style="font-size: 1000%">
T<br>
H<br>
I<br>
R<br>
T<br>
E<br>
E<br>
N<br>
</h3>
</div>
</div>
<div class="w3-content w3-container w3-padding-64">
<h3 class="w3-center">It was evening all afternoon.<br>
It was snowing<br>
And it was going to snow.<br>
The blackbird sat<br>
In the cedar-limbs.
</h3>
</div>
</body>
</html>
See the live website (view on chrome).

Figured it out! I just made my div style="display: none" and used setTimeout() to fadeIn() at the right time.
$(document).ready(function(){
setTimeout(function() {$("#somehiddenDiv").fadeIn();}, 7100);
});

Highlight current day on a <div> table using javascript

Hello I am trying to highlight the current day in a <Div> table (using css and jQuery) but can't wrap my head around it (I don't want to use php because it must be dynamic)
This is part of what I have done.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel="shortcut icon" href="../themes/images/logo-180x178-52.png" type="image/x-icon">
<link rel="STYLESHEET" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="STYLESHEET" href="../themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Rooster week 15</title>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: orange;
font-weight: bold;
}
.rTableBody {
display: table-row-group;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: orange;
}
.rTableCell,
.rTableHead {
display: table-cell;
}
.cZondag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
.cMaandag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
//.cDinsdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cWoensdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cDonderdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cVrijdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cZaterdag { display: table-row; background-color: lightgreen; font-weight: bold;}
</style>
</head>
<body>
<script>
function myFunction() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Zondag";
weekday[1] = "Maandag";
weekday[2] = "Dinsdag";
weekday[3] = "Woensdag";
weekday[4] = "Donderdag";
weekday[5] = "Vrijdag";
weekday[6] = "Zaterdag";
var n = weekday[d.getDay()];
var nTable = document.getElementById('maandag');
// document.write(nTable); // debugging only
}
myFunction()
</script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>
</body>
</html>
The code is generated by a VBA script in Excel where the data comes from and is uploaded to a server automatically.
It is supposed to be running on a phone screen (fullscreen)

Please note my code will only highlight when the table contains a date around now.
function pad(num) {
return String("0"+num).slice(-2);
}
$(function() {
var d = new Date(); // test with new Date(2016,3,14); JS months start at 0
var ddmm = ""+pad(d.getDate())+"-"+pad(d.getMonth()+1);
$(".rTableRow:contains('"+ddmm+"')").addClass("highlight");
});
.highlight { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>

I am not too sure What is Current date field, so I assume that it is a first record. you can do it without jquery. below are code sample
/*Only work hover over element*/
.rTableRow > div:first-child:hover{
background-color:red; }
/* work all the time*/
.rTableRow > div:first-child{
background-color:red; }

Categories