Skip to content

Instantly share code, notes, and snippets.

@alexbartlow

alexbartlow/bootstrapSite.js

Forked from JschwartzDev/bootstrapSite.js
Created December 22, 2016 06:20
Show Gist options
  • Save alexbartlow/7326b5f098b99dac9dc732f0a76f960d to your computer and use it in GitHub Desktop.
Save alexbartlow/7326b5f098b99dac9dc732f0a76f960d to your computer and use it in GitHub Desktop.
Download ZIP
WebSite HTML
Raw
bootstrapSite.js
function themeChange() {
var currentTheme = document.getElementById("theme-dropdown").value;
var theme1 = document.getElementById("theme-1").value;
var theme2 = document.getElementById("theme-2").value;
var theme3 = document.getElementById("theme-3").value;
var theme4 = document.getElementById("theme-4").value;
var docBody = document.getElementById("body");
var leftPanel = document.getElementById("left-panels");
var mainPanel = document.getElementById("main-panel");
var scrollingPanel = document.getElementById("scrolling-panel");
var jumbotron = document.getElementById("jumbotron");
if(currentTheme == theme1){
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
links[i].style.color = "#42bcf4";
}
docBody.style.backgroundColor = "gray";
leftPanel.style.backgroundColor = "lightgray";
mainPanel.style.backgroundColor = "white";
scrollingPanel.style.backgroundColor = "white";
jumbotron.style.backgroundColor = "lightgray";
} else if(currentTheme == theme2){
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
links[i].style.color = "white";
}
docBody.style.backgroundColor = "#6D7993";
leftPanel.style.backgroundColor = "#96858F";
mainPanel.style.backgroundColor = "#96858F";
scrollingPanel.style.backgroundColor = "#9099A2";
jumbotron.style.backgroundColor = "#9099A2";
} else if(currentTheme == theme3) {
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
links[i].style.color = "#f45f42";
}
docBody.style.backgroundColor = "#E7DFDD";
leftPanel.style.backgroundColor = "#C0b283";
mainPanel.style.backgroundColor = "#C0b283";
scrollingPanel.style.backgroundColor = "#DCD0C0";
jumbotron.style.backgroundColor = "#DCD0C0";
} else if(currentTheme == theme4) {
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
links[i].style.color = "#b342f4";
}
docBody.style.backgroundColor = "white";
leftPanel.style.backgroundColor = "lightgray";
mainPanel.style.backgroundColor = "lightgray";
scrollingPanel.style.backgroundColor = "lightgray";
jumbotron.style.backgroundColor = "lightgray";
} else {
docBody.style.backgroundColor = "gray";
}
}
//jQuery.... hopefully
function shake() {
var body = $("#body");
var newBody = $("#body").clone();
var $body = $(newBody);
body.remove();
$body.appendTo("#html");
$body.addClass("animated shake");
}
Raw
canvasTest.html
<!DOCTYPE html>
<html id = "html">
<head>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel = "stylesheet" href = "newWebsiteCSS.css" type = "text/css">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body id = "body">
<!-- navbar code -->
<nav class = "navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">WebsiteName</a>
</div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">Page 1</a></li>
<li><a href = "#">Page 2</a></li>
<li><a href = "#">Page 3</a></li>
<li><div class = "dropdown-container">
<div class = "theme-dropdown">
<select id = "theme-dropdown" onchange = "themeChange()">
<option value = "theme-1" id = "theme-1">Main theme</option>
<option value = "theme-2" id = "theme-2">Midnight</option>
<option value = "theme-3" id = "theme-3">Canyon</option>
<option value = "theme-4" id = "theme-4">White & black</option>
</select>
</div>
</div>
</li>
</ul>
</div>
</nav>
<!-- jumbotron and images -->
<div class = "container-fluid">
<div class = "jumbotron" id = "jumbotron">
<img id = "title-img" src = "https://www.planet-source-code.com/vb/2010Redesign/images/LangugeHomePages/HTML5_CSS_JavaScript.png">
<span id = "jumbotron-text">AND</span><img id = "bootstrap-img" src = "http://legitgraphicdesign.com/wp-content/uploads/2015/09/bootstrap-logo.png"><span>!!!!!</span>
</div>
</div>
<!-- left panel -->
<div id = "top-left-panel" class = "website-suggestions">
<div class = "panel panel-default" id = "left-panels">
<div class = "panel-body">
<div id = "left-panel-list">
<span>Here is a list of some great sites to help you learn computer programming.</span>
<ul class = "website-suggestions">
<li><a href = "https://www.khanacademy.org/" target = "_blank">Khanacademy.org</a></li>
<li><a href = "https://www.freecodecamp.com/" target = "_blank">Freecodecamp.com</a></li>
<li><a href = "https://www.youtube.com/" target = "_blank">Youtube.com</a></li>
</ul>
<span>On all of these websites you can find great programming classes and tutorials.
</span>
</div>
</div>
</div>
</div>
<!-- main body -->
<div class = "container-fluid main-body">
<div class = "panel panel-default" id = "main-panel">
<div class = "panel-body main-panel-body">
<div id = "main-header">
<h1 class = "header">Some Info on HTML:</h1><br>
<p>HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language. HTML describes the structure of Web pages using markup.
HTML elements are the building blocks of HTML pages.
HTML elements are represented by tags. For a complete overview on most, if not all of the HTML tags
you can visit <a href = "http://www.w3schools.com/tags/" target = "_blank">w3schools.com/tags/</a>.</p><br>
<div class = "container tags-table">
<h2 id = "basic-tags-and-functions" class = "header">Basic tags and functions:</h2>
<table class = "tags-table table table-striped" id = "tags-table">
<thead>
<tr>
<th>Element</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>Defines a hyperlink</td>
</tr>
<tr>
<td>button</td>
<td>Defines a clickable button</td>
</tr>
<tr>
<td>div</td>
<td>Defines a section in a document</td>
</tr>
<tr>
<td>h1-h6</td>
<td>Defines HTML headings</td>
</tr>
<tr>
<td>img</td>
<td>Defines an image</td>
</tr>
<tr>
<td>input</td>
<td>Defines an input control</td>
</tr>
<tr>
<td>label</td>
<td>Defines a label for an input element</td>
</tr>
<tr>
<td>link</td>
<td>Defines the relationship between a document and an external resource (mostly used to link to style sheets)</td>
</tr>
<tr>
<td>ol</td>
<td>Defines an ordered list</td>
</tr>
<tr>
<td>p</td>
<td>Defines a paragraph</td>
</tr>
<tr>
<td>script</td>
<td>Defines a client-side script</td>
</tr>
<tr>
<td>span</td>
<td>Defines a section in a document</td>
</tr>
<tr>
<td>strong</td>
<td>Defines important text</td>
</tr>
<tr>
<td>ul</td>
<td>Defines an unordered list</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- examples of basic tags -->
<div class = "container-fluid">
<div class = "large-well">
<div id = "examples-of-basic-tags">
<h1 id = "examples-of-basic-tags" class = "header">Examples of basic tags:</h1>
<p>In this section, any words in bold, would go between a < and a >. Also, these tags are not "self closing" tags, so they require a < and a > with a / between them to enclose the content you wish to be a part of that element.
Please keep this in mind while you're reading.</p>
<div class = "examples-of-basic-tags">
<p>When you are first starting your HTML document, there will be a few basic tags you might want to start with
to give your HTML document some structure. Some simple structuring tags are tags such as the <strong>html</strong>, <strong>head</strong>, <strong>style</strong> and
<strong>body</strong> tags. All content of the HTML file should go between the html tags. That being said, any content you wish to be displayed
to the user should go between your <strong>body</strong> tags. Inside of the <strong>html</strong> opening and closing tags should be the <strong>head</strong> opening and closing
tags. A key tag that goes inside of the <strong>head</strong> tags, which are inside of the <strong>html</strong> tags, are the <strong>style</strong> tags.
The <strong>style</strong> tags allow you to apply CSS directly to your html document. I will discuss CSS in a later segment, for now just understand that you can place your CSS stylings
in between the opening and closing <strong>style</strong> tags of your html document. Keep in mind that the <strong>style</strong>
tags go inside of the opening and closing <strong>head</strong> tags which are ultimately inside of the <strong>html</strong>
tags.</p>
<p>The example HTML file to the right of the above paragraphs shows the tags that would be used, where to place them, and explains
what content should go inside of each tag. From here we can start to look at more specific information about HTML. The following paragraphs will mostly be
giving examples of tags and there uses within the <strong>body</strong> tag of the HTML file. Also, from here on out I will be calling html tags, Elements, being as I feel that
viewing each tag as an element and not just as a set of tags will help you better visualize the document and all of the elements
that go into that document.</p>
<!-- example sheet on right -->
<div class = "example-html">
<p><strong id = "html-tag">html</strong><br>
<span class = "explanation">Contains all information about the HTML file.</span><br>
<strong id = "head-tag">head</strong><br>
<span class = "explanation">The title for the document, scripts, styles, meta information, and more.</span><br>
<strong id = "style-tag">style</strong><br>
<span class = "explanation">Any CSS stylings go between these <strong>style</strong> tags.</span><br>
<strong id = "style-tag">/style</strong><br>
<strong id = "head-tag">/head</strong><br>
<strong id = "body-tag">body</strong><br>
<span class = "explanation">Any content you wish to make visible to the user.</span><br>
<strong id = "header-tag">h1</strong><span class = "explanation">WebSite Header</span><strong id = "header-tag">/h1</strong><br>
<strong id = "div-tag">div</strong><br>
<span class = "explanation">A container for a body of content to be displayed in the body.</span><br>
<strong id = "div-tag">/div</strong><br>
<strong id = "body-tag">/body</strong><br>
<strong id = "html-tag">/html</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "container-fluid" id = "index-panel">
<div class = "panel panel-default index" id = "scrolling-panel">
<div class = "panel-body left-scroller">
<span class = "index-header">Index</span><span id = "index-header">:</span><br>
<ul id = "index-ul">
<li><a href = "#body">Home</a></li>
<li><a href = "#main-header">HTML</a></li>
<ul class = "index-list">
<li><a href = "#basic-tags-and-functions">Basic tags and functions</a></li>
<li><a href = "#examples-of-basic-tags">Examples of basic tags</a></li>
<li><a href = "#">Web pages for getting started</a></li>
<li><a href = "#">Advanced tags</a></li>
<li><a href = "#">Advanced tags examples</a></li>
</ul>
<li><a href = "#">CSS</a></li>
<ul class = "index-list">
<li><a href = "#">Basic info</a></li>
<li><a href = "#">Purpose and possibilities</a></li>
<li><a href = "#">CSS selectors</a></li>
<li><a href = "#">Examples of basic styling</a></li>
</ul>
<li><a href = "#">Javascript</a></li>
<ul class = "index-list">
<li><a href = "#">Basic info</a></li>
<li><a href = "#">Basic syntax</a></li>
<li><a href = "#">Variables</a></li>
<li><a href = "#">Functions</a></li>
<li><a href = "#">Manipulating HTML with JS</a></li>
<li><a href = "#">Manipulating CSS with JS</a></li>
<li><a href = "#">Importance of JS</a></li>
</ul>
</ul>
</div>
</div>
</div>
<div class = "button-container">
<div class = "buttons">
<button id = "jumbotron-shake" type = "button" class = "btn btn-primary" onclick = "shake()">Shake!</button><br>
</div>
</div>
</body>
<script src = "bootstrapSite.js" type = "text/javascript">
</script>
</html>
Raw
newWebsiteCSS.css
navbar {
position: fixed;
}
.link {
color: #42bcf4;
}
.dropdown-container {
position: absolute;
left: 910px;
padding: 15px;
}
body {
background-color: gray;
}
.jumbotron {
position: absolute;
left: 325px;
background-color: lightgray;
font-family: sans-serif;
font-size: 65px;
width: 1150px;
height: 200px;
border: 2px solid black;
padding: 2px;
}
#jumbotron-shake {
position: absolute;
right: 25px;
top: 73px;
}
#jumbotron-text {
padding-left: 40px;
padding-right: 25px;
text-decoration: underline;
}
.header {
text-decoration: underline;
}
#title-img {
width: 350px;
height: auto;
}
#bootstrap-img {
width: 350px;
height: auto;
}
#left-panel-list {
padding-left: 10px;
}
#left-panels {
position: absolute;
left: -30px;
top: 200px;
margin-left: 18px;
width: 300px;
overflow: auto;
border: 2px solid black;
background-color: lightgray;
color: black;
}
ul.website-suggestions {
margin-bottom: 6px;
}
#top-left-panel {
position: relative;
bottom: 200px;
left: 30px;
}
#tags-table {
width: 600px;
border: 2px solid gray;
}
tr {
border: 1px solid black;
}
td {
border: 1px solid black;
}
th {
background-color: #ccffff;
}
div.main-body {
position: absolute;
left: 310px;
top: 290px;
width: 1180px;
}
#main-panel {
border: 2px solid black;
}
div.tags-table {
}
div.left-scroller {
padding: 5px;
}
#index-panel {
position: fixed;
left: 15px;
top: 290px;
padding: 0;
width: 303px;
}
.index {
border: 2px solid black;
}
.index-header {
font-size: 24px;
text-decoration: underline;
}
#index-header {
font-size: 25px;
}
#index-ul {
padding-top: 0px;
}
.index-list {
padding-bottom: 6px;
}
#examples-of-basic-tags {
width: 550px;
padding-left: 10px;
}
.example-html {
position: absolute;
right: 70px;
top: 940px;
}
#html-tag {
color: black;
}
#head-tag {
color: purple;
}
#style-tag {
color: blue;
}
#body-tag {
color: green;
}
#header-tag {
color: red;
}
#div-tag {
color: brown;
}
.explanation {
font-weight: bold;
}
.image-scroll {
width: 400px;
height: 400px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment