Before typing this question up I spent a number of days looking for an example that was close enough to help to no avail and so I'm bringing my specific use case to SO
I have three cards of bootstrap 5.
And I want to create Popovers for each card, but maybe the manager wants to make a hundred more. I want to create using a for loop. I don't want to enter every single code. How is this possible?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row">
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 1</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 2</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 3</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
sanitize: false,
html: true,
content: '<button type="button" class="btn btn-primary">My Button</button>'
});
</script>
</body>
</html>
I want to create using for a loop.
I think you need to use javascript string for html content.
Please try with this.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row" id ="row">
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
for(var i = 0; i<100; i++){
let code = "";
code += '<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="" alt="'+i+'">\n';
code += '\t\t\t<div class="card position-relative">\n';
code += '\t\t\t\t<div class="d-block card-icon">\n';
code += '\t\t\t\t\t<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t\t<div class="card-body">\n';
code += '\t\t\t\t\t<a href="#" class=" text-decoration-none text-dark ">\n';
code += '\t\t\t\t\t\t<h5 class="card-title ">Title 1</h5>\n';
code += '\t\t\t\t\t</a>\n';
code += '\t\t\t\t\t<p>A short description</p>\n';
code += '\t\t\t\t\tMore Details\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t</div>\n';
code += '\t\t</div>\n';
document.getElementById("row").innerHTML += code;
}
</script>
</body>
</html>
Related
there are 6 images in my section, at the first u can see just 3 of them and when u click on read more will opened another 3 image (Collapse), but the question or the problem is, when that button will be opened the screen doesn’t follow the button to down and when i clicked on read less, the screen doesn’t follow the button to top! but the screen stay on a fix position and i have to scroll down/up to see another images
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You can use scrollIntoView function
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
toggle_switch[0].scrollIntoView(false);
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Try with adding focus selector to the button onclick
I am developing a web app of where the user can search the song lyrics they want. I am using an API for it. Now I can generate 10 songs results, but the problem is when a user click on "get lyrics" button I can not access the value of that specific button's song title. How can I get the specific song title and album name by just clicking the get lyrics button? Here is my final result:
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
for (let index = 0; index < lyricsName.length; index++) {
const element = lyricsName[index];
element.innerText = data.data[index].album.title;
}
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < artist.length; index++) {
const element = artist[index];
element.innerText = data.data[index].artist.name;
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
//event listener to get lyrics
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(){
const title = `${index + 1}`;
})
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>
I just combined the 3 for loops into one.
const apiUrl = "https://api.lyrics.ovh/suggest";
const search = document.getElementById("search-btn");
const result = document.getElementById("result");
const text = document.getElementById("text");
const getLyrics = document.getElementsByClassName("get-lyrics");
//search by songs or artist...
function searchSongs(term) {
fetch (`${apiUrl}/${term}`)
.then (response => response.json())
.then (data => {
const lyricsName = document.getElementsByClassName("lyrics-name");
const getLyrics = document.getElementsByClassName("get-lyrics ");
const artist = document.getElementsByClassName("artist");
for (let index = 0; index < lyricsName.length; index++) {
lyricsName[index].innerText = data.data[index].album.title;
artist[index].innerText = data.data[index].artist.name;
//event listener to get lyrics
getLyrics[index].addEventListener("click", function(){
console.log("Song:"+data.data[index].album.title +" By:"+data.data[index].artist.name);
//getLyricsAPI(title, artist);
});
}
document.getElementById("result").style.display = "block";
//console.log(data);
});
}
//event listener to search song or artist
search.addEventListener("click", e => {
//e.preventDefault();
const searchTerm = text.value;
if (!searchTerm) {
alert("please type a song a name");
} else {
searchSongs(searchTerm);
}
})
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name"> <span id="artist"></span> <span id="title"></span>
<button id="search-btn" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- search results -->
<div id="result" class="search-result col-md-8 mx-auto py-4">
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsOne" class="lyrics-name">Purple Noon</h3>
<p id="artistOne" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnOne" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTwo" class="lyrics-name">Purple Noon</h3>
<p id="artistTwo" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTwo" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsThree" class="lyrics-name">Purple Noon</h3>
<p id="artistThree" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnThree" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFour" class="lyrics-name">Purple Noon</h3>
<p id="artistFour" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFour" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsFive" class="lyrics-name">Purple Noon</h3>
<p id="artistFive" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnFive" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSix" class="lyrics-name">Purple Noon</h3>
<p id="artistSix" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSix" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsSeven" class="lyrics-name">Purple Noon</h3>
<p id="artistSeven" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnSeven" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsEight" class="lyrics-name">Purple Noon</h3>
<p id="artistEight" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnEight" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsNine" class="lyrics-name">Purple Noon</h3>
<p id="artistNine" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnNine" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9">
<h3 id="lyricsTen" class="lyrics-name">Purple Noon</h3>
<p id="artistTen" class="author lead">Album by <span class="artist">Washed Out</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button id="btnTen" class="get-lyrics btn btn-success">Get Lyrics</button>
</div>
</div>
</div>
<!-- === search results === -->
<!-- Single Lyrics -->
<div id="lyrics" class="single-lyrics text-center">
<button class="btn go-back">‹</button>
<h2 class="text-success mb-4">Pentatonix - Na Na Na</h2>
<pre class="lyric text-white">
Wont go whistling like the wind blows,
Looking out my window,
Just to see the shine
Maybe you might call it crazy,
How Im acting lately,
Skipping through the sky
I see so clearly,
Why Im always feeling free.
So I sleep when my dreams,
Looking like reality
(Gonna feel it! Na na na...) x4
Gonna feel it!
I know where the greener grass grows
Youll just have to follow
To the other side
Lets go tiptoe on a tight rope,
Fallings only natural
Just spread your wings and fly
Youll see so clearly,
Why Im always feeling free.
So I sleep when our dreams
Looking like reality
(Gonna feel it! Na na na...) x4
Bring it down like
Ohh way oh
Yeah yeah yeah yeah yeah yeah
Break it down like
Ohh way oh
Yeah, yeah, yeah...
All around like
Ohh way oh
Yeah, yeah, yeah...
Sing it loud like!
Ohh way oh
Ah oo oo ooo
Gonna feel it! (Na na na...)
Make it sound like! (Na na na...)
All around like! (Na na na...)
Sing it loud like! (Na na na...)
Gonna feel like! (Na na na...)
</pre>
</div>
</main>
<!-- Optional JavaScript -->
<script src="app.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
</body>
</html>
You can pass the event object into your event listener so you will get the which element is clicked. In event listener you can check element's id or what attribute you want to look. If you change the ids of buttons you will get the song information from the buttons.
for (let index = 0; index < getLyrics.length; index++) {
const element = getLyrics[index];
element.addEventListener("click", function(event){
console.log(event.target.getAttribute('id'))
const title = `${index + 1}`;
})
}
I got an issue with my website when I am trying to scroll website on mobile devices sometimes its locking and even when you slide finger on device website is not moving properly. On desktop scrolling working fine. I tried to find the solution but cant figure out what is wrong.
You can test it with developers tools on 375 px resolution or in mobile devices here
Bootstrap 4 template: NOW UI Kit by Creative Tim
I thought problem is with cookie script but when I disable it by commenting in HTML problem is not solving. I tried to comment parts of my JS file but still not working.
There is my JS Script:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
There is my HTML File:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
Fiat
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
Galeria
</li>
<li class="nav-item">
Oferta
</li>
<li class="nav-item">
Kontakt
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar#gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
Maybe someone had similar problem, hope to see some tips from you guys. If you need another script just tell me hope we solve this together.
Best Regards Daniel.
you need to remove below css code form your css file.
.wrapper {
overflow-x: hidden;
}
and also need to update your font size for the element #kontakt p in media query of 576px right now it is 1.1rem you need to reduce it 0.9rem.
I hope after done this two minor changes your scrolling problem will be solved.
I am performing carousel play and pause using jquery and javascript in bootstrap. I have written the code but not getting where I missed.
Here is the full code which might let u catch my mistake.
The problem is that the buttons for play and pause are in the scope of carousel and the behaviour a button normally gives is not the same here.
For the current situation, the buttons are positioned below the prev button and performing the same action which prev is performing i.e. showing the previous image.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-md-block">
<h2>Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-md-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/uthappizza.png" alt="uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<div class="media">
<img class="d-flex order-sm-last mr-3 img-thumbnail align-self-center" src="img/buffet.png" alt="buffet">
<div class="media-body">
<h2 class="mt-0">Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm col-md order-sm-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="alberto">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya<span class="badge badge-danger">Exclusive</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#mycarousel').carousel({ interval : 2000 });
$('#carousel-pause').click(function(){
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function(){
$('#mycarousel').carousel('cycle');
});
});
</script>
</body>
</html>
Proper Behaviour of Carousel play and pause.
yeah dude, i also had the problem while doing a course from coursera. It is not the problem with jquery. Set the "z-index" of "carouselButton" to 2 or higher and it should work
Yeah...set z-index: 1; to carouselButton ...it will definitely work.
After going through your script i discover you opt out an important detail in your code that is you didn't add pause: false after interval:2000. so your script code should have been presented this way.
<script>
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000, pause: false } );
$("#carousel-pause").click(function(){
$("#mycarousel").carousel('pause');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
});
});
</script>
or you can make use of this
<script>
$('#mycarousel').carousel({
interval: 1500,
pause: false
});
$('#carousel-pause').click(function() {
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function() {
$('#mycarousel').carousel('cycle');
});
</script>
either ways your code will be up and running fine when you click the pause or play button
given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>
The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})
You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example
Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());