How to open FancyBox in a Spry tabbed panel - javascript

I am using a Spry tabbed panel for an HTML base site.
I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.
Is this possible?
Below is my code.
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.

As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by
var index= ($tabs.tabs('option', 'selected'));
and then you compare your index with the fetched index and if it matches then open your fancybox by
$(".fancy").fancybox().trigger('click');
and you can write your own function on sumbit/close of fancybox
$("<YOUR-SELECTOR>").fancybox({
onClosed: function() {
// your own functions
});
});

Related

Bootstrap tabs not working the first time

I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane">
Page 1
</div>
<div id="panel2" class="tab-pane">
Page 2
</div>
</div>
Is there something I am missing?
You don't have the active class for the content panel.
You need the following to show the panel1 content by default:
<div id="panel1" class="tab-pane show active">...
I think we need more details because your code is working fine
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Page 1</li>
<li>Page 2</li>
</ul>
<div class="tab-content">
<div id="panel1" class="tab-pane show active">
This is the content of page1............................
</div>
<div id="panel2" class="tab-pane">
This is the content of page2............................
</div>
</div>

Navbar link to specific bootstrap tab without opening new window or tab?

I'm running Bootstrap 3 with links in my navbar to Bootstrap tabs on the 'Category' page, like so:
<li>Tab1</li>
<li>Tab2</li>
On my 'category' page, here's the code I have for my tabs:
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>
How would I use either html or jquery/javascript so that if people click on either link in the navbar, whether it's from a different page OR from the 'category' page already to go to that page with that tab open?
I am not looking to have the link open in another window or tab, but rather the same window/tab the user is currently on. (I've already tried this solution by placing target="_blank" into the links in the navbar and adding $('#myTabs a[href="' + window.location.hash + '"]').tab('show'); as the javascript. This was not my preferred solution.
Any advice/solutions you might have to offer?
I think this is what you are looking for.
It doesn't account for a variable amount of tabs, but it does the job for 2 tabs.
$(document).ready(function(){
$tab1 = $('#tab1');
$tab2 = $('#tab2');
$tablink1 = $('#link_tab1');
$tablink2 = $('#link_tab2');
$('#link_tab1 a').on('click', function(){
$tablink1.addClass("active");
$tab1.addClass("active");
$tab2.removeClass("active");
$tablink2.removeClass("active");
});
$('#link_tab2 a').on('click', function(){
$tablink2.addClass("active");
$tab2.addClass("active");
$tab1.removeClass("active");
$tablink1.removeClass("active");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTabs">
<li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade in">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>

Bootstrap 3, Dropdown in Nav Bar not targeting href on click on Internet Explorer

I am having a weird issue with a bootstrap dropdown with a Nav-Bar. Items on the Nav-Bar Target Tabs on the page. I have multiple Nav bar items and then one dropdown Nav item with 3 items within it. On Chrome and Firefox it works perfectly, however on IE, on the dropdown Nav Items it does not target the tab and display the tab.
Any idea what could be causing this?
Here is my code:
<ul id="tabshome" class="nav nav-pills nav-justified">
<li id="tab1" class="active taboutline"><a data-toggle="pill" href="#tabDiv1">Tab1</a></li>
<li id="tab2" class="taboutline"><a data-toggle="pill" href="#tabDiv2">Tab2</a></li>
<li class="dropdown taboutline">
<a class="dropdown-toggle" data-toggle="dropdown">
Drop Down Tab
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="dropdowntab1">DropDown Tab 4</li>
<li id="dropdowntab2">DropDown Tab 5</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="tabDiv1" class="tab-pane fade blocks in active ">
<div class="row">
Tab 1
</div>
</div>
<div id="tabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 2
</div>
</div>
<div id="dropdownTabDiv1" class="tab-pane fade blocks">
<div class="row">
Tab 3
</div>
</div>
<div id="dropdownTabDiv2" class="tab-pane fade blocks">
<div class="row">
Tab 4
</div>
</div>
</div>
I am using Jquery, and I have made sure that the jquery reference is above the bootstap.min.js reference.
I think it is because of missing ending quote of li id dropdowntab2.

Menu tab button doesn't work

I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
(here its demo)
Now I try to edit it a little bit such that the button would be under the menu div -
<div>
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
</div>
<div class="usualBottom">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
but the buttons stop working , mean they don't switch the menu content .
(here its demo)
How to fix that ?
I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.
Demo :http://jsfiddle.net/3Njy5/3/
You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.
I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.
You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
You should replace elements inside of the div.
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
If you want the tabs be inside of wrapper, use before pseudo tag.
.usual ul:before {
content: ".";
}
Example:
JS FIDDLE
Try like this,
<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>
Demo : http://jsfiddle.net/3Njy5/4/

how to disable tabs in spry tabbed panel

I am using spry tabbed panel in dreamweaver. I am using the tabs as steps, for instance when the user completes the process in tab 1 and click complete button, tab 2 will open. Everything works fine till this step.
Now I want to disable the tabs, for instance when the user is present in tab 1 I want the future tabs (tab 2,3&4) to be disabled. Please tell me how to do this.
I did a lot of research but all I could find is jquery tabs, I can't find solution for spry tabbed panels.
Thanks!
Edit.............
The result doesn't exactly shows a tab panel. But I hope it is enough to view the coding.
http://jsfiddle.net/AU9D9/
Edit............ Found the Answer:
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS:
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();
just modify the area that i change
HTML
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" id="tab1">Tab 1</li>
<li class="TabbedPanelsTab" id="tab2">Tab 2</li>
<li class="TabbedPanelsTab" id="tab3">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
<input type="submit" value="complete" class="complete">
</div>
JS CODE
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
Found the Answer:
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS:
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

Categories