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.
Related
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.
I have a simple html code where I have a left menu. I want to scroll content on click of menu within the same page. Also I don't want to scroll menu.
The problem is, I am using AngularJS so compiler is confused between routing and segment logic.
Here is my menu:
<div class="container">
<div style="float: left;width:150px;">
<ul class="list-group">
<li class="list-group-item">overview</li>
<li class="list-group-item">Clinical features</li>
<li class="list-group-item">Diagnosis</li>
<li class="list-group-item">Testing laboratories</li>
<li class="list-group-item">Result interpretation</li>
</ul>
</div>
<div class="col-md-10" id="clinical">
<div class="row">
<div class="col-md-2">Result interpretation</div>
<div class="col-md-10">
<p style="text-align: right;">Back To Top</p>
</div>
</div>
<hr>
<p>Hey this is just to test.</p>
</div>
</div>
This is not a problem specific to AngularJS or anything else. It's just a tiny CSS problem:
You're aligning your menu using float: left, which will cause it to appear on the left border but it won't follow you down when scrolling (as you've noticed).
The solution is pretty simple, just attach your menu in a different way. There are many different ways to do this, also depending on whether you're using any JavaScript library (like Bootstrap), but the most simple approach would be pinning the menu using CSS:
.menubar {
/* A fixed alignment will ignore scroll bar positions */
position: fixed;
/* Stretch the bar by forcing offsets and a width */
top: 0;
left: 0;
bottom: 0;
width: 150px;
}
Last but not least you'll have to move your content so it's not hidden by the menu bar (which would otherwise overlap):
.content {
padding-left: 150px; /* of course this could use positioning as well */
}
You can try the whole thing in this jsFiddle.
From your question it's not clear whether you're also looking for soft scrolling, but for that you'll most likely want some additional JavaScript library - or you could just use some library that provides everything for you (including menu bar CSS etc.), like Bootstrap or UI Kit.
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;
}
I've tried a few JQuery and CSS implementations of this, but can't seem to get it quite right. I'm utilizing FontAwesome icons in the navbar for Bootstrap, and I would like to have a single location where, when the icons are hovered, a text description of them is shown/hidden.
This implementation has gotten me the farthest, with the different captions showing up. However, I need them all to appear in one location (preferably to the front of the ul navbar-nav grouping, as they will be right aligned).
CSS:
div#navbar a span {display: none;}
div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}
HTML:
<ul class="nav navbar-nav">
<li><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></li>
<li><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></li>
<li><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></li>
</ul>
The implementation above is based off MeyerWeb's CSS Popup Demo
I have tried JQuery Fiddles that worked for simple classes/links such as this: http://jsfiddle.net/AstroCB/42gV5/ , but I'm uncertain if the depth of Bootstrap classes is causing some sort of override, as I cannot seem to get JQuery show/hide functions based on the examples I've seen to work.
I have also tried ~ relations such as: http://jsfiddle.net/YsHA4/ but am again hitting a wall.
It's highly likely I am just approaching this the wrong way, but I've been attempting to solve this problem for a few days now and just can't seem to find a solution. A fresh set of eyes and any and all help would be absolutely appreciated. If there's any way I can clarify, please let me know. Thank you!!
EDITED TO ADD: I do not need the final result to be spans inside the links in any regard, they can be hidden external divs, etc. The example I gave is the farthest I have managed to get the functionality to what I want (separate information showing up for each hover), but if a different approach using JS/etc removes the spans or hard codes the text into a JS string in some way, so be it. I am just looking to get this functionality to work as anticipated with Bootstrap, whatever implementation best gets it there!
Also, see my comment for an image representation of what I am trying to achieve.
I made a Fiddle based on your image.
It uses bootstraps right section for the menu.
I have applied a loop to each link:
$.each($('a'), function() {
$(this).hover(function() {
$('.placeholder').html($(this).html());
});
});
It simply takes the HTML inside a tag and places in the menu item with the class placeholder.
Update:
In your case your links are bit more complex so the selector for the loop would look like this:
$.each($('a > span'), function() {
// do stuff here
});
This fetches all links in your document and then the span element inside that.
Aaand finally a Fiddle for the HTML you have provided here.
Code below edited since loops are unecessary:
$('a').hover(function() {
$('.placeholder').html($(this).html());
});
$('a > span').hover(function() {
// do stuff here
});
HTML
<ul class="nav navbar-nav">
<li class="hover"><div class="nav-button"><i class="fa fa-user"></i><span class="text hidden"> Text Goes Here</span></div>
</li>
<li class="hover"><div class="nav-button"><i class="fa fa-umbrella"></i><span class="text hidden"> Text Goes Here 2</span></div>
</li>
<li class="hover"><i class="fa fa-star"></i> <span class="text hidden">Text Goes Here 2</span>
</li>
</ul>
JS
$(document).ready(function () {
$('.hover').each(function (index, el) {
var thiz = $(this);
var text = thiz.find('.text');
thiz.on('mouseover', function (e) {
text.removeClass('hidden');
});
thiz.on('mouseleave', function(e){
text.addClass('hidden')
});
});
});
jsFiddle
I have tab structure like this:
<ul class="g-tabs-tabs" style="width: 160px;">
<li class="g-tabs-tab" data-idx="0">General</li>
<li class="g-tabs-tab" data-idx="1">Extension</li>
<li class="g-tabs-tab" data-idx="2">Lines</li>
</ul>
I am not using JqueryUI. So i don't want to do this as answered for same question
On hovering over a tab it changes the color(see fiddle).
If a tab is disabled it should not change the color.
How do i disable third tab?
See Fiddle For Example
I suppose you disable it by adding some class (let's say g-tabs-disabled). So just add the following rule in your css :
.g-tabs-disabled:hover {
background-color:#f4f4f4;
}
or if you have support for :not in CSS, you can merge it with the other rule :
.g-tabs-tab:not(.g-tabs-disabled):hover {
background-color:#0000FF;
}
See fiddle : http://jsfiddle.net/Lej2P/2/
All you need to do is to add a class which makes it look disabled by muting the color and overriding the existing :hover classes. Also, need to disable the mouse events to make truly disabled.
Demo: http://jsfiddle.net/abhitalks/Lej2P/1/
Relevant CSS: (just add this class)
.g-tabs-tabs > .disabled, .g-tabs-tabs > .disabled:hover {
background-color:#f4f4f4;
pointer-events: none;
color: #ccc;
}
<ul class="g-tabs-tabs" style="width: 160px;">
<li class="g-tabs-tab" data-idx="0">General</li>
<li class="g-tabs-tab" data-idx="1">Extension</li>
<li class="g-tabs-tab" data-idx="2" data-type="disabled">Lines</li>
</ul>
Insert CSS
li[data-type=disabled]:hover{background-color:#FFFFFF;}
If you want to disable hover effect you can do sth like this
$('ul li:nth-child(3)').hover(function() {
$(this).css('background-color', 'transparent');
});