I have made a Spry 4-tabbed panel from Dreamweaver and customised it to use as a portfolio site.
I want to run 'Flickrshow' as the 3rd tabbed panel content. (Flickrshow is a javascript slideshow that links to a Flickr photo sharing account).
My problem is that the Flickrshow slideshow doesn't display in the 3rd tabbed panel content.
However it does display in the 1st tabbed panel content and it also does display correctly when the code is run independently. I also have another Javascript 'simplegallery' running in the 2nd panel content, which works fine. Is this causing a conflict?
Any suggestions why this won't display?
Thanks!
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>
<script> var cesc = new flickrshow('cesc', {
autoplay:true,
interval:4200,
hide_buttons: false,
license:null,
tags:'website',
user:'52147781#N05'});</script>
<div id="nav1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About</li>
<li class="TabbedPanelsTab" tabindex="0">Graphics</li>
<li class="TabbedPanelsTab" tabindex="0">Photos</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"><div id="simplegallery1"></div></div>
<div class="TabbedPanelsContent"><div id="cesc"><p>Please enable Javascript to view this slideshow</p></div></div>
<div class="TabbedPanelsContent"><div id="contact"></div>
</div>
</div>
Related
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
}
Context: I have created a top-bar menu using Foundation 6 (following the docs), with it displayed horizontally on large screens, and as a responsive vertical menu on medium and down. There is one item with children which is displayed as a dropdown on large screens, and as a drilldown menu on medium screens and below.
I created the site using the Zurb 'Yeti Launch' app, so as far as I can tell, I have all js libraries included.
Issue: Nothing happens when either the dropdown parent or any of the child items are clicked. Any help getting to the bottom of this is much appreciated!
My markdown for the menu is as follows:
<div class="top-bar" id="main-menu">
<div class="row">
<div class="large-12 columns">
<div class="top-bar-left">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
<li>Home</li>
<li>What's On</li>
<li>Listen Again</li>
<li>Community</li>
<li>
About
<ul class="menu vertical">
<li>Presenters</li>
<li>Volunteers</li>
<li>The Board</li>
</ul>
</li>
<li>Get Involved</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
Did you added the init code?
$(document).foundation();
The CodePen example with the same HTML as you provided worked.
http://codepen.io/shoaibik/pen/PNravB
Update:
It look likes you can called Foundation JS and jQuery second time in app.js file, Please remove once instance and confirm again.
My Bootstrap Tabs are working fine but the URL is built wrong like below. I checked many Sites and mine is definitly wrong.
If I am at http://domain.com/blog it shows me:
http://domain.com/#vote
instead of
http://domain.com/blog/#vote
If the Javascript has loading problems it should still go to the Anchor and not to the URL.
My HTML
<div class="nav nav-tabs" role="tablist">
<a href="#vote" aria-controls="vote" role="tab" data-toggle="tab">
{lang key="Votes" section="global"}
</a>
</div>
<div role="tabpanel" class="tab-pane" id="vote">
Votes
</div>
Javascript
// Tabs
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
If this is all your HTML markup, then you are using an incorrect HTML structure. according to the documentation for javascript bootstrap tabs.
I have tested the following on my own localhost, and your example as well. With the official version there is no issue, while what you have copied above had a broken styling and it did not properly work.
Example
<!-- start container for tabs, required -->
<div role="tabpanel">
<!-- Nav tabs menu, required -->
<ul class="nav nav-tabs" role="tablist">
<!-- repeat the row below for extra menu items, 3x used in example -->
<li role="presentation" class="active">Tab1 title</li>
<li role="presentation">Tab 2 title</li>
<li role="presentation">Tab 3 title</li>
<!-- close tabs menu -->
</ul>
<!-- start tab content panes container. do not forget this, required -->
<div class="tab-content">
<!-- repeating content pane. make sure that the id="xxxx" matches the href from the menu item -->
<div role="tabpanel" class="tab-pane active" id="tab1">tab 1 content</div>
<div role="tabpanel" class="tab-pane" id="tab2">tab 2 content</div>
<div role="tabpanel" class="tab-pane" id="tab3">tab 3 content</div>
<!-- close tab content panes -->
</div>
<!-- close container for tabs -->
</div>
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.
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...