in jscrollpane, scrolling is not working - javascript

Objective:: want to make a registration pop page with vertical scroll bar by using jScrollPane.
Issue:: vertical scrollbar is not moving
HTML code::
<div id="register" class="wpml-content jspScrollable" >
<div class="jspContainer" style="width: 100%; height: 370px;">
<div class="jspPane">
<form action="register" method="post" id="form" class="group" name="loginform" >
<!-- code for registration-->
</form>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 200px;">
<div class="jspDrag" style="height: 77px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
JS code::
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/mwheelIntent.js"></script>
jQuery(document).ready(function(){
$('#register').jScrollPane();
});
CSS code::
.jspVerticalBar {
width: 8px;
background-color: #ededed;
}
.jspTrack {
width: 8px;
background-color: #ededed;
}
.jspDrag {
width: 8px;
background-color: #ccc;
}
I checked http://jscrollpane.kelvinluck.com/basic.html as I am new to jScrollPane but not getting where am I missing code.

Related

I am unable to generate (or print) the data retrieved from the data base in PDF using JSPDF

i am new to Javascript and i am unable to print the data which is retrived from the database.
Here the concept is when i upload a file, i should get the data to be displayed in the browser and i want to print the retrieved data in PDF. i could able to retrieve that data when i am generating with .xlxs format but for PDF format i couldnt.
html,
body {
height: 100%;
width: 100%;
}
#mainWindow {
height: 100%;
width: 100%;
}
.width-100 {
width: 100% !important;
}
#map {
font-family: sans-serif;
height: calc(100% - 90px);
width: 100%;
border-top: 1px solid grey;
}
html,
body {
margin: 0;
padding: 0;
}
.disp-inline {
display: inline-block;
margin: 5px;
}
.dijitBorderContainer-child {
left: 0 !important;
}
.dojoxGrid {
width: 100% !important;
}
/* (A) FULL SCREEN WRAPPER */
#spinner {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.2s;
}
/* (B) CENTER LOADING SPINNER */
#spinner img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
/* (C) SHOW & HIDE */
#spinner {
visibility: hidden;
opacity: 0;
}
#spinner.show {
visibility: visible;
opacity: 1;
}
.dojoxGridArrowButtonChar {
display: inline-block !important;
}
.dojoxGridColCaption {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>DATA VALIDATION</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.39/"></script>
<!-- <script src="jspdf.debug.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body class="tundra">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:'false'">
<div class="width-100" id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"
style="height:58px;text-align:left;font-weight:bold;font-size:14px;color:#400D12; height: 95px;">
<div class="row" style="margin: 0;">
<div class="col-sm-1">
<img src="logo.png" style="width: 250px; margin: 4px;" />
</div>
<div class="col-sm-11" style="text-align: center;">
<h3>DMT DATA VALIDATION</h3>
</div>
</div>
</div>
<div class="width-100" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="spinner">
<img src="loader.gif" style="height: 50px;" />
</div>
<div data-dojo-type="dijit/layout/ContentPane" style="height: 80px;">
<div class="row" style="margin: 0; border-bottom: 1px solid grey;">
<div class="col-sm-5">
<div class="disp-inline">
<label style="display: inline-block;margin-left: 5px;" for="selectTemplate">Select
Template</label>
<select id="selectTemplate"
style="width: 325px; padding: 5px; margin: 5px; display: inline-block;">
<option value="AddressingData">Addressing Data</option>
<option value="HardLandscaping">Hard Landscaping</option>
<option value="IrrigationFacilities">Irrigation Facilities</option>
<option value="ParkingFacilities">Parking Facilities</option>
<option value="PedestrianAndCycling">Pedestrian And Cycling</option>
<option value="PublicTransportFacilities">Public Transport Facilities</option>
<option value="RoadAuxiliaryFeatures">Road Auxiliary Features</option>
<option value="RoadNavigation">Road Navigation</option>
<option value="RoadStructuresAndFurniture">Road Structures And Furniture</option>
<option value="SignsAndSignPoles">Signs And Sign Poles</option>
<option value="SoftLandscaping">Soft Landscaping</option>
<option value="StormwaterFacilities">Storm water Facilities</option>
<option value="StreetlightingFacilities">Street lighting Facilities</option>
<option value="StreetlightingPowerAndControlSystem">Street lighting Power And Control
System
</option>
<option value="TrafficControl">Traffic Control</option>
</select>
</div>
</div>
<div class="col-sm-5">
<div class="disp-inline" style="margin-top: 14px;">
<form encType="multipart/form-data" method="post" id="gdbzipUploadForm">
<div className="field">
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'>Upload GDB
</label>
<input style="display: inline-block;width: 325px;" type="file" name="file"
id="UploadzipFile" accept='.zip' />
</div>
</form>
<!-- <div>
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'> Html to PDF
</label>
<button onclick="javascript:createPdf()" id="cmd">Generate PDF</button>
</div> -->
</div>
</div>
<div class="col-sm-2">
<div style="display: inline-block; margin-top: 14px;">
<a style="cursor: pointer; display: none;" href="#" id="downloadreflink">
<i class="glyphicon glyphicon-download"></i>
Download Report
</a>
</div>
<div style="display: inline-block; margin-top: 14px;">
<a onclick="javascript:createPdf()" style="cursor: pointer; display: none;" href="#" id="generatePdf">
<i class="glyphicon glyphicon-download"></i>
Generate PDF Report
</a>
</div>
</div>
</div>
</div>
<div id="gridDiv" data-dojo-type="dijit/layout/ContentPane">
</div>
</div>
<div class="width-100" id="bottomdiv" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'bottom'" style="height: 50px;">
<label id="errorlabel" style="display: none; color: red;"></label>
</div>
</div>
</body>
</html>

How to make image sliders to come down and form a table?

I did a swiper slideshow that swipes images automatically and it is working very well. but now I would like to make all the images with the information written below it to go down after doing the slideshow and appear in the form of a table. Below is my source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/swiper.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<script type ="text/javascript" src="../js/swiper.min.js"></script>
<style type="text/css">
body
{
background: black;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
background: white;
}
.swiper-slide .imgBx{
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-slide .imgBx img{
width: 100%;
}
.swiper-slide .details{
box-sizing: border-box;
font-size: 20px;
padding: 20px;
}
.swiper-slide .imgBx h3{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .imgBx h3 span{
font-size: 16px;
color: red;
}
</style>
</head>
<body style="background: grey ;">
<div class="row" >
<div class="col-md-3 input-group input-group-sm" style="margin-left: 70%; margin-top: 10px;">
<input type="number" name="numb" class=" form-control col-sm" placeholder=" Mentors" >
<button type="submit" class="btn btn-dark acc_active">Ment</button>
</div>
</div>
<div class="row" style="margin-left: 350px; margin-top: 250px;" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-12 container d-flex">
<div class="box-1">
<div class="ping">
</div>
</div>
<div>
<a href="table.php>"> <button id="btn-go" style="width: 100px; margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
Shuffle
</button></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="box-1">
<div class="ping">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 60,
stretch: 15,
depth: 190,
modifier: 3,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
<?php
include "header.php";
?>
<?php
include "footer.php"
?>

position : fixed in Materialize css modal not working

I want the header of the Modal to be fixed as the modal is scrolled, but position:fixed; is not working. I am using Materialize CSS for the modal construction. But position:sticky is working.
$(document).ready(()=>{
$('#missionModal').modal();
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="">
<div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">
</div>
<div style="margin-top:100px;height:550px">
<p>This ois naven don</p>
</div>
</div>
<div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>
Maybe try this one. I reconstructed your HTML and CSS code:
Just identify which is your header and give a fixed height on your modal body to be scrollable. And, materialize css has a default overflow-y: auto I just give it initial so that the whole modal will be not scrollable.
Please take a look at my code:
$(document).ready(()=>{
$('#missionModal').modal();
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.modal {
overflow: initial !important;
}
.modal-header {
height: 100px;
background: #0a2701;
font-size: 40px;
padding: 20px;
color: #ffffff;
}
.modal-body {
overflow-y: auto;
height: 120px;
background: #fff;
}
.modal-body div {
height:550px
}
.modal-close {
float: right;
display: inline-block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
<div class="modal-header">This is a header.</div>
<div class="modal-body">
<div>
<p>This ois naven don</p>
</div>
Agree
</div>
</div>
<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
<i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

Position two divs in a jQuery UI tabs properly?

I am a noob CSS programmer and I need a little help. Here are two screenshots:
and
I need to position the tree and the TinyMCE editor which exist in divs properly in the tab area. AS you can see the bottom tab border is very high instead of below the tree and the editor.
Here is my HTML code:
#{
ViewBag.Title = "Demo";
}
<link href="../../Plugins/jqueryui/css/jquery-ui.css" rel="stylesheet"/>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/jstree/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/skin.min.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/content.min.css" rel="stylesheet" type="text/css" />
<h2>Demo</h2>
<fieldset>
<legend>Select a language: </legend>
<label for="mk-MK">MK</label>
<input type="radio" name="langid" value="mk-MK" id="mk-MK" checked>
<label for="en-US">EN</label>
<input type="radio" name="langid" value="en-US" id="en-US">
<br/>
<br/>
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">First</a></li>
<li><a id="t2" href="#tabs-2">Second</a></li>
<li><a id="t3" href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
<br />
<input type="text" id="clFreqText"/>
<br />
<br />
<select name="clPeriodSelect" id="clPeriodSelect">
</select>
<br />
<br />
<select name="clYearSelect" id="clYearSelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
<div id="tabs-3">
</div>
</div>
<p>
<input type="button" value="Next" id="nextBtn" />
<input type="button" value="Previous" id="prevBtn" />
</p>
<p id="statusMsg"></p>
<p id="errorsMsg"></p>
</fieldset>
<script src="../../Plugins/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../Plugins/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Plugins/jstree/jstree.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/theme.min.js" type="text/javascript"></script>
<!-- other scripts -->
And style.css contains:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
border: 1px solid Grey;
padding: 10px 10px;
overflow: auto;
float: left;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
.editorBlock
{
overflow: auto;
float: right;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
Can somebody tell me why the jquery ui tabs are not of the proper size?
Note: I am coding with MVC 4/C# and Razor, so the file extension is "cshtml" fro my View
Here is what happens when I change the width to 50%, 50%.
The "Next" and "Previous" buttons should be below.
In tabs-2's css rules add the following rule:
overflow:auto
This will fix the height rendering issue due to the floated children divs.
Try a table with width:100% and the columns repsectively 40%,20%,40%.
i changed my html a bit:
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">Info</a></li>
<li><a id="t2" href="#tabs-2">Content</a></li>
<li><a id="t3" href="#tabs-3">Summary</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<input type="text" value="" id="editorTitleTxt" disabled="disabled"/>
<div class="editor">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
</div>
<div id="tabs-3">
<textarea rows="10" cols="10" id="summaryText" disabled="disabled">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
And my CSS:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
overflow: auto;
height: 500px;
width: 38%;
float: left;
border: 1px solid Grey;
margin: 5px;
}
.editorBlock
{
overflow: auto;
height: 500px;
width: 60%;
margin: 5px;
}
#editorTitleTxt
{
width: 98%;
font-weight:bold;
}
It looks like this:

Animate Scroll JS function error

I have two versions of a single page site that scroll using JS .animate function. One site will not scroll and the other site does. I can not find the error in my code on the "broken" site.
Any help would be greatly appreciated.
Other "helpful" comments welcome as well.
Thank You in Advance.
Working Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius:6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color:black;
color: hsl(240, 0%, 30%);
}
#productSect {
/*Place Holder*/
background-color: bisque;
}
#servicesSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}
#portfolioSect {
/*Place Holder*/
background-color: bisque;
}
#contactSect {
background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}
html, body {
height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="product" href="#productSect">PRODUCT</a>
<a id="services" href="#servicesSect">SERVICES</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container">
<div class="jumbotron">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="productSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="servicesSect"></div>
<div class="subsection" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
Broken Site
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav a").click(function(tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
//alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: black;
background-color: hsla(0, 0%, 0%, 0.50);
/* Set nav bar on top of all elements */
z-index: 99;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subsection {
height: 100%;
background-color: bisque;
}
.navSpace {
margin-top: 90px;
margin-left: 0;
height: 100%;
border-radius: 6px;
}
#homeSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
color: black;
color: hsl(240, 0%, 30%);
}
#aboutSect {
/*Place Holder*/
background-color: bisque;
}
#portfolioSect {
/*Place Holder*/
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frank Promo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/JavaScript.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
<!--style="margin:0 5px";-->
<nav>
<a id="home" href="#homeSect">HOME</a>
<a id="about" href="#aboutSect">ABOUT</a>
<a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
<a id="contact" href="#contactSect">CONTACT</a>
</nav>
<div class="sect" id="homeSect">
<div class="container-fluid">
<div class="jumbotron navSpace">
<div class="row text-center">
<div class="col-xs-12">
<h1>Frank's Promo Page</h1>
</div>
</div>
<p class="text-center">This is where I want to talk about my company and why we are great.</p>
</div>
</div>
</div>
<div class="subsection" id="aboutSect">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Data Analyses</h2>
<h4 class="lead">
Find the answers to complex questions hidden inside your own proprietary data
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Front End Web Design</h2>
<h4 class="lead">
Build a professional clean design for your company<br />
Maintain and refine your current website.
</h4>
</div>
</div>
<div class="col-md-4 navSpace">
<div class="col-md-12 well">
<h2>Visual Basic for Applications Programming</h2>
<h4 class="lead">
Design and maintian custom built applicaton for:<br />
Word, Excel, Access, Outlook, Power Point, etc.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="sect" id="portfolioSect"></div>
<div class="sect" id="contactSect"></div>
</body>
</html>

Categories