Getting the attribute value of anchor tag in UL - mootools

<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);
}
})

Related

jquery dropdown without page refresh

i am using the bootstrap dropdown menu. and transitions between pages, I can provide my transitions without refreshing the page, but there is a situation where I get stuck, when the menu a href and submenu a hrefs are clicked, the dropdown remains open, I want it to be closed in an animated way. Finally, when "menu-item-has-children a" is clicked, "display: none" opens and when I click it again, it doesn't close. I couldn't understand why this was happening.
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
$(".sub-menu").hide();
$('.menu-item-has-children a').click(function (event) {
event.preventDefault();
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.sub-menu').length) {
$(this).siblings('.sub-menu', elems).show();
}
});
$("li.menu-item").click(function () {
$('.navbar-collapse').removeClass('in');
});
$(".menu-item ul li a").click(function () {
$('.navbar-collapse').removeClass('in');
});
I think that is just a matter of using .toggle() instead of .show() to be able to close a sub-menu when it is already opened.
$(".sub-menu").hide();
$(".menu-item-has-children a").click(function (event) {
event.preventDefault();
var elems = $(this).closest("li");
elems.siblings("li").find("ul").hide();
if (elems.find(".sub-menu").length) {
$(this).siblings(".sub-menu", elems).toggle(); // .toggle() instead of .show() here...
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header__navigation">
<nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
<ul class="main-navigation js-main-nav js-dropdown">
<li class="menu-item">
Home
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Corporate</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">Services</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a class="sub-menu-a" href="#">
<span class="nav_item_wrap">İmportant İnformation</span>
<span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
</a>
<ul role="menu" class="sub-menu" style="display: none;">
<li class="menu-item">
<a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
</li>
</ul>
</li>
<li class="menu-item">Contact Us</li>
</ul>
</nav>
</div>
Edit based on comments.
my pages are running with xhr request
So I now assume that a click on a .list-entry link (link on the second menu level) triggers an xhr to update a part of the page... And that menu stays opened because it is not part of the page that changes.
So you would just need additionnal event handler. Something like:
$(".list-entry").click(function(){
$(".sub-menu").hide();
})

Avoid fixed height issue related to Bootstrap Navbar. (Mega Menu)

I am trying to avoid fixed height of bootstrap columns. I do have a Custom Mega Menu in my project where we show all our Nav bar entries. This one is a dynamically created code so it will be difficult to change the logic of the Mega menu creation so I am looking for some Css solution to fix this issue.
My code in high level look like.
<div class="row">
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
</div>
Since this one is a dynamic item we can expect n number of col-xl-3
The issue is I am getting some extra space in between columns. ( taking the max size item's size in each row)
As you can see in the image attached, The yellow color marked area I am trying to avoid.
I have tried to use d-block with float-left to the child elements.
Then I am getting display something like below.
Here also I am getting extra space in some places. Is there any way to get out of this issues?
What I am looking for is to move sections 5 to below 1 st section and 6 one to below 2 nd section etc .And remove the extra space between top and bottom columns
(the yellow highlighted space in the image)
I am adding a testing sample below here.
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
</head>
<div class="container-outer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-12 navtop">
<nav class="navbar navbar-expand-lg navbar-light">
<div id="navbarContent" class="collapse navbar-collapse flex-md-column">
<ul class="navbar-nav mr-auto second-ul">
<ul class="navbar-nav treemenu">
<li class="nav-item dropdown position-static">
<a class="nav-link mnn-nav-link channelclass" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MENU
<i class="fa fa-down"></i>
</a>
<div class="dropdown-menu w-100 ddn" aria-labelledby="navbarDropdown">
<div class="row d-block">
<div class="col-xl-3 float-left">
<p data-id="ACCT" class="submenu-title mnn-sdaaaent-nav-click">
1
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ACCT ">
<li>
<a class="mnn-nav-sub-click" data-id="IPASSBOOKACCT">
seffwew
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled seffwewACCT mnn-nav-ul-sub" style="display: none;">
<li>
General Information
</li>
<li>
sefscsdsd Summary
</li>
<li>
Transaction
</li>
</ul>
</li>
<li>
sfdsfsds Income
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="TAX" class="submenu-title mnn-sdaaaent-nav-click">
2
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled TAX ">
<li>
2019 sdfdsfsfsdfs Forms
<sup class="newtext">NEW</sup>
</li>
<li>
<a target="_blank" href="/Commonfiles/2019/2019POFManual.pdf">2019 POF Manual</a>
<sup class="newtext">NEW</sup>
</li>
<li>
Estimated Composite sdfdsfsfsdfses 4th Qtr Election
</li>
<li>
ds sfsdsdsd and Consent
</li>
<li>
NY IT-2658 Estimate
</li>
<li>
State sdfdsfsfsdfs Questionnaire
</li>
<li>
sdfdsfsfsdfs Presdaaaation Sign-Up
</li>
<li>
<a class="mnn-nav-sub-click" data-id="ARCHIVES">
Archives
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled ARCHIVES mnn-nav-ul-sub" style="display: none;">
<li>
2018 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018POFManual.pdf">2018 POF Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018SampleForms965and965-A.PDF">2018 dfgdfgdg Manual addendum-Sample Forms 965 and 965-A</a>
</li>
<li>
Section 965 State by State Instructions
</li>
<li>
2017 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/Sec965FAQ.pdf">Section 965 FAQs</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManual.pdf">2017 dfgdfgdg Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017sdfdsfsfsdfs_Information.pdf">2017 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManualAddendum965TransitionsdfdsfsfsdfsREVISED101218.pdf">2017 dfgdfgdg Manual Addendum 965 Transition sdfdsfsfsdfs revised 101218</a>
</li>
<li>
2016 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016_sdfdsfsfsdfsInformation.pdf">2016 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016dfgdfgdgManual.pdf">2016 dfgdfgdg Manual</a>
</li>
<li>
2015 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015sdfdsfsfsdfsInformation.pdf">2015 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015dfgdfgdgManual.pdf">2015 dfgdfgdg Manual</a>
</li>
<li>
2014 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014sdfdsfsfsdfsInformation.pdf">2014 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014dfgdfgdgManual.pdf">2014 dfgdfgdg Manual</a>
</li>
<li>
2013 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2013/2013sdfdsfsfsdfsInformation.pdf">2013 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2013/2013dfgdfgdgManual.pdf">2013 dfgdfgdg Manual</a>
</li>
<li>
2012 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2012/2012sdfdsfsfsdfsInformation.pdf">2012 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2012/2012dfgdfgdgManual.pdf">2012 dfgdfgdg Manual</a>
</li>
<li>
2011 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2011/2011sdfdsfsfsdfsInformation.pdf">2011 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2011/2011dfgdfgdgManual.pdf">2011 dfgdfgdg Manual</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="FINPLANPTR" class="submenu-title mnn-sdaaaent-nav-click">
3
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled FINPLANPTR ">
<li>
dfgdfgdg-dfgdgdfgdfg Planning Services sfsdsdsd
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="ADM" class="submenu-title mnn-sdaaaent-nav-click">
4
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ADM ">
<li>
<a target="_blank" href="/Commonfiles/dfdfs/DirectAdmitBook.pdf">Direct dfdfs Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/NewsdsdsdManual.pdf">New sdsdsd & Principal Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/sdsdsdshipagreements.pdf">sdsdsdship Agreements</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/Americas_Operating_Agreement_as_amended_July_4_2015.pdf">Americas Operating Agreement</a>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="RET" class="submenu-title mnn-sdaaaent-nav-click">
5
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled RET ">
<li>
<a class="mnn-nav-sub-click" data-id="SPDS">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU PDBRP and IDBRP</a>
</li>
</ul>
</li>
<li>
<a href="/sdsdaa/401kContribution/_401kExclusionMsg">
401(k) asdaaa and
Election
</a>
</li>
<li>
<a class="mnn-nav-sub-click" data-id="sdssdsd">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU asdadad and sdfsfsdsd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<a target="_blank" class="submenu-title mnn-sdaaaent-nav-click" href="https://sdaaa.TYU.net">6</a>
</div>
<div class="col-xl-3 float-left">
<a class="submenu-title mnn-sdaaaent-nav-click" href="https://ptrshpdashboard.TYU.net">7</a>
</div>
</div>
</div>
</li>
</ul>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#navbarContent").hide();
$('.navtrigger').click(function () {
$("#navbarContent").toggle();
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
setTimeout(function () {
$('body').addClass('loaded');
}, 100);
});
$(".mnn-nav-ul-sub").hide();
$(".mnn-nav-sub-click").click(function () {
$(".mnn-nav-ul-sub").slideToggle();
$(this).find('i').toggleClass('fa fa-down fa fa-up');
$(".mnn-nav-sub-click").sdaaaent().removeClass('navactive');
});
$(".ddn").on("click", function (e) {
e.stopPropagation();
});
</script>
</body>
</html>
maybe this helps you CSS: remove empty Space between boxes
In your case
.wrapper {
column-count: 3;
column-gap: 1.25rem;
}
.part {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.row will be .wrapper and .col-xl-3 is .part, I recommend you not to use bootstrap classes for this

Structued data in a menu

How do you add url item props in a menu after the first li element. I cant seem to get google to pick up my next item props after the first menu list.
<li itemtype="http://schema.org/LocalBusiness" id="main"> <a> home</a>
<ul id=" subnav" =""="">
<li> <a itemprop="url" href="">Item 1</a>
</li>
<li><a itemprop="url" href="">Item 2</a>
</li>
<li><a itemprop="url" href="">Item 3</a>
</li>
</ul>
</li>
<li id="two">
<a>hello</a>
<ul id="subnav1">
<li>Menu 2
</li>
<li><a itemprop="url" href=""> Item 4 Not being picked up</a>
</li>
</ul>
</li>

ARIA and pagination

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>

How to remove a list (ul) using mootools

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