So i have tried this tutorial and the tabs work flawlessly:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h
But the problem is as follows:
I am able to click on the tabs and navigate, but if i use the link directly to a specific tab, it will open the first (default) tab.
Example:
Appending #menu2 does not open the tab assigned with the id #menu2 when visiting the link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2
Thank you!
Maybe you should try this:
$( document ).ready( function( ) {
var hash = document.location.hash;
if( hash.length > 1 ) {
$( "a[href='" + hash + "']" ).trigger( "click" );
}
} );
It checks if there is a hash when the document opens, and then clicks on the correct link
If you add it in between "<script></script>" in the "tryit", and click on "See results", you'll see it happen.
Ex:
That's because bootstraps menu works through javascript, not through the actual anchors.
When clicking on a tab a javascript function is activated that sets an active class on the tab and the content pane, which will cause the tab to be highlighted and the content to be display: block and not display: none anymore (which is the default).
You would have to read the anchor from the URL when generating the page and then set the active classes depending on that.
Addition:
Alternatively you could use the javascript snippet as suggested by #VirginieLGB, but then you will have a short moment of transition every time the page is loaded. Especially when you have a bigger page that takes longer to load, you may have to wait a little for the document to be "ready" so the function starts working. In that timespan, the first tab will be displayed before transitioning and showing the second tab.
I think what you are asking is:
When you click a tab you want a new page to open and the active tab to be shown.
The css indicates the active tab as having the class .active
you will need to append the .active class to the relevant tab on the newly opened page.
Related
I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.
I'd like to know how to link to the page with tabs from a different page on my site but instead of having the first default tab active have the second or third tab be active. You can see exactly what I'm referring to by visiting http://codepen.io/andrewjcurrie/details/qbqvxo/ and below is the JavaScript that powers the tabs.
$(document).ready(function () {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a')
.addClass('is-active').next().addClass('is-open').show();});
$('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
if (!$(this).hasClass('is-active')) { event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal');
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active'); } else {
event.preventDefault();}});});
As you can see on the pen, I'm hoping to have the links work with hash tags. I'd like to be able to add #Second_Tab to the base URL and have the second tab become active when that link is accessed. Any tips or suggestions on how best to accomplish this would be greatly appreciated, Thanks!
Andrew.
Three steps to get this to work:
remove is-active from the first tab-link in your HTML
add the necessary IDs to each of your tabs (following your example, I added id="Second_Tab" etc.
update the first JS function as follows:
$('.accordion-tabs-minimal').each(function(index) {
if (window.location.hash) {
var hash = $.trim(window.location.hash);
$(hash).addClass('is-active').next().addClass('is-open').show();
} else {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
}
});
This first checks if the URL has a hash and, if so, adds the necessary classes to that tab and content and displays them. If no hash is in the URL, it instead does the default behavior of displaying the first tab. You can see my working CodePen here http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000
I have a div on my page (with set id) and a button that "opens"/"closes" it. By default this div is hidden (display: none).
Upon the click on the button I open/close the div and append or remove a hash tag to the url: window.location.hash = "#about_us_text"; or window.location.hash = ""; On each document load I check whether the hash tag is set so I can show the div right away if the URL was inputed with the hash tag:
if(window.location.hash == "#about_us_text") {
$("a[href='#about_us_text']").trigger("click"); //trigger the click event which 'slides down' the div
console.log("hash found");
}
This all works quite fine but there is a small problem I cannot resolve. If I open a new tab/window and I input the URL with or without the has, it works as intended. But if I open the page, let it load and then replace the URL within the same tab, the hash tag is not taken into consideration. E.g.:
I open www.mysite.com/index.html -> no hash, div doesn't show => correct
I replace the url in the same window/tab to www.mysite.com/index.html#about_us_text -> the page doesn't reload (document ready doesn't fire), div does not show despite the fact that it should.
Is there any way how to solve that the div is shown/displayed when the URL changes in the same window/tab? Thanks a lot!
I found this handy. original post is here
On - window.location.hash - Change?
$(window).on('hashchange', function() {
//.. work ..
});
Tab switching - Am loading a page, which has a page url, Then i switch tab which makes an AJAX call to the server. Say i have auto-refresh for all the tabs, after second tab switch it goes back to the first tab because of auto-refresh. Please let me know how this should be handled properly, as i have many tabs within one tab where am doing AJAX there also.
I would simply add a tap event handler to your menu and re-load content every tab click
On every tab link you can add some data attribute like data-target="mypage.html"
and then just handle it:
$( "#mymenu a" ).on( 'tap', tapHandler );
function tapHandler(event) {
var target = $(this).attr("data-target");
$.get(target, function(data) {
$('#my_content_div').html(data);
$("#my_content_div").trigger("create"); // trigger pagecreate instead if loaded content includes headers or footers
});
return false;
}
Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )
$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows
<nav>
<li class="highlt">
<span>Home</span>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work
Thanks in advance!
siblings has your current element selected, you don't want to remove his 'on' class.
$('nav li a').click(function() {
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
});
edit : nvm, your code works fine : look at this jsfiddle.
re-edit : I'm totally wrong, siblings does not contain the current element.
re-re-edit : If you link to another page (href="index.php"), the page will be reloaded (or a new one will be loaded) and your JavaScript click action will be forgotten, could it be the error?
You might wanna try it like this:
$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');
What you did is add the class "on" to the LI and then removed it with .siblings().removeClass('on');
I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.
This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!
The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}