Skip to content

Commit

Permalink
add hover feature
Browse files Browse the repository at this point in the history
  • Loading branch information
chiaweh2 committed Jul 17, 2024
1 parent adec8f9 commit ab0d835
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 16 deletions.
22 changes: 17 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ <h1 class="headingCenter">Climate Ecosystems and Fisheries Initiative Portal</h1
<div class="tab" role="tabpanel" role="navigation">
<ul class="nav nav-tabs" id="cefiPortalTabs">
<li class="active">
<a class="nav-link" href="#overview" data-toggle="tab">Overview
<span class="hoverLabel">Understanding what is CEFI and what regions are covered by CEFI</span>
<a class="nav-link cefiNavbar" href="#overview" data-toggle="tab">Overview
<span class="hoverLabel">What is CEFI?</span>
</a>
</li>

Expand Down Expand Up @@ -55,9 +55,21 @@ <h1 class="headingCenter">Climate Ecosystems and Fisheries Initiative Portal</h1
</ul>
</li>

<li><a class="nav-link" href="#cefi_list_search" data-toggle="tab" data-target="#cefi_list_search">Information Hub</a></li>
<li><a class="nav-link" href="#cookbooks" data-toggle="tab">Cookbooks</a></li>
<li><a class="nav-link" href="#resources" data-toggle="tab">Resources</a></li>
<li>
<a class="nav-link" href="#cefi_list_search" data-toggle="tab" data-target="#cefi_list_search">Information Hub
<span class="hoverLabel">Search the CEFI related resources!</span>
</a>
</li>
<li>
<a class="nav-link" href="#cookbooks" data-toggle="tab">Cookbooks
<span class="hoverLabel">Tutorial of how to use the regional MOM6 output and other resources</span>
</a>
</li>
<li>
<a class="nav-link" href="#resources" data-toggle="tab">Resources
<span class="hoverLabel">Links to resources</span>
</a>
</li>

</ul>

Expand Down
51 changes: 40 additions & 11 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,42 @@
$(".navDropdown").on('click',function(){
var isExpanded = $("#dropdownMaps").attr("aria-expanded");
// console.log('aria-expanded is'+isExpanded);
const delay = ms => new Promise(res => setTimeout(res, ms));


$(".navDropdown").on('click',async function() {
await delay(10); // wait 5 ms for the boostrap code to work and execute the rest

$(".navDropdown").parent().closest('li.dropdown').each(function() {
if ($(this).hasClass('open')) {
$(this).children('.navDropdown').children('span.hoverLabel').addClass('hidden')
} else {
$(this).children('.navDropdown').children('span.hoverLabel').removeClass('hidden')
}
})

// the false and true is lagging the click so the logic is reversed
if (isExpanded === "false") {
$(this).children('span.hoverLabel').addClass('hidden')
} else if (isExpanded === "true") {
$(this).children('span.hoverLabel').removeClass('hidden')
} else {
console.log("The aria-expanded attribute is not explicitly set.");
}
// var dropDownMenuID = $(this).attr('id')
// var dropDownTab = $('#'+dropDownMenuID).parent().closest('li.dropdown');

// await delay(100); // wait 5 ms for the boostrap code to work and execute the rest

// if (dropDownTab.hasClass('open')) {
// $('#'+dropDownMenuID).children('span.hoverLabel').addClass('hidden')
// console.log('The element has the class "open".');
// } else {
// $('#'+dropDownMenuID).children('span.hoverLabel').removeClass('hidden')
// console.log('The element does not have the class "open".');
// }

// var dropDownTabs = $(".navDropdown").parent().closest('li.dropdown');


// var isExpanded = $("#dropdownMaps").attr("aria-expanded");
// // console.log('aria-expanded is'+isExpanded);

// // the false and true is lagging the click so the logic is reversed
// if (isExpanded === "true") {
// $(this).children('span.hoverLabel').addClass('hidden')
// } else if (isExpanded === "false") {
// $(this).children('span.hoverLabel').removeClass('hidden')
// } else {
// console.log("The aria-expanded attribute is not explicitly set.");
// }
})

0 comments on commit ab0d835

Please sign in to comment.