I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-
<ul class="nav nav-tabs" role="tablist">
<li class="active">FX</li>
<li>US Bond Futures</li>
<li>US Short Term IR futures</li>
<li>Global Equity Indices</li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- FX TAB content -->
<div class="active tab-pane fade in" id="tabs-first">
</div>
</div>
The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.
What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:
$('[href="#tabs-second"]').click(function(){
$('#tabs-second').load('remoteUrl');
// or use callback/complete
$('#tabs-second').load('remoteUrl', function () {
// do something here
});
});
Related
I have to pages. first page I have bootstrap tab. please check below sample
1.first page is user page. its url http://localhost:8081/#!/app/user
in this page there is a tab controller.
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">One </li>
<li>Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
content 01
</div>
<div class="tab-pane" id="tab_2">
content 02
</div>
</div>
</div>
this is second page. its url http://localhost:8081/#!/app/user-list
this page has back button. When user click this button, page should redirect to the first page (user page) SECOND TAB. How i active SECOND TAB after redirect. Currently i am using below function
$scope.goBack = function () {
$state.go('app.user/#tab_2');
}
Above back function is not working. how i do this work. thanks
Have you tried $ionicHistory?
// include $ionicHistory in your injected dependencies...
$scope.goBack = function() {
$ionicHistory.goBack();
};
I am relatively new to Accessibility standards in my Front End code.
The question I have:
For accessibility, is it better to load all HTML content initially and show/hide it, via a "hidden" attribute?
Or can I dynamically load the content and fill it with the appropriate attributes?
And if so, what attributes do you recommend I add to the content to notify the user that the content has been updated and/or changed?
For example:
I have a navbar with some buttons/tabs that load the appropriate content. I can load all content and then show/hide is, similar to below:
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={show/hide associated content} -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={show/hide associated content} -->
>
Tab-2
</button>
</nav>
<div>
<!-- Content for Tab/Button #1, preloaded and hidden/shown from button click -->
<section
id="tab-content-1"
role="tab-content"
aria-labelledby="tab-1"
hidden
>
Tab Content-1
</section>
<!-- Content for Tab/Button #2, preloaded and hidden/shown from button click -->
<section
id="tab-content-2"
role="tab-content"
aria-labelledby="tab-2"
hidden
>
Tab Content-2
</section>
</div>
Or I can dynamically load the content via the tab/button click
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-2
</button>
</nav>
<div>
<!-- Dynamically load the associated Tab Content via Javascript Here
<section
id="" => dynamically set 'id'
role="" => dynamically set 'role'
aria-labelledby="=" => dynamically set 'arria-labelledby'
>
// Dynamically set Content
</section>
-->
</div>
First of all, you should use CSS display:none rather than aria-hidden to hide contents. The attribute aria-hidden should only be used in very specific situations.
I suggest to make a search on when you should and shouldn't use aria-hidden, and why it is so. Many questions already cover the topic well.
Back to your initial question, in terms of accessibility only, it doesn't change much if the content is just made visible or if it is loaded.
Use an aria-live region to tell that the content is loading, in case it may take a while to load.
However, don't use aria-live for the updated/new content itself, especially if it is long and/or contains focusable elements.
Deciding whether you should show/hide or dynamically load is mostly not a question of accessibility. It depends much more on initial and subsequent load times, as well as the level of responsiveness you expect at which moment.
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
I am using the Bootstrap framework through out the entire site for the responsive design ability. I am also using AJAX calls to switch between every page. On one page I am using the Bootstrap tabs to switch between page contents. Everything works perfectly when you are directed to the page through any of the ajax links but if you manually type in the url the tab contents wont change. The tabs themselves will change when you click on them but the content stays on the original content. I originally though it might have something to do with the javascript I'm using so that you can direct the user to a certain tab with a hashtag but it still doesn't work when I remove the code. Here is the code:
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab #1
</div>
<div class="tab-pane" id="tab2">
Tab #2
</div>
<div class="tab-pane" id="tab3">
Tab #3
</div>
<div class="tab-pane" id="tab4">
Tab #4
</div>
</div>
<script>
$(function(){
if (window.location.hash) {
var hash = window.location.hash;
var tab = $('[data-toggle="tab"][href="' + hash + '"]');
tab.show();
tab.tab('show');
}
});
</script>
Can anyone help me with this?
You have to add a listener to the hashchange window event.
You probably opened the page without a hash. At this point, your script was executed. When you change the hash in your adress bar, the page will not be reloaded. So there is no-one to handle that event. For this you have the hashchange event to react to such changes.
See the MDN documentation for more info and examples on this event.
If you are using jQuery, check out this answer.
Using Bootstrap modal that contains tabs. The modal is called from a php generated table of gallery names.
Table Data
<td>
<a href="#" class="galName" data-target="#myModal" data-toggle="modal" id="update_<?php echo $gal['id']; ?>" >
<?php echo $gal['name']; ?>
</a>
</td>
The modal opens and the first tab is selected on initial fire. If I navigate to another tab close the modal and select a different gallery the modal opens to the last tab that was open.
How do I make sure that when the modal is opened, it always opens to the first tab?
Modal Tabs
<ul id="myTab" class="nav nav-tabs">
<li class="active">
Home
</li>
<li class="">
<a id="uploadRevision" href="#upload" data-toggle="tab">Upload Revision</a>
</li>
<li class="">
Edit Revision
</li>
</ul>
.galName fires an initUpdate function in effort to set first tab as default. It sets the tab but tab content is not show.
function initUpdate()
{
$('#myModal a:first').tab('show');
}
Thanks for the help.
Found the solution. Must remove the class="active" from both tab and tabContent. Thanks to #merv - https://stackoverflow.com/a/11762931/1214858
Simple; use class "active" to show particular tab on load.
Like below:
<!-- Nav tabs -->
<!-- content tabs -->
Remove class="tab-pane active" in li of above on nav of tab and content which you want to make it in active.