I have created bootstrap tab and their corresponding tab-content as per http://getbootstrap.com/javascript/#tabs
The html snippet is given below.
<ul class="nav nav-tabs nav-justified">
<li class="active" role="presentation">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab">
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab">
</li>
</ul>
<div class="tab-content">
<ul class="list-group media-list media-list-stream tab-pane active" id="tab1" role="tabpanel">
</ul>
<ul class="list-group media-list media-list-stream tab-pane" id="tab2" role="tabpanel">
</ul>
</div>
How to check if the tab-content has been scrolled to it's bottom.
The usual solution as mentioned in https://www.sitepoint.com/jquery-check-div-scrolled/ doesn't seem to work.
$(document).ready(function(){
$(tab1).bind('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
console.log("bottom");
}
}
I have two solution for your answer.
Check the example code here CODEPEN.
1. If you do not fix the height of tab-content div then try this code(don't include CSS):
JS:
$(window).scroll(function() {
if (isScrollBottom()) {
alert('scroll end');
}
});
function isScrollBottom() {
var documentHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollPosition);
}
2. If you fix the height of tab-content, the try this code:
JS:
$("#myTabContent").scroll(function (e) {
e.preventDefault();
var elem = $(this);
if (elem.scrollTop() > 0 &&
(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) {
alert("At the bottom");
}
});
CSS:
.tab-content {
height:150px;/*set height here*/
overflow:auto;
}
I hope this resolves your issue.
Enjoy :)
Related
I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.
If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
EDIT: So i ditched the whole thing and resorted to javascript with these new codes #Udara Kasun's code worked and it was close but not what I was trying to achieve. tried these codes for a while and i think i almost got it.
<script>
function myFunction1()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(1) a').tab('show')
});
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
}
function myFunction3()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(3) a').tab('show')
});
}
</script>
<li role="presentation" class="active" id="tabMenu1" onclick="myFunction1()">
<a href="#tabZone" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" id="tabMenu2" onclick="myFunction2()">
<a href="#tabChapels" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
<li role="presentation" id="tabMenu3" onclick="myFunction3()">
<a href="#tabUnits" data-toggle="tab" role="tab" aria-controls="tab3">
Units
</a>
</li>
Did you try to do like this?
$(document).ready(function(){
$('.nav-tabs a:last').tab('show') ;
var lastselectedtab = localStorage.getItem("ActiveTab");
$('.nav-tabs a[href="'+(lastselectedtab==''?"#tabChapels":lastselectedtab)+'"]').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
localStorage.setItem("ActiveTab", target);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
Zones
</li>
<li role="presentation">
Chapels
</li>
</ul>
<div id="tabContent1" class="tab-content" style="font-family:Arial Unicode MS;">
<div role="tabpanel" class="tab-pane fade" id="tabZone">
Content 1
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tabChapels">
Content 2
</div>
</div>
</div>
Code pen Link
https://codepen.io/udarakasun/pen/YdyRRy
Nobody seemed to care anymore haha anyways for those of you who are wanting to achieve the same thing that I wanted to, I've created a stupid and ingenious way but it works.
<script language="javascript">
<?php
if(isset($_GET['tabName']))
{
if($_GET['tabName']=="TAB1")
{
echo "var tabNo=1;";
$_SESSION['tabNo']=1;
}
elseif($_GET['tabName']=="TAB2")
{
echo "var tabNo=2;";
$_SESSION['tabNo']=2;
}
}
?>
function loadscript()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child('+<?php echo $_SESSION['tabNo'];?>+') a').tab('show')
});
}
function myFunction1()
{
var tabName="TAB1";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
var tabName="TAB2";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction3()
{
var tabName="TAB3";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
and for the body, you have to declare onload="loadscript()"
After that you'll need to add bootstrap components to your page. This can be done easier through ADOBE DREAMWEAVER.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" onClick="myFunction1()">
<a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" onClick="myFunction2()">
<a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
I need to be able to click an element, get the ID of that element and use it on another function. How can I do it as It is not working using $(this). This is what I have so far:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var clickedId = $(this).attr("id");
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
if ($(clickedId).hasClass("active")) {
$(clickedId).removeClass("active show");
e.stopPropagation();
$(clickedIdChild).removeClass("active show").css("display", "none");
} else {
$(clickedIdChild).css("display", "block");
$(clickedIdChild).siblings().css("display", "none");
}
}
/* edit */
I'll add the markup:
<div class="d-flex flex-nowrap align-items-center">
<ul id="examples" class="nav nav-pills justify-content-center justify-content-lg-start" role="tablist">
<span class="text-blue font-weight-medium">EJEMPLOS:</span>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-ficha-tab" data-toggle="pill" href="#pills-ficha" role="tab" aria-controls="pills-ficha" aria-selected="false">Ficha</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-candidato-tab" data-toggle="pill" href="#pills-candidato" role="tab" aria-controls="pills-candidato" aria-selected="false">Mail candidato</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-empresa-tab" data-toggle="pill" href="#pills-empresa" role="tab" aria-controls="pills-empresa" aria-selected="false">Mail empresa</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-ficha" role="tabpanel" aria-labelledby="pills-ficha-tab">
<img src="img/gold/gold-ejemplo-ficha.jpg" alt="Ejemplo de ficha">
</div>
<div class="tab-pane fade" id="pills-candidato" role="tabpanel" aria-labelledby="pills-candidato-tab">
<img src="img/gold/gold-ejemplo-candidato.jpg" alt="Ejemplo de mail al candidato">
</div>
<div class="tab-pane fade" id="pills-empresa" role="tabpanel" aria-labelledby="pills-empresa-tab">
<img src="img/gold/gold-ejemplo-empresa.jpg" alt="Ejemplo de mail a la empresa">
</div>
</div>
</div>
The main issue with your logic is because attr('id') is returning you back pills-ficha, which in itself is not a valid selector. You would need to append # to it for it to work.
However this is a flawed approach. You already have the reference to the element itself through the this keyword. Creating a reference to that element to get its id to then get another reference to the same element by that id is entirely pointless.
As such, you can simplify the logic like this:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var $clicked = $(this);
var clickedIdChild = $clicked.html($clicked.html().split("By:").join(""));
if ($clicked.hasClass("active")) {
e.stopPropagation();
$clicked.removeClass("active show");
$(clickedIdChild).removeClass("active show").hide();
} else {
$(clickedIdChild).show().siblings().hide()
}
}
It's likely you can do the same with the clickedIdChild reference, but your HTML doesn't show enough information for me to give you an example of how to fix that.
The problem with my original question was this part:
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
It had to be:
var clickedIdChild = clickedId.split(":By").join("");
Also adding:
$("#"+clickedIdChild) as a selector.
Then this works as expected:
function closePillsOnClick(e){
var clickedId = $(this).attr("id");
var clickedIdChild = clickedId.split("-tab").join("");
if( $(this).hasClass("active") ){
$(this).removeClass("active show");
e.stopPropagation();
$("#"+clickedIdChild).removeClass("active show").css("display", "none");
} else {
$("#"+clickedIdChild).css("display", "block");
$("#"+clickedIdChild).siblings().css("display", "none");
}
};
OK let's clarify this. var clickedId = $(this).attr("id"); will return ID in the form fakeId. Next you have a jQuery with with the ID ($(clickedId)) which will be $('fakeId') in my example. ID selector needs to start with # so you have to add it. So valid code will be $('#' + clickedId). More here:
http://api.jquery.com/id-selector/
https://api.jquery.com/attr
Cheers.
I'm trying to write a piece of code that will add a scrollbar to a div if the expanded content is taller than the window height.
The html is roughly structured like this:
<nav class="col-md-2 col-sm-3 no-padding">
<div class="nav-container">
<div class="tocify1">
<ul class="tocheader nav nav-list">
<li class="multi flex-container active-top"><a class="open"><i class="fa fa-caret-right fa-rotate-90" aria-hidden="true"></i></a>Top Link</li>
<ul id="" class="tocsubheader nav nav-list">
<li class="active">Link 1</li>
<li class="">Link 2</li>
</ul>
</li>
</ul>
And the Css:
.nav-container{position: fixed;}
Here is the relevant code:
windowheight = $(window).height();
$('.open').click(function() {
$(this).parent().next('.tocsubheader').slideToggle().promise().done(function(){
sidenav = $('.tocify1').height();
if (windowheight < sidenav){
$('.tocify1').css({'height': windowheight, "overflow-y" : "scroll"});
}
else{
$('.tocify1').css({'height':'100%', "overflow-y" : "hidden"});
}
});
});
This works when one toggle is clicked, however when one toggle is open and another is clicked the sidenav height defaults to a seemingly arbitrary number less than the window height.
Any help would be appreciated.
Thank you.
First, why isn't http://jsfiddle.net/s4eMT/ working?
Second, the js-code that I put in jsfiddle is working in my project but I have a some kind of browser-support issue.
When I run the website in Chrome it works as expected, it gets fixed when you scroll down to the navbar, when I run it in Safari and Firefox it sets the navbar fixed but also shrinks the navbar way smaller and floating left. I can't figure out what it is that's not supported by the last mentioned browsers.
Here's my code:
HTML
<div id="navbar-wrapper">
<div class="navbar">
<div class="navbar-inner hidden-phone">
<ul class="nav">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
<li class="logo hidden-phone"><img src="#routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></li>
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div class="navbar-inner visible-phone">
<ul class="nav phone-only">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
</ul>
<ul class="nav phone-only">
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div id="language" class="hidden-phone">
<img src="#routes.Assets.at("images/gb.png")" />
<img src="#routes.Assets.at("images/se.png")" />
</div>
</div>
</div>
CSS
#navbar-wrapper {
position: relative;
min-width: 100%;
border:1px solid red;
}
JAVASCRIPT
$(document).ready(function () {
var stickyNavTop = $('#navbar-wrapper').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navbar-wrapper').css({
'position': 'fixed',
'top': '0'
});
alert('afa');
} else {
$('#navbar-wrapper').css({
'position': 'relative'
});
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
What am I missing?
regards,