Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!
So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);
Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
Related
I have a Sidebar / Menu that I am working with. It has been created with Bootstrap, DJango, and Javascript.
Basically, I am trying to write Javascript so that when on clicks on a menu-item, the background changes color (dark blue), the icon change color (light green / turquoise) and it gets a type of "wedge"
Below is an example of a menu-item that has been chosen (Dashboard) along with menu-items that have not been chosen (Security and Messages). The "wedge" has a red arrow pointing to it.
Here is the HTML code that is being used:
[... snip ...]
<div class="page-container">
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu "
data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="nav-item start active open">
<a href="{% url 'mainadmin:dashboard' %}" class="nav-link nav-toggle">
<i class="fa fa-tachometer"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:security' %}" class="nav-link nav-toggle">
<i class="fa fa-users"></i>
<span class="title">Security</span>
<span class="arrow"></span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link nav-toggle">
<i class="fa fa-comment"></i>
<span class="title">Messages</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List All Messages</span>
</a>
</li>
<li class="nav-item ">
<a href="{% url 'mainadmin:in_progress' %}" class="nav-link ">
<span class="title">List My Messages</span>
<span class="badge badge-danger"></span>
</a>
</li>
</ul>
</li>
[... snip ...]
Here is the Javascript code:
<script>
$(document).ready(function () {
$('.nav-item a').click(function(e) {
$('.nav-item a').removeClass('selected');
$('.nav-item a').removeClass('arrow');
$('.nav-item a').removeClass('open');
$('.nav-item a').removeClass('active');
alert("I have gotten in");
var $parent = $(this).parent();
$parent.addClass('selected');
$parent.addClass('arrow');
$parent.addClass('open');
$parent.addClass('active');
e.preventDefault();
});
});
</script>
I do get the alert message - but - what happens is :
-> the background of the chosen menu-item does change color - which is correct
--> The icon of the chosen menu-item changes color (to light blue / turquoise) - which is correct
-> the tick of the arrow does not take place for the chosen menu-item :(
-> the old chosen menu item does not "de-select"
What am I doing wrong?
TIA
Hi #Joe Lissner
Thanks so much for the response!
I had to add the following to get the "wedge" portion to work. It required span tags
// REFERENCE: https://stackoverflow.com/questions/2013710/add-span-tag-within-anchor-in-jquery
$(this).append('<span class="selected"></span>');
$(this).append('<span class="arrow open"></span>');
While this works when clicking on the main-menu item, I'm not so lucky when it comes to clicking on sub-menu items. As of now, I am pretty much new to Javascript.
How would one get the sub-menu items to work?
Also, when clicking on an item, it does not go to the page specified in "href="
How would can one make changes to the code so that when the menu-item is clicked, it would go to the page specified in "href="
Again, thanks for the response :-)
You are removing the classes from the a tags, not the .nav-item elements.
Try this:
$(document).ready(function () {
$('.nav-item a').click(function(e) {
e.preventDefault(); // best practice to have this first, if you remove this line then the link will function as expected.
var $parent = $(this).parent();
var $arrow = $parent.find('.arrow');
$('.nav-item').removeClass('selected arrow open active'); // simplified
$('.nav-item .arrow').removeClass('open');
$('.nav-item .selected').detach(); // remove the span that was there before
alert("I have gotten in");
$parent.addClass('open active'); // simplified
$arrow.addClass('open').before('<span class="selected" />')
});
});
Edit - Fixed the issue with the arrow
I'm creating something many would call a bookmark bar, but within the website itself. Basically I have a regular Bootstrap navbar with few menu items that have a "thumb-tack" on them. By pressing the thumb-tack, user can pin that menu item for quick access to a sidebar I've created.
Now before this explanation goes way too messy, here is my current code, which is partially working, but on the other hand it is not.
JSFiddle
HTML
<nav id="oa-navbar" class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<i class="fa fa-area-chart" aria-hidden="true"></i> Dashboard
</li>
<li>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit content
</li>
<!-- PINNABLE MENU ITEM!! -->
<li class="pinnable">
<i class="fa fa-picture-o" aria-hidden="true"></i> Media
</li>
</ul>
</div>
</div>
</nav>
<!-- The "Quick-Access" navbar -->
<div id="oa-toolbar">
<div class="container-fluid">
<div id="oa-toolbarbtn" class="oa-btn btn btn-default">
<i class="fa fa-bars" aria-hidden="true"></i> Quick-Access
</div>
<div id="oa-toolbar-pinned">
</div>
</div>
</div>
JS
// Adding the "pinicon" to the pinnable link
$.each($("#oa-navbar li"), function () {
if ($(this).hasClass("pinnable")) {
var pinicon = '<a class="pin-it"><i class="fa fa-thumb-tack" aria-hidden="true"></i></a>';
$(this).find("a").append(pinicon);
}
});
// Pinning the link itself
$("#oa-navbar li .pin-it").click(function () {
var pinMenu = $("#oa-toolbar-pinned");
var nl_content = $(this).parent().html();
var nl = $("<li class='pinnedItem'>"+ nl_content +"</li>");
$(pinMenu).removeClass("active");
if (!$(this).parent().hasClass("pinned")){
$(nl).appendTo(pinMenu);
$(pinMenu).addClass("active");
}
$(this).parent().toggleClass("pinned");
});
The way it works now is that it does add the menu item to the quick-access menu, but it does not take the <a> tags, just what's inside of them.
The other issue is that when I press the thumb-tack on the navigation bar again, it does not remove the pinned item from the quick-access menu. There's got to be an easy way to do this, but I've taken the long road it seems.
Any advice will be more than welcome!
Try this example, actually you were close, I have just reversed your code
$("#oa-toolbar-pinned").on('click','.pinnedItem',function () {
var navBar = $("#oa-navbar ul li"); // find navbar
var content = $(this).find("a").html();
var appendCont = "<li class='pinnable'> <a class='pin-it' href='#'>" + content + "</a></li>"; // take content and surround with li
$(appendCont).appendTo(navBar.parent()); // append to navbar
$(this).remove(); // remove from pinned list
});
Edit 1:
Changed click event to delegate, because there was a problem that newly appended a tags don't fire click event, solved with this,
$(document).on('click', '#oa-navbar li .pin-it' ,function() {}
Hope helps,
I have the basis of my menu working, where when I click a menu element, it opens (similar to JQuery accordion), and when I click on another element in the menu, the previously opened menu closes and the newly clicked on opens. Here's what it looks like:
Now, I'm trying to implement functionality to close the currently opened menu if it is clicked again. I'm using the slideUp(); method, but having a hard time figuring out where to put the additional code for the 2nd click on the same element.
Here's what I have:
navigation.html.erb
<!-- menu links -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>Dashboard
</li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>General Elements
</li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>Chart JS
</li>
</ul>
</li>
</ul>
</div>
</div>
custom.js
var URL = window.location,
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
var setContentHeight = function () {
// reset height
$RIGHT_COL.css('min-height', $(window).height());
var bodyHeight = $BODY.height(),
leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
// normalize content
contentHeight -= $NAV_MENU.height() + $FOOTER.height();
$RIGHT_COL.css('min-height', contentHeight);
};
$SIDEBAR_MENU.find('a').on('click', function(ev) {
var $li = $(this).parent();
if ($li.hasClass('.active')) {
$li.removeClass('active');
$('ul:first', $li).slideUp(function(){
setContentHeight();
});
} else {
$li.addClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).removeClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).find('.child_menu').removeClass('active').slideUp();
$('ul:first', $li).slideDown(function(){
setContentHeight();
});
}
});
Change if ($li.hasClass('.active')) to if ($li.hasClass('active')) and that should resolve the issue. Check this fiddle. I have created an empty setContentHeight function to make it work.
I am trying to delete a whole block of html with javascript(no jquery).
Source
<li uib-dropdown="" class="dropdown hidden-xs">
<a uib-dropdown-toggle="" class="dropdown-toggle pointer" "="" aria-haspopup="true" aria-expanded="false">
<img width="22" title=" - xyz#gmail.com" height="22" class="img-rounded profile-img" src="https://www.gravatar.com/avatar/edft80b9a51f775c8ee562ca89345318b">
<!-- <b class="caret"></b> -->
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu small-dropdown-menu">
<li>Account</li>
<li>Billing</li>
<li>Team</li>
<li>Plans</li>
<li class="hidden-lg"><a class="pointer" title="Ask us a question, report a bug or suggest a feature!" href="mailto:help#example.com">Contact</a></li>
<hr>
<li><a target="_self" href="https://app.example.com/logout"><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</li>
Desired result
The whole block of code should be remove
My attempt
document.getElementsByClassName('dropdown hidden-xs').innerHTML = '';
getElementsByClassName returns array-like object, so you need to access element by index:
document.getElementsByClassName('dropdown hidden-xs')[0].innerHTML = '';
To set the html of all elements with that class to '', you'll need a loop.
Array.prototype.forEach.call(document.getElementsByClassName('dropdown hidden-xs'), function(el) {
el.innerHTML = '';
});
Or, to really delete them, use:
Array.prototype.forEach.call(document.getElementsByClassName('dropdown hidden-xs'), function(el) {
el.parentNode.removeChild(el)
});
I am having trouble selecting the closest match. I already tried .closest, .next, and .nextall; I also tried using (this), but I think I'm using them incorrectly.
Here's what I want to acheive:
When .show is clicked, the closest .list-content will toggle and the closest toggleClass icon-rotate-180 too.
<ul class="list-unstyled">
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
</ul>
<script>
$(document).ready(function() {
$(".list-content").hide();
$(".show").click(function() {
$(".icon-chevron-down").toggleClass("icon-rotate-180");
$(".list-content").toggle();
});
});
</script>
Firstly, your HTML is invalid as you cannot have a div element as a direct child of a ul. With that in mind, try this:
<ul class="list-unstyled">
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
</ul>
$(".show").click(function(e) {
e.preventDefault();
$(".icon-chevron-down", this).toggleClass("icon-rotate-180");
$(".list-content", $(this).closest('li')).toggle();
});
ul/li is the wrong case here. The second li is in relation to the first li. Please use dl, dd and dt instead - this is not the perfect match but better than ul/li!
a is for links but you dont call a url. Please use the dd itself or a span so you dont need the javascript:void(0); and no e.preventDefault();.
Date of Operations
Hidden Content until Clicked
<dd class="list-menu show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</dd>
<dt class="list-content">Hidden Content until Clicked</dt>
$(".show").click(function(e) {
$(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180");
$(this).next("dt.list-content").toggle();
});
(i copied a part of RoyMcCrossan's answer from Selecting Closest Match using jQuery)
Sorry structure broken, looks like a bug in Stackoverflow.