I am new to angularjs and just started getting my hands dirty in it. I have downloaded angular-seed and started changing in it. I have a navbar which displays different html pages when user navigate. The problem is the page is getting loaded properly but i have some javascript in the script tag in that html page that is not loading, and its also not throwing any error in the console.
Here is my index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Here is my view1.js:
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
Here is my view1.html which contains a javascript script tag in it:
<div class="row">
<div class="charts">
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-sign-in fa-3x" ></i>
</div>
<div id="stats1"class="stats_box">
<span class="info-box-text">Number of sign-ups</span>
<span id="sign-up" class="percent">56,000</span>
</div>
<i id="red" class="fa fa-circle-o text-red" value="11000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="12000"></i>
<i id="green" class="fa fa-circle-o text-green" value="13000"></i>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-user fa-3x"></i>
</div>
<div id="stats2" class="stats_box">
<span class="info-box-text">Daily active users</span>
<span id="active" class="percent">23,000</span>
</div>
<div class='firstbox' id='fb2' >
<i id="red" class="fa fa-circle-o text-red" value="21000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="22000"></i>
<i id="green" class="fa fa-circle-o text-green" value="23000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats3"class="stats_box">
<span class="info-box-text">Average time active</span>
<span class="percent">80,000</span>
</div>
<div class='firstbox' id='fb3'>
<i id="red" class="fa fa-circle-o text-red" value="31000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="32000"></i>
<i id="green" class="fa fa-circle-o text-green" value="33000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats4" class="stats_box">
<span class="info-box-text">Total time run</span>
<span class="percent">39,000</span>
</div>
<div class='firstbox' id='fb4' >
<i id="red" class="fa fa-circle-o text-red" value="41000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="42000"></i>
<i id="green" class="fa fa-circle-o text-green" value="43000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats5"class="stats_box">
<span class="info-box-text">Total distance covered</span>
<span id="distance"class="percent">20,000</span>
</div>
<div class='firstbox' id='fb5' >
<i id="red" class="fa fa-circle-o text-red" value="51000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="52000"></i>
<i id="green" class="fa fa-circle-o text-green" value="53000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-bolt fa-3x"></i>
</div>
<div id="stats6"class="stats_box">
<span class="info-box-text">10K activated</span>
<span id="activated"class="percent">26,000</span>
</div>
<div class='firstbox' id='fb6' >
<i id="red" class="fa fa-circle-o text-red" value="61000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="62000"></i>
<i id="green" class="fa fa-circle-o text-green"value="63000"></i>
</div>
</div>
<div class="clearfix"> </div>
</div><!--end charts-->
</div><!--end row-->
<script>
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>
Related
By using SWIPER JS API I created an about us page that contains the details of our team. This is a slider actually, and this slider contains five slides and I want the third slide to be shown in the center and the two on the right side and two on left but by default first is shown remaining are below it.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/swiper.min.js" defer></script>
<script src="../js/js.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<title>About us</title>
</head>
<body>
<header>
<nav class="container-fluid navbar navbar-expand-lg navbar-light border-bottom border-secondary">
<a class="navbar-brand p-0" href="home.html"><img src="../img/bloodbucketLogo.png" width="150" height="65" class="mr-5"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav" style="margin: auto" id="menuBar">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUS.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faqs.html">FAQ's</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Articles
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">When to donate blood?</a>
<a class="dropdown-item" href="#">Blood diseases</a>
<a class="dropdown-item" href="#">Benefits of donating blood?</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contactUs.html">Contact us</a>
</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-outline-secondary mr-1"> Login </button>
<button type="button" class="btn btn-secondary">Sign up</button>
</div>
</div>
</nav>
</header>
<main>
<div class="container-fluid ">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="font-family: Oxanium;" class="mt-2">Our Team</h1>
</div>
</div>
</div>
<div class="container-fluid" id="aboutUs">
<div class="row team">
<div class="col-md-12 text-center" title="Swipe right!">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Ehtisham Ul Haq</h5>
<h6 class="text-primary text-center">Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Mohammad Moazam</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/1.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Abdul Rab</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Hamza Muzaffar</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card bg-light" style="width: 18rem;">
<div class="text-center">
<img class="" src="../img/donarsAvatars/4.png" style="margin-top: -25px;" width="95" height="85" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title text-center">Khalil Ahmed</h5>
<h6 class="text-primary text-center">Co-Founder</h6>
<hr>
<p class="card-text" style="font-size: 12px;">Java Desktop Developer <i class="fa fa-laptop" aria-hidden="true"></i> </p>
<p class="card-text" style="font-size: 12px;">Full Stack Web Developer(PHP Laravel) </p>
<p class="card-text" style="font-size: 12px;">Mobile Application Developer(Android) <i class="fa fa-android" aria-hidden="true"></i> </p>
</div>
<hr>
<div class="card-body text-center">
<i class="fa fa-facebook-square"></i> |
<i class="fa fa-instagram"></i> |
<i class="fa fa-twitter-square"></i> |
<i class="fa fa-linkedin-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid bg">
<div class="row bg">
<div class="col-md-12">
<div class="fixed-bottom border-top border-dark bg">
<div class="bg">
<div class="mr-4 text-center bg">
<i class="fa fa-facebook-official" aria-hidden="true"></i> |
<i class="fa fa-twitter" aria-hidden="true"></i> |
<i class="fa fa-instagram" aria-hidden="true"></i> |
<i class="fa fa-linkedin" aria-hidden="true"></i> |
<i class="fa fa-whatsapp" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
API LINK
https://swiperjs.com/demos/240-effect-coverflow.html
The way it shows right now
But, I want to look like this when page reloads
IF NEED any thing or have any confusion please ask, but help me to solve this.
Before
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});
After
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
initialSlide:2, //Added this
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 300,
modifier: 1,
slideShadows : false,
},
pagination: {
el: '.swiper-pagination',
},
});
I am developing a website and there are many pages in the website, so I want the header and footer files dynamically calling to all the web pages.
I have written a script but it is not working. Please help.
Here is the script:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
**<script src="jquery-3.3.1.min.js"></script>**
</head>
**<script>
$(function(){
$("#header").load("header/footer/header.html");
$("#header").load("header/footer/footer.html");
});**
</script>
<body>
**<div id="header"></div>**
<center><h1 style="color: black; padding: 10%;">Starter Template</h1></center>
**<div id="footer"></div>**
</body>
</html>
I have created a folder named HEADERFOOTER and in this folder, I have created 2 HTML files named header.html and footer.html
HEADER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-expand-lg fixed-top header navbar-light" style="background-color: #fff;">
<a class="navbar-brand" href="index.html"><img src="img/Capture.JPG" alt="BOOKSthread" title="Books Thread" class="img-responsive" style="height: 70px; width: 210px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active nav-heading">
<a class="nav-link nav-head-color" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">How It Works</a>
</li>
<li class="nav-item dropdown nav-heading">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: black;">
Category<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
<li><a class="" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">New Arrivals</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">Subscription Plan</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="search" type="search" placeholder="Search" aria-label="Search" style="width:300px;">
<button class="btn btn-outline-success my-2 my-xl-0" type="submit">Search</button>
</form>
<span> </span>
<button type="button" class="btn btn-primary btn-sm">Login</button>
<span> </span>
<button type="button" class="btn btn-warning btn-sm">Signup</button>
</div>
</nav>
</body>
</html>
FOOTER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<i class="fa fa-facebook"></i>
<!-- Google +
<i class="fa fa-google"></i>
<!--youtube
<i class="fa fa-youtube"></i>
<!--Instagram
<i class="fa fa-instagram"></i>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<i class="fa fa-facebook"></i>
</p>
<p class="social-networks">
<i class="fa fa-google"></i>
</p>
<p class="social-networks">
<!--youtube -->
<i class="fa fa-youtube"></i>
</p>
<p class="social-networks">
<!--Instagram-->
<i class="fa fa-instagram"></i>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare#booksthread.com" style="text-decoration: none;">customercare#booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info#example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!---->
</body>
</html>
Please help to create the dynamic header and footer in across all the pages.
Thanks!!
Why do not you use ajax to load the content?
Insert this script inside the head tags and the file should load.
<script>
$(function(){
$.ajax({
type: "GET",
url: "header/footer/header.html",
dataType: "html",
success: function(answer) {
$("body").append(answer);
},
error: function(){
alert("failed call!!!");
}
});
return false;
});
</script>
I also saw that the files you need to include have html tags that have already been placed on the main page. You do not need to re-enter those tags but only the affected content, eg for the footer:
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<i class="fa fa-facebook"></i>
<!-- Google +
<i class="fa fa-google"></i>
<!--youtube
<i class="fa fa-youtube"></i>
<!--Instagram
<i class="fa fa-instagram"></i>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<i class="fa fa-facebook"></i>
</p>
<p class="social-networks">
<i class="fa fa-google"></i>
</p>
<p class="social-networks">
<!--youtube -->
<i class="fa fa-youtube"></i>
</p>
<p class="social-networks">
<!--Instagram-->
<i class="fa fa-instagram"></i>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare#booksthread.com" style="text-decoration: none;">customercare#booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info#example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
The same thing must be done with the header but first insert the latter because the function append() insert the content at the end of the selected element and how it is right that the footer is put underneath.
You can follow the below steps:
Step 1: Create footer.js
Create a file footer.js with html contents like below:
document.writeln('<p> Copyright 2020, G Inc. All Rights Reserved </p>')
If in-case you have single quotes with-in your document.writeln, replace it backslash. Eg.: \'text \'
Step 2: Include this in your HTML file.
<script language="javascript" type="text/javascript" src="footer.js"></script>
You can do the same for the header.
Is the script tag with no src attribute is wrong?
I have written this script tag
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
I am getting this error on console Failed to load resource: the server responded with a status of 404 (Not Found). I am unable to understand what is the problem. I have included the jquery core library on header of page. Also there are some other javascripts codes that are included bfore this code but they did not throws any error. I have also attached a screenshot of the console.
Update 1
I tried after removing the type attribute. nothing happens :( .
I have included the jquery library version 1.9.1 in header.
Update 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Bharat">
<title>::Eduesy:: </title>
<meta property="og:title" content="Bharat">
<meta property="og:description" content="Bharat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/web.css?1.0" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/app.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/tooltip.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/custom.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/vendor.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/libs.all.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/app.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tooltip.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tpr.web.min.js"></script>
<script src="http://eduesy.fsas.co.in/js/student/chartist.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".header").addClass('header-fix');
}else{
jQuery(".header").removeClass('header-fix');
}
});
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".row-blue").addClass('header-fix');
}else{
jQuery(".row-blue").removeClass('header-fix');
}
});
});
</script>
</head>
<body>
<div class="header">
<header>
<div class="cf">
<div class="pTopHeader_dropdown pTopHeader_userDropdown non-selectable fr js-user-dropdown">
<a class="pTopHeader_dropdown_trigger pTopHeader_userDropdown_trigger js-trigger">
<span class="profilename">Welcome Chandu</span> <img class="pTopHeader_userDropdown_thumb " alt="" src="http://eduesy.fsas.co.in/uploadedFiles/student/IMG_20150412_182136 (2) - Copy.jpg"/>
</a>
<ul class="pTopHeader_dropdown_menu pTopHeader_dropdown_menu-right pTopHeader_userDropdown_menu js-dropdown">
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Profile
</li>
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Switch Course
</li>
<li>
<span class="fa fa-power-off pTopHeader_dropdown_menu_icon"></span>Logout
</li>
</ul>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide">
<a role="button" tabindex="0" class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Contact Us</a>
<div class="pTopHeader_contactUpWrapper_tooltip">
<div class="contactTooltip">
<div class="cf">
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-feedback"></div>
<div class="contactTooltip_title">Share Feedback</div>
<div class="contactTooltip_subtitle">Share your feedback for us. We are continuously working to improve your experience.</div>
<div class="contactTooltip_callUsNo">abc#xyz.com</div>
</div>
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-callus"></div>
<div class="contactTooltip_title">Call us</div>
<div class="contactTooltip_subtitle">We are happy to hear from you. We are available from 9am to 6pm on all days.</div>
<div class="contactTooltip_callUsNo">+91 - 1800 123 456</div>
</div>
</div>
<div class="contactTooltip_footer">
<span class="contactTooltip_footer_mapIcon fa fa-map-marker" aria-hidden="true"></span>
<div class="contactTooltip_footer_content">
<div class="contactTooltip_footer_title">Eduesy Online Education </div>
<div class="contactTooltip_footer_text">Mumbai - 400076, India</div>
</div>
</div>
</div>
</div>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide notification">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white"><i class="fa fa-bell" aria-hidden="true"></i><span>0</span></a>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide btn-buy">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Buy</a>
</div>
</div>
</header>
<div class="logo">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="mainSidebar_logoBlock_logo -ajaxify" title="EduEsy" style="width: 176px !important">
<div class="mainSidebar_logoBlock_logo_img" style="background-image: url(http://eduesy.fsas.co.in/images/logo.png)"></div>
</a>
</div>
<div class="mobileMenu">
<div class="mobileMenu_fallbackHeader"></div>
<div class="mobileMenu_hamburger js-hamburger-menu">
<div class="mobileMenu_hamburger_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="row-blue">
<div class="pull-left">
Admission Taken Date: 29/05/2017
</div>
<div class="pull-right">
Student ID: EDUESY116 <span>|</span> Package Valid till: 25/12/2017
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.class_slider').click(function(){
jQuery('[name=product_id]').val(jQuery(this).data('product_id'));
jQuery('[name=product_type]').val(jQuery(this).data('product_type'));
jQuery(this).parents('form').submit();
});
});
</script>
<div class="popupbox" id="popuprel_course">
<div id="intabdiv">
<div id="test_tool_modals_wrapper">
<div class="md mdTestPause js-test-pause-modal is-visible" style="overflow-y: auto;">
<div class="close">X</div>
<form action="" method="post">
<div class="obrdV2_container js-modules-container pb-10 ">
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module profiletype" data-module="profiletype">
<div class="p-20 clickable js-toggle-module">
<div class="obrdV2_module_image obrdV2_module_image-klass fl"></div>
<div class="obrdV2_module_heading js-module-heading">
<div class="title">Choose one of the following</div>
<div class="selectedValue js-selected-value"></div>
</div>
<div class="arrowDown js-arrow-down class" style="display: none;"></div>
<div class="clr"></div>
</div>
<div class="obrdV2_module_body js-module-body visible ">
<div class="col-md-6 col-sm-12">
<div class="item academic"><label><input type="radio" name="profileType" value="academic" id="academic" style="display: none;"> Academic</label></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="item professional"><label><input type="radio" name="profileType" value="professional" id="professional" style="display: none;">Professional Courses</label></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module address hide" data-module="address"></div>
<div class="clr"></div>
<div class="submit-row hide">
<div class="obrdV2_module js-module-class js-module submit" data-module="submit">
<div class="obrdV2_module_body js-module-body visible">
<input type="submit" name="switchCourseSubmit" class="btn btn-default" value="Save and Continue">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script>
$(document).ready(function() {
$('.switch_class').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
jQuery('body').on('click', '.popupbox .close', function() {
jQuery(this).parents('.popupbox').fadeOut();
jQuery('#fade').fadeOut();
return false;
});
jQuery('.profiletype .js-module-body .item').on('click', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="profileType"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'profiletype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level2').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.classtype', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="classtype"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'boardtype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level3').remove();
jQuery('.address').before(html);
}
});
}
});
jQuery('.obrdV2_container').on('click', '.boardListing', function(evt){
if (evt.target.tagName == 'INPUT'){
var board = jQuery('[name="boardID"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'classList', classList: board},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level4').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.obrdV2_klass', function(evt){
if (evt.target.tagName == 'INPUT'){
jQuery(this).siblings( '.selected').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.address').removeClass('hide');
jQuery('.submit-row').removeClass('hide');
}
});
jQuery('.obrdV2_container .address').on('change', function(evt){
jQuery('.submit-row').removeClass('hide');
});
(function($){
$(window).on("load",function(){
var modal_ht = jQuery('#popuprel_course .popupbox').actual('height');
jQuery("#popuprel_course #intabdiv").height(modal_ht);
jQuery("#popuprel_course #intabdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick",
scrollbarPosition:"outside",
updateOnBrowserResize: true,
updateOnContentResize: true
});
});
})(jQuery);
});
</script>
<style type="text/css">
.popupbox .close {
position: absolute;
right: 10px;
top: 8px;
font-size: 20px;
font-weight: bold;
background: #fff;
color: #000;
z-index: 9999999999999999;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
</style>
<div class="pageContentContainer">
<div id="page_content_wrapper" class="js-page-content-wrapper">
<div class="pHeader js-page-content">
<div class="cf">
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide paging">
<a href="http://eduesy.fsas.co.in/student" >Dashboard</a> » <a href="index.php" >Lecture</a>
» <a href="javascript:void(0);" >HTML JavaScript</a>
</div></div>
<div class="pHeader_content pt-25 pb-20 phn-pb-5 clearfix">
<div class="container">
<h1 class="h1 color-white normal">
Lectures
</h1>
</div>
</div>
<div class="pHeader_tabsWrapper js-page-tabs-wrapper">
<div class="container">
<nav role="navigation">
<ul class="pHeader_tabs">
<li class=""><a data-tab="challenges_home" href="index.php?subject=51" class="-ajaxify -strk" >HTML Basic</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=52" class="-ajaxify -strk" >HTML Styles</a></li> <li class="active"><a data-tab="challenges_home" href="index.php?subject=53" class="-ajaxify -strk" >HTML JavaScript</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=54" class="-ajaxify -strk" >HTML And XHTML</a></li>
</ul>
</nav>
</div>
</div>
<div class="pHeader_tabsSpacing"></div>
</div>
<div class="container js-page-content">
<div class="coachmarks_icon coachmarks_icon_selectSubject hide js-coachmarks"></div>
</div>
<div class="container pv-30 cf">
<div class="pCol pCol-wide alpha js-pageLearn">
<aside class="pCol pCol-narrow omega phn-mt-40">
<div class="heading heading-bordered h3 bold">Chapters</div>
<div class="cf mt-30 mb-50">
<a href="topic.php?topic=26"><div class="chapterTile tile tile-shadowed select_subject cf js-chapter-tile mb-20 tab-mb-20 phn-mb-15" data-subject_id="19">
<div class="chapterTile_arrowContainer">
<h2 class="chapterTile_title ">HTML File Paths</h2>
<span class="tile_arrow fa fa-angle-right"></span>
</div></div></a>
</div>
</aside>
</div>
<div class="sidebar-common">
<h2>Our mission is to provide a world class education to anyone, anywhere.</h2>
<h3>You will receive inside.</h3>
<ul>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-video.png" /></label>Video Lecture</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-test-series.png" /></label>Test Series</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-study-material.png" /></label>Study Material</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-doubt-section.png" /></label>Doubt Section</li>
</ul>
</div>
<div class="clr"></div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
</div>
<div class="container">
<footer class="footer mv-20">
<ul>
<li>© Eduesy</li>
<span class="footer_dot">•</span>
<li>About</li>
<span class="footer_dot">•</span>
<li>Upgrade</li>
<span class="footer_dot">•</span>
<li>Contact</li>
<span class="footer_dot">•</span>
<li>Terms</li>
<span class="footer_dot">•</span>
<li>Bytes</li>
<span class="footer_dot">•</span>
<li>Blog</li>
</ul>
<div class="clr"></div>
</footer>
</div>
</div>
<div class="mainSidebar js-main-sidebar">
<div class="mainSidebar_switcherBlock js-class-switcher">
<a class="mainSidebar_switcherBlock_switch js-selected-class"> HTML</a>
<div class="mainSidebar_switcherBlock_dropdown js-dropdown">
<form method="post" action="http://eduesy.fsas.co.in/student/lectures/index.php">
<label class="mainSidebar_switcherBlock_option class_slider js-switchOption selected" data-class-title="HTML " data-product_id="47" data-product_type="Course" selected>HTML<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label><label class="mainSidebar_switcherBlock_option class_slider js-switchOption " data-class-title="Advance PHP " data-product_id="61" data-product_type="Course" >Advance PHP<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label>
<input type="hidden" name="product_id" value="course" />
<input type="hidden" name="product_type" value="47" />
<input type="hidden" name="change_product_type" value="1" />
</form>
</div>
</div>
<nav role="navigation" class="mainSidebar_contentBlock mainSidebar_contentBlock-withSwitcher js-main-sidebar-content-block">
<div class="mainSidebar_sHeading">Study Modules</div>
<ul class="mainSidebar_sNav js-mainSidebar-study">
<li data-tab="learn" class="active open">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="-ajaxify q_tip_w" original-title="Lectures">
<div class="iconWrapper">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Lectures</div>
</a>
</li>
<li data-tab="practice" class="">
<a href="http://eduesy.fsas.co.in/student/practice/index.php" class="-ajaxify q_tip_w" original-title="Practice">
<div class="iconWrapper">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Practice</div>
</a>
</li>
<li data-tab="tests" class="">
<a href="http://eduesy.fsas.co.in/student/tests/index.php" class="js-lhs-ts-link q_tip_w -ajaxify -strk">
<div class="iconWrapper">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Tests</div>
</a>
</li>
<li data-tab="tests" class=""><div class="iconWrapper"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><span class="arrow fa fa-angle-right"></span><div class="label">Exam</div></li>
<li data-tab="doubts" class="">
<a href="http://eduesy.fsas.co.in/student/doubt/index.php"
class="-strk -ajaxify q_tip_w js-startDoc">
<div class="iconWrapper">
<i class="fa fa-weixin" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Doubts</div>
</a>
</li>
<li data-tab="challenges" class="">
<a href="http://eduesy.fsas.co.in/student/challenges/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Challenges</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">My Profile</div>
<ul class="mainSidebar_sNav js-mainSidebar-compare">
<li data-tab="dashboard" class="">
<a href="http://eduesy.fsas.co.in/student/dashboard/index.php" class="-ajaxify q_tip_w" original-title="Dashboard">
<div class="iconWrapper">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Dashboard</div>
</a>
</li>
<li data-tab="my_bookmarks" class="">
<a href="http://eduesy.fsas.co.in/student/placement/index.php" class="-ajaxify -bookmarks q_tip_w">
<div class="iconWrapper">
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Placement</div>
</a>
</li>
<li data-tab="achievements" class="">
<a href="http://eduesy.fsas.co.in/student/achievement/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-trophy" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Achievements</div>
</a>
</li>
<li data-tab="leaderboard" class="">
<a href="http://eduesy.fsas.co.in/student/leaderboard/index.php" class="-ajaxify -strk q_tip_w">
<div class="iconWrapper">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Leaderboard</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">Study Tools</div>
<footer class="mainSidebar_footer mv-20">
<ul class="cf">
<li>© Eduesy</li>
<span class="mainSidebar_footer_dot">•</span>
<li>About</li>
<span class="mainSidebar_footer_dot">•</span>
<li>
Discuss
</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Blog</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Terms</li>
</ul>
</footer>
</nav>
</div>
</body>
</html>
ShowMsg('Access denied ! ! !'); Access denied ! ! !
i am trying to make a Menu as shown in below image
see this Link to go to its website i have copied some code ( HTML code and links to css and .js files) from there.
Here is my code :
<!DOCTYPE html>
<html>
<head>
<link href="scripts/gooey.min.css" rel="stylesheet" />
<script src="jquery-2.2.3.js"></script>
<script src="scripts/gooey.min.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i> Item 1
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>Item 2
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>Item 3
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>Item 4
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>Item 5
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>Item 6
</a>
</nav>
<script type="text/javascript">
$(function () {
$("#gooey-round").gooeymenu({
bgColor: "#ffc0cb",
contentColor: "white",
style: "circle",
circle: {
radius: 85
},
size: 80
});
});
</script>
</body>
</html>
I have downloaded all the required files and even linked required .css and .js files to my code but i don't know why it gives me error that " It doesn't contain property googymenu "
Can anyone please help me to implement this Menu item.
Thank you so much.
EDIT : Which file i need to add from all font-awesome files ?
Works fine , see the sample.
Edit
Added Font-Awesome and a bit of CSS to move the menu.
#gooey-upper{
left : 200px;
top : 50px;
}
Sample
$("#gooey-upper").gooeymenu({
bgColor: "#ff6666",
contentColor: "white",
style: "circle",
horizontal: {
menuItemPosition: "glue"
},
vertical: {
menuItemPosition: "spaced",
direction: "up"
},
circle: {
radius: 80
},
margin: "small",
size: 90,
bounce: true,
bounceLength: "small",
transitionStep: 100,
hover: "#e55b5b"
});
#gooey-upper{
left : 200px;
top : 50px;
}
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--font awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!--plugin style-->
<link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/css/gooey.min.css">
<!--plugin js-->
<script type="text/javascript" src="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/js/gooey.min.js"></script>
<nav id="gooey-upper">
<input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />
<label class="open-button" for="menu-open1">
<span class="burger burger-1"></span>
<span class="burger burger-2"></span>
<span class="burger burger-3"></span>
</label>
<a href="#features" class="gooey-menu-item">
<i title="Features" class="fa fa-cog fa-2x"></i>
</a>
<a href="#h-spaced-menu" class="gooey-menu-item">
<i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>
</a>
<a href="#menu-v-example" class="gooey-menu-item">
<i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>
</a>
<a href="#docs" class="gooey-menu-item">
<i title="Docs" class="fa fa-book fa-2x"></i>
</a>
<a href="#event-api" class="gooey-menu-item">
<i title="Event API" class="fa fa-code fa-2x"></i>
</a>
<a href="#round" class="gooey-menu-item">
<i title="Round Menu" class="fa fa-circle fa-2x"></i>
</a>
</nav>
I'm making a web application for mp3 music. But i get stuck at one condition.
I'm using Jplayer open source plugin for mp3 music.
This below script is used to play music:
$(document).ready(function () {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{
title: "Lat lg gyi",
artist: "Race 2",
mp3: "Music/Lat Lag Gayi (Race 2)-(FreshMaza.co).mp3",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function (e) {
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if (!$this.hasClass('active')) {
myPlaylist.pause();
} else {
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
});
And here is HTML codes.
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous"><i class="icon-control-rewind i-lg"></i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg"></i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop"></i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list"></i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm">
<a class="jp-mute" title="mute">
<i class="icon-volume-2"></i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off"></i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted"></i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt"></i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted"></i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt"></i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand"></i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker"> <!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your
Flash plugin.
</div>
</div>
</div>
</footer>
Which looks like this:
QUESTION
As you see above into my screenshot some labels.
As i click into label it must suppose to play mp3 but the problem is my Javascript code(see above my code for javascript code) is used a particular id which play mp3 on the basis of this.
Here is my label code:
<!--Music working here-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" id="jp_container_N"> <!---->
<div class="item jp-type-playlist"> <!---->
<div class="pos-rlt">
<div class="item-overlay opacity r r-2x bg-black">
<div class="text-info padder m-t-sm text-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o text-muted"></i>
</div>
<div class="center text-center m-t-n">
<div id="jplayer_N" class="jp-jplayer hide"></div> <!---->
<a href="#" class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a href="#" class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div class="bottom padder m-b-sm">
<a href="#" class="pull-right">
<i class="fa fa-heart-o"></i>
</a>
<a href="#">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
<a href="#">
<img src="images/p1.jpg" alt="" class="r r-2x img-full">
</a>
</div>
<div class="padder-v">
Lat lag gyi
Race 2
</div>
</div>
</div>
<!--Music working here //END-->
<!--///////////////////////////////END/////////////////////////////-->
As you see into my codes, i can't use a particular same id to play mp3. I get stuck here. Please help!! :(
HELP WOULD BE APPRECIATED!