Hello I am working in MEAN Stack And I want show the local-storage value into the
Header of theme.I am using the Metronic theme.
Actually Local Storage data is accessible in view file.everything working fine But
I want to view LOcalStorage data in header that is not showing.
I am using like this.
{{adminData.email}}
It is not showing email of admin in header.
But when I am using same {{adminData.email}} in content file that is
showing mail of admin.I don't know what is the issue.
here is the index.ejs file.
<!DOCTYPE html>
<style type="text/css">
.page-spinner-bar {
display: none;
}</style>
<html lang="en" ng-app="myApp">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>Ditro Infotech App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script>
<script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/module/module.js"></script>
<script src="js/controller/controller.js"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../assets/'); // Set the assets folder path
});
</script>
</head>
<body>
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div ng-view></div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'js/view/footer.html'" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</body>
<!-- END BODY -->
</html>
index.ejs file include header footer and sidebar file.
here is my header file.
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner container">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="#/dashboard.html">
<img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
</a>
<div class="menu-toggler sidebar-toggler">
<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN PAGE ACTIONS -->
<!-- DOC: Remove "hide" class to enable the page header actions -->
<div class="page-actions">
<!--<div class="btn-group hide">
<button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
<i class="icon-bar-chart"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User </a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
</a>
</li>
</ul>
</div>-->
<!--<div class="btn-group">
<button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-docs"></i> New Post </a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i> New Comment </a>
</li>
<li>
<a href="#">
<i class="icon-share"></i> Share </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
</a>
</li>
</ul>
</div>-->
</div>
<!-- END PAGE ACTIONS -->
<!-- BEGIN PAGE TOP -->
<div class="page-top">
<!-- BEGIN HEADER SEARCH BOX -->
<!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
<!--<form class="search-form search-form-expanded" action="#" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="query">
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>-->
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user">
<a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
{{adminData.name}} q</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="#/login">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END PAGE TOP -->
</div>
<!-- END HEADER INNER -->
try to use service/factory. a little not angular way but works fine(ES6)
export function metadataService(httpFactory) {
'ngInject';
this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){
var bImgUrl = httpFactory.baseImgUrl;
var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png';
document.querySelector('meta[itemprop=name]').content = title;
document.querySelector('meta[itemprop=description]').content = description;
document.querySelector('meta[itemprop=image]').content = photo;
};
}
and inside your controller/component/directive get your localStorage data and
metadataService(/localStorage.getItem(someItem)/)
Related
i work on a ASP.net MVC project, Ihave a view that contains some parts from shared layouts, I have three shared layout views one of them contain CSS files, second one contain Java Script files and the third one contain HTML code, and I use #RenderPage to set them as a part of a view.
My view contain :
//html code
#RenderPage("~/Views/Shared/_CssPage.cshtml")
//html code
#RenderPage("~/Views/Shared/_LeftSideBar.cshtml")
//html code
#RenderPage("~/Views/Shared/_JsPage.cshtml")
_CssPage.cshtml :
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="css/themes/all-themes.css" rel="stylesheet" />
_LeftSideBar.cshtml :
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="image">
<img src="images/user.png" width="48" height="48" alt="User" />
</div>
<div class="info-container">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-transform:uppercase">#ViewBag.User_ID</div>
<div class="email">#ViewBag.User_Type</div>
<div class="btn-group user-helper-dropdown">
<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
<ul class="dropdown-menu pull-right">
<li><i class="material-icons">person</i>Profile</li>
<li role="separator" class="divider"></li>
<li><i class="material-icons">group</i>Followers</li>
<li><i class="material-icons">shopping_cart</i>Sales</li>
<li><i class="material-icons">favorite</i>Likes</li>
<li role="separator" class="divider"></li>
<li><i class="material-icons">input</i>Sign Out</li>
</ul>
</div>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="/Authentication/Redirect_To_User_Space">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
</ul>
</div>
<!-- #Menu -->
<!-- Footer -->
<div class="legal">
<div class="version">
<b>Version: </b> 1.0.5
</div>
</div>
<!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->
_JsPage.cshtml :
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
#rende
<!-- Bootstrap Core Js -->
<script src="plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
<!-- Slimscroll Plugin Js -->
<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="plugins/jquery-countto/jquery.countTo.js"></script>
<!-- Morris Plugin Js -->
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/morrisjs/morris.js"></script>
<!-- ChartJs -->
<script src="plugins/chartjs/Chart.bundle.js"></script>
<!-- Flot Charts Plugin Js -->
<script src="plugins/flot-charts/jquery.flot.js"></script>
<script src="plugins/flot-charts/jquery.flot.resize.js"></script>
<script src="plugins/flot-charts/jquery.flot.pie.js"></script>
<script src="plugins/flot-charts/jquery.flot.categories.js"></script>
<script src="plugins/flot-charts/jquery.flot.time.js"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
<!-- Custom Js -->
<script src="js/admin.js"></script>
<script src="js/pages/index.js"></script>
<!-- Demo Js -->
<script src="js/demo.js"></script>
when i try to access to my view it's look like this
please any help ?
I think the Path of the CSS and JS files need to add / before the link.
Example :
the original path is
<link href="plugins/morrisjs/morris.css" rel="stylesheet" />
you need to add the slash before the link like that :
<link href="/plugins/morrisjs/morris.css" rel="stylesheet" />
hope this help you.
innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>
By using this -
$(document).ready(function() {
$('#change').text("Alex");
});
so i'm trying to upload mp3 and mp4 files into my server but it doesn't seem to be uploading. the plugin uploads every other format but mp3 and mp4, it shows it uploading the mp3 and mp4 format but when i check the server the files are not there as they were not uploaded. I am using the drpozone.js plugin. It is a bit lengthy so i can't type it below so i will put the link below.
Here is my Upload page (index.html):
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Samuel NewDay</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dropzone.css" />
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
<script src="js/dropzone.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="favicon.png" >
</head>
<body>
<!-- header
================================================== -->
<header id="main-header">
<div class="row">
<div class="logo">
Samuel Newday
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">
<span class="menu-icon">Menu</span>
</a>
<a class="mobile-btn" href="#" title="Hide navigation">
<span class="menu-icon">Menu</span>
</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#eps">Upload Albums/EPs.</a></li>
<li class="current"><a class="smoothscroll" href="#singles">Singles.</a></li>
<li><a class="smoothscroll" href="##photos">Photoshoots.</a></li>
<li><a class="smoothscroll" href="#events">Events.</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<ul class="header-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</div>
</header> <!-- end header -->
<!-- homepage
================================================== -->
<section id="top">
<div class="row hero-content">
<div class="twelve columns hero-container">
<!-- hero-slider start-->
<div id="hero-slider" class="flexslider">
<ul class="slides">
<!-- slide -->
<li>
<div class="flex-caption">
<h1 class="">Admin Backend</h1>
<h3 class="" style="color: white">Here you can upload <a class="smoothscroll" href="#eps" title="portfolio" >Albums/EPs</a>, <a class="smoothscroll" href="#singles" title="portfolio" >Singles</a>, <a class="smoothscroll" href="#photos" title="portfolio" >Photoshoots</a> and <a class="smoothscroll" href="#events" title="portfolio" >Upcoming Events!</a><br />You can also edit some of the website's information here!</h3>
</div>
</li>
</ul>
</div> <!-- end hero-slider -->
</div> <!-- end twelve columns-->
</div> <!-- end row -->
<div id="more">
<a class="smoothscroll" href="#eps">Manage Site<i class="fa fa-angle-down"></i></a>
</div>
</section> <!-- end homepage hero -->
<!-- Album/EP Upload Section
================================================== -->
<section id="Section1">
<div class="row section-head">
<div class="twelve columns">
<h1>Upload Album/EP<span>.</span></h1>
<hr />
<p>Upload Album/EP according to the steps below.</p>
</div> <!-- end section-head -->
</div>
<div class="row mobile-no-padding">
<div class="process bgrid-half tab-bgrid-whole group">
<div class="bgrid">
<h3>Album/EP Artwok.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
<div class="bgrid">
<h3>Tracks.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
</div> <!-- end process -->
</div> <!-- end row -->
</section> <!-- end album/ep upload -->
<!-- Footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns content group">
<ul class="social-links">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-vimeo-square"></i></li>
<li><i class="fa fa-flickr"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<hr />
</div>
<ul class="copyright">
<li>© Copyright 2017 Samuel NewDay.</li>
</ul>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#top">Back to Top<i class="fa fa-angle-up"></i></a>
</div>
</div> <!-- end row -->
</footer> <!-- end footer -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Java Script
================================================== -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here is the upload.php file:
<?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'uploads';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?>
The JScript file for Dropzone can be found at the below link:
Dropzone Link
Please let me know how i can make it to upload mp3 and mp4 formats. Thank you.
If you're uploading files you have to set the enctype of your form to multipart/form-data otherwise file uploads don't happen (iirc the filename gets sent as the value of the file). Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for a good reference. The enctype attribute is talked about there.
Material design features not working while using Angular states.
My set up is as follows:
1. index.html contains all styles and scripts
2. layout.html contains elements of the page layout and UI-VIEW
3. and partial pages are the rest
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Material Admin - Form basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Short explanation about this website">
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
</head>
<body class="menubar-hoverable header-fixed ">
<!-- BEGIN JAVASCRIPT -->
<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
<script src="js/Mdesign/bootstrap.min.js"></script>
<script src="js/Mdesign/spin.min.js"></script>
<script src="js/Mdesign/jquery.autosize.min.js"></script>
<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
<script src="js/Mdesign/App.js"></script>
<script src="js/Mdesign/AppNavigation.js"></script>
<script src="js/Mdesign/AppOffcanvas.js"></script>
<script src="js/Mdesign/AppCard.js"></script>
<script src="js/Mdesign/AppForm.js"></script>
<script src="js/Mdesign/AppNavSearch.js"></script>
<script src="js/Mdesign/AppVendor.js"></script>
<script src="js/Mdesign/Demo.js"></script>
<script src="js/Dependencies/angular.js"></script>
<script src="js/Dependencies/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<!-- END JAVASCRIPT -->
</body>
</html>
Layout.html
<!-- HEADER BEGINS -->
<header id="header" >
<div class="headerbar">
<div class="headerbar-left">
<ul class="header-nav header-nav-options">
<li class="header-nav-brand" >
<div class="brand-holder">
<a href="">
<span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
</a>
</div>
</li>
<li>
<a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- HEADER ENDS -->
<!-- BASE BEGINS -->
<div id="base">
<div id="content">
<!-- SECTION BEGINS - our UI-VIEW goes here -->
<section>
<div class="container">
<div ui-view>
</div>
</div>
</section>
<!-- SECTION ENDS -->
</div>
<!-- BEGIN MENUBAR-->
<div id="menubar" class="menubar-inverse ">
<div class="menubar-fixed-panel">
<div>
<a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="expanded">
<a href="../../html/dashboards/dashboard.html">
<span class="text-lg text-bold text-primary ">MATERIAL ADMIN</span>
</a>
</div>
</div>
<div class="menubar-scroll-panel">
<!-- BEGIN MAIN MENU -->
<ul id="main-menu" class="gui-controls">
<li>
<a href="">
<div class="gui-icon"><i class="md md-home"></i></div>
<span class="title">Dashboard</span>
</a>
</li>
<li class="gui-folder">
<a>
<div class="gui-icon"><i class="md md-email"></i></div>
<span class="title">Email</span>
</a>
</li>
</ul>
<!-- END MAIN MENU -->
<!-- FOOTER COPYRIGHT BEGINS-->
<div class="menubar-foot-panel">
<small class="no-linebreak hidden-folded">
<span class="opacity-75">Copyright © 2014</span> <strong>Vinayak</strong>
</small>
</div>
<!-- FOOTER COPYRIGHT ENDS -->
</div>
</div>
<!-- END MENUBAR -->
</div>
<!-- END BASE -->
app.js
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'index.html'
})
.state('layout', {
url: '',
templateUrl: 'pages/layout.html'
})
.state('page1', {
url: '/page1',
templateUrl: 'pages/page1.html'
})
.state('page2', {
url: '/page2',
templateUrl: 'pages/page2.html'
})
});
I know its late, but just had the same issue and maybe can help someone else.
Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file.
adding the following to your angular.run function ensures the components get rendered correctly:
app.run(function($rootScope, $timeout) {
// Required so that MDL components render correctly when using nested views
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
})
})
I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.