We Keep Coding

Why isnt this clickable drop down menu showing?

I have a drop down menu that when hovered over works and I added a some javascript that toggles a css class .show-menu on and off when click and removes the hover css for mobile devices. My problem is the menu isn't showing when clicked. I can see in the dev tools that the css class is being removed and added, so the javascript is working fine., so it seems to be a css issue. however I'm failing to see any css conflicts that would be causing this issue. Does anyone have any idea what the issue is here?-thanks
I added the entire css sheet in the jsfiddle as I'm clearly missing something
https://jsfiddle.net/kmut5xtu/
<nav>
<ul class="main-nav">
<li class="main-nav-item current-page">Home</li>
<li class="main-nav-item">About
</li>
<li class="main-nav-item characters">
<span>Characters</span>
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
!function app(){
!function AddMenuClickHandler(){
let charTab= document.querySelector(".characters");
let toggle= 1;
charTab.addEventListener("click",function(){
let dropMenu=document.querySelector(".drop-menu");
if(toggle===1){
dropMenu.classList.add("show-menu");
toggle=0;
}
else if(toggle===0){
dropMenu.classList.remove("show-menu");
toggle=1;
}
})
}()
}()

The css below is the issue:
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
Remove hover from these css and you will be good.

Off the bat, you need to tell your HTML that you are using JS. You do this with script tags:
<script>
Your code here
</script>
While I don't personally use JS to disable clickable menus on phones, there is a really simple way to just make them clickable that BootStrap uses, which, if you use BootStrap, will allow you to easily modify things for mobile views.

Metro UI CSS: How to achieve class="active" effect?

In bootstrap there is a nice css class 'active' to apply to menu elements to indicate on which page a user is.
I assume it will work the same in metro ui but I was wrong
<ul class="app-bar-menu" data-bind="foreach: router.navigationModel">
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
</ul>
The above code (uses Durandal's router) does not make menu items stand out, even if I explicitly set the class without these bindings.
Is there a similiar mechanism in Metro UI CSS for appbar or horizontal menu?
If not, how can I achieve it?
EDIT
I found out that class="active" successfully works with lower level menu items but what about the top level?

I didn't find solution other than to add css override. For app-bar this would be
.app-bar-menu > li.active {
background-color: #005696;
}
If you use non-default colors you'll have to do it specifically for your case, e.g. green:
.app-bar.green .app-bar-menu > li.active {
background-color: #128023;
}

Change cursor to default in anchor tag using javascript

I have an anchor tag in which I removed the href attribute through JavaScript.
I had also used setAttribute to add style="cursor:default;"
But still the hand pointer is being displayed on hovering over the text.
What is that I am doing wrong here.
HTML
<li>
<a class="menu-item" href="www.google.com" >
<span>Link Text</span>
</a>
</li>
JS
window.onload=function removeLink()
{
menuItem.removeAttribute("href");
menuItem.setAttribute("style","cursor:default;");
}
After page load html becomes like this
<li>
<a class="menu-item" style="cursor:default;" >
<span>Link Text</span>
</a>
</li>
When the page is rendered these changes are visible in the code, But still i get the Hand pointer on hovering over the link
I have already tried using menuItem.style.cursor="default";
And also tried to set it through css
CSS
.class a:hover{
cursor:default;}

Read here: Mouse Coursor 1, Mouse Coursor 2
Try this:
document.getElementById("anchor").style.cursor="default";
Google

You can make a link unclickable like this, using the simple css. This works in mobile devices and desktop also.
a {
pointer-events: none;
cursor: default;
}
Unclickable link

Using setAttribute is unreliable if you want the change to be reflected in the document. Use Element.style instead:
menuItem.style.cursor='default';

Angular 1.2 apply animation based on class

I made an HTML layout that works as a filter and my HTML looks something like this:
<div class="filter">
<small>User</small>
<em ng-bind="filter.name">All Users</em>
<nav>
<a class="selected" ng-click="filter={name: 'All Users', filter: ''}">All Users</a>
<hr>
<a ng-click="filter={name: 'Person1', filter: 'Person1'}">Person1</a>
<a ng-click="filter={name: 'Person2', filter: 'Person2'}">Person2</a>
<a ng-click="filter={name: 'Person3', filter: 'Person3'}">Person3</a>
</nav>
</div>
Now my approach is I created a directive and when I press on the filter, it adds an active class near the filter class, and with CSS when the active class is applied, I show the
.filter nav {
display: none;
}
.filter.active nav {
display: block;
}
My question is: is there any way can I do the show / hide of the nav div animated using the Angular 1.2 animation library?
Thank you in advance, Daniel.

You might want to review ngAnimate documentation hide/show animation comes (along with others) comes for almost free. You just need to reference ngAnimate, inject $animate and add the enter/leave css styles.

Cannot override the CSS at this site

This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.
I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.
$('#mydiv').children().css('text-align', 'auto');
How the heck do I reclaim my CSS!?
#Grillz, the HTML looks like this:
<div id="mydiv">
<ul class="container">
<li rel="folder" class="category">category1
<ul><li rel="file" class="subcategory">subcategory1</li></ul>
<ul><li rel="file" class="subcategory">subcategory2</li></ul>
</li>
<li rel="folder" class="category">category2
<ul><li rel="file" class="subcategory">subcategory3</li></ul>
<ul><li rel="file" class="subcategory">subcategory4</li></ul>
</li>
</ul>

If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>... You need to do something like this:
$('#mydiv').children().children().each(function() {
$(this).css('text-align', 'left');
});
Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child...
EDIT: after seeing your html above, below is probably more appropriate:
$('#mydiv').find("li").each(function() {
$(this).css('text-align', 'left');
});
This uses the .find() function to find every <li> element inside #myDiv.
Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/
Hope that helps :)

All you need is a more specific css rule. Something like this will set text alignment to left for all the children of #mydiv.
body #mydiv * {
text-align: left;
}

Try without children() function

$(document).ready(function(){
$('body').css('text-align', 'left !important');
});
and I'm guessing you trued to insert <UL/> and <LI/> in your example. you need to define them as code for them to show up