I'm working with a BE dev on a site - they've built it in Umbraco with dynamic blocks for each section of content that can be added to the pages.
Our client is trying to add the same 'tabbed content' block twice on one page but the second block doesn't work as the JS is just targeting the first element it finds with the classes
Is there a way I can modify the JS to allow both blocks to work independently? Here is a simplified demo:
$('section.tabs nav li').click(function(){
var tabIndex = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('section.tabs ul.tabs li.tab').eq(tabIndex).addClass('active').siblings().removeClass('active');
});
section.tabs main.tabsContainer ul.tabs li.tab{
display:none;
}
section.tabs main.tabsContainer ul.tabs li.tab.active{
display:flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
First Tabbed Section
</h1>
<section class="tabs">
<nav>
<ul>
<li class="active">
<button>
Click for Tab 1
</button>
</li>
<li>
<button>
Click for Tab 2
</button>
</li>
<li>
<button>
Click for Tab 3
</button>
</li>
</ul>
</nav>
<main class="tabsContainer">
<ul class="tabs">
<li class="tab active">
<h2>
Tab 1
</h2>
</li>
<li class="tab">
<h2>
Tab 2
</h2>
</li>
<li class="tab">
<h2>
Tab 3
</h2>
</li>
</ul>
</main>
</section>
<hr />
<h1>
Second Tabbed Section
</h1>
<section class="tabs">
<nav>
<ul>
<li class="active">
<button>
Click for Tab 1
</button>
</li>
<li>
<button>
Click for Tab 2
</button>
</li>
<li>
<button>
Click for Tab 3
</button>
</li>
</ul>
</nav>
<main class="tabsContainer">
<ul class="tabs">
<li class="tab active">
<h2>
Tab 1
</h2>
</li>
<li class="tab">
<h2>
Tab 2
</h2>
</li>
<li class="tab">
<h2>
Tab 3
</h2>
</li>
</ul>
</main>
</section>
This looks like a case where DOM traversal can be handy. Take a look at what this is selecting:
$('section.tabs ul.tabs li.tab')
This is from the context of the entire DOM, so any matching element(s) within the entire DOM are returned. Alternatively, if you start from the context of this, you can traverse upward to a common parent and then find the target element(s) within the context of only that parent. For example:
$(this).closest('section.tabs').find('ul.tabs li.tab')
The selector $('section.tabs ul.tabs li.tab') works across both tabs - so $('section.tabs ul.tabs li.tab').length (in your fiddle) will be 6, not 3.
When you click second-section tab2, its index is 1 (0-based).
This corresponds to $('section.tabs ul.tabs li.tab').eq(4)
To only apply to the current section, use relative DOM navigation - ie navigate up from the current element rather than down from the top-level document:
$(this).closest("section.tabs").find("ul.tabs li.tab").eq(index)...
Updated simplified example snippet:
$('section.tabs nav li').click(function(){
var tabIndex = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(this).closest('section.tabs').find('ul.tabs li.tab').eq(tabIndex).addClass('active').siblings().removeClass('active');
});
li.tab {
display: none;
}
li.tab.active {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
First Tabbed Section
</h1>
<section class="tabs">
<nav>
<ul>
<li class="active">
<button>
Click for Tab 1
</button>
</li>
<li>
<button>
Click for Tab 2
</button>
</li>
<li>
<button>
Click for Tab 3
</button>
</li>
</ul>
</nav>
<main class="tabsContainer">
<ul class="tabs">
<li class="tab active">
<h2>
Tab 1
</h2>
</li>
<li class="tab">
<h2>
Tab 2
</h2>
</li>
<li class="tab">
<h2>
Tab 3
</h2>
</li>
</ul>
</main>
</section>
<hr />
<h1>
Second Tabbed Section
</h1>
<section class="tabs">
<nav>
<ul>
<li class="active">
<button>
Click for Tab 1
</button>
</li>
<li>
<button>
Click for Tab 2
</button>
</li>
<li>
<button>
Click for Tab 3
</button>
</li>
</ul>
</nav>
<main class="tabsContainer">
<ul class="tabs">
<li class="tab active">
<h2>
Tab 1
</h2>
</li>
<li class="tab">
<h2>
Tab 2
</h2>
</li>
<li class="tab">
<h2>
Tab 3
</h2>
</li>
</ul>
</main>
</section>
The selector $("section.tabs nav li") works with every corresponding element it finds in your page, so if you have 2, they both should work.
If it's not, maybe there is another problem.
If you run $('section.tabs nav li') on the console, do you see just one or both?
Another thing, how do you distinct the clicked tab element in $('section.tabs ul.tabs li.tab').eq(tabIndex) ?
Related
I create submenu and I need to get value of direct parent for Submenu"li"
this is my code
<div class="box">
<div class="col-sm-6">
<!-- main menu-->
<ul>
<li class="m-sub">
Cars
<!-- sub menu for cars-->
<ul class="sub">
<li> Audi</li>
<li> KiA</li>
</ul>
</li>
<li class="m-sub">
Tablets
<!--start sub menu for tablet -->
<ul class="sub">
<li> Phone</li>
<li> Sony</li>
</ul>
</li>
<li> Laptop</li>
<li> Glass </li>
</ul>
</div>
</div>
I need to get direct parent of sony for example, when I use ($(this).parent()).text() the result was phone not tablet.
I need to get value of parent "tablet" ,when select Audi i need to get cars
thanks in advance.
Tablets isn't inside the direct parent of your list item; you'll need a bit more jQuery:
var li = $('.sub > li')
console.log(
li.closest('.m-sub').contents().eq(2).text().trim() //=> 'Tablets'
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="m-sub">
<span><i class="icon-tablet"></i></span> Tablets <span class="leftarr"><i class="icon-chevron-right"></i></span>
<ul class="sub">
<li> Phone
</li>
<li> Sony
</li>
</ul>
</li>
<li> Laptop
</li>
<li> Glass
</li>
</ul>
I am using jquery tabs to create 3 tabs and following is my html code
<div id="sections" class="sections">
<ul class="sections" role="tablist">
<li class="active" role="presentation">
User
</li>
<li role="presentation">
Setting
</li>
<li role="presentation">
Customer
</li>
</ul>
<div class="tab-content">
<section id="user" class="panel" role="tabpanel">
Some content is here
</section>
<section id="setting" class="panel" role="tabpanel">
Some content is here
</section>
<section id="customer" class="panel" role="tabpanel">
Some content is here
</section>
</div>
And initilizing the tabs like
$('#sections').tabs();
Now when I access the page with /#setting at url end it briefly opens User Tab first before showing the Setting tab. How can I avoid this?
Can you please tell me how to make a nested list in slide panel in jQuery?
I am able to make a slide panel, but I want to make nested list in left panel in jQuery.
http://jsfiddle.net/qUMbC/31/
can we make nested list in slide panel ?
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth"> Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h2>Menu</h2>
<ul data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
<!-- submenu -->
</div>
Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:
HTML:
<ul id="myList" data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
CSS:
#myList ul {
display: none;
}
JavaScript:
$('#myList > li').click(function() {
var subList = $(this).children('ul');
if (subList.is(":hidden"))
subList.slideDown(200);
else
subList.slideUp(200);
});
JSFiddle demo
The menu in the north region of the layout is not visible. It has been hidden under layout. The problem may be in CSS part, which i tried but unable to resolve it.
Please refer jsfiddle for reference http://jsfiddle.net/4QbqY/
<div class="ui-layout-north">
<div>
<nav>
<ul>
<li>
File <span class="caret"></span>
<div>
<ul>
<li>
New
</li>
<li>
Open
</li>
</ul>
</div>
</li>
<li>
Action <span class="caret"></span>
<div>
<ul>
<li>
Edit <span class="caret"></span>
<div>
<ul>
<li>Undo</li>
<li>Redo</li>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div class="ui-layout-west" id="testdata">
</div>
<div class="ui-layout-south">
This is the south pane
</div>
<div class="ui-layout-east">
This is the east pane
</div>
<div class="ui-layout-center">
This is the center pane
</div>
After a couple of minutes.
Here's the result that you wanted.
Fiddle
HTML
Just add this in your north layout onmouseover="myLayout.allowOverflow('north')"
<div class="ui-layout-north" onmouseover="myLayout.allowOverflow('north')">
Reference:
http://layout.jquery-dev.net/demos/simple.html
update nav > ul > li > div, nav > ul > li > div ul > li > div with:
z-index:3;
and add this style:
.ui-layout-north
{
position:initial !important;
z-index:3 !important;
}
jsfiddle Here
I need a little assistance in modifying the javascript that controlls bootstrap dropdowns.
What i need to happen is when you click on a dropdown, it shows. On the top level that works fine, but if i want to go into a dropdown within a drop down
Example:
<ul>
<li>Dropdown 1
<ul>
<li>Dropdown 2
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
</li>
</ul>
When i click on dropdown 1, I can see the list item called dropdown 2 but when i click on it, it closes the whole list item again. When you click on dropdown 2 i need it to show up.
I found a hover method to open the second nested dropdown but i need it to show on click.
And help is much appreciated. Here is a fiddle: http://jsfiddle.net/raDUC/1/
try this:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
Dropdown 1
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> Dropdown 2
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> Another action
</li>
</ul>
</li>
<li> Link
</li>
<li> Link
</li>
<li> Link
</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
Side Note...
I recommend adding the following css to your nav menus in bootstrap:
ul.nav a {
outline: none;
}
it keeps that ugly blue outline from showing up if you click on a main menu item to close it.