Im using mootoolsv1.3.2. Using mootools how to remove the Ul from the below code.
My present code:
<ul class="clean menu" id="topics">
<li class="drop png">
<a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
</li>
<li class="drop png">
<div class="add">
<span href="#" id="tv" style="BACKGROUND-POSITION: 13px 9px">TV</span>
</div>
<ul class="clean menu sub">
<li>
<a cat="tech" class="sec_tv" href="javascript:void(0);" name="&lid=choose_category_tv_fios" rel="1">FiOS TV</a>
</li>
<li class="last" style="margin-bottom:6px;">
<a cat="tech" class="sec_tv_1" href="javascript:void(0);" name="&lid=choose_category_tv_direct" rel="1">DIRECTV</a>
</li>
</ul>
</li>
</ul>
Should look like this:
<ul class="clean menu" id="topics">
<li class="drop png">
<a cat="ntech" class="sec_accnt" href="javascript:void(0);" name="&lid=choose_category_billing" rel="1" style="BACKGROUND-POSITION: 13px -164px">Billing</a>
</li>
<li class="drop png">
<a cat="ntech" class="sec_tv_fios" href="javascript:void(0);" name="&lid=choose_category_tv" rel="1" style="BACKGROUND-POSITION: 13px -164px">TV</a>
</li>
</ul>
The change should be based on the value of a flag variable.
If flag=0{
code remains same
}else{
code changes as mentioned.
}
Someone please help with the solution.
Safe way which makes sure the sub menu is a child of 'topics'
$('topics').getElements('ul.sub').destroy();
destroy() will make sure that the DOM elements will be GC:ed
Related
I have one page with multiple section. When I click on menu item it goes to specific section but it hide header. All code for header is exist if we inspect page.
Code for Top menu is
<ul class="nav navbar-nav">
<li tabindex="0">Home</li>
<li tabindex="0"><a href="/en/#who-should-attend">Who should attend?
</a></li>
<li tabindex="0">Agenda</li>
<li tabindex="0">Facilitators</li>
<li tabindex="0">FAQ</li>
<li tabindex="0"><button type="button" id="LoginBtn" data-toggle="modal" data-whatever="#LoginModal" data-target="#LoginModal" class="btn btn-default" tabindex="0"><strong>Login</strong> </button></li>
<!--<li>About Us</li>-->
<li tabindex="0"> </li>
<li tabindex="0"><a target="_blank" href="https://www.hellmann.com/en/" rel="noopener noreferrer"> <box-icon type="solid" name="home"></box-icon> </a></li>
<li tabindex="0"><a target="_blank" href="https://www.linkedin.com/company/hellmann-worldwide-logistics/mycompany/verification/" rel="noopener noreferrer"> <box-icon type="logo" name="linkedin-square"></box-icon> </a></li>
</ul>
How can I solve this issue?
Angular tab change on new value?
<ul class="nav nav-tabs">
<li class="active">
<a class="A" data-target="#A">Nye({{c.data.feil_nye_ant}})</a>
</li>
<li class="nav">
<a class="B" data-target="#B">Aktive({{c.data.feil_aktive_ant}})</a>
</li>
<li class="nav">
<a class="C" data-target="#C">HASTER({{c.data.feil_haster_ant}})</a>
</li>
<li class="nav">
<a class="D" data-target="#D">Ferdige({{c.data.feil_ferdig_ant}})</a>
</li>
</ul>
Need to draw focus by opening the "HASTER" tab (means "urgent"), when the value of c.data.feil_haster_ant is updated.
You can use ng-class to make your tabs active. When you perform an event on the tab (like click), set the value of some condition to trigger changes for the css of that tab using ng-class.
HTML:
<ul class="nav nav-tabs">
<li class="active" ng-class="{'active': Some condition}">
<a class="A" data-target="#A">Nye({{c.data.feil_nye_ant}})</a>
</li>
<li class="nav" ng-class="{'active': Some condition}">
<a class="B" data-target="#B">Aktive({{c.data.feil_aktive_ant}})</a>
</li>
<li class="nav" ng-class="{'active': Some condition}">
<a class="C" data-target="#C">HASTER({{c.data.feil_haster_ant}})</a>
</li>
<li class="nav" ng-class="{'active': Some condition}">
<a class="D" data-target="#D">Ferdige({{c.data.feil_ferdig_ant}})</a>
</li>
</ul>
CSS:
.active{
your css styles for active tab
}
I would like to get some advice on WAI-ARIA markup I have added to my paginated post navigation.
Does this look correct, am I missing anything?
Should anything be added/removed to the current page link (#2)?
Also, curious on my "Page Count" and "View All" sections what if anything can be added to make it more ARIA-friendly.
<nav role="navigation" class="post-navigation">
<ul role="menubar" class="pagination">
<!-- Page Count -->
<span class="page-count">Page 2 of 4 </span>
<li aria-label="Previous">
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="#">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a role="menuitem" aria-posinset="1" data-pagenum="1" href="">1</a>
</li>
<li class="active">
<span role="menuitem" aria-posinset="2">2</span>
</li>
<li>
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">3</a>
</li>
<li>
<a role="menuitem" aria-posinset="4" data-pagenum="4" href="#">4</a>
</li>
<li aria-label="Next">
<a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
<!-- View All link handing -->
<li aria-label="View All">
<a role="menuitem" href="#?viewall">View All</a>
</li>
</ul>
</nav>
I'm trying to create spaced tabs. I want about 6-8 of them running across the width of the screen, each with equal distance apart from each other. I also need them to have dropdown ability on hover.
Initially I went with Bootstrap 3 for quick and fast tabs. However, I can't seem to get them to space equally across the width of the page.
Alternatively, I found this awesome snippet of code which is pure css. However, I'm far from a css wizard and making a pure dropdown like the tabs would take me a long time.
Anyone know a solution to the bootstrap 3 problem of spacing or know where I can get a pure css dropdown solution? Bootstrap 3 code below, pure css in jsfiddle link
Thanks!
Code:
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a></li>
</ul>
</li>
</ul>
You can enclose your code inside a div with container-fluid class. It will help you to utilize entire width of apge.
ul.nav-tabs > li {
width: 33%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="content">
<ul class="clean menu" id="topics">
<li class="drop png">
<div>
<span href="#" id="phone" style="BACKGROUND-POSITION: 13px -79px">Phone</span>
</div>
<ul class="clean menu sub">
<li>
<a cat="tech" class="sec_phone_0" href="javascript:void(0);" name="&lid=choose_category_phone_digital" rel="1">FiOS Digital Voice</a>
</li>
<li class="last">
<a cat="tech" class="sec_phone_1" href="javascript:void(0);" name="&lid=choose_category_phone_dialup" rel="1">Home Phone(Copper)</a>
</li>
<li class="last">
<a cat="tech" class="sec_phone_2" href="javascript:void(0);" name="&lid=choose_category_phone_fiosVoice" rel="1">FiOS Voice</a>
</li>
<li class="last" style="margin-bottom:7px;">
<a cat="tech" class="sec_phone_2" href="javascript:void();" name="&lid=choose_category_phone_wireless" rel="1">Verizon Wireless</a>
</li>
</ul>
</li>
</ul>
</div>
Now I need to select the "cat" value of Fios Voice. How can I do this in Mootools v1.3.2?
Need to set the value in cookie.
This script gets the property of link on click event.
window.addEvent('domready',function(){
$$('ul.sub')[0].getElements('a').each(function(el,ind){
el.addEvent('click',function(){
var cat = el.getProperty('cat');
alert(cat)
})
})
})
For case when <a cat="tech1" class="sec_phone_0 active" href="javascript:void(0);" name="&lid=choose_category_phone_digital" rel="1">FiOS Digital Voice</a> has class="active"
window.addEvent('domready',function(){
if($$('ul.sub')[0].getElements('a.active')[0]){
var cat = $$('ul.sub')[0].getElement('a.active').getProperty('cat');
alert(cat);
}
})