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/
Related
I have navigation panel with two tabs tab1 and tab2
<div id="tabs">
<ul>
<li>Text 1</li>
<li>Text 2</li>
</ul>
<div id="tabs-1">
#{ Html.RenderAction("_ViewPartial", "Func1");}
</div>
<div id="tabs-2">
#{ Html.RenderAction("_ViewPartial", "Func2");}
</div>
</div>
The question is how to switch between two RenderActions clicking on tabs to render partial view dynamically. ("_ViewPartial", "Func1") loaded by default.
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>
This is navigation I would like to control from code
<div data-role="page" id="settingsPage">
<div data-role="content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">aaaaaaaaaaaa</div>
<div id="two" class="ui-body-d ui-content">bbbbbbbbbbbbb</div>
<div id="three" class="ui-body-d ui-content">cccccccccccc</div>
</div>
</div>
</div>
This is how I try to switch to second tab:
setTimeout(function(){
$("#two").trigger("click");
}, 3000);
DEMO
Nothing happens. How to switch?
You can try something like
setTimeout(function(){
$("li>a[href='#two']").trigger("click");
}, 3000);
You can get More information about tag selector([]) and child selector (>) from provide links.
I am trying to hover over one div and make it not only trigger the hoverstate for the div I am hovering on but also a div elsewhere on the page. How can I do this. Using JavaScript or JQuery would be fine. Here is what my code looks like:
<div class="wrapper">
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="full-width-col">
<a href="http://example.com">
<div class="bottom-details-wrap">
<h3>Title</h3>
<p>Description</p>
<div class="full-width-column-container">
<div class="col-left-3-res">
<h3>Col 1 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="col-left-3-res">
<h3>Col 2 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="col-left-3-res">
<h3>Col 3 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div>
</div>
</a>
</div>
</div>
I am looking to rollover the div with the class "details-wrap" and trigger a hoverstate on the div with the class "bottom-details-wrap". As you can see these are inside of other divs, so I am thinking I will need to target it using Javascript not just CSS. But I am not sure how to do that. Any help would be useful.
You can use the .hover() function in jQuery.
JSFIDDLE
$( 'element' ).hover( function() {
//do what you want to elements here.
}
);
In jQuery, if you apply the .hover() method to $('.details-wrap') you can then add a function which applies effects to $('.bottom-details-wrap'):
$(document).ready(function(){
$('.details-wrap').hover(function(){
$('.bottom-details-wrap') [...rest of function here...]
});
});
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
});
});