this is way i run my angular aaplication
<!DOCTYPE html>
<html class="no-js" ng-app="BasicHttpAuthExample"> <!--<![endif]-->
<head>
<script src="<?= ASSETS_PATH ?>/js/app2.js"></script>
<script src="<?= ASSETS_PATH ?>/js/main.js"></script>
<script src="http://localhost/SPA_DEMO/assets/js/jquery.countTo.js"></script>
</head>
<body ng-app="BasicHttpAuthExample">
<nav id="fh5co-main-nav" role="navigation">
<i></i>
<div class="js-fullheight fh5co-table">
<div class="fh5co-table-cell js-fullheight">
<ul>
<li></li>
<li class="active">Home</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<ng-view>
</ng-view>
</body>
</html>
In this when i am loading view script loaded in this file are not available in view. how to load some script every time view is loading or how to make available loaded script in view also.
try to make sure you load scripts at the bottom near close of body tag so that they load when the dom has loaded. Also make sure external scripts like Jquery and other libraries are loaded first because your javascript files may depend on them.
You dont have to specify ng-app directive twice. its okay on the body tag.
you are missing a controller directive as well.
<html class="no-js" > <!--<![endif]-->
<head>
</head>
<body ng-app="BasicHttpAuthExample" ng-controller="//your controller">
<nav id="fh5co-main-nav" role="navigation" >
<i></i>
<div class="js-fullheight fh5co-table">
<div class="fh5co-table-cell js-fullheight">
<ul>
<li></li>
<li class="active">Home</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<ng-view>
</ng-view>
<script src="http://localhost/SPA_DEMO/assets/js/jquery.countTo.js"></script>
<script src="<?= ASSETS_PATH ?>/js/app2.js"></script>
<script src="<?= ASSETS_PATH ?>/js/main.js"></script>
</body>
</html>
Related
I have been trying to use MateralizeCSS; only designed and created by Google; as an alternative for Bootstrap as a test and to see the differences by myself. However there is something that is weird with Materalize. The HTML Setup stated on their official website is simple, but when I try to resize the window and press the hamburger icon nothing happens. This means that the JavaScript is not loaded correctly, but it's actually included in my HTML file. First I tried to use the CDNs and it's not working. So I decided to download the files and link them in the file, but it's still not working.
My HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
I opened the Inspector to see the Starter Template structure for the navbar and it's the same as mine. I can't figure out the problem. So any logical explanation is appreciated.
You just need to initialize the jQuery plugin for the sideNav method to work. Hope this helps!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
I am working on JQuery. Bootstrap and HTML5 in an asp.net application. I am trying to implement a simple menu in the master page. My code is like below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
It is working fine when I am calling the "jquery.min.js" and "bootstrap.min.js" file directly from internet server as you can see in the code. But when I include the files from local machine like:
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.0.js" type="text/javasript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
sub menu is not showing.
I am not sure what is actually going on.
Any help will be thankfully accepted.
I think your problem is related to the version of jquery, so copy this
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and put it in URL then right click save as ... you should save it as javascript file, and then add it to your project in the correct place
I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.
I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.
The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.
I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.
Thanks a lot already!
Ina
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menü</span>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li>Start</li>
<li class="divider"><li>
<li>Angebot</li>
<li class="divider"><li>
<li>Aktuelles</li>
<li class="divider"><li>
<li>Über Mich</li>
<li class="divider"><li>
<li>Kontakt</li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Compare your line of code:
<nav class="top-bar data-topbar" >
with the corresponding one from Foundation's documentation:
<nav class="top-bar" data-topbar role="navigation">
Your error should be pretty obvious now and can prevent Top Bar from functioning correctly.
Additional advice: Next time you want to use a predefined feature of Foundation, copy and paste the code and then apply your changes to it. It seems you have rewritten it and accidentally believed "data-topbar" to be a class.
Additonal: to stick navigation at the top in small screens (up to 640px range)
"sticky_on: [small]; scrolltop: false"
and show parent link in mobile view you will need
"mobile_show_parent_link: true;"
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">
Following on from this question, I am still struggling with the Twitter Bootstrap. I've managed to get my navigation bar to appear and I'm trying to add a drop down menu to it. No matter what I try, I can't actually get the drop down part of the menu to work! Here is a screenshot of my menu.
As you can see, I have "Account Settings" which should be a drop down menu but when I click on it, no drop down options appear. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
</body>
</html>
As you can see, I'm referencing the dropdown Javascript file from Twitter. I have also tried referencing this locally which made no difference. I've also included the Javascript that I believe should hook-up the drop down menu and call into Twitter's Javascript file.
I'm at a loss as to why this isn't working
I can't see where you are including jQuery in your code. You have to include it before all your other scripts for the dropdown to work.
Here is the jQuery script from the google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Mind it is also redundant to use this code in your example:
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Because it isn't doing anything.