I am trying to call a function when my button is clicked. This code should work, but it doesn't fire the function I defined in my controller.
The code compile fine as show in the console, any idea?
Thanks!
This is my code:
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<script >
var app = angular.module('myApp', []);
app.controller('navCtrl', function($scope) {
$scope.select=function () {
alert('hi');
};
});
</script>
</head>
<body>
<nav id="mynav"class= "navbar navbar-inverse " role="navigation" ng-controller="navCtrl" >
<div class="container">
<ul class="nav navbar-nav color-white ">
<li >
<a id="home" ng-click="navCtrl.select()"href="#" >home</a></li>
<li >
<a id="1" href="#" ng-click="navCtrl.select() ">About</a></li>
<li >
<a id="2" href="#" ng-click="navCtrl.select() ">Contact</a></li>
</ul>
</div>
</nav>
</body>
You don't need to specify 'navCtrl' in your HTML. Just call 'ng-click=select()'. If you had used controller-as='navCtrl' then you need to use navCtrl.select.
Just modify it as follows:
<ul class="nav navbar-nav color-white ">
<li >
<a id="home" ng-click="select()">home</a></li>
<li >
<a id="1" href="#" ng-click="select()">About</a></li>
<li >
<a id="2" href="#" ng-click="select()">Contact</a></li>
</ul>
Hope it works.!
Related
My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>
Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I have 4 pages that refer to each other on a navbar (index2.html/seite1, seite2, seite3.html).
I'm trying to find a page to highlight the current page on the navbar, but I only manage to do it for a split second. It turns red when I click but immediately to the default "Home".
I've been stuck on this for days and I can't find the problem. Is there a loop on the tag that I don't see? Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.navbar-dark .nav-item > .nav-link.active {
color:white;
background-color: red;
}
</style>
</head>
<body>
<div>
<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" style="padding-left: 0px;" href="index2.html">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="seite1.html">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link " href="seite3.html">Page 3</a>
</li>
</ul>
</nav>
</div>
<script>
$('.navbar-nav .nav-link').click(function(){
$ ('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
if it is just HTML without any server-side rendering, then you have 4 different HTML files. In the Home page, only the home tab must have active class, in seite1 page only the seite1 tab must have the active class,..etc
I have index.php, page1.php, page2.php, page3.php and I wanted to load their content in the index.php page within the div with #output but I don't want them to reload/refresh every time the navbar is clicked. Also, I want the active page has the active class in the active <li>.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page1.php">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.php">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.php">Page 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid" id="output">
THE CONTENT FROM ANOTHER PAGE THAT'LL LOAD HERE
</div>
</div>
</body>
</html>
Thank you
Consider this example:
HTML:
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Live demo: http://jsfiddle.net/BoWw/77dyfbwd/
You can adjust this to what you posted.
I'm trying to make a scrollable list of items with two buttons: up and down. My goal is to show a single item whenever I click on any of the two buttons.
I'm using jQuery event slideUp() but whenever I click on the button all the list items slides up. I couldn't separate the event for each item. Help?
$(document).ready(function(){
$(".bott").click( function() {
$(".item").slideUp();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
Maintain a counter to track which item you are sliding up or down. Check the following sample and do the same for the sideDown()(counter-- on sliceDown()).
$(document).ready(function(){
var counter = 1;
$(".bott").click( function() {
$(".item:nth-child(" + counter + ")").slideUp();
counter++;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
$(document).ready(function(){
var i = 0;
$(".bott").click( function() {
$(".item:eq("+i+")").slideUp();
i++;
});
$(".bott2").click( function() {
i--;
$(".item:eq("+i+")").slideDown();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
My sideNav is not working on a page using materializeCSS
here is my html:
```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<meta charset="UTF-8">
<title>Dutch Fork Running | Contact</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../includes/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/fullcalendar.css" rel="stylesheet" />
<link href="../includes/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link href="../includes/css/font-awesome.css" rel="stylesheet" />
<!-- Scripts -->
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/materialize.js" async defer></script>
<script src="../includes/js/moment.min.js"></script>
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/fullcalendar.js"></script>
<script src="../includes/js/ical.js"></script>
<script src="../includes/js/ical_events.js"></script>
<script src="../includes/js/ical_fullcalendar.js"></script>
<script src="../includes/js/gcal.js"></script>
<script src="../includes/js/init.js"></script>
<script type="text/javascript">var rootdir = "../";</script>
</head>
<body>
<!-- <div class="navbar-fixed"> -->
<header>
<nav class="green">
<div class="nav-wrapper">
<a href="../#" class="center brand-logo">
<img height="54px" src="../images/cc-arrow-green.png" alt="logo">
</a>
<i class="material-icons">menu</i>
<ul class="side-nav" id="mobile-menu">
<li class="">
<a href="../">
Home
</a>
</li>
<li class="">
<a href="../Calendar">
Calendar
</a>
</li>
<li class="">
<a href="../Records">
Records
</a>
</li>
<li class="">
<a href="../Archives">
Archives
</a>
</li>
<li class="">
<a href="../Handbook">
Handbook
</a>
</li>
<li class="">
<a href="../Join">
Join
</a>
</li>
<li class="">
<a href="../Misc">
Misc Info
</a>
</li>
<li class="">
<a href="../Contact">
Contact
</a>
</li>
<li class="">
<a href="../BoosterClub">
Booster Club
</a>
</li>
<li class="">
<a href="../SFTR">
Silver Fox Trail Run
</a>
</li>
</ul>
</div>
</nav>
</header>
```
It says sideNav function not defined on that page. Works on others, no difference in pasted part between pages.
Here is the traceback:
jQuery.Deferred exception: undefined is not a function (evaluating '$('.button-collapse').sideNav()') (2)
(anonymous function) — init.js:3
j — jquery.min.js:2:58607
(anonymous function) — jquery.min.js:2:88441
undefined
I call it using $('.button-collapse').sideNav();
Resolved: Called at end of materialize javascript file
I resolved this issue by adding $('.button-collapse').sideNav(); to the bottom of the materialize.js file.