I have a problem with render component (courses), when i want click in case "undergraduate" but the componenent renders in the last tab panel... help me please!, any idea how solve this problem? thanks.
in the image have the issue render only in the last nav tab enter image description here
here my code
Html
<div id="ofert" class="row py-4">
<div class="col-md-4 mb-2">
<div class="row">
<div class="col-xs-12 col-md-12 p-0">
<ul class="nav nav-tabs flex-column nav-ga-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" ##click.prevent="navClick" data-graduation="Undergraduate" id="home-tab" data-toggle="tab" href="#undergraduate" role="tab" aria-controls="home" aria-selected="true">undergraduate</a>
</li>
<li class="nav-item">
<a class="nav-link" ##click.prevent="navClick" data-graduation="Postgraduate" id="profile-tab" data-toggle="tab" href="#postgraduate" role="tab" aria-controls="profile" aria-selected="false">oosgraduate</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="undergraduate" role="tabpanel" aria-labelledby="home-tab">
<courses ref="courses" :static=`image`></courses>
</div >
<div class="tab-pane fade" id="postgraduate" role="tabpanel" aria-labelledby="profile-tab">
<courses ref="courses" :static=`image`></courses>
</div>
</div>
</div>
</div>
parent
import courses from '../components/microspecial/ofert.vue'
new Vue({
el: '#ofert',
components: { courses },
data() {
return {
graduationlevel: ''
}
},
methods: {
navClick(e) {
this.graduationlevel = e.currentTarget.dataset.graduation;
this.$refs.courses.showData(this.graduationlevel);
}
}
});
child
<template>
<div class="row bg-light">
<div v-for="item in courses" class="col-sm-12 col-md-6 p-4 border-bottom">
<div class="row ga-i-box-oferta">
<div class="col-md-12 mb-2 ga-tittle-oferta">
<h2>{{item.Name}}</h2>
</div>
<div class="d-none d-lg-block col-md-5">
<div><img class="border" :src="url +`/repository/microspecial/courses/` + item.Id + `.png`" alt="" width="130" /></div>
</div>
<div class="col-xs-12 col-lg-7 ga-i-box-oferta-info">
<i class="fas fa-barcode"></i><span>Snies: {{item.Snies}}</span><br>
<i class="fas fa-chalkboard-teacher"></i><span>{{item.MethodologyName}}</span><br />
<i class="fas fa-user-graduate"></i><span>{{item.Title}} </span>
<div class="ga-i-box-btn">
Más información <i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['static'],
data() {
return {
courses: [],
url: this.static
}
},
methods: {
showData(graduationLevel) {
this.courses = [];
fetch(`/MicroSpecial/GetCourses?graduationLevel=${graduationLevel}`)
.then(respon => respon.json())
.then(response => {
this.courses = response;
})
.catch(response => {
})
}
}
}
</script>
Related
My question is, is there a possibility with ASP.NET Core MVC to put all data from my database in a foreach loop in different bootstrap cards with navigation?
I've already tried this and found that it works partially. But as soon as I click on a navigation tab from the second card, the tabs are only changed on the first card.
That's my index.html:
<div class="row">
#foreach (var q in Model.Question)
{
<div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#frage" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#antwort" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3 mt-sm-3">
<div class="tab-pane active" id="frage" role="tabpanel">
<h5 class="card-title text-center">#q.Question</h5>
</div>
<div class="tab-pane" id="antwort" role="tabpanel" aria-labelledby="history-tab">
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort1</p>
<ul>
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example1 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example1</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example2 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example2</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example3 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example3</li>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Example4 != null)
{
<li class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Example4</li>
}
</ul>
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2 != null)
{
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2</p>
}
#if (#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3 != null)
{
<p class="card-text">#Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3</p>
}
</div>
</div>
</div>
<div class="card-footer text-center">
<p class="card-text small text-black-50">Ausbildungsfach: #q.Category | Prüfungsfach: #q.ExamCategory | Schulfach: #q.SubjectCategory </p>
</div>
</div>
</div>
}
</div>
And here is my small javascript file:
$('#fragen-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
Card Nav Header:
As soon as I click on "Answer" on my card 2, my card 1 changes to the "Answer" page and not my card 2
Change your code like below:
<div class="row">
#{var i = 0; } //add this...
#foreach (var q in Model.Question)
{
<div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
<div class="card ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
<li class="nav-item"> //change here..
<a class="nav-link active" href="#frage_#i" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
</li>
<li class="nav-item"> //change here...
<a class="nav-link" href="#antwort_#i" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3 mt-sm-3">
//change here...
<div class="tab-pane active" id="frage_#i" role="tabpanel">
<h5 class="card-title text-center">#q.Question</h5>
</div>
//change here...
<div class="tab-pane" id="antwort_#i" role="tabpanel" aria-labelledby="history-tab">
//...
</div>
</div>
</div>
//...
</div>
</div>
i++; //add this...
}
</div>
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.
The following is the code of my .vue. swapping between div worked just fine and the transition fade works well too. but mode out-in not working at all. both elements were shown at the same time while transitioning.
EDIT##
Sorry that I am not familiar with fiddle. Please find the full code of my .vue below for your best reference.
<template>
<div>
<div class="col-md-3">
<namecard :shop="shop" :owner="user"></namecard>
</div>
<div class="col-md-9">
<div>
<ul class="nav nav-tabs shop-manage-tabs">
<li class="nav-item">
<a class="nav-link" :class="isActive == 'items' ? 'active' :''" #click.prevent="activateTab('items')">Items</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'operaters' ? 'active' : ''" #click.prevent="activateTab('operaters')">Operaters</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="isActive == 'info' ? 'active' : ''" #click.prevent="activateTab('info')">Info</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" :class="isActive == 'statistics' ? 'active' : ''">Statistics</a>
<div class="dropdown-menu">
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Another action</a>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" #click.prevent="activateTab('statistics')">Separated link</a>
</div>
</li>
</ul>
</div>
<transition-group name="fade" mode="out-in">
<div v-if="isActive == 'items'" key="items">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProduct = true">Add New Product</button>
<button type="button" class="btn btn-danger" #click="addNewProduct = true">Delete Product</button>
</div>
<add-new-product v-show="addNewProduct"></add-new-product>
<div class="card" style="padding: 1rem">
<item-card :productId="product.id" v-for="product in shop.products" :key="product"></item-card>
</div>
</div>
<div v-else-if="isActive == 'operaters'" key="operaters">
<div class="card" style="padding: 1rem">
<h1>Control Panel</h1>
<button type="button" class="btn btn-success" #click="addNewProductModal = true">Add Operator</button>
<button type="button" class="btn btn-danger" #click="addNewProductModal = true">Delete Operator</button>
</div>
<div class="card">operaters</div>
</div>
<div v-else-if="isActive == 'info'" class="card" key="info">
<div class="card">info</div>
</div>
<div v-else-if="isActive == 'statistics'" class="card" key="statistics">
<div class="card">statistics</div>
</div>
</transition-group>
</div>
</div>
</template>
<script>
import itemCard from './Item-card.vue'
import nameCard from '../Namecard.vue'
import addNewProduct from './Add-new-product.vue'
export default {
components:{
'item-card':itemCard,
'namecard':nameCard,
'add-new-product':addNewProduct,
},
data(){
return{
user:{},
shop:{},
isActive:'items',
addNewProduct:false,
}
},
props:[
],
created(){
this.getUserInfo()
},
mounted(){
},
methods:{
getUserInfo(){
var vm = this
vm.$http.get('/getAuthUser').then((response)=>{
vm.user = response.data
vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
vm.shop = response.data.data.shop
})
})
},
activateTab(tab){
var vm = this
vm.isActive = tab
}
}
}
</script>
You need to give key attribute to each of the div to make the transition work smoothly. In your case I see an extra ', which might be an issue, try removing that.
Change
<div v-if="isActive == 'items'" key="'items'">
to
<div v-if="isActive == 'items'" key="items">
and similarly at other places as well.
I have this Vue instance:
var vm = new Vue({
el: '#app',
data: {
user: {
email: '',
password: '',
passwordconfirm: '',
bars: {},
authentication_token: '',
id: 0
}
},
components: {
dashboard: dashboard
},
events: {
'onLoginSuccesfull': function(user) {
// do stuff with user obj
this.$broadcast('onUserLoggedIn');
}
}
}
It has a 'dashboard' component:
var dashboard = Vue.extend({
template: '#dashboard',
data: function() {
return {
currentPage: 'main'
}
},
components: {
'dashboard-mainpage': dashboardmainpage
}
events: {
'onUserLoggedIn': function() {
alert('I should be firing bu I am not!');
}
}
});
Vue.component('dashboard', dashboard);
The 'dashboard' has a 'dashboard-mainpage' component:
var dashboardmainpage = Vue.extend({
template: '#dashboard-mainpage',
methods: {
loadData: function() {
this.$http.get('/dashboard/main.json', {
authenticity_token: window._token
}).then(function(response) {
var data = JSON.parse(response.body);
console.log(data);
}, function(response) {
console.log(response);
this.$dispatch("onRequestUnauthorized");
});
}
},
events: {
'onUserLoggedIn': function() {
alert('I should be firing as well but I am not!');
this.loadData();
}
}
});
The problem is that when the 'onLoginSuccesfull' event is triggered on the main Vue instance, the subsequently broadcasted 'onUserLoggedIn' on the 1st and 2nd level descendant are not triggered, when calling 'this.$broadcast('onUserLoggedIn');'.
I know that event callbacks must return true to keep propagating down the chain but the first event callback (on 'dashboard') is not even triggered.
What am I missing?
Thanks!
===== EDIT =====
Main app:
<div id="app">
<dashboard v-if="currentStep == 'dashboard'" v-bind:appname="appName" v-bind:dashboard-vm="dashboard" v-bind:user="user" v-bind:bar.sync="bar"></dashboard>
</div>
Dashboard template:
<template id="dashboard">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<span>The Bar</span>
</div>
<div class="clearfix"></div>
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
{{ user.email }}
<div class="menu_section">
<ul class="nav side-menu">
<li><a v-on:click="createNewBar"><i class="fa fa-plus"></i> Create new bar</a>
</li>
<li><a v-on:click="showDashboard"><i class="fa fa-bar-chart"></i> Dashboard</a>
</li>
<li><a v-on:click="showBars"><i class="fa fa-bars"></i> Bars</a>
</li>
<li><a><i class="fa fa-tachometer"></i> Settings <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a v-on:click="showProfile">Profile</a></li>
<li><a v-on:click="showPaymentsPlans">Plan & payments</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a v-on:click="$parent.logoutUser" style="cursor: pointer">Log out</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<dashboard-mainpage v-if='currentPage == "main"' v-bind:vm="dashboardVm"></dashboard-mainpage>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
© <%= Time.now.year %> The Bar
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
</template>
Dashboard-mainpage:
<template id="dashboard-mainpage">
<div class="col-md-12 x_title">
<div>
<div class="btn-group pull-right">
<button type="button" class="btn btn-info"><span class="fa fa-calendar" aria-hidden="true"></span> Today</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
Today
</li>
<li>
Yesterday
</li>
<li>
Last 7 days
</li>
<li>
Last 30 days
</li>
<li>
Last year
</li>
<li>
All
</li>
</ul>
</div>
<span class="pull-right">Filter:</span>
</div>
</div>
<!-- top tiles -->
<div class="row top_tiles">
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-bars"></i></div>
<div class="count">{{ vm.totalBars }}</div>
<h3>Total bars</h3>
<p>All you active bars</p>
</div>
</div>
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-eye"></i></div>
<div class="count">{{ vm.totalViews }}</div>
<h3>Total views</h3>
<p>Total number of bar views</p>
</div>
</div>
<div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="tile-stats">
<div class="icon"><i class="fa fa-mouse-pointer"></i></div>
<div class="count">{{ vm.totalClicks }}</div>
<h3>Total clicks</h3>
<p>Total number of clicks</p>
</div>
</div>
</div>
<!-- /top tiles -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Statistics</h3>
</div>
<div class="col-md-6">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_title">
<h2>Sub title</h2>
<div class="clearfix"></div>
</div>
<p>stats here</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br />
</template>
Ok. For anyone who is going to wander onto this "issue". Here's the fix.
I used 'v-if' attributes on the children that were listening to the 'onUserLoggedIn' event. The docs for 'v-if' say:
Conditionally render the element based on the truthy-ness of the
expression value. The element and its contained data bindings /
components are destroyed and re-constructed during toggles. If the
element is a element, its content will be extracted as the
conditional block.
So, when 'v-if = "something false"' on some child component it practically does not exist and thus is not able to do or respond to anything, including events.
When using 'v-show' instead of 'v-if' to conditionally toggle certain components, the component stays "alive" and will be able to respond.
Some stuff going on:
If you define a component in another component (as you are doing in the app component, there is no need to define this component globally (https://vuejs.org/guide/components.html#Registration-Sugar).
If a component is not "called" inside another component's template, you never establish a relation parent-children between them. I can't see the template of the App component, so I assume there is none.
There is some bits of code missing, but I assume that onLoginSuccesfull never gets actually called on the App component to begin with!
As you say, if you want an event to propagate after it's been triggered for the first time, this triggering function must return true.
Here's a working jsfiddle with the basics covered: https://jsfiddle.net/e85ekxk1/2/
Good luck!
I am experimenting with bootstrap, angularjs. So I pushed nav-tabs inside modal-window and open this modal by a link's click. But I want to open appropriate tab straight on click. If i click on travel, I want to get to the travel tab etc. What I should use to solve this problem? Maybe I need to simulate click or something like this?
http://jsfiddle.net/3kgbG/1056/
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="hobbies">
hobbies & interests
</div>
<div class="row padding-top group-icons">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
football
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
travel
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
history
</a>
</div>
</div>
</div> <!--popUp container-->
<!-- Modal -->
<div id="myModal" class="modal fade popUp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h2 class="h2-style">My Hobbies</h2>
<hr class="hr_line"/>
</div>
<div class="modal-body">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
data-toggle="tab">bartending</a></li>
<li role="presentation"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>
</li>
<li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
data-toggle="tab">travel</a>
</li>
<li role="presentation"><a href="#history" aria-controls="history" role="tab"
data-toggle="tab">history</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" ng-controller="HobbiesCrtl">
<div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
<div class="container padding-top">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<img src="{{hobby.img}}" alt=""
style="width: 70%; margin: 0 auto; display: block">
</div>
<div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
{{hobby.description}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--popUp container-->
<!--angular Ctrl-->
myApp.controller('HobbiesCrtl', function($scope, $http){
$scope.title = "my hobbies";
$http.get(window.location + 'js/hobbies.json').success(function(data) {
$scope.hobbies = data;
})
} );
this is my json file:
{
"id": "football",
"img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
{
"id": "travel",
"img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
As soon as you are using the same controller for the view and modal window, so they are sharing the same $scope.
You can create scope variable like activeTab, and set in on click:
<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
football
</a>
In your modal window just toggle active class if scope variable activeTab has neccessary value:
<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>