i am trying to use jquery to count the number of clicks made on a page and the time spent on the page and using sessions storage across pages. when the user clicks on a desired link it will then take them to a feedback page.
Here is the code that i have so far:
<!DOCTYPE html>
<html lang="en">
<!-- #BeginTemplate "Master.dwt" -->
<head>
<meta charset="utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Home</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="BenchMarking.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-2.2.0.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<script>
var pageLoadDate;
var benchTime;
var eventDate;
var eDiffpl;
$(document).ready(function() {
pageLoadDate= new Date();
$("*").click(function(e)
{
// Stop the function propagating up the DOM tree
e.stopPropagation();
// Get the interaction time
eventDate = new Date();
// <p data-islink="islink">dduiduihd</p>
// Check if this is the link we want
if ($(this).data() !== undefined)
{
// The right link has been clicked
benchTime = benchmarkDate();
eDiffpl = eventDate.getTime() - pageLoadDate.getTime() - benchTime;
sessionStorage.myTester = Number(sessionStorage.myTester) + eDiffpl;
// Then move to next page of experiment
window.location.url = "feedback_page.html";
}
else
{
// An incorrect part of the page has been clicked
sessionStorage.errorCount = Number(sessionStorage.errorCount)++;
console.log(sessionStorage.errorCount);
}
});
});
</script>
-->
<!-- #EndEditable -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="Footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<img src="William hill logo.jpg" alt="Vegas" width="100" height="47">
<!-- Example responsive navigation menu -->
<a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a><span onclick="displayBar()">Sports</span></a></li>
<li><span onclick="displayBar()">Games / Macau</span></li>
<li><span onclick="displayBar()">Scratchcards</span></li>
<li><span onclick="displayBar()">Vegas</span></li>
<li><span onclick="displayBar()">Virtual</span></li>
<li><span onclick="displayBar()">Financials</span></li>
<li><span onclick="displayBar()">Login</span></li>
</ul>
</div>
</nav>
<nav id="fixed-nav-bar2">
<div id="menu0" class="menu1">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ball Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Football</li>
<li>Basketball</li>
<li>Golf</li>
<li>Handball</li>
<li>Rubgy League</li>
<li>Rugby Union</li>
<li>Tennis</li>
<li>Cricket</li>
<li>Snooker</li>
<li>Pool</li>
<li>Volly Ball</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">International Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>American Football</li>
<li>Baseball</li>
<li>Basket Ball</li>
<li>GAA Football</li>
<li>GAA Hurling</li>
<li>Australian Rules</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racing<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Formula 1</li>
<li>Formula 2</li>
<li>Formula E</li>
<li>Moterbikes</li>
<li>cycling</li>
<li>Horse Racing</li>
<li>Greyhound Racing</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racket Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tennis</li>
<li>Squash</li>
<li>Badmington</li>
<li>RacketBall</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vitual Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>E-Sports</li>
<li>Virtual Greyhound Racing</li>
<li>Virtual Horse Racing</li>
<li>Virtual Football</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Other<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Boxing</li>
<li>UFC / MMA</li>
<li>Winter Sports</li>
<li>Darts</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- #BeginEditable "body" -->
<div class="container" class="first_body_element">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="sports%20betting.png" alt="sports betting" width="460" height="345">
</div>
<div class="item">
<a href="http://vegas.williamhill.com/http://vegas.williamhill.com/">
<img src="Vegas.png" alt="Vegas" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://macau.williamhill.com/#!/https://macau.williamhill.com/#!/">
<img src="Macau.png" alt="Macau" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://games.williamhill.com/#!/https://games.williamhill.com/#!/">
<img src="Games.png" alt="Games" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://scratchcards.williamhill.com/#!/https://scratchcards.williamhill.com/#!/">
<img src="Scratchcards.png" alt="Scratchcards" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://bingo.williamhill.com/http://bingo.williamhill.com/">
<img src="Bingo.png" alt="Bingo" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://poker.williamhill.com/http://poker.williamhill.com/">
<img src="Poker.png" alt="Poker" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Roulette.png" alt="Roulette" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Vegas%20Millions.png" alt="Vegas Millions" width="460" height="345">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- #EndEditable -->
<script>
function displayBar(){
document.getElementById("fixed-nav-bar2").style.display = "block";
document.getElementById("myCarousel").style.paddingTop = "50px";
}
</script>
<footer>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
<li>Rules</li>
<li>Help</li>
<li>Contact us</li>
<li>William Hill Press Office</li>
</ul>
</div>
</nav>
</footer>
</body>
<!-- #EndTemplate -->
</html>
however with this code above i am unable to open my drop down menu which my desired link will be in.
the benchmarkDate() method runs end_date=new Date() 999 times in order to get the time, this cannot be changed
Related
I wrote javascript code making website banner disappear when scroll's position is >0 or window's width is less than 1400px and it works well but one of my subpages have very little content so on full HD resolution only small part of the content is not visible until scrolled. So when i scroll down to reveal that content the banner disappears making enough space for entire content of this subpage so the scroll itself disappears which is equal to scrolls position = 0 which makes banner appear again. How can i fixed it? Thank you in advance.
setInterval(pasek,25)
function pasek()
{
var a = window.innerWidth;
var b = window.pageYOffset
if(a<1400||b>0)
{
document.getElementById("baner").style.display="none";
document.getElementById("xxx").style.paddingTop="52px";
}
else
{
document.getElementById("baner").style.display="block";
document.getElementById("xxx").style.paddingTop="218px";
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charSet="utf-8">
<meta http-equiv="X-Ua-compatibility" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kopysno</title>
<link rel="stylesheet" href="boot\bootstrap-4.5.0\dist\css\bootstrap.min.css">
<link rel="stylesheet" href="css.css">
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="boot\bootstrap-4.5.0\dist\js\bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body id="1" style="background-color:white">
<div class="start">
<img id="baner" src="baner.jpg">
<nav class="kolanko navbar navbar-expand navbar-light">
<ul class="navbar-nav" >
<li id="Strona" class="nav-item">
<a class="nav-link" href="kopysno.html">Strona Główna</a>
</li>
<li id="Aktualnosci" class="nav-item">
<a class="nav-link" href="Aktualnosci.html">Aktualności</a>
</li>
<li id="Mapa" class="nav-item">
<a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
</li>
<li id="Filmy"class="nav-item">
<a class="nav-link" href="#">Filmy</a>
</li>
<li id="Dawni" class="nav-item">
<a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
</li>
<li id="Artykuły"class="nav-item">
<a class="nav-link" href="#">Artykuły prasowe</a>
</li>
<li id="Kontakt"class="nav-item">
<a class="nav-link" href="kontakt.html">Kontakt</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown" href="#">Więcej</a>
<div style="background-color:dimgrey"class="dropdown-menu">
<a class="dropdown-item" href="Historia.html">Historia</a>
<a class="dropdown-item" href="#">Geografia</a>
<a class="dropdown-item" href="#">Środowisko</a>
<a class="dropdown-item" href="#">Kartografia Archiwalna</a>
<a class="dropdown-item" href="#">Galeria Fotografii</a>
<a id="a1"style="display:none"class="dropdown-item" href="kontakt.html">Kontakt</a>
<a id="a2"style="display:none"class="dropdown-item" href="#">Artykuły prasowe</a>
<a id="a3"style="display:none"class="dropdown-item" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
<a id="a4"style="display:none"class="dropdown-item" href="#">Filmy</a>
<a id="a5"style="display:none"class="dropdown-item" href="mapaokolicy.html">Mapa Okolicy</a>
<a id="a6"style="display:none"class="dropdown-item" href="Aktualnosci.html">Aktualnosci</a>
<a id="a7"style="display:none"class="dropdown-item" href="kopysno.html">Strona Główna</a>
</div>
</div>
</li>
</ul>
<form style="padding-right:10px;"class="form-inline" action="/action_page.php">
<input style="width:60%;margin:5px;float:right"class="form-control mr-sm-2" type="text" placeholder="Search">
<button style="float:right"class="btn btn-success" type="submit">Search</button>
</form>
<button class="dark btn btn-dark"id="but"type="button" onclick="dark()">Dark</button>
</nav>
</div>
<div id="2" class="container-fluid"style="background-color:white;">
<div class="row">
<div id="xxx"class="col">
<ul class="list-group">
<li class="list-group-item" style="text-align:center;font-size:25px;background-color:#e6f2ff">
<span>
STRONA GŁÓWNA
</span>
</li>
</ul>
</div>
</div>
<div id="3"class="row" style="font-family:Verdana;letter-spacing:1px;font-size:16px;margin-bottom: 50px;">
<div class="col"style="padding-right:50px;padding-left:50px;margin:auto;padding-top:40px" >
    KOPYSNO, znane także jako Kopyśno, Kopystno, to miejscowość istniejąca już w XIV wieku i będąca zarazem gniazdem rodu Kopystyńskich. Wiele wieków później, w wyniku dramatycznych wydarzeń, które się rozegrały podczas drugiej wojny światowej oraz po jej zakończeniu, utraciła największy skarb swej ziemi - licznych mieszkańców, których zmuszono, by porzucili swoje domostwa i zagrody i udali się w nieznane, w świat stworzony im przez obcych.<br><br>
    Czy historię mieszkańców Kopysna można ocalić od zapomnienia? Dopóki choć jeden z nas będzie mógł wymówić słowo "Kopysno" ze zrozumieniem, dopóty miejscowość ta nie ujdzie z pamięci żyjących. Nadejdzie jednak czas gdy każdy, kto mieszkał w tym przepięknym miejscu, powróci tu i sprawi, że nasze serca zapłoną ... .<br><br>
    Strona internetowa Kopysna powstała dzięki staraniom dzieci i wnuków jej mieszkańców, którzy pamiętają niezwykłą atmosferę stworzoną im przez dziadków i rodziców. Zapisali oni w swym sercu ciszę przerywaną odgłosem wiatru i ryczących jeleni; zapamiętali zapach ziemi podczas wiosennej orki i smak orzeźwiającej wody wydobywającej się z licznych źródeł, a także śmierć bliskich, których odejście z roku na rok zwiastowało koniec niepowtarzalnych chwil.<br><br>
    Celem istnienia strony nie jest propagowanie żadnych ideologii, a zwłaszcza nacjonalistycznych czy politycznych. Podane na niej informacje mogą nie być ścisłe pod względem historycznym i niekiedy zbyt ogólnikowe, gdyż niewielu pozostało z tych, którzy mogliby uzupełnić to, co tak szybko nam umknęło. Każdego, kto chciałby pomóc w uzupełnieniu naszej strony, prosimy o kontakt.
</div>
<div class="col-xxl"style="text-align:center;padding-right:50px;padding-left:50px;margin-bottom: 30px;padding-top:40px">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators" style="bottom:1%">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img style="width:100%;height:100%"src="1.png" alt="">
</div>
<div class="carousel-item">
<img style="width:100%;height:100%"src="2.jpg" alt="">
</div>
<div class="carousel-item">
<img style="width:100%;height:100%"src="3.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
<div style="text-align:center;background-color:lightgrey;position:fixed;bottom:5px;left:3%;width:94%">
© Copyrights Dedio & Dedio 2003
</div>
</body>
</html>
just add the mediaquery at your css, that will handle the issue (looks like a compatibility one)
more info at
https://developer.mozilla.org/pt-BR/docs/Web/CSS/#media
Please somebody can analyze the code below and tell me why is the carousel not working. The pictures are not at all sliding even if I click on next or perv glyphicon. I want it to be automatic. It working in none of the browsers. I have taken this code from a site and its perfectly working there but not on my laptop. I am unable to understand where is the problem
.colht{
height:200px;
border: 5px solid red;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Power Me Up
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Power Me Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active ">Menu 1</li>
<li class="">
<a class="" href="#">Menu 2</a>
</li>
<li class="">Menu 3</li>
<li class="">Menu 4</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-generic" data-slide-to="1" ></li>
<li data-target="#carousel-generic" data-slide-to="2" ></li>
<li data-target="#carousel-generic" data-slide-to="3" ></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="Menu 1" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 1
</h3>
</div>
</div>
<div class="item">
<img src="images/2.jpg" alt="Menu 2" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 2
</h3>
</div>
</div>
<div class="item">
<img src="images/3.jpg" alt="Menu 3" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 3
</h3>
</div>
</div>
<div class="item">
<img src="images/4.jpg" alt="Menu 4" style="width:100%;">
<div class="carousel-caption">
<h3>
Menu 4
</h3>
</div>
</div>
</div>
<a class = "left carousel-control" href="#carousel-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class = "right carousel-control" href="#carousel-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Try this code below:
<!-- By abinthaha -->
<html lang="en" class="">
<head>
<link rel="canonical" href="https://codepen.io/abinthaha/pen/RyjLKa">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<style class="cp-pen-styles"></style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class=""></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class="active"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item">
<img src="https://news.marvel.com/wp-content/uploads/2017/12/tt-m.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="https://cdn.movieweb.com/img.news.tops/NEx6Czlz5SCWBy_1_b/Marvel-Movies-Release-Slate-2021-2022-Mcu.jpg" alt="Chicago">
</div>
<div class="carousel-item active">
<img src="https://cdn.images.express.co.uk/img/dynamic/36/590x/Avengers-Iron-Man-was-almost-played-by-another-major-star-936289.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
can you please try below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Power Me Up
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" media="screen">
<style type="text/css">
.colht{
height:200px;
border: 5px solid red;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Power Me Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active ">Menu 1</li>
<li class="">
<a class="" href="#">Menu 2</a>
</li>
<li class="">Menu 3</li>
<li class="">Menu 4</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://www.rodzinne-wakacje.pl/wp-content/uploads/2017/05/maldives-1993704_960_720-696x391.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/assets/js/vendor/tether.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
I am new MVC and have a page layout that looks like the below image. The problem is all module level header,sidemenu,footer related js files are bundled together and these header menu,side menu,footer are in _Layout.cshtml page. The JS files of all these sections gets loaded and executed everytime I go from home(Index.cshtml) view to Playlist menu item(Playlist.cshtml) view. The problem is if I play a song in footer in Home page,and then go to Playlist Page(Both Index.cshtml and Playlist.cshtml are rendered in body section), then I need the same song to be playing in PlayList.cshtml page, not reload JS file to create a new music player in every new page. How do I achieve this? Play the same music in footer,no matter whih page(View) I am in unless I change the music myself.
Home Page
<!DOCTYPE html>
<html>
<head>
<title>#Page.Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Favicon icon -->
<link rel="shortcut icon" href="~/assets/images/favicon.png" type="image/x-icon">
<link rel="icon" href="~/assets/images/favicon.ico" type="image/x-icon">
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Required Fremwork -->
<link rel="stylesheet" type="text/css" href="~/Content/Template/vendor/bootstrap/css/bootstrap.min.css">
<link href="~/Content/css/ChatStyle.css" rel="stylesheet" />
<!-- Style.css -->
<link rel="stylesheet" type="text/css" href="~/assets/css/main.css">
<!-- Responsive.css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/responsive.css">
<!--color css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/color/color-1.min.css" id="color" />
#RenderSection("head", required: false)
<link rel="stylesheet" type="text/css" href="~/Content/Album/css/albums.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/js/mediaelement-and-player_2.13.1.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/mep-feature-playlist-master/mep-feature-playlist.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Poppins.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.sticky-footer {
position: fixed;
bottom: 0;
width: 100%;
}
/*original*/
.liked::before {
color: #600;
content: '\f004';
}
.not-liked::before {
color: #aaa;
content: '\f08a';
}
.smallWidth {
width: 400px;
}
</style>
</head>
<body class="sidebar-mini fixed">
<div class="loader-bg">
<div class="loader-bar">
</div>
</div>
<div class="wrapper">
<!-- Navbar-->
<header class="main-header-top hidden-print">
<img class="img-fluid able-logo" src="~/assets/images/logo.png" alt="Theme-logo">
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<!-- Navbar Right Menu-->
<div class="navbar-custom-menu f-right p-absolute">
<ul class="top-nav">
<!--Notification Menu-->
<li class="dropdown pc-rheader-submenu message-notification search-toggle">
<a href="#!" id="morphsearch-search" class="drop icon-circle txt-white">
<i class="icofont icofont-search-alt-1"></i>
</a>
</li>
<li class="dropdown notification-menu">
<a href="#!" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle">
<i class="icon-bell"></i>
<span class="badge badge-danger header-badge">9</span>
</a>
<ul class="dropdown-menu">
<li class="not-head">You have <b class="text-primary">4</b> new notifications.</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-1.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block-time">2min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-2.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block-time">20min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-3.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block-time">3 hours ago</span></div>
</a>
</li>
<li class="not-footer">
See all notifications.
</li>
</ul>
</li>
<!-- chat dropdown -->
<li class="pc-rheader-submenu ">
<a href="#!" class="drop icon-circle displayChatbox">
<i class="icon-bubbles"></i>
<span id="msgCount" class="badge badge-danger header-badge blink"></span>
</a>
</li>
<!-- window screen -->
<li class="pc-rheader-submenu">
<a href="#!" class="drop icon-circle" onclick="javascript:toggleFullScreen()">
<i class="icon-size-fullscreen"></i>
</a>
</li>
<!-- User Menu-->
<li class="dropdown">
<a href="#!" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle drop icon-circle drop-image">
<span><img class="img-circle " src="~/assets/images/avatar-1.png" style="width:40px;" alt="User Image"></span>
<span>John <b>Doe</b> <i class=" icofont icofont-simple-down"></i></span>
</a>
<ul class="dropdown-menu settings-menu">
<li><i class="icon-settings"></i> Settings</li>
<li><i class="icon-user"></i> Profile</li>
<li><i class="icon-envelope-open"></i> My Messages</li>
<li class="p-0">
<div class="dropdown-divider m-0"></div>
</li>
<li><i class="icon-lock"></i> Lock Screen</li>
<li><i class="icon-logout"></i> Logout</li>
</ul>
</li>
</ul>
<!-- search -->
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form">
<input class="morphsearch-input" type="search" placeholder="Search..." />
<button class="morphsearch-submit" type="submit">Search</button>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2>People</h2>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://0.gravatar.com/avatar/81b58502541f9445253f30497e53c280?s=50&d=identicon&r=G" alt="Sara Soueidan" />
<h3>Sara Soueidan</h3>
</a>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://1.gravatar.com/avatar/9bc7250110c667cd35c0826059b81b75?s=50&d=identicon&r=G" alt="Shaun Dona" />
<h3>Shaun Dona</h3>
</a>
</div>
<div class="dummy-column">
<h2>Popular</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="PagePreloadingEffect" />
<h3>Page Preloading Effect</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="DraggableDualViewSlideshow" />
<h3>Draggable Dual-View Slideshow</h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="TooltipStylesInspiration" />
<h3>Tooltip Styles Inspiration</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="NotificationStyles" />
<h3>Notification Styles Inspiration</h3>
</a>
</div>
</div><!-- /morphsearch-content -->
<span class="morphsearch-close"><i class="icofont icofont-search-alt-1"></i></span>
</div>
<!-- search end -->
</div>
</nav>
</header>
<!-- Side-Nav-->
<aside class="main-sidebar hidden-print ">
<section class="sidebar" id="sidebar-scroll">
<div class="user-panel">
<div class="f-left image"><img src="~/assets/images/avatar-1.png" alt="User Image" class="img-circle"></div>
<div class="f-left info">
<p>John Doe</p>
<p class="designation">Weather <i class="icofont icofont-caret-down m-l-5"></i></p>
</div>
</div>
<!-- sidebar profile Menu-->
<ul class="nav sidebar-menu extra-profile-list">
<li>
<a class="waves-effect waves-dark" href="profile.html">
<i class="icon-user"></i>
<span class="menu-text">View Profile</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-settings"></i>
<span class="menu-text">Settings</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-logout"></i>
<span class="menu-text">Logout</span>
<span class="selected"></span>
</a>
</li>
</ul>
<!-- Sidebar Menu-->
<ul class="sidebar-menu">
<li class="nav-level">Navigation</li>
<li class="active treeview">
<a class="waves-effect waves-dark" href="index.html">
<i class="icon-speedometer"></i><span> Dashboard</span>
</a>
</li>
<li class="nav-level">Components</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-briefcase"></i><span> UI Elements</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="accordion.html"><i class="icon-arrow-right"></i> Accordion</a></li>
<li><a class="waves-effect waves-dark" href="button.html"><i class="icon-arrow-right"></i> Button</a></li>
<li><a class="waves-effect waves-dark" href="label-badge.html"><i class="icon-arrow-right"></i> Label Badge</a></li>
<li><a class="waves-effect waves-dark" href="bootstrap-ui.html"><i class="icon-arrow-right"></i> Grid system</a></li>
<li><a class="waves-effect waves-dark" href="box-shadow.html"><i class="icon-arrow-right"></i> Box Shadow</a></li>
<li><a class="waves-effect waves-dark" href="color.html"><i class="icon-arrow-right"></i> Color</a></li>
<li><a class="waves-effect waves-dark" href="light-box.html"><i class="icon-arrow-right"></i> Light Box</a></li>
<li><a class="waves-effect waves-dark" href="notification.html"><i class="icon-arrow-right"></i> Notification</a></li>
<li><a class="waves-effect waves-dark" href="panels-wells.html"><i class="icon-arrow-right"></i> Panels-Wells</a></li>
<li><a class="waves-effect waves-dark" href="tabs.html"><i class="icon-arrow-right"></i> Tabs</a></li>
<li><a class="waves-effect waves-dark" href="tooltips.html"><i class="icon-arrow-right"></i> Tooltips</a></li>
<li><a class="waves-effect waves-dark" href="typography.html"><i class="icon-arrow-right"></i> Typography</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-chart"></i><span> Charts & Maps</span><span class="label label-success menu-caption">New</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="float-chart.html"><i class="icon-arrow-right"></i> Float Charts</a></li>
<li><a class="waves-effect waves-dark" href="morris-chart.html"><i class="icon-arrow-right"></i> Morris Charts</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-book-open"></i><span> Forms</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="form-elements-bootstrap.html"><i class="icon-arrow-right"></i> Form Elements Bootstrap</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-materialize.html"><i class="icon-arrow-right"></i> Form Elements Material</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-advance.html"><i class="icon-arrow-right"></i> Form Elements Advance</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" id="mnItemPlaylist">
<i class="icon-list"></i><span> Play Lists</span>
</a>
</li>
<li class="nav-level">More</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-docs"></i><span>Pages</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li class="treeview">
<i class="icon-arrow-right"></i><span> Authentication</span><i class="icon-arrow-down"></i>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="register1.html" target="_blank"><i class="icon-arrow-right"></i> Register 1</a></li>
<li><a class="waves-effect waves-dark" href="login1.html" target="_blank"><i class="icon-arrow-right"></i><span> Login 1</span></a></li>
<li><a class="waves-effect waves-dark" href="forgot-password.html" target="_blank"><i class="icon-arrow-right"></i><span> Forgot Password</span></a></li>
<li><a class="waves-effect waves-dark" href="profile.html"><i class="icon-arrow-right"></i> Profile</a></li>
</ul>
</li>
<li><a class="waves-effect waves-dark" href="lock-screen.html" target="_blank"><i class="icon-arrow-right"></i> Lock Screen</a></li>
<li><a class="waves-effect waves-dark" href="404.html" target="_blank"><i class="icon-arrow-right"></i> Error 404</a></li>
<li><a class="waves-effect waves-dark" href="sample-page.html"><i class="icon-arrow-right"></i> Sample Page</a></li>
<li><a class="waves-effect waves-dark" href="search-result.html"><i class="icon-arrow-right"></i> Search Result</a></li>
</ul>
</li>
<li class="nav-level">Menu Level</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icofont icofont-company"></i><span>Menu Level 1</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Two
</a>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Two</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Three
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Three</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
<!-- Sidebar chat start -->
<!-- Sidebar chat end-->
<div class="content-wrapper">
<!-- Container-fluid starts -->
<!-- Main content starts -->
<div class="container-fluid">
<!-- Item -->
#RenderBody()
</div>
<!-- Main content ends -->
<!-- Container-fluid ends -->
<!-- Page Footer-->
<footer id="sticky-footer" class="sticky-footer">
#Html.Partial("_fullPlayer")
</footer>
</div>
</div>
<script src="~/assets/plugins/jquery/dist/jquery.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="~/assets/plugins/tether/dist/js/tether.min.js"></script>
<!-- Required Fremwork -->
#*Added by*#
<script src="~/Content/Template/vendor/popper.js/umd/popper.min.js"></script>
<script src="~/Content/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="~/signalr/hubs"></script>
<script src="~/Scripts/Modules/Home/ChatBarJS.js" type="text/javascript"></script>
<!-- notification -->
<script src="~/assets/plugins/notification/js/bootstrap-growl.min.js"></script>
<div id="modPlayList" class="modcon" style="width: 20%;height:20%"></div>
#Scripts.Render("~/bundles/mediaelement")
#Scripts.Render("~/bundles/modules")
#RenderSection("scripts", false)
<script type="text/javascript">
$(document).ready(function () { // JQuery not loaded here, $ is undefined
$.getScript('../Scripts/Modules/musicCloud.js', function () {
var $window = $(window);
var nav = $('.fixed-button');
$window.scroll(function () {
if ($window.scrollTop() >= 200) {
nav.addClass('active');
}
else {
nav.removeClass('active');
}
});
$(function () {
$('#mnItemPlaylist').click(function () {
$.get('#Url.Action("PlayList", "PlayList",new {url = "/api/albums" })', function (data) {
debugger;
musicCloud.playlist.AppendToAlbums(data, 'New Releases');
});
});
});
});
});
</script>
</body>
</html>
I achieved what I wanted to do using partial views and viewdata, that is click on menu item in _layout and load a partial view with data in single ajax request in the RenderBody section of layout page. After reading so many articles, I came across two ways of doing it. 1)Passing the entire PartialView with data as JSON 2)Using Viewbag/ViewData to pass the data and return partial view in single ajax call. So, no 2 was the best option for me render json data and partial view with single ajax request
I have a header created in index.html and a separate page in test.html. I'm able to use scripts on the index.html page but not on the test.html page I can't seem to find out why.
In the following file the console log logs the test statement and i'm able to see it in the browser.
Index.html:
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-animate.js"></script>
<!-- Angular Config/Routes -->
<script src="app/app.js"></script>
<script src="app/routes.js"></script>
<!-- Angular Controllers -->
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/emailCtrl.js"></script>
<script src="app/controllers/managementCtrl.js"></script>
<script> console.log('test'); </script>
<!-- Angular Services -->
<script src="app/services/userServices.js"></script>
<script src="app/services/authServices.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- Cascade Style Sheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<title>MEAN Stack App</title>
</head>
<body ng-app="userApp" ng-controller="mainCtrl as main" ng-show="main.loadme" ng-cloak>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 page-scroll" href="/">MEAN Stack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a ng-show="!main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/dashboard/{{ main.userid }}">Dashboard</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/mytests/{{ main.userid }}">My tests</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/comments">Comments</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/subscriptions">Subscriptions</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/recruitafriend">Invite friend and earn MONEY</a>
</li>
<li class="dropdown">
<a ng-show="main.isLoggedIn" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello {{ main.username }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="#" ng-click="main.logout();">Logout</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/management">Management</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn && main.authorized" class="page-scroll" href="/orders">Orders</a>
</li>
<li class="">
<a ng-show="main.isLoggedIn" class="page-scroll" href="/profile">Hello {{ main.username }}</a>
</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">About</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="#">Help</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/login">Login</a>
</li>
<li class="">
<a ng-show="!main.isLoggedIn" class="page-scroll" href="/register">Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header ng-show="main.home">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">David Acosta</div>
<div class="intro-heading">MongoDB, ExpressJS, AngularJS, NodeJS</div>
<a ng-show="!main.isLoggedIn" href="/login" class="page-scroll btn btn-xl">Sign In</a>
<a ng-show="!main.isLoggedIn" href="/register" class="page-scroll btn twitterbtn">Register</a>
<a ng-show="main.isLoggedIn" href="#" ng-click="main.logout();" class="page-scroll btn btn-xl">Logout</a>
<a ng-show="main.isLoggedIn && main.authorized" href="/management" class="page-scroll btn facebookbtn">View</a>
</div>
</div>
</header>
<section id="services">
<div class="container">
<div class="row">
<!-- Angular View -->
<div ng-view></div>
<!-- Angular View -->
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section ng-show="main.home" id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About This Page</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="glyphicon glyphicon-film"></span>
<h4 class="service-heading">YouTube</h4>
<p class="text-muted">Ensure you check out the YouTube video series associated with this web page. Visit:
https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d
</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-usd"></span>
<h4 class="service-heading">Facebook</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-save"></span>
<h4 class="service-heading">Github</h4>
<p class="text-muted">Ensure you check out the GitHub page associated with this web page. Visit:
https://github.com/gugui3z24
</p>
</div>
</div>
</div>
</section>
<footer ng-show="main.home">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © David Acosta</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i>
</li>
<li><i class="fa fa-facebook"></i>
</li>
<li><i class="fa fa-linkedin"></i>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li>Privacy Policy
</li>
<li>Terms of Use
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- BootstrapJS Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button ng-hide="main.hideButton" type="button" ng-click="main.endSession();" class="close" data-dismiss="modal">×</button>
<!-- Modal Header -->
<h4 class="modal-title">{{ main.modalHeader }}</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>{{ main.modalBody }}</p>
<div ng-show="main.hideButton" class="dizzy-gillespie"></div>
</div>
<div class="modal-footer">
<!-- Modal 'Yes' & 'No' Buttons -->
<button type="button" ng-hide="main.hideButton" ng-click="main.renewSession();" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" ng-hide="main.hideButton" ng-click="main.endSession();" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- BootstrapJS Modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
The test.html won't execute the code within the script tags. But the h1 will show.
Test.html:
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>
If you do not use jquery, Angular uses jqlite. once view is loaded, than inspect it in chrome. You will not find script tag in view.Because Angular don't what to do with script tag hence removes it. When angular detects jquery, it will use jquery instead jqlite for dom manipulation and jquery treat the script tag as special.
< <script src="path/jquery.js"></script>
<!-- Main Angular Files -->
<script src="assets/js/angular.js"></script>
<div>
<h1> Hello Test </h1>
<script type="text/javascript">
console.log('2');
</script>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/welcome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>VMS</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Visitor Mangement System</a>
</div>
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{URL::to('logout')}}">
<span style="color:white"></span>
<span class="glyphicon glyphicon-log-in"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Visitor<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register and Check In</li>
<li>Booked Check In</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Employee<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Administrator<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Check In</li>
<li>Check Out</li>
</ul>
</li>
</ul>
</ul>
#endif
</div>
</nav>
<header id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('images/img1.jpg');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('images/img2.jpg');"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 3000 //changes the speed
})
</script>
</body>
i have a navigation bar and below goes a carousel.There is a dropdown in the navigation bar buttons.But the drop down in navbar is behind the carousel image.I want the dropdown over the carousel.Any Help is most welcome.
try,
.dropdown-menu{
z-index: 123;
}
give z-index value higher than the carousel.
Set a z-index for the two elements
.navbar {
position: relative;
z-index: 100;
}
.carousel {
position: relative;
z-index: 50;
}
A higher z-index will rise above the other.