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
Related
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) ?
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'd like to make a list that's nested within a list collapse on click, a sub-menu for a department. Real flashy like.
I'm using the .click function having hid all the sub-menus, but it is only showing for a slight second. I'm a super novice and began using Jquery last week. Here is my code:
Jquery:
$(function(){
$("ul.sitback").hide();
});
$(function() {
$("li.dept").click(function(){
$("ul.sitback").toggle();
});
});
HTML:
<h3 align="center">Departments</h3>
<ul>
<a href><li class="dept1">+ Take Care Products</li></a>
<ul id="area1" class="sitback">
<a href><li>Men's Products</li></a>
<a href><li>Women's Products</li></a>
</ul>
<a href><li class="dept">+ Home Electronics</li></a>
<ul id="area" class="sitback">
<a href><li>Televisions</li></a>
<a href><li>Audio</li></a>
<a href><li>Portable</li></a>
</ul>
<a href><li class="dept">+ Computers and Video Games</li></a>
<ul id="area" class="sitback">
<a href><li>Video Games</li></a>
<a href><li>Home Computers</li></a>
</ul>
<a href><li class="dept" data-department="dept4">+ Books</li></a>
<ul id="area" class="sitback">
<a href><li>Fiction</li></a>
<a href><li>Non-Fiction</li></a>
<a href><li>Biography</li></a>
</ul>
<a href><li class="dept">+ Music</li></a>
<ul id="area" class="sitback">
<a href><li>Digital Download</li></a>
<a href><li>CDs</li></a>
</ul>
<a href><li class="dept">+ Experience Days</li></a>
<ul id="area" class="sitback">
<a href><li>Hot Airballoon Ride</li></a>
<a href><li>Track Days</li></a>
</ul>
</ul>
</div>
Here's an example of how to achieve this using just CSS.
Fiddle Here
HTML:
<ul>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
</ul>
CSS:
li ul { display:none; }
li:hover ul { display:block; }
You hide the sub lists by default. And then set them to display when the parent list item is hovered over. You can make it "flashier" just by adding some more CSS. Look into transitions. Might be the flash you're looking for.
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
Consider the following navigation layout
primary nav
secondary nav
sub nav (shown only on rollover
of primary or secondary nav
I'm needing for there to be a delay in the fadeOut call long enough for a user to get their mouse from the primary nav to the subnav and once over the subnav I need the hover fadeOut cancelled. Repeating the idea when hovering over the secondary nav item. (I know how to add the delay but not how to cancel the hover)
TIA
http://jsfiddle.net/Wm6Gp/
<div class="primary">
<ul class="primary common">
<li class="primary category" rel="politics">
POLITICS
</li>
</ul>
</div>
<div class="secondary">
<ul class="secondary common">
<li class="secondary category" rel="news">
NEWS
</li>
</ul>
</div>
<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
<div id="politics" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
POLITICS SUBNAV
</li>
</ul>
</div>
<div id="news" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
NEWS SUBNAV
</li>
</ul>
</div>
</div>
$('.category').hover(
function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeIn('slow');
}, function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeOut('slow');
});
Try jQuery Hover Intent plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html