HTML/JS/CSS3 + ASPX ... And Sharepoint Designer 2013 - javascript

i'm becoming mad... I would like to add this bar:
(source: bindtuning.com)
(using seattle.master - view)
in a simple custom page created by me.
In my case, I've "index.aspx" in the same folder of "Home.aspx" (the folder is SitePages),
"index.aspx" is a Html5 page w/ css3 and js pages (I uploaded the code just to have a complete post)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# Page Language="C#" %>
<%# Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=*" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomePage | Fabio Test's Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/main_style.css" type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/fractionslider.css" type="text/css"/>
<link rel='stylesheet' href='../SiteAssets/SitePages/Home/css/navigation.css' type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/slider.css" type="text/css" charset="utf-8" />
<script src='../SiteAssets/SitePages/Home/js/jquery.color-RGBa-patch.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src='../SiteAssets/SitePages/Home/js/navigation.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery.fractionslider.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../SiteAssets/SitePages/Home/js/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../SiteAssets/SitePages/Home/js/mosaic.1.0.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.bar2').mosaic({
animation : 'slide' //fade or slide
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body oncontextmenu="return false" onselectstart="return false">
<div id="site_content">
<noscript>Javascript?</noscript>
<div id="top_bar"><br/><br/>
<img id="logo" alt="Logo" src="../SiteAssets/SitePages/Home/img/logo.jpg" />
</div>
<div id="centralign">
<div class="centralDiv_first mosaic-block bar2" id="first_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>MIS</h4><br/>
<p>Management of Information Systems</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_1.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="second_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Finance</h4><br/>
<p>I hope that there are money for sponsorships.</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_2.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="third_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>HR</h4><br/>
<p>Human Resources</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_3.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="fourth_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Forms</h4><br/>
<p>Check it out!</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_4.jpg" onclick="window.open('https://uscri.sharepoint.com/Forms/Forms/AllItems.aspx','_self',false)"/></div>
</div>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_1.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_2.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_3.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_4.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_5.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
</div><br/><br/>
<div id="footer">For general inquiries, please email</div>
</div>
</body>
</html>
I tried to modify the seattle.master, trying to leave just the top bar (called SuiteBar) and wrote the code in the had tag and in the body, but javascript doesn't work and also there is an overwriting of tags in css files.
I appreciate any suggestion to solve the problem!
Thank you


most probalbly the JS and the css are not referenced correctly.
the code above is a master page. try to use the following
/SiteAssets/SitePages/Home/css/main_style.css just remove the ../
assuming you have a document library called SiteAssets in the rooSite as / is always referring to the rootsite, and you have a folder called SitePages inside this document library and another one under Sitepages called Home ... etc.
if your SiteAssets document library is not in the rootsite and you want to reference it in the current subsite use the directive <%$ SPUrl: ~site/SiteAssets/SitePages/Home/css/main_style.css %>

Related

How do I get the Materialize Feature Discovery Block to show up on my webpage?

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

Angular.js loading without reference?

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.

Navigation and bx sliders not working

I am working on a site where when you click on the specific navigation at the top, the slice below changes the information inside of it. The information inside of this slice is a featured video and a side slider to switch out that featured video, and a horixontal slider below it showcasing product.
Can someone please take a look at my code and tell me whats wrong with it. Ive been trouble shooting for about 2 weeks now and cant seem to find a solution :/
Thanks so much
HTML:
<link rel='stylesheet prefetch' href='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css'>
<link rel="stylesheet" href="core_landing_styles.css">
<link rel="stylesheet" type="text/css" href="product_detail_new-core.css">
<link rel="stylesheet" type="text/css" href="video_new-core.css">
<!-- bxSlider Javascript file -->
<script src="libs/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="libs/jquery.bxslider.css" rel="stylesheet" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- FONTS INCLUSION -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/d268d308-355f-4fc1-b527-5f948fa77c14.css"/>
<div class="page-container">
<!-- + HEADER -->
<div class="top-message-container">
<div class="inner-container">
<div class="topHeroImage">
<img src="http://assets.daddario.com/core_landing_tst/images/core_head_logo.png" alt="Welcome to Core">
<div class="header_intro_text">Get started by choosing your instrument below</b>.
</div>
</div>
</div>
</div>
<!-- - END HEADER -->
<!-- + NAVIGATION ... -->
<div class="navigation-container">
<div class="inner-container">
<img class="guit-icon" src="http://assets.daddario.com/core_landing_tst/images/guitar_bass-icon.png"> <img class="drum-icon" src="http://assets.daddario.com/core_landing_tst/images/percussion-icon.png"> <img class="violin-icon" src="http://assets.daddario.com/core_landing_tst/images/orchestral-icon.png"> <img class="sax-icon" src="http://assets.daddario.com/core_landing_tst/images/woodwinds-icon.png">
</div>
<div class="main-video-container">
<!-- + VIDEO PLAYER AND RELATED VIDEOS -->
<div class="video-player-wrapper" id="1">
<div class="video-information">
<div class="video-title">Learn everything you need to know about restringing, humidifying, and even tuning. So<br/>whether behind the scenes or between sets, you can keep your guitar in tip-top shape.</div>
</div>
<div class="youtube-video-player">
<iframe width="736" height="414" src="https://www.youtube.com/embed/EUpEqimZyMM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side-panel-related-videos">
<img src="images/related_videos_up_arrow.png" alt=""><br />
<ul class="side-panel-list">
<div>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/08nwBtS31VU/0.jpg"></div>
<!--<h3>How a Set of Guitar Strings Changed Rock 'n' Roll: The D'Addario Wa...</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/qzYtGPwK2Ls/0.jpg"></div>
<!--<h3>How to Restring Guitars With a String-Through Body</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/9Uzy2RtBZeg/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/W4P2KOjmvwQ/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
</div>
</ul>
<img src="images/related_videos_down_arrow.png" alt="">
</div>
<!-- + PRODUCTS SEEN IN THIS VIDEO -->
<!--<div class="tab-related-products">-->
<h1><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</h1>
<ul class="related-products-wrapper bxslider">
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
</ul>
<!--</div>-->
</div>
<!-- - VIDEO PLAYER AND RELATED VIDEOS -->
</div>
</div>
<!-- - END NAVIGATION ... -->
<!-- + PLAYERS CIRCLE -->
<div class="push-notifications-container">
<div class="inner-container">
<img class="pc_border_right" src="http://assets.daddario.com/core_landing_tst/images/players_circle_logo.png">
<div class="pc_text">Players Circle is the rewards program that gives musicians more ways to earn free gear, watch exclusive content, and win great prizes. Sign up and start earning points today!</div>
<div class="play_more_text">Play More. Do More. Earn More.</div>
</div>
</div>
<!-- - END PLAYERS CIRCLE -->
<!-- + FOOTER -->
<div class="get-humidipak-container">
<div class="inner-container">
<img src="http://assets.daddario.com/core_landing_tst/images/d_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ww_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/orch_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/pm_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ps_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ev_brand_logo.png"><br><br>
<div class="copyright_text">Copyright 2016 © D'Addario & Company Inc.</div>
</div>
</div>
<!-- - END FOOTER -->
</div>
<script type="text/javascript" src="core_landing.js"></script>
Here is my code pen
http://codepen.io/anon/pen/EgZAGG

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>

I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading

Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

photoswipe keep flicker for some reason

I have set up photoswipe for mobile device, it's working fine apart from the photos keep Flicker when swipe on the phone, but its working fine on computer. any idea how to fix please? cheers
the example will be:
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test/title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe)
{
$(document).ready(function()
{
$("#gallery a").photoSwipe(
{
enableMouseWheel: false,
enableKeyboard: false
});
$("#gallery a:first").click();
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
<script type="text/javascript">
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">Apartment Specialists</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Feature Apartments</li>
<ul data-role="listview" data-filter="false" id="test-more">
<div id="gallery" >
<a href="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=350x262&s=732bf1b52c70b0fc" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=120x90&s=e4501ebdfd60d8db" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=350x262&s=293a3a114859a240" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=120x90&s=c599ece1364cfafe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=350x262&s=da0802cfe1060df4" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=120x90&s=f4b0ffaea30f6a2b" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=350x262&s=a54d15c8570f1d2b" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=120x90&s=767b0330b9cf2f1e" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=350x262&s=9e2db11b4d87f798" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=120x90&s=e9f8871520333fbe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=350x262&s=2cd999589c41d34d" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=120x90&s=1af459b7ecc85dbe" alt="" /></a>
</div>
<br />
<p align="center">
<font face="Arial, Helvetica, sans-serif">Back</font></p>
</ul>
<br />
<li>All Apartments</li>
</ul>
<div data-role="footer" align="center">
<h6 style="font-size: 55%;font-family:calibri">
RE/MAX Leaders Real Estate (1987) Ltd Licensed Under REAA 2008</h6>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>

I just sort it. use code.photoswipe-3.0.5.min.js rather the version of 3.0.4. thanks

Categories