Skip to content

Instantly share code, notes, and snippets.

@JonFranchi

JonFranchi/about_styles.css

Last active August 29, 2015 14:19
Show Gist options
  • Save JonFranchi/1ec95b98b98004badc21 to your computer and use it in GitHub Desktop.
Save JonFranchi/1ec95b98b98004badc21 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about_styles.css
/*
Colors:
rgba(255,255,245, 1)
rgba(209,219,189, 1)
rgba(145,170,157, 1)
rgba(62,96,111, 1)
rgba(25,52,65, 1)
*/
/*Media Queries*/
@media (min-width: 1200px)
{
.col-lg-2 {
width: 14.5% !important;
}
}
/*general cleanup*/
* {
box-sizing: border-box;
}
.container{
width: 80%;
margin: 0 auto;
clear: both;
}
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.image {
display: inline-block;
float: left;
}
.column {
display: inline-block;
float: left;
}
.main_text {
clear: both;
padding-top:60px;
}
.column {
width: 30%;
padding: 0 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
/*Typography*/
.solid h1,
.solid h2,
.solid h3,
.solid p{
color: rgba( 252, 255, 245,1) !important ;
}
h1,
h2,
h3{
font-family: 'ARS Maquette','Helvetica Neue',sans-serif;
}
.detroit h2,
.detroit p{ color: rgba(25,52, 65, 1);
}
.jumbotron p {
color: #eee;
}
body {
font-family: 'ARS Maquette','Helvetica Neue',sans-serif;
background-color: rgba(25,52, 65, 1);
}
.intro p {
font-size: 3em;
font-weight:100;
-webkit-margin-before: 0em
}
.address,
.skills h2{
text-transform: uppercase;
}
p,
li {
font-family: 'ARS Maquette','Helvetica Neue',sans-serif;
}
h2.faq{
display: inline-block !important;
text-align: left;
float:left;
}
.white{
color: white;
}
.carousel-caption {
color: rgba(252,255,245,1);
text-shadow: 2px black;
}
.glyphicon:hover{
color: rgba(145,170,157,1);
}
/*Div Styling*/
.faded{
background-color:rgba(209,219,189, .7);
color: rgba(25,52, 65, 1);
padding-bottom: 20px;
padding-top: 20px;
}
.detroit{
background: url(../img/detroit.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.faq {
background-color:rgba(0,0,0,0);
border: 0px;
}
/*Nav Bar*/
.navbar-default{
background-color: rgba( 25,52, 65,.7) !important;
border-color: blue;
top: 0;
border: 0px;
margin: 0px;
padding: 0px;
/*margin: 0px 0px 2000px 0px;*/
z-index: 2000;
-webkit-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 11px 0px rgba(0,0,0,0.75);
}
.navbar-default .navbar-nav>li>a {
color:rgba(252, 255, 245, 1);
}
.navbar-default ul {
height: 50px;
margin: 0px;
padding: 0px;
}
.navbar-default ul li{
float: right !important;
}
.navbar-default ul li a {
display:inline-block;
color:rgba(252, 255, 245, 1);
text-transform: uppercase;
letter-spacing: .05em;
text-decoration: none;
transition: color 690ms;
-webkit-transition: color 600ms;
padding: 0px 25px;
margin: 0px;
line-height: 50px;
font-size: 1em;
font-weight: bold;
}
.container-fluid{
padding-left: 0px;
padding-right: 0px;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
margin-right: 0px !important;
margin-left: 0px !important;
}
.navbar-default a:hover {
background-color: rgba(209,219, 189,1);
color: rgba( 25,52, 65,1);
text-decoration: none;
line-height: 50px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: rgba(209,219, 189,1) !important;
color: rgba( 25,52, 65,1) !important;
text-decoration: none !important;
line-height: 50px !important;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background-color: rgba(209,219, 189,1) !important;
color: rgba( 25,52, 65,1) !important;
text-decoration: none !important;
line-height: 50px !important;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: rgba(209,219, 189,1);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover{
color: rgba(255,255,245, 1);
background-color: rgba(62,96,111, 1);
}
footer{
color: rgba(255,255,245, 1);
padding-top: 50px;
padding-bottom: 50px;
}
.carousel-control {
float:left;
}
/*Buttons*/
.faqButton{
display: block;
width: 150px;
background-color: rgba(25,52,65,1);
color: rgba(252,265,245,1);
border: 0px;
border-radius: 0px;
margin-top: 10px;
}
.faqButton:hover{
background-color: rgba(209,219,189,1);
color: rgba(25,52,65,1);
border: 0px;
border-radius: 0px;
}
.faqButton:focus{
background-color: rgba(62,96,111,1);
color: white;
border: 0px;
border-radius: 0px;
text-decoration: none;
}
.stretch {
width: 100%;
}
.jumbotron {
background-color: rgba( 25,52, 65,1) !important;
color: #eee;
margin-bottom: 0px !important;
}
.footer {
padding-bottom:100px;
}
body {
position: relative;
}
.center {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
.mf-64 {
display:inline-block !important;
}
textarea {
color:black;
}
/*Modal*/
button.resume {
float:right;
text-align: right;
padding: 15px;
margin-top: 20px;
border: 0px;
border-radius: 0px;
background-color: rgba(25,52,65,1);
color: rgba(252,265,245,1);
}
.resume:hover{
background-color: rgba(209,219,189,1);
color: rgba(25,52,65,1);
border: 0px;
border-radius: 0px;
}
.resume:focus{
background-color: rgba(62,96,111,1);
color: white;
border: 0px;
border-radius: 0px;
text-decoration: none;
}
.modal-content {
margin-top: 75px;
}
.media {
width: 500px;
}
.modal-body {
width: 100% !important;
height: 520px;
margin-left: auto;
margin-right: auto;
}
.modal-content {
min-width: 550px !important;
}
iframe.modal-frame {
width:100%;
height: 100%;
}
.skill-table tr th {
padding: 5px;
text-align: right;
}
.array-image {
box-sizing: border-box;
border:2px; solid pink;
width: 200px;
height: 200px;
margin: 5px;
display: inline-block;
position: relative;
}
.info {
display: inline-block;
color: #fff;
font-family: futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
position: absolute;
top: 15%;
left: 22%;
background-color: rgba(0,0,0,.5);
}
.proj-title {
font-weight: 100;
}
/*
#map-canvas{
height: 300px;
width: 300px;
}*/
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JonFranchi.com</title>
<!-- Bootstrap core CSS - latest compiled and minified-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified bootstrap Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!--Stellar.js-->
<script src="js/jquery.stellar.min.js" type="text/JavaScript"></script>
<script src="js/jquery.media.js" type="text/JavaScript"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script src="js/scripts.js" type="text/javascript" ></script>
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/about_styles.css" rel="stylesheet">
<link rel="stylesheet" href="monsterflat-1.0.css" media="all">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<!--begin navigation-->
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top nav" role="navigation">
<div class="container-fluid">
<!-- the toggle-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Nav Links for the togglage-->
<div class="nav navbar-collapse collapse">
<ul class ="nav navbar-nav navbar-right">
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#top">Home</a></li>
</ul>
</div>
</div>
</nav>
<!-- End Navigation -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel1.jpg" alt="..." class="stretch">
<div class="carousel-caption">
<h3>This is a test caption</h3>
<p>This is a test subcation, or whatever we call this.</p>
</div>
</div>
<div class="item">
<img src="img/carousel2.jpg" alt="..." class="stretch">
<div class="carousel-caption">
<h3>This is a test caption</h3>
<p>Also, there is testing here.</p>
</div>
</div>
<div class="item">
<img src="img/carousel3.jpg" alt="..." class="stretch">
<div class="carousel-caption">
<h3>This is a test caption</h3>
<p>Lot's of testing going on here. Such as right here, right now.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Jon Franchi<br/> Web Developer</h1>
<p>I am a budding professional web developer seeking a career change.
<strong>Let's get started...</strong><br/>
</p>
<div class="container">
</div>
</div>
</div>
<div class="container detroit" >
<!-- Example row of columns -->
<div class="faded">
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>I'd be thrilled to have enough material to call an actual portfolio by the time I'm done with this project. I currently run one site I built (<a href="www.detroitflags.com">DetroitFlags.com</a>) and I'd like to add more one-off <a href="#" title="projects" id="item1">projects</a>. I like that some portfolios include little small fun side prokects that are built on a little idea, but aren't intended to be a larger project or for a customer. I'd like to construct some small functional tools that can demonstrate my skills.</p>
<button type="button" class="btn btn-primary faqButton" data-toggle="tooltip" data-placement="top" title="More Information about concept">View details &raquo;</button>
</div>
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p>I'd like to move quickly through the first phase of this (at least the CSS/HTML stuff) and scoot onto the Javascript and then focus heavily on the meat of the development work. I have had experience with HTML/CSS on and off for 10+ years. I know HTML 5 is a new beast and I want to soak that up, but I also want to prioritize. 2-3 weeks to finish the first "month" should be the goal. </p>
<button type="button" class="btn btn-primary faqButton" data-toggle="tooltip" data-placement="top" title="More Information about project goals">View details &raquo;</button>
</div>
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p> If I can manage to squeeze in more javascript into the next few months, I'd like to do it. I currently work a 40 hour a week job, but my goal is to comprehensively complete this course in less than 3 months and be working in the field in 4. Ambitious? Yes, but goals are important.</p>
<button type="button" class="btn btn-primary faqButton" data-toggle="tooltip" data-placement="top" title="More Information about course goals">View details &raquo;</button>
</div>
</div>
</div>
</div>
</div>
<div class="container solid" id="examples">
<h2>Example Work</h2>
<div class="row">
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="col-md-3 col-xs-12 col-lg-2">
<img src="img/boston.jpg" class=”img-responsive”>
</div>
<div class="array-image" id="0"></div>
<div class="array-image" id="1"></div>
<div class="array-image" id="2"></div>
<div class="array-image" id="3"></div>
</div>
<!-- About Container -->
<div class="container center">
</div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/RO6JiFztJdg" frameborder="0" allowfullscreen></iframe>
</div>
<!-- End about container -->
<!-- Container for FAQ -->
<div class="container detroit" id="faq">
<div class="faded">
<div class="container">
<div class="row">
<h2 class="faq">FAQ</h2>
<button type="button" class="btn btn-primary resume" data-toggle="modal" data-target=".bs-example-modal-lg">Click to view Resume</button>
</div>
<button class='btn btn-primary faqButton' type='button' data-toggle="collapse" data-target="#testButton" aria-expanded="false" aria-controls="collapseExample1">
Test Button &raquo;
</button>
<div class="collapse in" id="testButton">
<div class="well faq">
Thundercats Blue Bottle meh, odio gentrify you probably haven't heard of them 90's seitan cillum next level disrupt delectus paleo. Sed proident +1 velit, typewriter quis drinking vinegar post-ironic cillum Godard actually four loko. Shoreditch typewriter hella Williamsburg disrupt mollit, organic vero leggings ad placeat four dollar toast. Etsy migas Pitchfork disrupt distillery delectus irony, Banksy mumblecore. Cornhole selfies Tumblr Bushwick, artisan swag PBR&B. Deep v gastropub disrupt, normcore aliquip +1 eu VHS. Flannel pariatur Brooklyn, food truck nisi consectetur meditation laborum cred.
</div>
</div>
<button class="btn btn-primary faqButton" type="button" data-toggle="collapse" data-target="#testButton2" aria-expanded="false" aria-controls="collapseExample">
Test Button 2 &raquo;
</button>
<div class="collapse" id="testButton2">
<div class="well faq faq">
Four dollar toast excepteur exercitation hoodie vero, velit magna minim roof party dolor lumbersexual quis. Tattooed slow-carb +1 Blue Bottle occaecat. YOLO paleo Helvetica, ethical single-origin coffee post-ironic kogi. Semiotics mixtape sapiente heirloom distillery, street art Williamsburg. Normcore excepteur elit organic, aliqua American Apparel four loko butcher. Fugiat four dollar toast dreamcatcher biodiesel, aliqua tilde Banksy meggings shabby chic typewriter McSweeney's readymade. Cardigan Etsy irure, health goth yr blog single-origin coffee craft beer enim freegan listicle occaecat vero anim mumblecore.
</div>
</div>
<button class="btn btn-primary faqButton" type="button" data-toggle="collapse" data-target="#testButton3" aria-expanded="false" aria-controls="collapseExample">
Test Button 3 &raquo;
</button>
<div class="collapse" id="testButton3">
<div class="well faq">
<table class="skill-table">
<tr class="alternating-rows">
<th>Skill</th>
<th>Rating (10/10)</th>
<th>Years Experience</th>
</tr>
<tr class="alternating-rows">
<th>HTML</th>
<th>10</th>
<th>15</th>
</tr>
<tr class="alternating-rows">
<th>CSS</th>
<th>8</th>
<th>10</th>
</tr>
<tr class="alternating-rows">
<th>Javascript</th>
<th>3</th>
<th>2</th>
</tr>
<tr class="alternating-rows">
<th>Ruby</th>
<th>2</th>
<th>1</th>
</tr>
<tr class="alternating-rows">
<th>Rails</th>
<th>2</th>
<th>1</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- End FAQ -->
<!-- contact container -->
<div class="container solid" id="contact">
<h1 class="header white">Contact</h1>
<div class="row">
<div class="col-md-4 col-lg-4">
<p class="contact">
I encourage you to reach out to me if you are considering a project and unsure of the what and how. I can help you move forward and build a beautiful application to help your company thrive.
</p>
<p class="contact address"><span class="glyphicon glyphicon-envelope address"></span> [email protected]
</p>
<p class="contact address">
<span class="glyphicon glyphicon-home"></span>Austin, TX 78757 <br/>
</p>
</div>
<div class="container">
<!--<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=10801%20North%20Mopac%2C%20Suite%20420%2C%20Braker%20Pointe%20III%2C%20Austin%2C%20%20TX%2C%2078759&key=AIzaSyCVva5bi7eG-Pz_U1ZP-FVjJ3HpLH96Q44"></iframe>-->
<div id="map-canvas" style="height: 300px; width: 300px;">
TEST
</div>
</div>
<div class="col-md-8 col-lg-8">
<form>
<div class="form-group">
<p class="contact">
<label for="name" required="required">*Your Name:</label>
<input type="text" class="form-control" id="name" required="required"><br>
<label for="email">*Email Address:</label>
<input type="email" class="form-control" id="email" required="required"><br>
<label for="message" >*Message:</label>
<br>
<textarea style="resize:none" class="form-control comment-box" cols="40" rows="5" required="required" id="the-message" required="required"></textarea>
(Character Count: <span id="char-count">0</span>)
</p>
<button type="submit" id="submit-button" class="btn btn_default">Submit</button>
</div>
</form>
<p id="visible-comment">The message will appear here.</p>
</div>
</div>
</div>
<!-- End contact container -->
<!-- Begin Footer container -->
<footer>
<div class="container">
<a href="http://twitter.com/jonfranchi" class="twitter-follow-button" data-show-count="false"><i class="mf-64 mf-twitter"></i></a>
<a href="http://linkedin/jonfranchi" class="linkedin" data-show-count="false"><i class="mf-64 mf-linkedin"></i></a>
<a href="http://github.com/jonfranchi" class="github" data-show-count="false"><i class="mf-64 mf-github"></i></a>
<a href="mailto:[email protected]" class="email" data-show-count="false"><i class="mf-64 mf-email"></i></a>
<br>
&copy; Jonathan Franchi 2015
</div>
</footer>
<!-- End Footer container -->
<!-- The Modal container -->
<div class="modal fade bs-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">
Resume
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<iframe class="modal-frame" src="http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf#view=FitH" ></iframe>
<!--<a class="media" href="iframe.html"></a>-->
</div>
<div class = "modal-footer">
</div>
</div>
</div>
<!-- End Modal container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
$.stellar();
</script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<script type="text/javascript">
$('a.media').media({width: 500, height: 500});
</script>
</body>
</html>
Raw
scripts.js
var workInfo = [{title: "First Project", pic: "http://momstown.ca/sites/national.momstown.espresso.furthermore.ca/files/uecpp9gpg8btrld88dujzzfk.jpeg"},
{title: "Second Project", pic: "http://static.frooition.com/090076/images/thg2a.jpg"},
{title: "Third Project", pic: "http://paranormalchrist.files.wordpress.com/2013/06/thing-one-and-two.jpg"},
{title: "Fourth Project", pic: "http://eardstapa.files.wordpress.com/2009/11/thing1thing2.jpeg"}]
$(document).ready(function(){
var theClass = ".comment-box"
var comment = $("#the-message")
$("#submit-button").on("click", function(){
console.log(comment.val());
$("#visible-comment").html(comment.val());
return false;
});
$(".comment-box").on("keyup", function(){
var charCount = $(".comment-box").val().length;
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "white");
}
});
var rows = $(".alternating-rows");
console.log(rows);
for(var i=0; i<rows.length; i++){
if (i%2 === 0){
$(rows[i]).css("background-color", "rgba(25,52,65,1)");
$(rows[i]).css("color", "#fff");
}
}
for(var i=0; i<workInfo.length; i++){
$("#"+i).css("background-image", "url(" + workInfo[i].pic + ")")
}
$(".array-image").mouseenter(function(){
console.log(workInfo[0])
$(this).html("<p class='info'><span class='proj-title'>Title: </span>" + workInfo[this.id].title + "</p>");
}).mouseleave(function () {
$("p.info").html("");
})
var map;
var marker;
function autoZoom(){
map.setZoom(21);
map.setCenter(marker.getPosition());
console.log("we called the other event listener!");
};
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(30.344756, -97.721693),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
console.log("we're totally loaded!");
marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to Zoom'
})
console.log(marker);
google.maps.event.addListener(marker, 'click', function(){
map.setZoom(18);
map.setCenter(marker.getPosition());
console.log("we called the other event listener!");
});
console.log("also, we arrived here!");
};
google.maps.event.addDomListener(window, "load", initialize);
});//close document
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment