I'm trying to reach a specific section of a page coming from another page through a link like a link I can reach the page with the right address in the Browser's URL but what i don´t see is the right section.
I've got a short peace of the final page here:
<!--Here we have a Bootstrap's Nav Tab:-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="true">
User
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="loctn-tab" data-toggle="tab" href="#loctn" role="tab" aria-controls="loctn" aria-selected="false">
Location
</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="user-tab">
"First section, which is being shown every time i get the url"
</div>
<div class="tab-pane fade" id="loctn" role="tabpanel" aria-labelledby="loctn-tab">
"Second section, which i would like to reach but i can't..."
</div>
</div>
Is there any way to make it work?
Related
I am a beginner in web development. I am working on a small project which needs to open a url(something like http://192.168.1.107:8080) content on click of a tab, in the same tab pane. The mentioned url is a client, which displays some runtime data(eg: temperature) continuously.
I could find some code snippets on creating tabs, but I'm keen to get this specific requirement working.
I would appreciate any code snippets, links or information on displaying a url data in same tab pane please.
sorry for vague question, but this is how I could put it in the words.
This is the sample code I have:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="temp1-tab" data-toggle="tab" href="#temp1" role="tab" aria-controls="temp1" aria-selected="true">Temperature 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp2-tab" data-toggle="tab" href="#temp2" role="tab" aria-controls="temp2" aria-selected="false">Temperature 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp3-tab" data-toggle="tab" href="#temp3" role="tab" aria-controls="temp3" aria-selected="false">Temperature 3</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="temp1" role="tabpanel" aria-labelledby="temp1-tab">
Display temp1 <br />
<iframe src="http://192.168.1.107:5000/" title="Temp 2"></iframe>
</div>
<div class="tab-pane fade" id="temp2" role="tabpanel" aria-labelledby="temp2-tab">
Display Temp2
</div>
<div class="tab-pane fade" id="temp3" role="tabpanel" aria-labelledby="temp3-tab">
Display Temp3
</div>
</div>
<script>
$('.tab-link').on('click', function(event) {
// Prevent url change
event.preventDefault();
// `this` is the clicked <a> tag
$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
thanks
If you are trying to open a URLinside your website, you can use an iframe to do so. Sample example:
<iframe src="http://192.168.1.107:8080/" title="Tab 2"></iframe>
I have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
Content.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content.........
</div>
</div>
in inspect div element only shows three classes (class="tab-pane fade show") but not active class.
#conrad
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
add this script link to your shipify theme.liquid head section
<a class="nav-link active" id="all-tab" data-toggle="tab"
the data toggle need a unique id you do not mention it
you put the same data-toggle change relevant tab id
You need to add active class to li tag and add in class inside first div which you need to display
Demo Code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--add active to li-->
<li class="nav-item active">
<a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<!--added class in-->
<div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
Content1.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content2.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content3.........
</div>
</div>
I have a tabs navbar as follows-
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">TAB1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><p>TAB2<p></div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">TAB3</div>
</div>
I want to fetch the height of the TAB2 text as soon as I load the document.
$('document').ready(function(){
console.log($(p).css('height'));
});
This returns me 0px. However, if I try to fetch it from a button within the tab, it gives the result as the text is already rendered by then.
Is there a way to achieve this?
You can do this but you have show the p OR other elements you want to get height of in DOM - show as in only to show get the height and then hide again. You will not even notice about show and hide.
Since the height method only works on elements that are available on the page your p or other divs are hidden by default
I have using pure JavaScript which is jQuery anyways. You can use forEach to loop through all the elements first and add show class and then remove class once we have fetched the height.
To get the actual height / width OR x/y etc etc you can this one function getBoundingClientRect which will return everything you want.
Live Working Demo:
window.addEventListener('DOMContentLoaded', (event) => {
let rect = document.querySelectorAll('p')
rect.forEach(function(x) {
x.parentElement.classList.add('show', 'active') //add active class
let elem = document.querySelector('p').getBoundingClientRect() //get all the `p` height
console.log(elem.height) //get height 24
console.log(elem) //the whole object i.e height / width` OR `x/y`
})
rect.forEach(function(x) {
x.parentElement.classList.remove('show', 'active') //remove active class
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">TAB1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>TAB2</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
TAB3
</div>
</div>
I am using Bootstrap4.4.5 and trying to implement tabs as below:
<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="/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="/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="/contacts" 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">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...
</div>
</div>
Please notice that the href is pointing to a specified url in my project. Indeed, I am using django and capturing that url to call a handler and do some work. But it does not work. Bootstrap does not change my url
I tried to delete the attribute data-toggle="tab" but in that case, I see the url changing in the address field of my browser (for example becoming www.mysite.com/profile when I click the second tab), but the first tab stays active
The tab behaviour can be overriden by javascript like so:
document.querySelectorAll(".nav-item.nav-link").map((el) => el.addEventListener('click', (e) => { window.location.href( e.target.href ); }) )
(append it to your tags)
Good day guys, I need help,
When a link is clicked on another page I need the tab to be displayed after the page loads, I've seen this being done using the hash #id but is there any possible way to do this with the data-filter as they're the ones controlling the tabs?
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills" id="filters">
<li class="active">All</li>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
</div>
</div>
You could pass special request parameter in query string. Then get the parameter value and activate corresponding tab.
For example, add tab-name into query string of target URL (the full relative URL is /my-page?tab-name=profile). Following expression returns value of the parameter, that equals to 'profile':
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
If tab-name is omitted the expression returns empty string.
Then select navigation tab by received value and activate its associated pane using show method.
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
tabName='profile'; // remove this line on real page
if(tabName.length)
$('#myTabs .nav-link[href="#' + tabName + '"]').tab('show');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="nav nav-pills" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Note, in the snippet I set value of tabName directly, because it is not possible to send custom request to the snippet. So, you have to remove tabName='profile'; on your real page.