The css inside the directive does not compile and leads to single color green itself. I want to have different colors for different values for the value identifier and the css color should change accordingly but it always subsides to the last color for all the thermometer widget. Please help.
angular.module('directives').directive('thermometer', function(){
return {
restrict: 'AE'
, replace: true
, transclude:true
,scope : {
value : "=",
maxValue : "=" ,
text:"#",
percent:"="
}
,template: function(element, attrs) {
var html = '<div style="float:left;margin-left:40px"><style> .donation-meter {margin-right:auto;margin-left:auto; width: 80px; } .donation-meter .glass { background: #e5e5e5; border-radius: 100px 100px 0 0; display: block; height: 100px; margin: 0 35px 10px; padding: 5px; position: relative; width: 20px; } .donation-meter .amount { background:{{color}}; border-radius: 100px; display: block; width: 20px; position: absolute; bottom: 5px; } .donation-meter strong { display: block; text-align: center; } .donation-meter .goal { font-size: 20px; } .donation-meter .total { font-size: 16px; position: absolute; right: 35px; } .bulb { background: #e5e5e5; border-radius: 100px; display: block; height: 50px; margin: 0 35px 10px; padding: 5px; position: relative; top: -20px; right: 15px; width: 50px; } .bulb .red-circle { background: {{color}}; border-radius: 100px; display: block; height: 50px; width: 50px; } .bulb .filler { background: {{color}}; border-radius: 100px 100px 0 0; display: block; height: 30px; width: 20px; position: relative; top: -65px; right: -15px; z-index: 30; } </style>';
html += '<div class="donation-meter"> <b>{{text}}</b>';
html += '<b class="goal">{{maxValue }}</b> <span class="glass"> <b class="total" style="bottom:{{(value/maxValue)*100}}%">{{value}}';
html+= '</b> <span class="amount" style="height:{{(value/maxValue)*100}}%"></span> </span> <div class="bulb"> <span class="red-circle"></span> <span class="filler"> <span></span> </span> </div> </div></div>';
return html;
}
,link:function(scope){
scope.$watch('value',function(newValue){
console.log("--------------------------");
console.log();
if(newValue==75){
scope.color="blue";
}
if(newValue==76){
scope.color="green";
}
});
}
}
});
The color always subsides to whatever is the last value. Rest of the time it works fine. Please help.
Instead of putting the color on the class .amount put it in the style of the element that has the class .amount:
html+= '</b> <span class="amount" ng-style="{height:(value/maxValue)*100 + '%', background: color}"></span> ...
It would be easier to put the template on an outside file, like thermometer.html, you just have to specify the location like this:
angular.module('directives').directive('thermometer', function(){
return {
restrict: 'AE'
, replace: true
, transclude:true
,scope : {
value : "=",
maxValue : "=" ,
text:"#",
percent:"="
}
; templateUrl: 'thermometer.html'
,link:function(scope){
scope.$watch('value',function(newValue){
console.log("--------------------------");
console.log();
if(newValue==75){
scope.color="blue";
}
if(newValue==76){
scope.color="green";
}
});
}
}
});
And then create the html file:
< div style=...>
...
< /div>
By putting the variable inside a <style> rule, you're redefining the css class each time your directive gets placed on the page -- so if the first instance of the directive sets
.donation-meter .amount { background:red}
but the next one sets it to
.donation-meter .amount { background:green}
then the last css rule is going to override the previous ones and therefore apply to all .donation-meter .amount elements on the page.
You should extract most of your CSS into a stylesheet rather than re-rendering it for every instance of the directive. For the parts where you need variable style rules, use ng-class where possible:
<div ng-class="{red: newValue < 75, green: newValue >74}">...</div>
or else set the variable style directly on the element rather than on a class rule:
<div style="background-color: {{color}}">
instead of
<style>.foo {background-color: {{color}}</style> <div class="foo"></div>
Related
I am using the distance of the the span from the top to position the caret vertically, that works fine, and I am using the index of the string multiplied by the letter width to position the caret horizontally but that sometimes works, sometimes it doesn't.
Look for example at the second row, and click in the first "this", it doesn't work properly but if you click inside the last "this" the caret gets positioned correctly.
I can't figure out why, doesn't it mean that a mono-space font has the exact same with for each letter which I eyeballed here to be 10.1? Something doesn't work here and I can't figure out what. JsFiddle
let writeDiv = document.querySelector('#write');
let caret = document.querySelector('#caret')
writeDiv.addEventListener('click', (e) => {
if(e.target.tagName == 'SPAN'){
moveCaretOnClick(e)
}
})
function moveCaretOnClick(e) {
let y = window.getSelection().focusOffset * 10.1
caret.style = `left: ${y}px; top: ${e.target.offsetTop + 3}px`;
}
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
body, html{
margin: 0;
height: 100%;
width: 100%;
}
#write {
font-family: 'Roboto Mono';
height: 100%;
width: 100%;
background: #1f2227;
padding: 10px;
color: white;
box-sizing: border-box;
}
#caret{
height: 15px;
width: 3px;
background: #80ff00;
display: inline-block;
position: absolute;
}
.RowSpan{
width: 100%;
display: inline-block;
box-sizing: border-box;
height: 20px;
}
<div id='write'>
<span class='RowSpan'>This is some text</span>
<span class='RowSpan'>this is some text this</span>
</div>
<div id='caret'></div>
Edit: My guess is that I need the exact dimension of the letters, otherwise, as you go further the line the distance increases more and more, because of multiplying for each letter. If you add more text the distance gets more and more further from the click.
So, somehow either get the exact dimension of the letters that's always consistent or find some other way.
A bit awkward but I fount the solution, it turns out I just had to add a 1 to the focusOffset before multiplying with each letter, otherwise it would basically skip a letter. I think because focusOffset starts with a 0
let writeDiv = document.querySelector('#write');
let caret = document.querySelector('#caret')
writeDiv.addEventListener('click', (e) => {
if(e.target.tagName == 'SPAN'){
moveCaretOnClick(e)
}
})
function moveCaretOnClick(e) {
let y = (window.getSelection().focusOffset + 1) * 9.6
caret.style = `left: ${y}px; top: ${e.target.offsetTop + 3}px`;
}
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
body{
margin: 0;
}
#write {
font-family: 'Roboto Mono';
height: 300px;
width: 1200px;
background: #1f2227;
padding: 10px;
color: white;
}
#caret{
height: 15px;
width: 2px;
background: #80ff00;
display: inline-block;
position: absolute;
}
.RowSpan{
width: 100%;
display: inline-block;
box-sizing: border-box;
height: 20px;
}
<div id='write'>
<span class='RowSpan'>This is some text</span>
<span class='RowSpan'>this is some text this more more text BIGGERT TEXT and some small text and some stuff -- __ !%^ () {} and some more text even </span>
</div>
<div id='caret'></div>
I have the following functional code. However, I would like to know how I can disable toggle buttons. I always want to have one of my bottom navbar icons active and its respective content should be shown in the main section. If I click on the active navbar icon (the toggle) it wouldn't be deactivated.
Thanks in advance for your help!
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').toggleClass('active');
$('.content-1').toggleClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').toggleClass('active');
$('.content-2').toggleClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').toggleClass('active');
$('.content-3').toggleClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
If you find it easier, here's my CodePen: https://codepen.io/fergos2/pen/vYYaRzN
You can use this jQuery code. Anyone can enhance that.
$(document).ready(function() {
$('.bottom-navbar a').click(function(){
var cls = $(this).attr('class');
var lastchr = cls.substr(cls.length - 1);
$(this).siblings('a').removeClass('active');
$(this).addClass('active');
$("div[class^='content-'],div[class*=' content-']").removeClass('active');
$('.content-'+ lastchr).addClass('active');
})
});
Instead of toggleClass() you could use addClass():
https://codepen.io/vladanme/pen/LYYBrqJ
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});
Use addClass() instead of toggleClass().
It looks like you have the code to clear the inactive buttons already. So you're only left with the button that you would like to maintain active.
[..]
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
[..]
[..]
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
[..]
[..]
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
[..]
Here is what I try to acomplish: I need an input field containing a value with a unit, that would look like this:
On focussing the input, I want it to move the unit to the right side, looking like this:
I can think of two ways to do so:
1. Replace input field with a Div that looks exactly like the input when focus is lost, and set the value of the input as its content:
$('#fakeInput').bind('click', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// hide actual input and show a div with its contents instead
$('#fakeInput').show();
$('#realInputContainer').hide();
$('#fakeInput').html($('#realInput').val() + $('#realInput').attr('unit'));
}
function changeToRealInput() {
// hide fake-div and set the actual input active
$('#fakeInput').hide();
$('#realInputContainer').show();
$('#realInput').focus();
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 200px;
}
div#unitAddon,
input#realInput,
div#fakeInput {
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
background-color: #FFFFFF;
border: none;
outline: none;
}
div#realInputContainer,
div#fakeInput {
border: 2px solid #dadada;
}
div#realInputContainer {
display: flex;
}
div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="fakeInput"></div>
<div id="realInputContainer">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
(also see this jsFiddle)
Problem here is (as you can see in the screenshot above) that, depending on your local settings, chrome automatically converts the decimal point into a comma (in the input, but not in the fake-div)
Another way I thought of is: When the focus is lost, set the size of the input field to match its content and, by doing so, pull the addon displaying the unit just behind the number.
Problem here is to get the size of the content of an input (cross-browser):
$('#realInput').bind('focus', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// here is the question: what width should it be?
$('#realInput').css({'width' : '40%'});
}
function changeToRealInput() {
$('#unitAddon').css({'width' : 'auto'});
$('#realInput').css({'width' : '100%'});
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 300px;
}
div#unitAddon,
input#realInput{
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
border: none;
outline: none;
}
div#realInputContainer {
border: 2px solid #dadada;
display: flex;
background-color: #FFFFFF;
}
div#realInputContainer.setAddonAway > div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="realInputContainer" class="setAddonClose">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
also see this jsFiddle
I could accomlish this with an input[type=text], but I dont want to loose the benefits of type[number] (min/max/step validation, on-screen keyboard, etc.)
Is there any way of getting around the flaws of my two ideas? Or is thre a more elegant way to do so?
The idea is to: (1) make the input box to cover the entire container; (2) create a helper element, and set it the same length as the input value via JS, and make it invisible as a place holder; (3) apply some style for moving around the unit box.
codepen
$(document).ready(function() {
$(".value").text($(".number").val());
$(".unit").text($(".number").attr("unit"));
$(".number").on("change keypress input", function() {
$(".value").text($(".number").val());
});
});
* {
box-sizing: border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.container {
position: relative;
display: flex;
border: 4px solid teal;
width: 200px;
}
.container > * {
font-family: sans-serif;
font-size: 20px;
}
.number {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.value {
visibility: hidden;
max-width: 100%;
overflow: hidden;
}
.unit {
position: relative;
flex: 1;
pointer-events: none;
background: white;
}
.number:focus ~ .value {
flex: 1;
}
.number:focus ~ .unit {
flex: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="number" type="number" value="1.23" unit="kg">
<span class="value"></span>
<span class="unit"></span>
</div>
Im trying to pass specific form field from form into modal, with my code I managed to pass the whole form, but cant achive to target only specific elements.
1) Pass only spefic field from form.
2)In my code you can see that im replacing some css class with new one, and i need to check with IF , are they exist or not.
3) and if someone can explain to me $.ajax -how to force the cache to false.
4) Also i have 2 button trigers, if you click on first i want to show let's say 1,2,3,4 fields, and if you click on second button you get 3,4,5,6 fields, i know that i can write two sepparate js, but it would be better to hear from you what is best option to achive this.
This is mine js script for now:
function onclick_modal() {
var modalcreate = '<div id="fast-modal">';
modalcreate += '<div id="fastmodal-contain">';
modalcreate += '<div id="modal-data"></div>';
modalcreate += '</div>';
modalcreate += '</div>';
var $html_modal = $(modalcreate);
$('body').append($html_modal);
$html_modal.on('click', function(e){ if($(e.target).attr('id')=="fast-modal") { $(this).remove(); } });
$.ajax({
url: "https://linkwhereformis",
}).done(function(data) {
var $htmldata = $($(data).find('#formid')[0].outerHTML);
$htmldata.find('.dontneedthis').parent().remove();
$htmldata.find( "div" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12');
$htmldata.find( "div ul li span" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12 lajna');
$htmldata.find( "div ul li div" ).removeClass().addClass('grid-tablet-5-7 grid-desktop-6-8');
$htmldata.find('.buttons').html('<button type="submit" class="modalnibutton" data-step="5" id="confirm-form-submit modalbutton">Submit</button>');
$html_modal.find('#modal-data').html( $htmldata );
});
}
$(document).ready(function() {
$('#modallink').click(function(e) {
e.preventDefault();
onclick_modal();
});
$('#modallink2').click(function(e) {
e.preventDefault();
onclick_modal();
});
});
.modalnibutton{
float: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
background: rgba(255, 87, 34, 0.88);
color: white;
border-radius: 3px;
padding: 8px;
padding-left: 27px;
padding-right: 27px;
font-size: 16px;
}
#fast-modal{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 9997;
background: rgba(0, 0, 0, 0.42);
overflow-y: scroll;
overflow-x: hidden;
}
#fastmodal-contain {
width: 700px; max-width: 100%; margin: 0 auto; background: #fff; min-height: 100px; margin-top: 50px;
}
#modal-data{
float: left; background: #fff; width: 100%; padding: 15px 0px;
}
#modalbutton {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="" style="zoom: 1;" id="modallink">
SUBMIT LINK 1 </a>
<BR><BR>
<a href="#" title="" style="zoom: 1;" id="modallink2">
SUBMIT LINK 2 </a>
I want to make sth like this:
http://codepen.io/lukejacksonn/pen/PwmwWV?editors=001
in my site, but I'm using an AngularJS.
The main problem is the JS script. It's jQuery and my problem is: will it work with AngularJS? And if yes - how to properly write this code in Controller (or Directive? - is it a DOM manipulation?)
Code from Codepen:
JS:
var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];
function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
// The visible list is overflowing the nav
if($vlinks.width() > availableSpace) {
// Record the width of the list
breaks.push($vlinks.width());
// Move item to the hidden list
$vlinks.children().last().prependTo($hlinks);
// Show the dropdown btn
if($btn.hasClass('hidden')) {
$btn.removeClass('hidden');
}
// The visible list is not overflowing
} else {
// There is space for another item in the nav
if(availableSpace > breaks[breaks.length-1]) {
// Move the item to the visible list
$hlinks.children().first().appendTo($vlinks);
breaks.pop();
}
// Hide the dropdown btn if hidden list is empty
if(breaks.length < 1) {
$btn.addClass('hidden');
$hlinks.addClass('hidden');
}
}
// Keep counter updated
$btn.attr("count", breaks.length);
// Recur if the visible list is still overflowing the nav
if($vlinks.width() > availableSpace) {
updateNav();
}
}
// Window listeners
$(window).resize(function() {
updateNav();
});
$btn.on('click', function() {
$hlinks.toggleClass('hidden');
});
updateNav();
LESS:
#color-1: #ff9800;
#color-2: #f57c00;
#color-3: #ef6c00;
body {
min-width: 320px;
padding: 30px;
background: #ff9800;
font-family: Helvetica, sans-serif;
}
h1 {
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 50px;
font-size: 24px;
}
p {
color: #fff;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
a {
color: #fff;
}
.greedy-nav {
position: relative;
min-width: 250px;
background: #fff;
a {
display: block;
padding: 20px 30px;
background: #fff;
font-size: 18px;
color: #color-1;
text-decoration: none;
&:hover {
color: #color-3;
}
}
button {
position: absolute;
height: 100%;
right: 0;
padding: 0 15px;
border: 0;
outline: none;
background-color: #color-2;
color: #fff;
cursor: pointer;
&:hover {
background-color: #color-3;
}
&::after {
content: attr(count);
position: absolute;
width: 30px;
height: 30px;
left: -16px;
top: 12px;
text-align: center;
background-color: #color-3;
color: #fff;
font-size: 14px;
line-height: 28px;
border-radius: 50%;
border: 3px solid #fff;
font-weight: bold;
}
&:hover::after {
transform: scale(1.075);
}
}
.hamburger {
position: relative;
width: 32px;
height: 4px;
background: #fff;
margin: auto;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 32px;
height: 4px;
background: #fff;
}
&:before {
top: -8px;
}
&:after {
bottom: -8px;
}
}
.visible-links {
display: inline-table;
li {
display: table-cell;
border-left: 1px solid #color-1;
}
}
.hidden-links {
position: absolute;
right: 0px;
top: 100%;
li {
display: block;
border-top: 1px solid #color-2;
}
}
.visible-links li:first-child {
font-weight: bold;
a { color: #color-1 !important; }
}
.hidden {
visibility: hidden;
}
}
HTML:
<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
<ul class='visible-links'>
<li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
<li><a href='#'>navigation</a></li>
<li><a href='#'>that</a></li>
<li><a href='#'>handles</a></li>
<li><a href='#'>overflowing</a></li>
<li><a href='#'>menu</a></li>
<li><a href='#'>elements</a></li>
<li><a href='#'>effortlessly</a></li>
</ul>
<ul class='hidden-links hidden'></ul>
</nav>
<h1>resize the window</h1>
<p>(animations with <a target="_blank" href="http://codepen.io/lukejacksonn/pen/gpOrmd">actuate</a> coming soon)</p>
will it work with AngularJS?
jQuery will work with AngularJS. It doesn't care if you use/not use AngularJS.
Likewise AngularJS feels the same way about jQuery.
For jQuery to work - It only requires a jQuery object to perform the manipulations.
For AngularJS to work - It expects the angular related properties to be intact, and not be removed by external factors like jQuery.
So will jQuery work with AngularJS - Yes.
Should you use jQuery with AngularJS - No.
And if yes - how to properly write this code in Controller (or Directive? - is it a DOM manipulation?)
Write a Directive - call it the greedy-nav-menu/greedyNavMenu or whatever you like. Pass as an attribute the menu items in an object and let the directive take care of the behavior.
I've conveniently asked you avoid jQuery and "Write a directive" that performs DOM manipulation without jQuery.
Here is what you need to perform DOM manipulation
https://docs.angularjs.org/api/ng/function/angular.element
Also to get the input for angular element - use JavaScript's document.getElementBy*
You get a subset of the jQuery library in the jqLite package - available for you to use through angular element.
If you are not satisfied with the functions in jqLite - go ahead and add jQuery but make sure they're included in the digest loop using angular applyand that you only use the jQuery inside the directive.
For further reading - http://ng-learn.org/2014/01/Dom-Manipulations/
If you also add JQuery to your page this will work fine. You could paste the code into a controller and insert add it to the HTML:
<div ng-controller="NavController">
<nav class='greedy-nav'>
...
</div>
Writing a custom directive is possible and recommended, but will be more complicated.
Also note that angular supports a subset of JQuery alreay, more on this here: https://docs.angularjs.org/api/ng/function/angular.element
You need to rewrite the jQuery code to Angular style. Say, use directive.
Although not recommended, you can simply move the jQuery code to a controller/directive. Angular provides jqLite, which is a subset of jQuery. If you load jQuery before Angular, then jqLite === jQuery.