Skip to content

Instantly share code, notes, and snippets.

@ScorpIan555

ScorpIan555/calc.html

Created October 16, 2016 21:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ScorpIan555/1341f5970d3d8d90bc21b5f0521eb330 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ScorpIan555/1341f5970d3d8d90bc21b5f0521eb330 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calc.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Title-->
<title>ZF Calc</title>
<!--meta tags-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="calc_styles.css">
</head><!--head-->
<body>
<div id="boink">.</div>
<!-- *************** -->
<!-- *************** -->
<!-- *************** #calc ***************-->
<!--calc page-->
<div id="calculator">
<div id="screen">
<div id="ramrod"></div>
</div><!--screen-->
<div id="numbers-operators">
<a class="calc-button operators">(</a>
<a class="calc-button operators">)</a>
<a class="calc-button operators">%</a>
<a class="calc-button operators">CE</a>
<a class="calc-button numbers">7</a>
<a class="calc-button numbers">8</a>
<a class="calc-button numbers">9</a>
<a class="calc-button operators">/</a>
<a class="calc-button numbers">4</a>
<a class="calc-button numbers">5</a>
<a class="calc-button numbers">6</a>
<a class="calc-button operators">*</a>
<a class="calc-button numbers">1</a>
<a class="calc-button numbers">2</a>
<a class="calc-button numbers">3</a>
<a class="calc-button operators">+</a>
<a class="calc-button numbers">0</a>
<a class="calc-button operators">.</a>
<a class="calc-button operators">-</a>
<a class="calc-button operators" id="equals">=</a>
<a class="calc-button" id="clear">C</a>
<a class="calc-button" id="clearall">AC</a>
</div><!--numbers-->
</div><!--calc-->
<div id="sandbox">
<p>content</p>
<span id="spam"></span>
</div><!--sandbox-->
<!--<div id="sandbox2"> *********
<p>doubly content</p>
<span id="spam2"></span>
</div><!--/sandbox2-->
<div id="clipboard">
<p>My Clipboard</p>
<a href="../index.html">Back To Index?</a>
<a href="../carousel.html">Carousel</a>
<br>
<div><span id="clippings"></span></div>
</div><!--/clipboard-->
<div id="clipboard-left">
<p>Still a work-in-progress</p>
<span id="clippings-left"></span>
<p>scroll into top left</p>
</div><!--/clipboard-left-->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Custom scripts for this template go here -->
<script src="calc_scripts.js"></script>
</body>
Raw
calc_scripts.js
//*****************************calculadora********
//document.ready
$(document).ready(function(){
//define test numberLength
var testNumLength = function(number) {
if (number.length > 9) {
totaldiv.text(number.substr(number.length-9,9));
if (number.length > 15) {
number = "";
totaldiv.text("Err");
}// close if(number.length) - Err
} // close if(number.length)
}; // close testNumLength
//define document variables
var number = "";//********define variable w/ empty string
var newnumber = "";
var operator = "";
var totaldiv = $("#ramrod");//********function for screen output
totaldiv.text("0");
//listeners
//number listener
$("#numbers-operators a").not("#clear,#clearall").click(function(){
number += $(this).text();
totaldiv.text(number);
testNumLength(number);
});
//operator listener
$(".operators").not("#equals").click(function(){
operator = $(this).text();
newnumber = number;
number = "";
totaldiv.text("0");
});
//clear&clear-all listener
$("#clear,#clearall").click(function(){
number = "";
totaldiv.text("0");
if ($(this).attr("id") === "clearall") {
newnumber = "";
}
});
//equals listener
$("#equals").click(function(){
if (operator === "+"){
number = (parseInt(number, 10) + parseInt(newnumber,10)).toString(10);
} else if (operator === "-"){
number = (parseInt(newnumber, 10) - parseInt(number,10)).toString(10);
} else if (operator === "/"){
number = (parseInt(newnumber, 10) / parseInt(number,10)).toString(10);
} else if (operator === "*"){
number = (parseInt(newnumber, 10) * parseInt(number,10)).toString(10);
}
totaldiv.text(number);
testNumLength(number);
number = "";
newnumber = "";
});
//keypress listener
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode === 49) {
$("#one").click();
} else if (keycode === 50) {
$("#two").click();
} else if (keycode === 51) {
$("#three").click();
} else if (keycode === 52) {
$("#four").click();
} else if (keycode === 53) {
$("#five").click();
} else if (keycode === 54) {
$("#six").click();
} else if (keycode === 55) {
$("#seven").click();
} else if (keycode === 56) {
$("#eight").click();
} else if (keycode === 57) {
$("#nine").click();
} else if (keycode === 48) {
$("#zero").click();
} else if (keycode === 97) {
$("#clearall").click();
} else if (keycode === 99) {
$("#clear").click();
} else if (keycode === 61) {
$("#equals").click();
} else if (keycode === 43) {
$("#plus").click();
} else if (keycode === 45) {
$("#minus").click();
} else if (keycode === 42 || keycode === 120) {
$("#multiply").click();
} else if (keycode === 47) {
$("#divide").click();
} //end of 'else if's
}); //keypress function
//when the buttons on the calculadora are pushed the #sandbox appears
$(".calc-button").click(function(){
$("#sandbox").fadeIn(2000);
$("#sandbox").css("background-color", "white").css("display", "inline-block");
});
//mouseover an element triggering action elsewhere on the page
$("#boink").mouseover(function() {
//need to add event here 10/13 8:26am
$("#clippings").text("You changed content!").css("color", "red");
})
//click on element to trigger action at the #clipboard
$("#calculator").on({
click: function() {
$("#clipboard, #clipboard-left").fadeIn(5000);
},
mouseover: function() {
$("#clipboard").fadeIn(1500);
},
});//end .on()
$(".calc-button").on({
click: function() {
$("#clipboard").fadeIn(1500);
},
mouseover: function() {
$("#clipboard").fadeIn(1500);
},
});//end .on()
});//$(document).ready - line 1
//balls
Raw
calc_styles.css
body {
background-color: silver;
}
body, div, a {
padding:0;
margin:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
/********************start: #calculator styles************************************************/
#calculator {
background-color: rgb(230, 230, 255);
width: 410px;
height: 420px;
border: 5px black solid;
margin: 10px auto;
padding: 20px 2px;
margin-bottom: 75px;
margin-top: 50px;
border-radius: 20px;
box-shadow: 35px 40px 50px 30px rgba(255, 40, 0, 0.3);
}
#screen {
height: 70px;
width: 365px;
margin:auto;
background-color:white;
margin-bottom: 15px;
text-align: right;
font-size: 60px;
padding: 0 5px;
box-shadow: 4px 4px 4px 4px rgba(255, 20, 0, 0.3);
border-radius: 10px;
}
#ramrod {
padding-right: 20px;
}
#numbers-operators {
}
#numbers-operators a {
display: block;
width: 70px;
height: 50px;
float: left;
text-decoration: none;
color: black;
text-align: center;
font-size: 32pt;
margin: 5px 15px auto;
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
border-radius: 10px;
z-index:1;
box-shadow: 5px 5px 5px 2px rgba(255, 20, 0, 0.5);
}
#numbers-operators a:hover, #operators a:hover {
color:red;
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#EDEDED));
background: -moz-linear-gradient(top, #DCDCDC, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#EDEDED');
opacity: .5;
font-weight: bold;
}
#numbers-operators a:active, #operators a:active {
color:orange;
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#EDEDED));
background: -moz-linear-gradient(top, #DCDCDC, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#EDEDED');
opacity: 1;
font-weight: bold;
transform: translateY(4px);
}
a#clearall, a#clear {
width: 170px;
color: yellow;
text-shadow: 2px 2px black;
font-weight: bold;
}
#sandbox {
box-shadow:25px 25px 50px 30px rgba(255, 20, 0, 0.3);
margin: 10px auto;
height: 200px;
width: 400px;
background-color: grey;
z-index:1;
display: inline-block;
display: none;
/*#sandbox defaults as a hidden element*/
}
#sandbox2 {
margin: 40px 0 0 0 auto;
height: 200px;
width: 400px;
background-color: maroon;
color: white;
z-index: 1;
display: none;
}
#clipboard {
border: 5px solid black;
margin: 20px 0 0 0 auto;
position: fixed;
top: 25px;
right: 50px;
width: 165px;
height: 250px;
background-color: rgb(230, 230, 255);
color: black;
z-index: 1;
opacity: 1;
box-shadow: 20px 15px 50px 20px rgba(255, 20, 0, 0.3);
border-radius: 10px;
padding: 4px;
opacity: 1;
display: none;
}
#clipboard-left {
border: 5px solid black;
margin: 20px 0 0 0 auto;
position: fixed;
top: 25px;
left: 50px;
width: 165px;
height: 250px;
background-color: rgb(230, 230, 255);
color: black;
z-index: 1;
opacity: 1;
box-shadow: 20px 15px 50px 20px rgba(255, 20, 0, 0.3);
border-radius: 10px;
padding: 4px;
opacity: 1;
display: none;
}
#clippings {
}
#clippings-left {
}
#note1 {
margin-left: 100px;
margin-top: 100px;
}
.one-page {
margin-top: 150px;
}
#intro-to-sp {
margin-right: 100px;
margin-left: 100px;
padding-right: 100px;
padding-left: 100px;
}
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<!--Title-->
<title>ZF Home</title>
<!--meta tags-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ref lesson 2.1 - for social media plug-ins-->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!--bootstrap core css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--custom css styles-->
<link rel="stylesheet" href="css/styles.css">
</head><!--head-->
<!--***start body***-->
<!--***start body***-->
<!--***start body***-->
<body data-spy="scroll" data-target=".navbar">
<div id="contact" data-stellar-background-ratio=".001">
<!--facebook 'like' plugin-->
<!--fb div, ref lesson 2.1-->
<div id="fb-root"></div>
<!--fb 'like' button script, ref lesson 2.1-->
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- *************** -->
<!-- *************** .navbar ***************-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid" id="navbar-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button><!--/button-->
<div class="pfName navbar-brand">
<a href="#">ZF</a>
</div><!--end project name -->
</div> <!--/navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-nav navbar-right">
<li class="list-item active">
<a href="#" title="ZF Home">Home</a>
</li><!--list item-->
<li class="list-item">
<a href="#about" title="About ZF">About</a>
</li><!--list item-->
<li class="list-item">
<a href="#goals" title="Goals">Goals</a>
</li><!--list item-->
<li class="list-item">
<a href="#faq" title="FAQ">FAQ</a>
</li><!--list item-->
<!--nav dropdown menu -- work-->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work
<span class="caret"></span>
</a><!--dropdown-->
<ul class="dropdown-menu" id="work-dropdown">
<li><a href="#contact-page">Contact</a></li>
<li><a href="calc/calc.html">Calculator</a></li>
<li><a href="carousel.html">Carousel</a></li>
</ul><!--dropdown menu-->
</li><!--dropdown-->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Our Partners
<span class="caret"></span>
</a><!--dropdown-->
<ul class="dropdown-menu" id="links-dropdown">
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="http://www.guardian.co.uk" target="_blank">The Guardian</a></li>
<li><a href="http://www.artcyclopedia.com/mostpopular.html" target="_blank">Artcyclopedia</a></li>
<li><a href="http://www.cnn.com" target="_blank">CNN</a></li>
</ul><!--dropdown menu-->
</li><!--dropdown item-->
</ul><!--/navbar-pills-->
</div> <!--/navbar-collapse-->
</div> <!--/nav container-fluid-->
</nav><!--/navbar-->
<!-- *************** -->
<!-- *************** #bojack-row ***************-->
<!-- bojack-row page-->
<div id="work1" class="one-page">
<!--bojack-container-->
<div class="container-fluid one-page" id="bojack-container">
<div class="row" id="bojack-row">
<div class="page-heading">
<h2>Welcome</h2>
</div><br><!--/page heading-->
<!--*********THIS ROW FILLED FROM 'WORK.JS'***********-->
<!--*********THIS ROW FILLED FROM 'WORK.JS'***********-->
<!--*********THIS ROW FILLED FROM 'WORK.JS'***********-->
<!--*********THIS ROW FILLED FROM 'WORK.JS'***********-->
</div><!-- /bojack-row -->
</div><!--/bojack-container-->
</div><!--/work1-->
<br>
<!-- *************** -->
<!-- *************** #about ***************-->
<!--about page-->
<div id="about" class="one-page">
<!--about container-->
<div class="container">
<div class="row" id="homer-row">
<div class="page-heading">
<h2>About Me</h2>
</div><br><!--/page heading-->
<div class="col-xs-12 col-sm-6 col-md-4 intro column">
<h2 id="about-intro">Introduction</h2>
<p>I was a financial reporting analyst/accountant.<br>
<br> Over the years my job essentially became managing large datasets and databases.<br>
<br>I enjoyed project work the most. I taught myself SQL and became quite proficient in the course of developing, writing and presenting all manner of data.
</p><!--/p-->
</div><!--/col -->
<div class="col-xs-12 col-sm-6 col-md-4 skills column">
<h2 id="skill-list">Mad Skills</h3>
<ul>
<li>SQL</li>
<li>MS Excel Expert</li>
<li>Forecasting Curves</li>
<li>End-to-End Financial Reporting (database to GAAP-compliant financial statement)</li>
<li>Quality Assuarance</li>
<li>Financial Controls Development, Documentation & Testing</li>
</ul><!--/skill-list-->
</div><!-- /col -->
<div class="col-xs-12 col-sm-12 col-md-4" id="homer">
<img src="img/Homer_Simpson.jpg" class="img-responsive" alt="Homer J Simpson" title="Homer" class="image-class1" </img>
</div><!-- /col -->
</div><!--/homer row -->
</div><!--/about container-->
</div><!--about-->
<br>
<!-- *************** -->
<!-- ***************#modal ***************-->
<div class="container mcModals">
<div class="row" id="mcModals-row">
<!--learn more -->
<div class="learn-more col-xs-4 col-sm-3 col-md-3">
<h2>Learn More</h2>
</div><!--/learn-more-->
<!--modal middle -->
<div class="learn-more col-xs-2 col-sm-7 col-md-7"></div>
<!--large modal button -->
<div class="modal-button col-xs-4 col-sm-2 col-md-2">
<button class="btn btn-primary" id="lg-modal-btn" data-toggle="modal" data-target=".bd-example-modal-lg">Resume</button>
</div><!--/modal-button-->
<!-- large modal -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="ian-resume" id="myModalLabel">Modal title</h4>
</div><!--modal-header-->
<div class="modal-body" id="modal-body">
<p>fluffuffuffuffuff</p>
<embed id="modalembed" src="IanDaley-Resume.pdf">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div><!--modal-footer-->
</div><!--modal-body-->
</div><!--/modal-content-->
</div><!--/modal-dialog-->
</div><!--modal fade bd-example-modal-xx-->
</div><!--/mcModals-row-->
</div><!--/modal-container-->
<br>
<!-- *************** -->
<!-- *************** #goals ***************-->
<!--goals page-->
<div id="goals" class="one-page">
<!--goals container-->
<div class="container">
<div class="row" id="goals-row">
<div class="page-heading">
<h2>My Goals</h2>
</div><br><!--/page heading-->
<div class="col xs-12 col-md-4 abouts">
<h2>Portfolio Concept</h2>
<p>My portfolio will showcase my two distinct professional pursuits, web development and my work as a stand-up comic and writer.<br>
<br>I have branded my website as <span class="branded-text">Zen Franklin.</span> </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div><!-- /col -->
<div class="col xs-12 col-md-4 abouts">
<h2>Project Goals</h2>
<p>I want to build a clean, sophisticated, professional portfolio site showcasing my skills as a web developer. <br>
<br>At the same time, I want to build a structure which will house a variety of material which will comprise my portfolio as a comic.<br><br>One important goal for 2017 will be producing and recording my first special. I also want to have a blog, a space to store and display short stories and contact information.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div><!-- /col -->
<div class="col xs-12 col-md-4 abouts">
<h2>Course Goals</h2>
<p>I am looking to complete the course by the end of 2016. I am working part-time to give myself enough time to work and complete tasks. I also worked hard to learn material before class started.<br>
<br>I have some front-end dev skills so I am hoping to get a bit more advanced in the front end while becoming competent with Ruby and back-end development.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div><!-- /col -->
</div><!-- /row -->
</div><!--/goals container-->
</div><!--goals-->
<br>
<!-- *************** -->
<!-- *************** #weird ***************-->
<!--weird page-->
<!--weird-container-->
<div id="weird" class="container weird-container">
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</div><!--weird-->
<!-- *************** -->
<!-- *************** #faq ***************-->
<!-- faq page-->
<div id="faq" class="one-page">
<!-- faq accordion-->
<div class="container" id="accordion-container">
<div class="row" id="accordion-row">
<div class="page-heading">
<h2>Frequently Asked Questions (F.A.Q.)</h2>
</div><br><!--/page heading-->
<div class="col-xs-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus">
So... What kinda questions do people ask you frequently?
</span>
</a><!--/collapseOne-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>I really have no idea, I just started.</p>
</div><!-- /panel-body-->
</div><!-- /panel-collapse collapse-->
</div><!--/panel panel-default-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus">
So... What is Zen Franklin?
</span>
</a><!--/collapseTwo-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<span class="branded-text">ZenFranklin.com</span> is my portfolio page.
</div><!-- /panel-body-->
</div><!-- /panel-collapse collapse-->
</div><!--/panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus">
Is it true you're running out of questions to ask yourself?
</span>
</a><!--/collapseThree-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
At the moment, yes.
</div><!-- /panel-body-->
</div><!-- /panel-collapse collapse-->
</div><!--/panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<span class="glyphicon glyphicon-plus">
Is this the fourth question?
</span>
</a><!--/collapseFour-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Yes it is!
</div><!-- /panel-body-->
</div><!-- /panel-collapse collapse-->
</div><!--/panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-plus">
Are you done yet?
</span>
</a><!--/collapseFive-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Now I am.
</div><!-- /panel-body-->
</div><!-- /panel-collapse collapse-->
</div><!--/panel panel-defaul-->
</div><!--panel-group-->
</div><!--/col-->
</div><!--/accordion-row-->
</div><!--/accordion-container-->
</div><!--faq-->
<br>
<!-- *************** -->
<!-- *************** #contact ***************-->
<!--contact page-->
<!--contact-container-->
<div class="container one-page" id="contact-page">
<!-- *************** -->
<!-- *************** map/form ***************-->
<div class="row" id="contact-row1">
<div class="page-heading">
<h2>Contact Us</h2>
</div><br><!--/page heading-->
<!--contact-map-->
<div id="contact-map" class="col-xs-12 col-md-6">
<div id="work-map"></div>
</div><!--/contact-map-->
<!--contact-form-->
<div id="contact-form" class="col-xs-12 col-md-6">
<form action="/login" method="post" name="login">
<div class="form-group" id="nameform">
<label for="nameform" class="sr-only">Name</label>
<input type="textBox" name="Name Form" required="required" class="form-control" placeholder="Name*" title="Name*">
</div><!--/form-group-->
<div class="form-group" id="phoneform">
<label for="phoneform" class="sr-only">Name</label>
<input type="tel" name="tel" class="form-control" placeholder="Phone Number" title="Name*">
</div><!--/form-group-->
<div class="form-group" id="emailform">
<label for="emailform" class="sr-only">Email address</label>
<input type="email" name="email" required="required" class="form-control" placeholder="Email Address*" title="Email*">
</div><!--/form-group-->
<div class="form-group" id="textarea">
<textarea style="resize:none" minlength=1 cols="20" rows="5" class="form-control message-box"></textarea><!--/textarea>-->
<button type="submit" id="submit-button" class="btn btn-default btn-lg">Submit</button>
<span id="characters"></span><br>
<span id="animate-explain"></span>
</div><!--/textarea-->
</form><!--/form-->
</div><!--/contact_form-->
</div><!--/row-->
<br>
<!--contact-glyphicon-->
<div class="row" id="contact-row2">
<div id="contact-info" class="col-xs-12 center-block">
<div class="email-list">
<p><span class="glyphicon glyphicon-flash"></span> General Inquiries: <a id="item1" title="More information" href="mailto:[email protected]" target="_blank"> [email protected]</a></p>
<p><span class="glyphicon glyphicon-film"></span> Media requests: <a id="item2" title="More information" href="mailto:[email protected]" target="_blank"> [email protected]</a></p>
<p><span class="glyphicon glyphicon-earphone"></span> Sales inquiries: <a id="item3" title="More information" href="mailto:[email protected]" target="_blank"> [email protected]</a></p>
<p><span class="glyphicon glyphicon-sunglasses"></span> Ian Daley: <a id="item4" title="More information" href="mailto:[email protected]" target="_blank"> [email protected]</a></p>
</div><!--/email_list -->
</div><!--/contact_info-->
</div><!--/row-->
</div><!--/container-->
<br
<!-- *************** -->
<!-- *************** footer ***************-->
<footer>
<p><strong>&copy 2016 ZF</strong></p>
<!--twitter follow button-->
<div id="twitter-like">
<a href="https://twitter.com/TwitterDev" class="twitter-follow-button" data-show-count="false">Follow @TwitterDev</a>
</div><!--/twitter-like-->
<!--twitter widget-->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<!--facebook like widget-->
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
</footer><!--/footer-->
</div><!--/contact-->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--javascript bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--jQuery stellar plugin-->
<script src="js/jquery.stellar.min.js"></script>
<!-- Custom scripts for this template go here -->
<script src="js/scripts.js"></script>
<script src="js/work.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9ScOkszGKIrzLsIYw0rnaoP-i1-rdlQw&callback=initMap"
async defer></script>
</body>
Raw
gistfile2.txt
body {
color: white;
}
.page-heading {
color: red;
padding-left: 10px;
}
.one-page {
padding-top: 40px;
}
.popover {
color:black;
background-color: red;
}
.arrow {
border-right-color: blue !important;
}
#accordion {
width: 75%;
float: none;
margin: 0 auto;
color: black;
}
/*.navbar*/
.navbar {
background-color: rgb(0, 153, 204);
border-color: #E7E7E7;
/*color: rgb(255, 255, 255);*/
}
/*.nav pills*/
.nav-pills {
background-color: rgb(0, 153, 204);
color: rgb(255, 255, 255);
}
/*.nav pills links*/
.nav-pills a {
background-color: rgb(0, 153, 204);
}
/*.navbar dropdown menu*/
.dropdown-menu {
background-color: rgb(0, 153, 204);
text-align: right;
}/*dropdown-menu*/
/*.navbar dropdown menu external links*/
.dropdown-menu a {
margin-bottom: .2em;
}/*dropdown-menu links*/
.dropdown-menu a:link {
color: rgb(255, 255, 255);
}/*link*/
.dropdown-menu a:visited {
color: rgb(255, 255, 255);
}/*visited*/
.dropdown-menu a:hover {
color: rgb(244, 244, 66);
}/*hover*/
.dropdown-menu a:active {
color: rgb(0, 0, 0);
}/*active*/
/***************modal******/
.learn-more {
color: white;
padding-right: ;
display: inline;
}
.modal-button {
float: right;
padding-top: 1.2em;
display: inline;
}
#modalembed {
width:100%;
height:400px;
}
#modal-body {
height: 100%;
}
/****** #about *******/
#about-intro, #skill-list {
margin-top: 0;
}
#homer {
float: right;
}
/**************#contact, .one-page******/
/*SIMPLE PARALLAX from 1.10*/
#contact {
/*Add a background image*/
background-image: url("../img/black_forest_woods.jpg");
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
}
#characters {
color: white;
/*float: right;*/
letter-spacing: 3px;
text-shadow: 2px 2px #FF0000;
font-weight: bold;
font-variant: small-caps;
font-size: 200%;
position: absolute;
}
#submit-button {
padding-left: 10px;
}
#p1 {
color: yellow;
font-weight: bold;
}
#contact-info {
display: inline;
}
#contact-info div {
padding: 1em;
}
#contact-form {
padding:;
}
@media (min-width: @screen-sm-min) {
#contact-form {
padding-top: 1em;
}
}
/***** Bojack images *****/
.info {
position: absolute;
top: 60%;
left: 12%;
color:#fff;
font-family:Futura;
text-transform:uppercase;
font-weight: 2000;
letter-spacing:0.5em;
line-height:1.6;
display: none;
}
.zenFranklin {
font-weight:100;
letter-spacing: 2px;
}
.work-img {
}
.work-img img {
/*max-width: 100%;**** already a rule in bootstrap*/
/*width: 370px;
height: 250px; */
/*$(images[i]).css("border", "5px solid rgb(0, 153, 204)"); commented out jQuery*/
cursor: pointer;
height: 200px;
width: 300px;
background-color: black;
margin: 1em 0 auto;
overflow: hidden;
border-radius: 5px;
/*height: 100%;
width: 100%; */
}
#work-map {
height: 300px;
width: 100%;
z-index:1;
/*padding: 2em;
look into adding back for larger screens*/
}
footer {
text-align: center;
}
Raw
gistfile3.txt
//test jQuery plug-in
$(document).ready(function(){
//alert("hi!");
$.stellar();
//tooltip
$(function () {
$('#item1').tooltip();
});
$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);
//textarea count
function updateCount() {
var cs = $('textarea').val().length;
$('#characters').text(cs).css("color", "red").fadeIn("slow").animate({left: '250px', opacity: '0.75',
height: '200%', width: '200%'});
$("#animate-explain").text("here");
}
//weird
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});//$(document).ready - line 1
Raw
gistfile4.txt
//test jQuery plug-in
$(document).ready(function(){
var works = [
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Cool Street Scene",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool_street_scene.jpg"
},
{title: "Another Cool Street Scene",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool_street_scene2.jpg"
},
{title: "Blue Venice",
pic: "http://physicist-walrus-51758.bitballoon.com/img/blue_venice.jpg"
},
{title: "Column of Ships",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool painting - ship columns.jpg"
},
{title: "Green Abstract",
pic: "http://physicist-walrus-51758.bitballoon.com/img/green_abstract.jpg"
},
{title: "Flack Abstract Expressionist Landscape",
pic: "http://physicist-walrus-51758.bitballoon.com/img/Flack_Abstract_Expressionist_paintings_Landscape.jpg"
},
{title: "Monet Seascape",
pic: "http://physicist-walrus-51758.bitballoon.com/img/Monet-seascape.jpg"
},
{title: "Hive Wallpaper",
pic: "http://physicist-walrus-51758.bitballoon.com/img/hivewallpaper.jpg"
},
{title: "Abstract Stock",
pic: "http://physicist-walrus-51758.bitballoon.com/img/abstract_stock.jpg"
},
{title: "Black Blue Moon",
pic: "http://physicist-walrus-51758.bitballoon.com/img/black_blue_moon.jpg"
},
{title: "Black Forest Misty Mountains",
pic: "http://physicist-walrus-51758.bitballoon.com/img/black_forest_misty_mountains.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
}
];
//for loop
//for(var i = 0; i < works.length; ++i ) {
for(var i = 0; i < 12; ++i ) { //this is a temporary fix to limit bootstrap columns to 12
//jQuery selector
$("#bojack-container").append("\
<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'>\
<a href='#' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='zenFranklin'></p>" +works[i].title + "</span>\
</a>\
</div>\
");
//define images variable as array of pictures
var images = $("#bojack-container img");
if (i % 2 === 0) {
$(images[i]).css("border", "5px solid rgb(0, 153, 204)");
} else {
$(images[i]).css("border", "5px solid rgb(0, 153, 204)");
};
};
//.work-img events
$(".work-img").mouseenter( function() {
$(".info", this).show();
$("this")
}).mouseleave(function(){
$(".info", this).hide();
//bojack-container click event handlers
//note: I will be revising this code b/c I know it needs variables, etc
// I just wanted to leave it all out to he
$("#bojack-container img").on("mouseenter", function() {
$("#bojack-container img").css("border", "5px solid gold");
$(this).css("opacity", ".5");
}).mouseleave(function(){
$("#bojack-container img").css("border", "5px solid rgb(0, 153, 204)");
$("#bojack-container img").css("opacity", "1");
$(this).css("opacity", "1");
}).click(function(){
$("#bojack-container img").css("border", "5px solid rgb(255, 0, 0)");
$("#bojack-container img").css("opacity", ".5");
$(this).css("opacity", "1");
})
//$("#bojack-container img").hover(function(){
// $(this).css("opacity", ".5");
// //$(".work-img").popover({title: "popover fades out", content: "#neverTrump", animation: true});
// },
// function () {
// $(this).css("opacity", "1");
// })
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
//$(".calc-button").on({
// click: function() {
// $("#clipboard").fadeIn(1500);
// },
// mouseover: function() {
// $("#clipboard").fadeIn(1500);
// },
// });//end .on()
//http://www.w3schools.com/jquery/jquery_events.asp
});
});//$(document).ready - line 1
var map;
var marker;
//defines initMap function-->
function initMap() {
//declare lattitude/longitude-->
var myLatLng = {lat: 40.7033, lng: -74.0089};
//defines map function-->
map = new google.maps.Map(document.getElementById('work-map'), {
center: myLatLng,
zoom: 12
});
//declares marker-->
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatLng,
title: 'Sweet Marker!'
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//move this section-->
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','img/Louis_CK.jpg');
} else {
myImage.setAttribute ('src','img/bojack-header.jpg');
}
}
///move this section-->
Raw
gistfile5.txt
<!DOCTYPE html>
<html lang="en">
<head>
<!--Title-->
<title>ZF Calc</title>
<!--meta tags-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="calc_styles.css">
</head><!--head-->
<body>
<div id="boink">.</div>
<!-- *************** -->
<!-- *************** -->
<!-- *************** #calc ***************-->
<!--calc page-->
<div id="calculator">
<div id="screen">
<div id="ramrod"></div>
</div><!--screen-->
<div id="numbers-operators">
<a class="calc-button operators">(</a>
<a class="calc-button operators">)</a>
<a class="calc-button operators">%</a>
<a class="calc-button operators">CE</a>
<a class="calc-button numbers">7</a>
<a class="calc-button numbers">8</a>
<a class="calc-button numbers">9</a>
<a class="calc-button operators">/</a>
<a class="calc-button numbers">4</a>
<a class="calc-button numbers">5</a>
<a class="calc-button numbers">6</a>
<a class="calc-button operators">*</a>
<a class="calc-button numbers">1</a>
<a class="calc-button numbers">2</a>
<a class="calc-button numbers">3</a>
<a class="calc-button operators">+</a>
<a class="calc-button numbers">0</a>
<a class="calc-button operators">.</a>
<a class="calc-button operators">-</a>
<a class="calc-button operators" id="equals">=</a>
<a class="calc-button" id="clear">C</a>
<a class="calc-button" id="clearall">AC</a>
</div><!--numbers-->
</div><!--calc-->
<div id="sandbox">
<p>content</p>
<span id="spam"></span>
</div><!--sandbox-->
<!--<div id="sandbox2"> *********
<p>doubly content</p>
<span id="spam2"></span>
</div><!--/sandbox2-->
<div id="clipboard">
<p>My Clipboard</p>
<a href="../index.html">Back To Index?</a>
<a href="../carousel.html">Carousel</a>
<br>
<div><span id="clippings"></span></div>
</div><!--/clipboard-->
<div id="clipboard-left">
<p>Still a work-in-progress</p>
<span id="clippings-left"></span>
<p>scroll into top left</p>
</div><!--/clipboard-left-->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Custom scripts for this template go here -->
<script src="calc_scripts.js"></script>
</body>
Raw
gistfile6.txt
body {
background-color: silver;
}
body, div, a {
padding:0;
margin:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
/********************start: #calculator styles************************************************/
#calculator {
background-color: rgb(230, 230, 255);
width: 410px;
height: 420px;
border: 5px black solid;
margin: 10px auto;
padding: 20px 2px;
margin-bottom: 75px;
margin-top: 50px;
border-radius: 20px;
box-shadow: 35px 40px 50px 30px rgba(255, 40, 0, 0.3);
}
#screen {
height: 70px;
width: 365px;
margin:auto;
background-color:white;
margin-bottom: 15px;
text-align: right;
font-size: 60px;
padding: 0 5px;
box-shadow: 4px 4px 4px 4px rgba(255, 20, 0, 0.3);
border-radius: 10px;
}
#ramrod {
padding-right: 20px;
}
#numbers-operators {
}
#numbers-operators a {
display: block;
width: 70px;
height: 50px;
float: left;
text-decoration: none;
color: black;
text-align: center;
font-size: 32pt;
margin: 5px 15px auto;
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
border-radius: 10px;
z-index:1;
box-shadow: 5px 5px 5px 2px rgba(255, 20, 0, 0.5);
}
#numbers-operators a:hover, #operators a:hover {
color:red;
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#EDEDED));
background: -moz-linear-gradient(top, #DCDCDC, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#EDEDED');
opacity: .5;
font-weight: bold;
}
#numbers-operators a:active, #operators a:active {
color:orange;
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#EDEDED));
background: -moz-linear-gradient(top, #DCDCDC, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#EDEDED');
opacity: 1;
font-weight: bold;
transform: translateY(4px);
}
a#clearall, a#clear {
width: 170px;
color: yellow;
text-shadow: 2px 2px black;
font-weight: bold;
}
#sandbox {
box-shadow:25px 25px 50px 30px rgba(255, 20, 0, 0.3);
margin: 10px auto;
height: 200px;
width: 400px;
background-color: grey;
z-index:1;
display: inline-block;
display: none;
/*#sandbox defaults as a hidden element*/
}
#sandbox2 {
margin: 40px 0 0 0 auto;
height: 200px;
width: 400px;
background-color: maroon;
color: white;
z-index: 1;
display: none;
}
#clipboard {
border: 5px solid black;
margin: 20px 0 0 0 auto;
position: fixed;
top: 25px;
right: 50px;
width: 165px;
height: 250px;
background-color: rgb(230, 230, 255);
color: black;
z-index: 1;
opacity: 1;
box-shadow: 20px 15px 50px 20px rgba(255, 20, 0, 0.3);
border-radius: 10px;
padding: 4px;
opacity: 1;
display: none;
}
#clipboard-left {
border: 5px solid black;
margin: 20px 0 0 0 auto;
position: fixed;
top: 25px;
left: 50px;
width: 165px;
height: 250px;
background-color: rgb(230, 230, 255);
color: black;
z-index: 1;
opacity: 1;
box-shadow: 20px 15px 50px 20px rgba(255, 20, 0, 0.3);
border-radius: 10px;
padding: 4px;
opacity: 1;
display: none;
}
#clippings {
}
#clippings-left {
}
#note1 {
margin-left: 100px;
margin-top: 100px;
}
.one-page {
margin-top: 150px;
}
#intro-to-sp {
margin-right: 100px;
margin-left: 100px;
padding-right: 100px;
padding-left: 100px;
}
Raw
scripts.js
//test jQuery plug-in
$(document).ready(function(){
//alert("hi!");
$.stellar();
//tooltip
$(function () {
$('#item1').tooltip();
});
$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);
//textarea count
function updateCount() {
var cs = $('textarea').val().length;
$('#characters').text(cs).css("color", "red").fadeIn("slow").animate({left: '250px', opacity: '0.75',
height: '200%', width: '200%'});
$("#animate-explain").text("here");
}
//weird
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});//$(document).ready - line 1
Raw
styles.css
body {
color: white;
}
.page-heading {
color: red;
padding-left: 10px;
}
.one-page {
padding-top: 40px;
}
.popover {
color:black;
background-color: red;
}
.arrow {
border-right-color: blue !important;
}
#accordion {
width: 75%;
float: none;
margin: 0 auto;
color: black;
}
/*.navbar*/
.navbar {
background-color: rgb(0, 153, 204);
border-color: #E7E7E7;
/*color: rgb(255, 255, 255);*/
}
/*.nav pills*/
.nav-pills {
background-color: rgb(0, 153, 204);
color: rgb(255, 255, 255);
}
/*.nav pills links*/
.nav-pills a {
background-color: rgb(0, 153, 204);
}
/*.navbar dropdown menu*/
.dropdown-menu {
background-color: rgb(0, 153, 204);
text-align: right;
}/*dropdown-menu*/
/*.navbar dropdown menu external links*/
.dropdown-menu a {
margin-bottom: .2em;
}/*dropdown-menu links*/
.dropdown-menu a:link {
color: rgb(255, 255, 255);
}/*link*/
.dropdown-menu a:visited {
color: rgb(255, 255, 255);
}/*visited*/
.dropdown-menu a:hover {
color: rgb(244, 244, 66);
}/*hover*/
.dropdown-menu a:active {
color: rgb(0, 0, 0);
}/*active*/
/***************modal******/
.learn-more {
color: white;
padding-right: ;
display: inline;
}
.modal-button {
float: right;
padding-top: 1.2em;
display: inline;
}
#modalembed {
width:100%;
height:400px;
}
#modal-body {
height: 100%;
}
/****** #about *******/
#about-intro, #skill-list {
margin-top: 0;
}
#homer {
float: right;
}
/**************#contact, .one-page******/
/*SIMPLE PARALLAX from 1.10*/
#contact {
/*Add a background image*/
background-image: url("../img/black_forest_woods.jpg");
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
}
#characters {
color: white;
/*float: right;*/
letter-spacing: 3px;
text-shadow: 2px 2px #FF0000;
font-weight: bold;
font-variant: small-caps;
font-size: 200%;
position: absolute;
}
#submit-button {
padding-left: 10px;
}
#p1 {
color: yellow;
font-weight: bold;
}
#contact-info {
display: inline;
}
#contact-info div {
padding: 1em;
}
#contact-form {
padding:;
}
@media (min-width: @screen-sm-min) {
#contact-form {
padding-top: 1em;
}
}
/***** Bojack images *****/
.info {
position: absolute;
top: 60%;
left: 12%;
color:#fff;
font-family:Futura;
text-transform:uppercase;
font-weight: 2000;
letter-spacing:0.5em;
line-height:1.6;
display: none;
}
.zenFranklin {
font-weight:100;
letter-spacing: 2px;
}
.work-img {
}
.work-img img {
/*max-width: 100%;**** already a rule in bootstrap*/
/*width: 370px;
height: 250px; */
/*$(images[i]).css("border", "5px solid rgb(0, 153, 204)"); commented out jQuery*/
cursor: pointer;
height: 200px;
width: 300px;
background-color: black;
margin: 1em 0 auto;
overflow: hidden;
border-radius: 5px;
/*height: 100%;
width: 100%; */
}
#work-map {
height: 300px;
width: 100%;
z-index:1;
/*padding: 2em;
look into adding back for larger screens*/
}
footer {
text-align: center;
}
Raw
work.js
//test jQuery plug-in
$(document).ready(function(){
var works = [
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Cool Street Scene",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool_street_scene.jpg"
},
{title: "Another Cool Street Scene",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool_street_scene2.jpg"
},
{title: "Blue Venice",
pic: "http://physicist-walrus-51758.bitballoon.com/img/blue_venice.jpg"
},
{title: "Column of Ships",
pic: "http://physicist-walrus-51758.bitballoon.com/img/cool painting - ship columns.jpg"
},
{title: "Green Abstract",
pic: "http://physicist-walrus-51758.bitballoon.com/img/green_abstract.jpg"
},
{title: "Flack Abstract Expressionist Landscape",
pic: "http://physicist-walrus-51758.bitballoon.com/img/Flack_Abstract_Expressionist_paintings_Landscape.jpg"
},
{title: "Monet Seascape",
pic: "http://physicist-walrus-51758.bitballoon.com/img/Monet-seascape.jpg"
},
{title: "Hive Wallpaper",
pic: "http://physicist-walrus-51758.bitballoon.com/img/hivewallpaper.jpg"
},
{title: "Abstract Stock",
pic: "http://physicist-walrus-51758.bitballoon.com/img/abstract_stock.jpg"
},
{title: "Black Blue Moon",
pic: "http://physicist-walrus-51758.bitballoon.com/img/black_blue_moon.jpg"
},
{title: "Black Forest Misty Mountains",
pic: "http://physicist-walrus-51758.bitballoon.com/img/black_forest_misty_mountains.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
},
{title: "Bojack Horseman",
pic: "http://physicist-walrus-51758.bitballoon.com/img/bojack_header.jpg"
}
];
//for loop
//for(var i = 0; i < works.length; ++i ) {
for(var i = 0; i < 12; ++i ) { //this is a temporary fix to limit bootstrap columns to 12
//jQuery selector
$("#bojack-container").append("\
<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'>\
<a href='#' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='zenFranklin'></p>" +works[i].title + "</span>\
</a>\
</div>\
");
//define images variable as array of pictures
var images = $("#bojack-container img");
if (i % 2 === 0) {
$(images[i]).css("border", "5px solid rgb(0, 153, 204)");
} else {
$(images[i]).css("border", "5px solid rgb(0, 153, 204)");
};
};
//.work-img events
$(".work-img").mouseenter( function() {
$(".info", this).show();
$("this")
}).mouseleave(function(){
$(".info", this).hide();
//bojack-container click event handlers
//note: I will be revising this code b/c I know it needs variables, etc
// I just wanted to leave it all out to he
$("#bojack-container img").on("mouseenter", function() {
$("#bojack-container img").css("border", "5px solid gold");
$(this).css("opacity", ".5");
}).mouseleave(function(){
$("#bojack-container img").css("border", "5px solid rgb(0, 153, 204)");
$("#bojack-container img").css("opacity", "1");
$(this).css("opacity", "1");
}).click(function(){
$("#bojack-container img").css("border", "5px solid rgb(255, 0, 0)");
$("#bojack-container img").css("opacity", ".5");
$(this).css("opacity", "1");
})
//$("#bojack-container img").hover(function(){
// $(this).css("opacity", ".5");
// //$(".work-img").popover({title: "popover fades out", content: "#neverTrump", animation: true});
// },
// function () {
// $(this).css("opacity", "1");
// })
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
//$(".calc-button").on({
// click: function() {
// $("#clipboard").fadeIn(1500);
// },
// mouseover: function() {
// $("#clipboard").fadeIn(1500);
// },
// });//end .on()
//http://www.w3schools.com/jquery/jquery_events.asp
});
});//$(document).ready - line 1
var map;
var marker;
//defines initMap function-->
function initMap() {
//declare lattitude/longitude-->
var myLatLng = {lat: 40.7033, lng: -74.0089};
//defines map function-->
map = new google.maps.Map(document.getElementById('work-map'), {
center: myLatLng,
zoom: 12
});
//declares marker-->
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatLng,
title: 'Sweet Marker!'
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//move this section-->
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','img/Louis_CK.jpg');
} else {
myImage.setAttribute ('src','img/bojack-header.jpg');
}
}
///move this section-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment