I have a question about how to add layers of tabination inside one webpage.
Currently, the pages which I would like to edit have a jQuery tab function to swap between tabs with different content. I would like to go one step further and have an encompassing tabination system with a page entry tab containing initial content and a button to the next tab; and inside the next tab have the current active tab function. Check out the picture if this is confusing:
Image for Visualization Edit: In the image the 'layers' should be 'sections'.
My current code: One layer of tabination
jQuery in header.php
<script>
$(function() {
$('.tab-panels .tabs li').on('click', function(){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
// Figure out which panel to show
var panelToShow = $(this).attr('data-panelid');
// Hide current panel
$panel.find('.tab.active').hide(0, showNextPanel);
// Show next panel
function showNextPanel() {
$(this).removeClass('active');
$('#'+panelToShow).show(0, function() {
$(this).addClass('active');
});
}
});
});
</script>
Tabs include file
Styled as a horizontal bar.
<div class="tabs-container">
<ul class="tabs">
<li data-panelid="panel1" class="active">Tab 1</li>
<li data-panelid="panel2">Tab 2</li>
<li data-panelid="panel3">Tab 3</li>
<li data-panelid="panel4">Tab 4</li>
</ul>
</div>
HTML of the webpage
I have wrapped each of the encompassing tabs as 'SECTIONS', and the inside tabs as 'TABS'. The header (containing the jQuery), and this page are called in another php file.
<div class="section-wrap">
<div class="container section active" id="section1">
<div class="row">
<div class="col-md-12">
<div>CONTENT</div>
<div class="button-container">
<span>BUTTON TO NEXT SECTION</span>
</div>
</div>
</div>
</div>
<div class="container section" id="section2">
<div class="container tab-container">
<!-- Incluce Tabs -->
<?php include(ROOT_PATH . "/inc/tabs.php") ?>
<div class="row tab active" id="panel1">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<p>CONTENT</p>
</div>
</div>
<div class="row tab" id="panel2">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<ul>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
</ul>
</div>
</div>
<div class="row tab" id="panel3">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-breadcrumb">
<!-- Include Breadcrumb -->
<?php include(ROOT_PATH . "/inc/breadcrumb.php") ?>
</div>
</div>
<!-- END PAGE CONTENTS -->
<!-- Include Footer -->
<?php include(ROOT_PATH . "/inc/footer.php") ?>
I imagine the same jQuery script could be used to switch between sections, however I'm not sure how to implement this and would love some help. The user would not need to go back to the initial page entry 'section'. Also, the reason why I do not wish to use a different web page entirely is that the pages that this system will be implemented on are already 4 layers deep in the website.
I hope this isn't too confusing, thanks in advance! :)
Definitely not the best way to do this but here is my current solution:
jQuery in header
$(function() {
$('#section1').show().siblings().hide();
$('.section-button').find('a').on('click', function(e){
e.preventDefault();
$(this.hash).show().siblings().hide();
})
});
</script>
HTML of page
<div class="section-wrap">
<div class="container section" id="section1">
<div class="row">
<div class="col-md-12">
<p>CONTENT</p>
<p>CONTENT</p>
<span class="section-button">GO TO SECTION 2</span>
</div>
</div>
</div>
<div class="container section" id="section2">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
</div>
Related
This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
Im making an 'interactive menu' that moves along with user clicks.
Im wondering if there is a way to include html templates in ng-switch,
since all the logic is different in each 'switch' - it will result in huge html files.
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<h1>1</h1>
</div>
<div ng-switch-when="2">
<h1>2</h1>
</div>
</div>
Use ngInclude:
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<ng-include src="'template1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'template2.html'"></ng-include>
</div>
</div>
Note: Dont forget to use single quotes wrapped inside the double quotes if you are hard-coding the path.
You should be able to do it with ng-include directive :
<div class="content" ng-switch on="selection">
<ng-switch-when="1" ng-include="//TEMPLATE PATH">
<ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
**I used ng-Include this way.**
<!-- Main content -->
<div class="row">
<!-- right col -->
<section class="col-lg-12">
<ul class="nav nav-tabs responsive ui-tabbed" id="myTab">
<li class="active">
<a data-ng-click=' main.active.tab = "tab-1" '>Tab 1</a>
</li>
</ul>
<!-- end responsive tabs -->
<div class="tab-content ui-tabbed-contents responsive">
<div data-ng-switch = " main.active.tab ">
<div data-ng-switch-when='tab-1' >
<ng-include src="'tab-one.html'" ></ng-include>
</div>
</div>
</div>
</div>
<!-- end main tabs container -->
</section>
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.
I'm using this script for jQuery Vertical Tabs.
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
Here's the HTML for the tabs (links)
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
I am trying to create an additional link from within a tabs content to another tab.
So this way I can link to the next tab or the last tab, keeping the same functionality as the current tab links (no refresh)
This is my first question on stackoverflow and I've searched far and wide.
I really appreciate all the help. This is a great community.
UPDATE:
Okay, Here is an edit with my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
In order to make links in the tab contents force the tabs to switch, it helps to understand what is happening under the hood to make them switch by default.
By default, mouseover events force the tabs to change; therefore, the solution is to override the default click event of the hyperlinks in question by binding an event to hyperlinks in the tab content:
Include this code after the JavaScript code you showed in your question, inside the $(document).ready:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
The event.preventDefault() prevents the hyperlinks from attempting to redirect to the page entered in the href attribute, and the rel attribute is used as a way to bind the hyperlink to the specific tab being linked to.
The rel attribute is used to get the value of the id of the tab so we can programmatically invoke its mouseover event, and switch tabs.
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 tab2</div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
In the HTML content for your tab, simply include the hyperlink as you normally would, using an href="#" and a rel attribute. The rel attribute must equal the id of the target tab, in this case, tab_menu_2.
It Works as per your requirements
Just add
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
</div>
in any of the tab
Go to this link http://jsfiddle.net/ipsjolly/ssR5f/
There is a similar tab in 3rd tab through which we can jump to 1st tab.