<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>BackgroundChange_bootstrapV2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li>
<a id="pg1_nav" href="#"><i class="fa fa-home"></i>Home</a>
</li>
<li>
<a id="pg2_nav" href="#"><i class="fa fa-phone"></i>Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a id="background-random" href="#">
<i class="fa fa-refresh"></i>
Random Background
</a>
</li>
<li>
<a id="background-reset" href="#">Reset</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container" id="content_body">
<div class="container" id="pg1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">First panel title</h3>
</div>
<div class="panel-body">
First panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Second panel title</h3>
</div>
<div class="panel-body">
Second panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Third panel title</h3>
</div>
<div class="panel-body">
Third panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Fourth panel title</h3>
</div>
<div class="panel-body">
Fourth panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Fifth panel title</h3>
</div>
<div class="panel-body">
Fifth panel content
</div>
</div>
</div>
<div class="container" id="pg2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contact Me</h3>
</div>
<div class="panel-body">
Stuff about how to contact me
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_bootstrapv2-eZWzXV */
body {
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 70px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
}
p, div {
font-family: 'Domine', serif;
}
.fa {
padding-right: 5px;
}
.navbar-brand {
font-weight: 800;
}
#background-random, #background-reset {
color: #777;
}
#background-random:hover, #background-reset:hover {
color: #333;
}
.container {
background-color: rgba(0, 0, 0, 0);
}
/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_bootstrapv2-eZWzXV */
(function () {
'use strict';
// Define Settings
var color1 = 'white';
var color2 = 'grey';
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$( document ).ready(function () {
// This code is suppposed to handle automatically hiding the
// pages (divs) that aren't the active page.
$('div')
.filter(function() {
return this.id.match(/pg[2-9]+[0-9]*/);
})
.addClass('hidden');
var picture = drawGradient(color1, color2, width, height);
drawBackground(picture);
});
function drawGradient(color1, color2, width, height) {
/*
This function draws an gradient of a specified color and size.
Param: color1 - string - The start color for the gradient.
Param: color2 - string - The end color for the gradient.
Param: height - float - The height of the gradient.
Param: width - float - The width of the gradient.
Rtype: Image
Rtype: An image of the gradient created by this function.
*/
// Create the canvas
var cnvs = document.createElement('canvas');
var ctx = cnvs.getContext('2d');
// Define the aspects of the canvas
ctx.canvas.width = width;
ctx.canvas.height = height;
//Draw the gradient
var gradient = ctx.createLinearGradient(
0,
0,
document.documentElement.clientHeight,
document.documentElement.clientWidth);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// save canvas image as data url (png format by default)
var pic_url = cnvs.toDataURL();
var pic = new Image();
pic.onload = function () {
// I'm not sure if this is actually necessary in this case
};
pic.src = pic_url;
return pic;
}
function drawBackground(pic) {
document.body.style.background = "url(" + pic.src + ") no-repeat center center fixed";
}
document.getElementById('background-random').addEventListener(
"click", function () {
color1 = randomColor();
color2 = randomColor();
var picture = drawGradient(color1, color2, width, height);
drawBackground(picture);
});
document.getElementById('background-reset').addEventListener(
"click", function () {
color1 = 'white';
color2 = 'grey';
var picture = drawGradient(color1, color2, width, height);
drawBackground(picture);
});
window.addEventListener(
"resize", function () {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
var picture = drawGradient(color1, color2, width, height);
drawBackground(picture);
});
$('a')
.filter(function() {
return this.id.match(/pg[2-9]+[0-9]*_nav/);
})
.addEventListener(
"click", function () {
alert('hi');
});
}());
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Google Font API
Twitter Bootstrap
jQuery
v1.11.3
![[test] elevateZoom](https://codepen.io/mtrw/pen/ddEJge/image/small.png)
