I want to create something like this menu using bootstrap. But I can't do this. I am creating but there are lots of problem. Is there anyone who can solve this prob? Must remember I am doing with bootstrap 4. Here is the demo.
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<strong>Home tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"><strong>
Profile tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<strong>Message tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<strong>Setting tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
</div>
</body>
</html>
In this menu. Need a header and under the header need to show details with same background color.
Thank you
Try with Bootstrap's Collapse - Accordion:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Theory & Concepts
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Images Files Formats</li>
<li>Pixels vs Vector</li>
<li>...</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Adobe Illustrator CC
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Point1</li>
<li>Point2</li>
<li>PointN</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Outsourcing/Freelancing
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Point1</li>
<li>Point2</li>
<li>PointN</li>
</ul>
</div>
</div>
</div>
</div>
For more information: http://getbootstrap.com/docs/4.1/components/collapse/
You are looking for collapse in bootstrap, check this tutorial here
Here is a sample code for your problem
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Theory & Concepts
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<li>Image file formats</li>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Adobe Illustrator CC
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
//For Adobe illustrator CC
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
OutSourcing/freelancing
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
//For outsourcing and freelancing
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
Hello the code below generates a Bootstrap page with some lorem text and a sidebar however when the size of the browser window gets smaller it appears at the bottom of the document not on the side and when on very small resolutions it becomes hidden which is intended how do I make it appear at the side when on medium resolutions?
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
in?
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
If you want to hide it on on small, remove the d-sm-block..
<nav class="col-lg-2 col-md-3 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
If you want to show it on the side on small, change the outer column breakpoints from col-md-* to col-sm-*..
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
...
</div>
</div>
<div class="container-fluid">
<div class="row">
...
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
https://codeply.com/p/WyZu1eBAfQ
Note: There is no -xs- infix in Bootstrap 4 or Bootstrap 5 so the col-xs-* classes are doing nothing. Also, jQuery is not needed for Bootstrap 5.
$(document).ready(function () {
$(".nav-item").click(function () {
$(".content").load("about.html");
});
});
<section id="header">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</section>
<div class="content"></div>
<div class="jumbotron "><h5>We make web app mobile app IOT and AI</h5>
<h1>We partner with startups founder</h1>
<h1>to build robust digital product</h1>
<div class="mt-5">
<button type="button">Start a Program</button>
</div>
</div>
<div class="discription text-center">
<h1>Digital Agency In India</h1>
<h3>Strategic.Creative.Technical</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br>
Iure dolores quo illo, et ipsa, hic consequuntur quae quia vero, nostrum aspernatur quisquam.<br>
Velit mollitia sapiente blanditiis animi illo, possimus repudiandae.<br>
</p>
</div>
<div class="content">
<div class="row">
<div class="col">
<P class="text-center">want to bring idea to you life?<br>
<button type="button">Call Us Today</button>
</P>
</div>
<div class="col">
<P class="text-center">1 tiny idea + team work = Result.<br>
<button type="button ">Start your Project</button>
</P>
</div>
</div>
</div>
<div>
<h1 class="text-center"><p>EXPLORE YOUR WORK</p></h1>
</div>
<div class="Strack">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>S-Track</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="SmartCrm">
<div class="row">
<div class="col">
<h3>Smart CRM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</div>
<div class="col">
</div>
</div>
</div>
<div class="Fleemarket">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>O-Fleet management</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="Fleemarket text-center">
<div class="row">
<div class="col">
Are you ready to start you project?
</P>
</div>
<div class="col">
<p>
Want to see our more work?
</p>
</div>
</div>
</div>
<div class="text-center">
OUR DIGITAL SERVICE
</div>
<div class="ods text-center">
<div class="row">
<div class="col-sm-3">
<h5>Strategy</h5>
</div>
<div class="col-sm-3">
<h5>UI/UX</h5>
</div>
<div class="col-sm-3">
<h5>development</h5>
</div>
<div class="col-sm-3">
<h5>AI</h5>
</div>
</div>
</div>
<div>
<p class="text-center">FIND US HERE</p>
</div>
<div class="cities text-center">
<div class="row">
<div class="col">
<p>Chennai</p>
</div>
<div class="col">
<p>United Kingdom</p>
</div>
</div>
</div>
<div class="text-center">
<h1>map</h1>
</div>
<div class="footer">
<div class="row">
<div class="col-sm-2">
Logo
</div>
<div class="col-sm-5">
<div class="row">
<div class="col">
<p> OUR services</p>
<p> Blog</p>
<p>Tech</p>
<p>our Process</p>
<p>About us</p>
</div>
<div class="col">
<p>Content</p>
<p>Career</p>
<p>Terms and Conditions</p>
<p>Privacy</p>
</div>
</div>
</div>
<div class="col-sm-5">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
I'm trying to load one HTML to another main HTML using the load function. I have a navbar which has 4 links such as ABOUT, CONTACT, BLOG, SUPPORT. So incase if I click on the link ABOUT, I want the new content to load and already existing content should go. I have already loaded the ABOUT content to main page but I want already exsisting content to go and then new content to display.
PHP gives out native include and requires functions, but if using HTML, I found this working and useful: https://www.w3schools.com/howto/howto_html_include.asp
For removing the body part, you can write a JavaScript function to hide the elements.
I have been using bootstrap 4 for a while now. Seen multiple explonations why the smoothscroll should work but I still don't see to find it!
Maybe someone could explain why it doesn't work for me? Or whats wrong with my coding?
Greats,
Jason
$(document).ready(function(){
let scroll_link = $('.scroll');
//smooth scrolling -----------------------
scroll_link.click(function(e){
e.preventDefault();
let url = $('body').find($(this).attr('href')).offset().top;
$('html, body').animate({
scrollTop : url
},700);
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
return false;
});
});
.masthead {
height: 100vh;
min-height: 500px;
background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
header {
padding: 156px 0 100px;
}
section {
padding: 150px 0;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Home.css" rel="stylesheet" type="text/css"/>
<title>Iterms Group Europe B.V.B.A</title>
</head>
<body>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Iterms Group</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Voordelen">Voordelen</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Administratie">Administratie</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#DebiteurenBeheer">Debiteuren Beheer</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header id="Home" class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 style="font-weight: 800;">Administratiekantoor</h1>
<p style="font-weight: 600;">voor bedrijven en particulieren</p>
<br>
<br>
<p>Welkom Iterms Group Europe is een administratiekantoor die U als ondernemer veel werk uit handen kan nemen. Als ondernemer wilt U niets liever dan bezig zijn met uw bedrijf . Maar voor uw bedrijfsvoering heeft U een goede administratie nodig.
Op zelfstandige basis staan wij U ten dienste en kunnen wij U helpen met uw administratie, debiteurenbeheer, enz…
Ook voor tijdelijke werkzaamheden helpen wij U graag voor het wegwerken van achterstanden in uw administratie bij langdurige ziekte of zwangerschapsverlof.
Iterms Group Europe werkt met flexibele uren in het bedrijf van de klant of vanuit onze maatschappelijke zetel op de Fazantenstraat 122 te As.</p>
</div>
</div>
</div>
</header>
<section id="Voordelen" class="bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-8 mx-auto">
<h2 style="color: mintcream">Voordelen</h2>
<p style="color: mintcream" class="lead">Zit U met de volgende vragen en problemen zoals, ik heb nog veel werk en moet nog:</p>
<p style="color: mintcream">Offertes maken en versturen of mijn facturen maken.</p>
<p style="color: mintcream">Nakijken of de klanten al betaald hebben en een aanmaning sturen.</p>
<p style="color: mintcream">Moet ik met deze klant verdere stappen ondernemen?</p>
<p style="color: mintcream">Nakijken waarom ik een aanmaning heb ontvangen en nog betalingen doen.</p>
<p style="color: mintcream">Is mijn personeel op tijd betaald?</p>
<p style="color: mintcream">Mijn personeel is ziek, wat nu?</p>
</div>
</div>
</div>
</section>
<section id="Administratie" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Administratie</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</section>
<section id="DebiteurenBeheer" class="bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-8 mx-auto">
<h2 style="color: mintcream">Debiteuren beheer</h2>
<p style="color: mintcream" class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
</div>
</div>
</section>
<section id="Contact" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Contact</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Iterms Group Bvba</p>
<p class="m-0 text-center text-white">Website created by Jason Lommelen</p>
</div>
</footer>
<!-- Custom JavaScript for this theme -->
<script src="Js/SmoothScroll.js" type="text/javascript"></script>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
The first line is my javascript code the second is my CSS code and the last one is my HTML code but it should work and I have been adding it in the right way in my opinion.
The answer to this can be found right here:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
You're using the slim version (standardly supplied by Bootstrap), but the slim version doesn't have the animate function. So to fix it just remove ".slim" from https://code.jquery.com/jquery-3.3.1.slim.min.js.
Also you do need to use ".js-scroll-trigger" instead of ".scroll", even though you could just use ".nav-link" as well.
Almost all browser adopts scroll-behavior: smooth;you can check on MDN so no need to use JS anymore
Im quoting from MDN
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
<nav>
1
2
3
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
you can also do something like this
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#today').offset().top - 50
}, 800, "easeOutCubic");
});
I'm using Bootstrap to generate tabs. I have a reset button which clears the content from the tab but it doesn't work. Here's my code:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<?php echo "Some text" ?>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
So my "Clear" button should clear the text, "Some text". How would go about in clearing the text with the button??
tks
maybe you need to add some id or class at your "Some Text" php, like
<span id="abc"><?php echo "Some Text"; ?></span>
So you can access it with jquery or javascript like this onclick button
onclick="somefunction()"
And
somefunction() {
$('#abc').html("");
}
You could try wrap <?php echo 'some text'; ?> in for example a <p> tag and add this code to the onlick event in button tag
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
Try this live example having many tabs
const navItems = document.querySelectorAll('.nav-item')
const tabPanes = document.querySelectorAll('.tab-pane');
navItems.forEach(item => item.addEventListener('click', clear));
function clear(event) {
event.preventDefault();
const element = event.target;
const paneId = element.getAttribute('href').split('#')[1];
const pane = document.querySelector(`#${paneId}`);
clearNavItems();
clearPanes();
element.classList.add('active');
pane.classList.add('show');
pane.classList.add('active');
}
function clearNavItems() {
navItems.forEach(item => item.classList.remove('active'));
}
function clearPanes() {
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.classList.remove('show');
});
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
</div>
</div>
Going by what you currently have, I would make the following edit:
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p id="nav-home-text"><?php echo "Some text" ?></p>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
Targeting to clear nav-home will also clear he button as the button is part of nav-home
Wrap the text in a <p> and give it an id so you could target it from the button using document.getElementById()
You should only target .value for elements that have the value attribute e.g <input>.
I think you need to add some jquery to remove the text.
first you need to place the text inside the span with the id content and clear the text inside the content using jquery.
you can use this.
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<span id="content"><?php echo "Some text" ?></span>
<br><br>
<button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>
Hi i use bootstrap slider to slide element now i want when slider are slide than add a class in another section element. so try to do when .carousel-indicators li:nth-child(1) has class active than add class active also on .single-recent.first and than when .carousel-indicators li:nth-child(2) has class active than add class active on .single-recent.second and remove class active from .single-recent.first and any other all .single-recent element i have. and repeat it dynamically again and again.... but i didn't success to do that.
Here is the HTML code what i use:
<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
</div>
<a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
</div>
<section id="recent-featured" class="recent-featured-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="recent-featured-wrap">
<h3>Featured Work</h3>
<div class="single-recent first">
<div class="single-inner-img">
<img src="img/work/featured/featured-01.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent second">
<div class="single-inner-img">
<img src="img/work/featured/featured-02.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent third">
<div class="single-inner-img">
<img src="img/work/featured/featured-03.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent fourth">
<div class="single-inner-img">
<img src="img/work/featured/featured-04.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And the jQuery :
jQuery(document).ready(function(){
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
$(".single-recent.first").addClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
$(".single-recent.second").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
$(".single-recent.third").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
$(".single-recent.fourth").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
} });
Please help me to find out a way...