How should i disable my text Click Begin Game to start when Begin Button is pressed ? It keep displaying after begin button is pressed.
HTML CODE:
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>
I think this is what your are looking for . please check...
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
<script>
jQuery('#StartBtn').click(function(){
jQuery('.Status').hide();
})
</script>
</body>
</html>
You could add an additional line to the onclick event for the Begin Game button.
HTML
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="beginGame()">Begin Game</button>
<br><br><br>
<div class="Status" id="ClickToBeginMessage">Click Begin Game to start</div>
</div>
JS
function beginGame(){
gameStarted=true;
$("#ClickToBeginMessage").hide()
}
Related
I am trying to get an output of 3 columns next to each other. What I get is one column on top of each other. What am I missing in my code?
The input in between the [] is variable and comes from another page. This works fine.
It keeps saying that I have to add more information but I have no clue what I should add to make it more clear.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAINTITLE:: [TITEL] </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css" title="currentStyle">
#import "assets/bootstrap/css/bootstrap-responsive.min.css";
#import "assets/bootstrap/css/bootstrap.min.css";
#import "assets/css/main.css";
</style>
<script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script>
</script>
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row" style="margin-top: 180px !important"></div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PICTURE]" width="300" />
<div class="caption">
<h3>
[NAME]
</h3>
<p>
[TEXT]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create a class row div around all of the columns. You have three rows that's why each column is on a separate row.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAINTITLE:: [TITEL] </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css" title="currentStyle">
#import "assets/bootstrap/css/bootstrap-responsive.min.css";
#import "assets/bootstrap/css/bootstrap.min.css";
#import "assets/css/main.css";
</style>
<script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script>
</script>
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="thumbnail">
<img alt="300x200" src="[PICTURE]" width="300" />
</div>
</div>
<div class="caption">
<div class="col-md-1">
<h3>
[NAME]
</h3>
</div>
<div class="col-md-1">
<p>
[TEXT]
</p>
</div>
<div class="col-md-1">
<p>
<a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</body>
I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here
use display: inline-block and width: 100%; on alert-info div it will work fine that you want.
UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.
Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>
Having problem with one of my development work that from time to time the page is rendering as text. Look at the http header and I cannot see anything wrong. Can someone give me a helping eye.
Thanks
0000
HTTP/1.1 200 OK
Date: Fri, 09 Dec 2016 13:15:49 GMT
Content-Length: 5621
Content-Type: text/html; charset=ISO-8859-1
Content-Language: en
X-Powered-By: Servlet/2.5 JSP/2.1
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RunDetails</title>
<script type="text/javascript" src="/environment/resources/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/environment/resources/dev/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-animate.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="/environment/resources/js/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="/environment/resources/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/tooltip.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.tpl.js"></script>
<script type="text/javascript" src="/environment/resources/js/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/css/em.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<!-- jQuery/Bootstrap JS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="envmon-header">
<div class="row">
<div class="col-md-1" id="logo">
<img src="/environment/resources/dev/img/flight.jpg">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6" id="headertitle">
<!-- <h1>Environment Monitoring</h1> -->
<h1>Environment Monitoring</h1>
</div>
</div>
<ul class="nav nav-pills">
<li><h2>Run A REPORT</h2></li>
<li class="dropdown" >
<h2 class="dropdown-toggle" data-toggle="dropdown">CONFIGURATION <b class="caret"></b></h2>
<ul class="dropdown-menu1" role="menu">
<li>Component Search</li>
<li>Component Group Search</li>
<li>Time Period Search</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="envmon-body" >
<div id="angularTestPage" class="theme-showcase row" ng-controller="RunDetailsPageController">
<!-- Error container. This should be populate with right error message on execution. -->
<div ng-cloak class="row">
<div ng-cloak class="alert-danger" ng-repeat="error in headerErrors">
{{error.message}}
</div>
<div ng-cloak class="alert-warning" ng-repeat="warning in headerWarnings">
{{warning.message}}
</div>
<div ng-cloak class="alert-info" ng-repeat="info in headerInfos">
{{info.message}}
</div>
<div ng-cloak class="global-error alert alert-success header-errors" ng-repeat="success in headerSuccesses">
{{success.message}}
</div>
</div>
<!-- vvvvvvvvvvvvvvvvvvvvvvv Actual Content Start Here vvvvvvvvvvvvvvvvvvvvvvv -->
<div id="content-title" class="row">
<div class="col-md-6 pageTitle align-left">Test Run Details</div>
<div class="col-md-6" >
<input type="submit" ng-click="exportButtonClicked()" id="btnExport" class="styled-button pull-right" value="EXPORT" />
</div>
</div>
<div id="run-detailsid" class="row">
<div id="" name="" class="row table-header-row" >
<div class="col-md-1">Component</div>
<div class="col-md-1">Status</div>
<div class="col-md-4">Test Name</div>
<div class="col-md-2">Service</div>
<div class="col-md-2">Operation</div>
<div class="col-md-2">Created Date</div>
</div>
<div id="" name="" class="row table-detail-row-wrap" ng-repeat="runDetail in runDetails">
<div class="col-md-1 table-cell centered">{{runDetail.componentName}}</div>
<div class="col-md-1 table-cell centered">
<div ng-show="runDetail.testLogId != ''">
<a href="" ng-click="runSelectedTestId(runDetail.testLogId);">
<img ng-src="{{runDetail.status == 2 ? redCircleImageLocation : greenCircleImageLocation}}" border="0" >
</a>
</div>
</div>
<div class="col-md-4 ">{{runDetail.testName}}</div>
<div class="col-md-2 ">{{runDetail.service}}</div>
<div class="col-md-2 ">{{runDetail.operation}}</div>
<div class="col-md-2 ">{{runDetail.createdDate}}</div>
</div>
</div>
<div> </div>
<div class="col-md-12 centered">runId = {{runDetails[0].runId}} </div>
</div>
<script type="text/javascript" src="/environment/resources/js/controllers/rundetails.js"></script>
</div>
<div id="envmon-footer">
<div class="row">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
When I put my textarea which I want to be the wysihtml5-editor i get the following error message:
Uncaught TypeError: Cannot read property 'document' of null at wysihtml5-0.3.0.js:5460
Here's the html-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<title>TTZ - Fragebogen erstellen</title>
<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery.steps.css?1">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Html5 Editor -->
<link href="js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="css/questionForm.css" rel="stylesheet">
</head>
<body>
<section class="panel">
<header class="panel-heading">
Fragebogen Erstellen
</header>
<div class="panel-body">
<div id="wizard">
<!-- Step 1 start -->
<h2>Eigentschaften</h2>
<section>
<form class="form-horizontal" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="col-lg-2 control-label">Titel</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Beschreibung</label>
<div class="col-lg-10">
<textarea class="htmlEdit form-control" cols="60" rows="8"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Bild zum Fragebogen:</label>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" />
</span>
<i class="fa fa-trash"></i> Remove
</div>
</div>
</div>
</div>
</form>
</section>
<!-- Step 1 end -->
<!-- Step 2 start -->
<h2>Fragen hinzufügen</h2>
<section>
Some content here
</section>
<!-- Step 2 end -->
<!-- Step 3 start -->
<h2>Abschlusstext konfigurieren</h2>
<section>
Some content here
</section>
<!-- Step 3 endt -->
<h2>Abschluss</h2>
<section>
Some content here
</section>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
</section>
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"> </script>
<script src="js/jquery.scrollTo.min.js"></script>>
<script src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery-steps/jquery.steps.js"></script>
<!-- HTML5 Editor -->
<script src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<!-- Our main JS file -->
<script src="js/mini-upload-form/assets/js/script.js"></script>
<script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"> </script>
<script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade"
});
$('.htmlEdit').wysihtml5();
});
</script>
</body>
</html>
When i move my textarea out of my jquery steps div it works perfectly fine... But I need to have a wysihtml5 inside of my steps. Any ideas?
Edit: Here's the code which seems to have a problem:
// Create the basic dom tree including proper DOCTYPE and charset
iframeDocument.open("text/html", "replace");
iframeDocument.write(sandboxHtml);
iframeDocument.close();
this.getWindow = function() { return iframe.contentWindow; };
this.getDocument = function() { console.log(iframe); return iframe.contentWindow.document; };
I already watched at the iframe at that point and it's null. I just don't know why and I am just not capable to understand the whole 10000 lines of code ;)
I am using Intel XDK for Mobile UI Design and I have inserted a header which contains pictures and text. However i am unable to add anything in the body. I try to drag different components into the body but nothing happens. Seems that i can only add anything into the header. Here is my code: The content inside the<h4> does not appear on the screen. (this is in <!-- /upage-content -->)
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.min.js"></script>
<script src="cordova.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="modal/js/modal.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body class="body">
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage">
<div class="upage-outer">
<div class="uib-header header-bg container-group inner-element uib_w_1 uib-header-fixed" data-uib="layout/header" data-ver="0" id="header">
<img class="header_image" src="images/hku_logo.png">
<div class="header_text">
HKU Mobile
</div>
<div class="widget-container content-area horiz-area wrapping-col right">
<a class="uib-graphic-button default-graphic-sizing hover-graphic-button default-graphic-button widget uib_w_2 d-margins" data-uib="media/graphic_button" data-ver="0" id="login_lock">
<img src="images/Login_lock.png">
<span class="uib-caption"></span>
</a>
</div>
</div>
<!-- /upage-content -->
<h4> sdsajidojasid</h4>
</div>
<!-- /upage-outer -->
<!-- popup Portal Login box -->
<div class="modal outer-element uib_w_4 Portal_popup" data-uib="twitter%20bootstrap/modal" data-ver="0" id="Portal_popup" data-backdrop="false" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Login to HKU Portal</h4>
</div>
<div class="modal-body">
<div class="col uib_col_1 single-col" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="table-thing widget uib_w_5 popup_text1" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal ID</label>
<input class="wide-control form-control input-sm" type="text" placeholder="Enter your HKU Portal UID" id="portal_id">
</div>
<br>
<div class="table-thing widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal PIN</label>
<input class="wide-control form-control input-sm" type="password" placeholder="Enter your HKU Portal PIN" id="portal_pin">
</div>
<br>
<br>
<button type="button" class="btn widget uib_w_7 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="0"><i class="glyphicon button-icon-left" data-position="left"></i>Log in</button>
<span class="uib_shim"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
</html>
This was missing from my code:
<div class="upage-content" id="mainsub"> when the header <div> closes