I could not figure out how does the follow ajax work, (from http://jqueryui.com/demos/tabs/ajax.html )
<li class="ui-state-default ui-corner-top">Tab 1
</li>
<li class="ui-state-default ui-corner-top">Tab 2
</li>
<li class="ui-state-default ui-corner-top">Tab 3(slow)
</li>
<li class="ui-state-default ui-corner-top">Tab 4(broken)
</li>
.....
<div id="ui-tabs-1"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-2"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
when click for example Tab 2, to go to "http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-2", that is an empty div, so how did the background code(e.g. PHP) did to get #ui-tabs-2 and return http://jqueryui.com/demos/tabs/ajax/content2.html
thanks
The code snippet you added does not comply with the sample page at http://jqueryui.com/demos/tabs/ajax.html
It should look something like:
<div id="tabs">
<ul>
<li>Preloaded</li>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3 (slow)</li>
<li>Tab 4 (broken)</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo...</p>
</div>
</div>
First tab is not an ajax tab. Other tabs are dynamically loaded through ajax. href determines target content for ajax fetch.
Related
How should you handle h tags in the main menu of your site if the main menu renders above the h1?
Is it ok to break heading hierarchy in this case to provide the additional semantics / hierarchy, or should a different element be used instead of heading tags?
For example:
You have menu that shows a secondary menu on hover / focus / click.
It uses a checkbox input to indicate the state of the menu so as to allow the menu to stay open.
The secondary menus use h2 > ul >li > a to organize and provide additional hierarchy to the overall menu.
Third level link lists follow the heading hierarchy, eg., h3 > ul > li > a
CodePen link for more clarity :: https://codepen.io/uxmfdesign/pen/yLBrMmd
<header>
<div class="main-menu__container">
<input
class="main-menu__toggle webaim-hidden"
type="checkbox"
id="main-menu-toggle-block-main-menu">
<!-- toggle open close -->
<label
class="main-menu__label"
for="main-menu-toggle-block-main-menu"
aria-label="Toggle Main menu"
>
Main menu
</label>
<nav class="main-menu__nav">
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div
class="main-menu-group"
data-main-menu-group="">
<!-- toggle open close of menu section -->
<input
id="main-menu-group-toggle-block-main-menu-0"
type="checkbox"
name="main-menu-group"
class="main-menu-group__toggle webaim-hidden"
data-main-menu-group-toggle="">
<label
for="main-menu-group-toggle-block-main-menu-0"
aria-label="Open Our services"
aria-haspopup="true"
data-icon=""
class="main-menu-group__toggle-label">
Section title
</label>
<div class="main-menu-group__wrapper">
<h2 class="main-menu-group__heading">
<span>Section title</span>
</h2>
<ul class="main-menu-nav-list">
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
<li class="main-menu-nav-list__item">
<h3 class="main-menu-nav-list__title">
<a class="main-menu-nav-list__title-link" href="/ca-domains">
Sub-section title
</a>
</h3>
<ul class="main-menu-subnav-list__menu">
<li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
<a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
sub-page name
</a>
</li>
<li class="main-menu-subnav-list__item">
<a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
sub-page name
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<h1>
The problem heading is here
</h1>
</main>
I am looking to make a drop down for some of the option in the main navigation menu, but nothing I try seems to work. Current HTML without drop down:
<center>
<li style="font-weight: normal;"><b>Home</b></li>
<br />
<li style="font-weight: normal;"><b>About</b></li>
<br />
<li><b>Contact</b><br /></li>
<li style="font-weight: normal;"><b>Slimming Recipes</b></li>
<br />
<li style="font-weight: normal;"><b>Meal Plans</b></li>
<li style="font-weight: normal;"><b>Lifestyle & Reviews</b></li>
</center>
To create a dropdown menu in HTML, follow this form
Navigation Menu
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Navigation Menu with Dropdown Menu
<ul>
<li>
Dropdown Menu
<ul>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
</ul>
To create a dropdown you need to add css and edit your code.
You can Check here - https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>