I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>
You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.
Related
Im trying to get data from an API using ajax request. I did it but im not sure how to show the information to the client. I want to search by artist and show their songs. Here is my code and link to the api. Please help me!
https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MusicApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">MusicApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Lyrics</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row" style="margin-top:30px;">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<img class="thumbnail img-responsive" src="images/notes.jpg">
</div>
<div class="col-sm-8">
<input type="checkbox" class="form-check-input" id="sort">
<label class="form-check-label" for="sort">Sort</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label for="artist">Artist:</label>
<textarea class="form-control" rows="1" id="artist"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-footer" style="height:55px;">
<button type="button" id="postComment" class="btn btn-primary pull-right publish"><span
class="glyphicon glyphicon-globe"></span> Search
</button>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Results</h3>
</div>
<ul class="list-group" style="min-height:241px;" id="contentList">
<li class="list-group-item" style="display:none" id="cloneMe">
<div class="row">
<div class="col-sm-2 col-xs-3">
<img src="images/notes.jpg" class="thumbnail img-responsive">
</div>
<div class="col-sm-7 col-xs-6">
<h4>Shakira</h4>
<p id="songName">some result </p>
<p id="lyricsLink">some result</p>
</div>
<div class="col-sm-3 col-xs-3">
<button type="button" class="btn btn-danger pull-right remove-post"><span
class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#postComment').click(function(){
artistName=$('#artist').val();
console.log(artistName);
var settings = {
"async": true,
"crossDomain": true,
"url": "https://genius.p.rapidapi.com/search?q=" + artistName,
"method": "GET",
"headers": {
"x-rapidapi-host": "genius.p.rapidapi.com",
"x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
}
}
$.ajax(settings)
.done(function (response) {
console.log(response.response.hits);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
console.log(r.result.header_image_url);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('#songName').html(r.result.full_title);
miniMe.find('#lyricsLink').html(r.result.url);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.find('checkbox').click(function(){
})
miniMe.show();
$('#contentList').append(miniMe);
});
});
return false;
});
});
</script>
</html>
You can iterate through the response with using this as your ajax block;
$.ajax(settings)
.done(function (response) {
// sort the response alphabetically
response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);
response.response.hits.forEach(r => {
var miniMe = $('#cloneMe').clone();
miniMe.attr('id', r.result.id);
miniMe.find('img').attr('src', r.result.header_image_url);
miniMe.find('h4').text(artistName);
miniMe.find('p').html(r.result.full_title);
miniMe.find('button').click(function () {
miniMe.remove();
});
miniMe.show();
$('#contentList').append(miniMe);
});
});
You can see the working demo in codepen and you can look into this link if you want to learn about sort() function and how it works in JavaScript.
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.
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());
Is the script tag with no src attribute is wrong?
I have written this script tag
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
I am getting this error on console Failed to load resource: the server responded with a status of 404 (Not Found). I am unable to understand what is the problem. I have included the jquery core library on header of page. Also there are some other javascripts codes that are included bfore this code but they did not throws any error. I have also attached a screenshot of the console.
Update 1
I tried after removing the type attribute. nothing happens :( .
I have included the jquery library version 1.9.1 in header.
Update 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Bharat">
<title>::Eduesy:: </title>
<meta property="og:title" content="Bharat">
<meta property="og:description" content="Bharat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/web.css?1.0" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/app.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/tooltip.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/custom.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/vendor.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/libs.all.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/app.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tooltip.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tpr.web.min.js"></script>
<script src="http://eduesy.fsas.co.in/js/student/chartist.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".header").addClass('header-fix');
}else{
jQuery(".header").removeClass('header-fix');
}
});
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".row-blue").addClass('header-fix');
}else{
jQuery(".row-blue").removeClass('header-fix');
}
});
});
</script>
</head>
<body>
<div class="header">
<header>
<div class="cf">
<div class="pTopHeader_dropdown pTopHeader_userDropdown non-selectable fr js-user-dropdown">
<a class="pTopHeader_dropdown_trigger pTopHeader_userDropdown_trigger js-trigger">
<span class="profilename">Welcome Chandu</span> <img class="pTopHeader_userDropdown_thumb " alt="" src="http://eduesy.fsas.co.in/uploadedFiles/student/IMG_20150412_182136 (2) - Copy.jpg"/>
</a>
<ul class="pTopHeader_dropdown_menu pTopHeader_dropdown_menu-right pTopHeader_userDropdown_menu js-dropdown">
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Profile
</li>
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Switch Course
</li>
<li>
<span class="fa fa-power-off pTopHeader_dropdown_menu_icon"></span>Logout
</li>
</ul>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide">
<a role="button" tabindex="0" class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Contact Us</a>
<div class="pTopHeader_contactUpWrapper_tooltip">
<div class="contactTooltip">
<div class="cf">
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-feedback"></div>
<div class="contactTooltip_title">Share Feedback</div>
<div class="contactTooltip_subtitle">Share your feedback for us. We are continuously working to improve your experience.</div>
<div class="contactTooltip_callUsNo">abc#xyz.com</div>
</div>
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-callus"></div>
<div class="contactTooltip_title">Call us</div>
<div class="contactTooltip_subtitle">We are happy to hear from you. We are available from 9am to 6pm on all days.</div>
<div class="contactTooltip_callUsNo">+91 - 1800 123 456</div>
</div>
</div>
<div class="contactTooltip_footer">
<span class="contactTooltip_footer_mapIcon fa fa-map-marker" aria-hidden="true"></span>
<div class="contactTooltip_footer_content">
<div class="contactTooltip_footer_title">Eduesy Online Education </div>
<div class="contactTooltip_footer_text">Mumbai - 400076, India</div>
</div>
</div>
</div>
</div>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide notification">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white"><i class="fa fa-bell" aria-hidden="true"></i><span>0</span></a>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide btn-buy">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Buy</a>
</div>
</div>
</header>
<div class="logo">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="mainSidebar_logoBlock_logo -ajaxify" title="EduEsy" style="width: 176px !important">
<div class="mainSidebar_logoBlock_logo_img" style="background-image: url(http://eduesy.fsas.co.in/images/logo.png)"></div>
</a>
</div>
<div class="mobileMenu">
<div class="mobileMenu_fallbackHeader"></div>
<div class="mobileMenu_hamburger js-hamburger-menu">
<div class="mobileMenu_hamburger_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="row-blue">
<div class="pull-left">
Admission Taken Date: 29/05/2017
</div>
<div class="pull-right">
Student ID: EDUESY116 <span>|</span> Package Valid till: 25/12/2017
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.class_slider').click(function(){
jQuery('[name=product_id]').val(jQuery(this).data('product_id'));
jQuery('[name=product_type]').val(jQuery(this).data('product_type'));
jQuery(this).parents('form').submit();
});
});
</script>
<div class="popupbox" id="popuprel_course">
<div id="intabdiv">
<div id="test_tool_modals_wrapper">
<div class="md mdTestPause js-test-pause-modal is-visible" style="overflow-y: auto;">
<div class="close">X</div>
<form action="" method="post">
<div class="obrdV2_container js-modules-container pb-10 ">
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module profiletype" data-module="profiletype">
<div class="p-20 clickable js-toggle-module">
<div class="obrdV2_module_image obrdV2_module_image-klass fl"></div>
<div class="obrdV2_module_heading js-module-heading">
<div class="title">Choose one of the following</div>
<div class="selectedValue js-selected-value"></div>
</div>
<div class="arrowDown js-arrow-down class" style="display: none;"></div>
<div class="clr"></div>
</div>
<div class="obrdV2_module_body js-module-body visible ">
<div class="col-md-6 col-sm-12">
<div class="item academic"><label><input type="radio" name="profileType" value="academic" id="academic" style="display: none;"> Academic</label></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="item professional"><label><input type="radio" name="profileType" value="professional" id="professional" style="display: none;">Professional Courses</label></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module address hide" data-module="address"></div>
<div class="clr"></div>
<div class="submit-row hide">
<div class="obrdV2_module js-module-class js-module submit" data-module="submit">
<div class="obrdV2_module_body js-module-body visible">
<input type="submit" name="switchCourseSubmit" class="btn btn-default" value="Save and Continue">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script>
$(document).ready(function() {
$('.switch_class').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
jQuery('body').on('click', '.popupbox .close', function() {
jQuery(this).parents('.popupbox').fadeOut();
jQuery('#fade').fadeOut();
return false;
});
jQuery('.profiletype .js-module-body .item').on('click', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="profileType"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'profiletype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level2').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.classtype', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="classtype"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'boardtype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level3').remove();
jQuery('.address').before(html);
}
});
}
});
jQuery('.obrdV2_container').on('click', '.boardListing', function(evt){
if (evt.target.tagName == 'INPUT'){
var board = jQuery('[name="boardID"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'classList', classList: board},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level4').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.obrdV2_klass', function(evt){
if (evt.target.tagName == 'INPUT'){
jQuery(this).siblings( '.selected').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.address').removeClass('hide');
jQuery('.submit-row').removeClass('hide');
}
});
jQuery('.obrdV2_container .address').on('change', function(evt){
jQuery('.submit-row').removeClass('hide');
});
(function($){
$(window).on("load",function(){
var modal_ht = jQuery('#popuprel_course .popupbox').actual('height');
jQuery("#popuprel_course #intabdiv").height(modal_ht);
jQuery("#popuprel_course #intabdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick",
scrollbarPosition:"outside",
updateOnBrowserResize: true,
updateOnContentResize: true
});
});
})(jQuery);
});
</script>
<style type="text/css">
.popupbox .close {
position: absolute;
right: 10px;
top: 8px;
font-size: 20px;
font-weight: bold;
background: #fff;
color: #000;
z-index: 9999999999999999;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
</style>
<div class="pageContentContainer">
<div id="page_content_wrapper" class="js-page-content-wrapper">
<div class="pHeader js-page-content">
<div class="cf">
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide paging">
<a href="http://eduesy.fsas.co.in/student" >Dashboard</a> » <a href="index.php" >Lecture</a>
» <a href="javascript:void(0);" >HTML JavaScript</a>
</div></div>
<div class="pHeader_content pt-25 pb-20 phn-pb-5 clearfix">
<div class="container">
<h1 class="h1 color-white normal">
Lectures
</h1>
</div>
</div>
<div class="pHeader_tabsWrapper js-page-tabs-wrapper">
<div class="container">
<nav role="navigation">
<ul class="pHeader_tabs">
<li class=""><a data-tab="challenges_home" href="index.php?subject=51" class="-ajaxify -strk" >HTML Basic</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=52" class="-ajaxify -strk" >HTML Styles</a></li> <li class="active"><a data-tab="challenges_home" href="index.php?subject=53" class="-ajaxify -strk" >HTML JavaScript</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=54" class="-ajaxify -strk" >HTML And XHTML</a></li>
</ul>
</nav>
</div>
</div>
<div class="pHeader_tabsSpacing"></div>
</div>
<div class="container js-page-content">
<div class="coachmarks_icon coachmarks_icon_selectSubject hide js-coachmarks"></div>
</div>
<div class="container pv-30 cf">
<div class="pCol pCol-wide alpha js-pageLearn">
<aside class="pCol pCol-narrow omega phn-mt-40">
<div class="heading heading-bordered h3 bold">Chapters</div>
<div class="cf mt-30 mb-50">
<a href="topic.php?topic=26"><div class="chapterTile tile tile-shadowed select_subject cf js-chapter-tile mb-20 tab-mb-20 phn-mb-15" data-subject_id="19">
<div class="chapterTile_arrowContainer">
<h2 class="chapterTile_title ">HTML File Paths</h2>
<span class="tile_arrow fa fa-angle-right"></span>
</div></div></a>
</div>
</aside>
</div>
<div class="sidebar-common">
<h2>Our mission is to provide a world class education to anyone, anywhere.</h2>
<h3>You will receive inside.</h3>
<ul>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-video.png" /></label>Video Lecture</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-test-series.png" /></label>Test Series</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-study-material.png" /></label>Study Material</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-doubt-section.png" /></label>Doubt Section</li>
</ul>
</div>
<div class="clr"></div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
</div>
<div class="container">
<footer class="footer mv-20">
<ul>
<li>© Eduesy</li>
<span class="footer_dot">•</span>
<li>About</li>
<span class="footer_dot">•</span>
<li>Upgrade</li>
<span class="footer_dot">•</span>
<li>Contact</li>
<span class="footer_dot">•</span>
<li>Terms</li>
<span class="footer_dot">•</span>
<li>Bytes</li>
<span class="footer_dot">•</span>
<li>Blog</li>
</ul>
<div class="clr"></div>
</footer>
</div>
</div>
<div class="mainSidebar js-main-sidebar">
<div class="mainSidebar_switcherBlock js-class-switcher">
<a class="mainSidebar_switcherBlock_switch js-selected-class"> HTML</a>
<div class="mainSidebar_switcherBlock_dropdown js-dropdown">
<form method="post" action="http://eduesy.fsas.co.in/student/lectures/index.php">
<label class="mainSidebar_switcherBlock_option class_slider js-switchOption selected" data-class-title="HTML " data-product_id="47" data-product_type="Course" selected>HTML<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label><label class="mainSidebar_switcherBlock_option class_slider js-switchOption " data-class-title="Advance PHP " data-product_id="61" data-product_type="Course" >Advance PHP<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label>
<input type="hidden" name="product_id" value="course" />
<input type="hidden" name="product_type" value="47" />
<input type="hidden" name="change_product_type" value="1" />
</form>
</div>
</div>
<nav role="navigation" class="mainSidebar_contentBlock mainSidebar_contentBlock-withSwitcher js-main-sidebar-content-block">
<div class="mainSidebar_sHeading">Study Modules</div>
<ul class="mainSidebar_sNav js-mainSidebar-study">
<li data-tab="learn" class="active open">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="-ajaxify q_tip_w" original-title="Lectures">
<div class="iconWrapper">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Lectures</div>
</a>
</li>
<li data-tab="practice" class="">
<a href="http://eduesy.fsas.co.in/student/practice/index.php" class="-ajaxify q_tip_w" original-title="Practice">
<div class="iconWrapper">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Practice</div>
</a>
</li>
<li data-tab="tests" class="">
<a href="http://eduesy.fsas.co.in/student/tests/index.php" class="js-lhs-ts-link q_tip_w -ajaxify -strk">
<div class="iconWrapper">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Tests</div>
</a>
</li>
<li data-tab="tests" class=""><div class="iconWrapper"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><span class="arrow fa fa-angle-right"></span><div class="label">Exam</div></li>
<li data-tab="doubts" class="">
<a href="http://eduesy.fsas.co.in/student/doubt/index.php"
class="-strk -ajaxify q_tip_w js-startDoc">
<div class="iconWrapper">
<i class="fa fa-weixin" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Doubts</div>
</a>
</li>
<li data-tab="challenges" class="">
<a href="http://eduesy.fsas.co.in/student/challenges/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Challenges</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">My Profile</div>
<ul class="mainSidebar_sNav js-mainSidebar-compare">
<li data-tab="dashboard" class="">
<a href="http://eduesy.fsas.co.in/student/dashboard/index.php" class="-ajaxify q_tip_w" original-title="Dashboard">
<div class="iconWrapper">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Dashboard</div>
</a>
</li>
<li data-tab="my_bookmarks" class="">
<a href="http://eduesy.fsas.co.in/student/placement/index.php" class="-ajaxify -bookmarks q_tip_w">
<div class="iconWrapper">
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Placement</div>
</a>
</li>
<li data-tab="achievements" class="">
<a href="http://eduesy.fsas.co.in/student/achievement/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-trophy" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Achievements</div>
</a>
</li>
<li data-tab="leaderboard" class="">
<a href="http://eduesy.fsas.co.in/student/leaderboard/index.php" class="-ajaxify -strk q_tip_w">
<div class="iconWrapper">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Leaderboard</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">Study Tools</div>
<footer class="mainSidebar_footer mv-20">
<ul class="cf">
<li>© Eduesy</li>
<span class="mainSidebar_footer_dot">•</span>
<li>About</li>
<span class="mainSidebar_footer_dot">•</span>
<li>
Discuss
</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Blog</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Terms</li>
</ul>
</footer>
</nav>
</div>
</body>
</html>
ShowMsg('Access denied ! ! !'); Access denied ! ! !
I know variations of this questions have been asked multiple times on this site, but I'm going to give it another try. I feel like I have tried every combination of code possible trying to get this to work, but have had no luck. All I want to do is to get the 'Advanced:' text on the button/dropdown toggle to change to one of the selected dropdown item options when clicked (Item1, Item2, etc).
All functions are obviously not going to end up in my code, but I just wanted to give examples of what I have already tried.
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSearch").text($(this).find(":selected").text());
$("#dropdown option:selected").text();
var text = $("#AdvancedSearch").text($(this).text());
alert(text);
});
});
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText);
});
$(function () {
$("#dropdown").on('click', 'li a', function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Try this :
$(function () {
$("#dropdown a").click(function () {
$("#AdvancedSearch .selection").text('Advanced:'+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
What you want is to execute a function when user click the list link.
This function must take the text inside it's own tag, and we must put that text inside every element having "selection" class.
$(function () {
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(".selection").html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Good perseverance on your attempts !