I've been staring at this issue all morning now, and I just cannot see where my problem is. I've looked at most other "load content into div upon click" posts, and all the jQuery scripts/div ID's seem to be same with what I have.
Essentially, I have a card on my page with 2 links as header, "Content A" and "Content B." I'd like the card-body to change dynamically as someone clicks between Content A and Content B.
I'm making the site with Django, if that makes any difference.
The card is from Bootstrap.
This is my code:
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("top10pos.html");
});
</script>
</div>
</div>
All top10pos.html has inside is just <p>Content A</p> (testing), and it's in the same directory as the HTML file with the above card code.
What am I doing wrong? Everything seems to be following what most other posts said was a fix. Any help would be greatly appreciated. Thank you.
I think maybe the DOM is not fully loaded upon execution of this .load().
Try wrapping your code like this:
$(document).ready(function(){ });
Let me know your results - I'll keep thinking of other possibilities.
Here is Error As i Guess! The js will replace itself on the first click.
<div class="card-body" id="tweetcontent">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("top10pos.html");
});
</script>
</div>
Here is what solution will look like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<p>Anything Here will be replaced</p>
</div>
</div>
<script>
$("#actionA").on("click", function(){
$("#tweetcontent").load("https://enable-cors.org/");
});
$("#actionB").on("click", function(){
$("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
});
</script>
Run it here! For Fiddle go here
$("#actionA").on("click", function(){
$("#tweetcontent").load("https://enable-cors.org/");
});
$("#actionB").on("click", function(){
$("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
});
body {
background: #ffffff;
padding: 20px;
font-family: Helvetica;
}
.card-body{
background: #ddd;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center" style="width: 800px;">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
</li>
</ul>
</div>
<div class="card-body" id="tweetcontent">
<p>Anything Here will be replaced</p>
</div>
</div>
Related
I have created a bootstrap pills in my website but its is not working the way its showed on documentation. when I click on the pill its not opening the specific tab panel. here am attaching the code.Here am tring to add tabs pills linking with specific contents below in divs. Don't know what am missing in the code but when i click on the tab the contents are not changing.
<script>
$(".nav li a").on("click", function() {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
</div>
</main><!-- /.container -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
You should load jQuery before loading Bootstrap. Please read the docs properly.
Your script method of adding a class("active") was wrong. There is an inbuilt method provided by Bootstrap .tab("show") which then enables the tab to toggle properly as per the given ID's
I have changed the snippet and it's working now. Kindly go through this https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp to learn more in detail.
$(document).ready(function(){
$(".nav-item a").click(function(){
$(this).tab('show');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
<div id="third" class="tab-pane fade" role="tabpanel">Content 3</div>
</div>
</main><!-- /.container -->
<!-- jQuery should come before loading boostrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
I have a working simple blog code example with 3 nav-buttons Home/All posts/About me/ which changes markdown story to html. The code looks like this:
<div class="container-md">
<img src="assets/ico/android-chrome-192x192.png" class="rounded float-left" alt="..." height="42" width="42">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="//test.net">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="allPosts" onclick="allStories()" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About me</a>
</li>
</ul>
</div>
<br>
<div class="container-sm">
<zero-md src="stories/how-to-install-aws-bucket-software-centos7.md"></zero-md>
</div>
function allStories() {
console.log("Works")
$("#allPosts").load("pages/allstories.html");
}
Right now if I click on nav-button - All posts - it adds the content from
pages/allstories.html
on a button area. But my goal is to replace the
<zero-md src="stories/how-to-install-aws-bucket-software-centos7.md"></zero-md>
content with new allstories.html content. How can I achieve that?
Any help appreciated!
Give id for both container-sm and zero-md division then try like this function allStories(){
$(#zero-md).hide();
$(#container1).load("pages/allstories.html");
}
I'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'
My current code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.
What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.
The javascript looks right but it's just not tabulating properly
Here's the codepen:
https://codepen.io/anon/pen/gKLJrm
You need to the use the appropriate markup for tabs with tab-content and tab-pane to make the tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
(no jquery is needed)
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Notice both the nav-link and tab-pane have the active item set.
I hope this solves your problem
$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
li.nav-item.active a {
background: #fff;
border: 1px solid #eee;
border-bottom: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTabs">
<li class="nav-item active">
<a class="nav-link" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
I have nav-tabs in my page.
When someone clicks on a certain tab I want a div to be visible that's hidden.
<li role="presentation" class="active"> Annual Adult</li>
<li role="presentation" class=""> Annual Junior & Student</li>
<li role="presentation" id='monthly' class="">Corporate</li>
<div class='show'>Some content </div>
<style>
.show{display:none;}
</style>
<script>
$(document).ready(function(){
if ($("#monthly").hasClass("active")) {
$('.show').show();
}
else{
$('.show').hide();
}})
</script>
Now let's say corporate is active I want another div to be shown else hidden but that's not working.
Try this:
$('yourTabSelector').on('click', function() {
$('.show').toggle();
});
Or if you want to make it work only once:
$('yourTabSelector').on('click', function() {
$('.show').show();
});
Please try with below code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.show{display:none;}
.active{background:pink;}
</style>
<script>
$(document).ready(function(){
if ($("li").hasClass("active")) {
$('.show').show();
}
else{
$('.show').hide();
}
$("li").on('click', function() {
$("li").removeClass('active')
$(this).addClass("active");
$('.show').text('you selected ' + $(this).text());
})
})
</script>
</head>
<body>
<li role="presentation" class="active"> Annual Adult</li>
<li role="presentation" class=""> Annual Junior & Student</li>
<li role="presentation" id='monthly' class="">Corporate</li>
<div class='show'>Some content </div>
</body>
</html>
Why not just use the tabs the way bootstrap suggests to use them:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">... this is home</div>
<div class="tab-pane" id="profile" role="tabpanel">...this is profile</div>
<div class="tab-pane" id="messages" role="tabpanel">...this is messages</div>
<div class="tab-pane" id="settings" role="tabpanel">...this is settings</div>
</div>
I have integrated "animsition.js" to my website, it work fine but some link don't work in "fade out" effect. I post my code:
<nav>
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right text-left" id="side-menu">
<!-- LOGO -->
<a class="animsition-link" href="../../index.html"><img src="../../assets/images/logo/logo_white2.png" alt="logo"></a>
<i class="icon ion-ios-close-empty icon-close menu-close-btn text-white"></i>
<div class="top">
<div class="tr">LANGUAGE_</div>
<div><a class="animsition-link" href="#"><span class="uns lang">ITALIANO</span></a> <br>
<a class="animsition-link" href="#"><span class="current lang">ENGLISH</span></a></div>
</div>
<ul class="nav navbar-nav container animsition">
<div class="tr">MENU_</div>
<li><a class="animsition-link" href="../../index.html">HOME</a></li>
<li class="dropdown">
<a class="expander" href="#">
<span class="current">PROJECTS LIST</span></a>
<div class="content">
<ul role="menu">
<li>
<a href="#">
<span class="rec4">CapozziPaints</span>
</a>
</li>
</ul>
</div>
</li>
<li>ABOUT</li>
<li>COOKIE POLICY</li>
<ul class="nav navbar-nav">
<div class="tr">CONTACT ME_</div>
<li><span class="rec3">info#josedesign.it</span></li>
<li><span class="text-white">+39 389.582.3119</span></li>
</ul>
</ul>
<!-- End navbar-nav -->
<p class="copyright grey">2017 JoseDesign.it<br>Proudly designed by Jose.</p>
</div>
</nav>
After my tag, I have inserted " ", but some link like "Home", don't make the fade out effect.
The other question is I have to insert a "fadeIn" effect to the "img" tag that I have in this code:
$(window).scroll(function() {
$.each($('img'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
I try several way, the scrolling effect + show image work fine, but the fadeIn effect don't work.
Could someone help me? Thanks.
solved....
Simply I have change the animsition.js ver. 4.0.2 with vers. 3.4.3....done!
Everything work fine, all the link work fine.
The jquery script (for fadeIn image effect) doesn't work yet...