No overflow: Full-screen Carousel with footer and navbar HTML CSS JS - javascript

This is the layout that I need to achieve. Full-screen carousel with footer and navigational bar:
I am almost done with this one but I can't find a tricky way to achieve it. Because there's the overflow. Here's my current output:
and
Here's my html code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Cyclehouse MNL</title>
<meta name="description" content="">
<meta name="msapplication-tap-highlight" content="yes" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Google Web Font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- Bootstrap 3-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- OWL Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<!-- Slider -->
<link rel="stylesheet" href="css/jquery.kenburnsy.css">
<!-- Animate -->
<link rel="stylesheet" href="css/animate.css">
<!-- Loader Style -->
<link rel="stylesheet" href="css/loader-2.css">
<!-- Costum Styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Favicon -->
<link rel="icon" type="image/ico" href="favicon.ico">
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<body>
<!-- Preloader -->
<div class="cover"></div>
<!-- Navigation section -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<img src="img/cyclehouselogo.png" alt="Logo" style="width:300px;height: 50px;margin-top:10px;"/>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>INSTRUCTOR</li>
<li>CYCLE WITH US</li>
<li>LOGIN</li>
<li>RIDE NOW</li>
</ul>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-control left inactive"></div>
<div class="slider-control right"></div>
<ul class="slider-pagi"></ul>
<div class="slider">
<div class="slide slide-0 active">
<div class="slide__bg" style="background-image: url('img/full-slider/image_7.jpg');background-position: top; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 1 1" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<br>
<Br>
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-1">
<div class="slide__bg" style="background-image: url('img/full-slider/image_5.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg" style="background-image: url('img/full-slider/image_9.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row" style="float:right;">
<a class="footer-link" onClick="window.location.href='https://www.eliteboxing.com.ph'"><b>ELITE BOXING ·</b></a>
<b>PARTNER WITH US ·</b>
<b>TERMS AND CONDITION ·</b>
<b>FAQS ·</b>
<b>CONTACT US</b>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/pace.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/ef-slider.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
If you notice my css code:
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
The height is set 100% but when I try to put overflow:hidden; the footer will be no longer view able. Is there any tricky way to do this? Thanks.

These days I use height:100vh; for any element that needed 100% height rather than putting it in HTML and Body tag.
For the overflow I would use
.slider-container{
height: calc(100vh - HEADERpx - FOOTERpx;
}

Related

How can i change the content of a modal without closing it?

I have a modal that opens up when i click a button, the thing is that i have 2 buttons that open the same modal but with different contents, so if i click the same button when the modal is opened, it'll close. That's workin' fine, what i wanna do, and can't do, is change the content of the modal without closing it when i click the button that doesn't opened it. Can anyone help me with this? That's the code i'm using:
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>EA - Need for Speed Test Page</title>
</head>
<body>
<header>
<nav class="menu-togglers is-visible">
<ul>
<li class="dropdown-toggler account" id="account"><i class="far fa-user"></i></li>
<li class="dropdown-toggler help" id="help"><i class="fas fa-question"></i></li>
<li><i class="fas fa-gamepad"></i></li>
</ul>
</nav>
<!--menu-togglers-->
<div class="dropdown-menu is-not-collapsed" id="dropdown-menu">
<img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">
<div class="account-container menu-container opacity-0">
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/connectEA.svg" alt="">
<p>Sign In</p>
</a>
</div>
<!--account-item-->
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/createAccountEA.svg" alt="">
<p>Create Account</p>
</a>
</div>
<!--account-item-->
</div>
<!--account-container-->
<div class="help-container menu-container opacity-0">
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/originIcon.svg" alt="">
<p>Verify my Origin Login</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/linkAccount.svg" alt="">
<p>Link my Origin to my PSN ID</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/rescueCode.svg" alt="">
<p>How do I redeem a Code?</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/errorIcon.svg" alt="">
<p>I can't play online!</p>
</a>
</div>
<!--help-item-->
</div>
<!--account-container-->
</div>
<!--dropdown-menu-->
</header>
<!--header-->
<div style="height: 2000px;"></div>
<script src="js/hideHeader.js"></script>
<script src="js/setMenus.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EA - Need for Speed Test Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css" integrity="sha512-NDcw4w5Uk5nra1mdgmYYbghnm2azNRbxeI63fd3Zw72aYzFYdBGgODILLl1tHZezbC8Kep/Ep/civILr5nd1Qw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.modalDialog{
width: 90%;
position: fixed;
left: 50%;
right: 0;
margin: 0 auto;
top: 50%;
background: white;
transform: translate(-50%,-50%);
padding: 50px;
max-width: 600px;
border: 1px solid black;
color: black;
}
.modalcont{font-size:16px; color:black;}
</style>
</head>
<body>
<header>
<div class="button">
<a class="modalopen" href="javascript:void(0);" datacontent="testingone">modal open</a>
</div>
</header>
<!--header-->
<footer>
<div id="openModal" class="modalDialog" style="display:none;">
<div>
X
<div class="modalcont">testingone</div>
button one
button two
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
jQuery(document).ready(function(){
jQuery('.modalopen').on('click',function(){
var sun = jQuery(this).attr('datacontent');
jQuery('#openModal').show(500);
jQuery('#openModal .modalcont').html(''+sun+'');
//alert(sun);
});
jQuery('.btn').on('click',function(){
var sun = jQuery(this).attr('datacontent');
//alert(sun);
jQuery('#openModal .modalcont').html(sun);
//alert(sun);
});
jQuery('.close').on('click',function(){
jQuery('#openModal').hide(500);
jQuery('#openModal .modalcont').html();
});
});
</script>
</body>
</html>

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.

Make div disappear when list from drop down menu is selected

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') })

Bootstrap 3.3 - Navbar not working on mobile

I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.

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

Categories