Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#"><img id="logo" src="images/Logo.png" alt="logo"></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">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.
Related
I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.
I'm working on reverse engineering a User Interface that is functioning minus a few bugs. It was coded in HTML, CSS, and JavaScript and pulls data via a REST API. The UI is set up in a Windows environment.
When I was looking through the index.html home page for the UI, there is quite a bit of Angular.js used in the interface, yet the script that calls angular.js is commented out. I'm confused about how angular.js could run on the server without being called. Is there some way to reference or parse angular.js on a server without referencing it in the HTML without calling it like you normally would?
I'm confused. Any ideas would be helpful. I included the index.html file below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="expires" content="-1"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="icon" href="content/images/favicon.png"/>
<!--<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>-->
<!--<script src="/js/app.js"></script>-->
<link rel="stylesheet" type="text/css" href="content/icomoon/style.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap-dialog/dist/css/bootstrap-dialog.min.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/base/jquery-ui.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="custom_components/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/loader-display/loadDisplay.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/keyboard.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/noty.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/ladda-bootstrap/ladda-themeless.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/daikin_mis_hmi.css?0.0.0.164">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- if logged in-->
<button ng-if="!isHideMainControls" type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">ToggleNav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-click="goHome()">
<img src="content/images/logo.png">
</a>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" alarm-indicator></span>
<span ng-if="!isHideMainControls" class="visible-sm" dm-keyboard-widget></span>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" network-mode></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-xs hidden-sm"><span
ng-if="!isHideMainControls" network-mode></span></li>
<li class="hidden-xs hidden-sm">
<span ng-if="!isHideMainControls" alarm-indicator></span>
<div dm-keyboard-widget></div>
</li>
<!-- if logged in-->
<li class="divider-vertical hidden-xs hidden-sm"></li>
<li ng-class="{'display-none': !isApplicationLoaded}" class="display-none">
<div ng-cloak class="logged-in-user-info" data-toggle="">
<div class="user-name">
{{sessionUser.firstName}} {{sessionUser.lastName}}
</div>
<div ng-if="!isHideMainControls" ng-hide="sessionUser.isGuest" class="log-out">
<a ng-click="logout();" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogout}}</a>
</div>
<div ng-show="sessionUser.isGuest" class="log-out">
<a ui-sref="login" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogin}}</a>
</div>
</div>
</li>
<li class="visible-xs visible-sm dropdown">
<ul class="submenu" ng-include src="'views/shared-templates/main-menu-items.html'">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-wrapper">
<dm-main-menu class="hidden-block-xs hidden-block-sm"></dm-main-menu>
<div style="display: none" id="appFailedLoadMessage"></div>
<div class="wrap-loader" ng-hide="isApplicationLoaded">
<div id="load-background" class="show-background">
<div class="loading-display">
<img class="ajax-loader" src="custom_components/loader-display/img/ajax-loader.gif">
<br>
<div class="display-none">
<img src="content/images/noty/ErrorMessageBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/SuccessBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/accept.png" width="1" height="1" alt=""/>
<img src="content/images/noty/error_ico.png" width="1" height="1" alt=""/>
<img src="content/images/noty/wrong.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off2.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher2.png" width="1" height="1" alt=""/>
</div>
<span></span>
</div>
</div>
</div>
<!-- BreadCrumbs go here-->
<div ng-if="!isHideMainControls" class="breadcrumbs">
<div class="container">
<div ncy-breadcrumb></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ui-view></div>
</div>
</div>
</div>
</div>
<i class="icon-arrow-up icon-large"></i> {{generalLabels.gentop}}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-xxs text-center-xs text-left-sm text-left-md text-left-lg">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-sm text-center-md text-center-lg">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div class="col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
</div>
</div>
</div>
<script src="../bower_components/fastclick/lib/fastclick.js?0.0.0.164"></script>
<script src="bower_components/requirejs/require.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
//todo workaround fixes the problem with selecting a date on the calendar
FastClick.prototype._needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function (target) {
if ($(target).parents('.bootstrap-datetimepicker-widget').length > 0) {
return true;
}
return FastClick.prototype._needsClick.call(this, target);
};
}, false);
}
var scriptsLoadTimeoutSeconds = 60;
require.config({
waitSeconds: scriptsLoadTimeoutSeconds,
baseUrl: './js',
urlArgs: '0.0.0.164'
});
require(["./main"]);
DisplayAppNotLoadedMessage = function () {
document.getElementById('load-background').style.display = 'none';
var errorMessageBlock = document.getElementById('appFailedLoadMessage');
errorMessageBlock.style.display = 'block';
errorMessageBlock.innerHTML = 'The system may be either busy or not currently running, please verify status locally at the System Manager PC or try again later. If the problem persists, refer to IM 1224 for more detailed troubleshooting procedures.';
};
// show error message in case of any resources are not loaded
LoadTimeoutId = setTimeout(function () {
DisplayAppNotLoadedMessage();
}, (scriptsLoadTimeoutSeconds + 30) * 1000);
</script>
</body>
</html>
I figured it out. The index.html file was calling Require.JS, which allows you to asynchronously load your scripts to the home page, but creates some issues in tracking dependencies. It's a JavaScript framework that basically allows you to load up an entire folder of JavaScript files asynchronously.
I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.