Skip to content

Instantly share code, notes, and snippets.

@mattjared

mattjared/index.html

Last active December 26, 2015 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattjared/7123082 to your computer and use it in GitHub Desktop.
Save mattjared/7123082 to your computer and use it in GitHub Desktop.
Download ZIP
I have a map and when you click on an image corresponding with a location on the map I'd like for content hidden by a class with "display: hidden" to appear and change when I'm clicking on different locations in the map. I've got that working smoothly and you can click around freely on the different map locations and the corresponding informati…
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name=”Great Bean Chocolate” content=”A Higher State of Bean”/>
<title>Great Bean Chocolate | A Higher State of Bean</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Andika' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<br>
<section class="grid one">
<img class="map" src="usa_map.png"/>
<div class="au-img">
<div class="austin"><img src="x.jpg" id="austin"/></div>
<div class="dallas"><img src="x.jpg" id="dallas"/></div>
<div class="denton"><img src="x.jpg" id="denton"/></div>
<div class="new-york"><img src="x.jpg" id="new-york"/></div>
<div class="fort-worth"><img src="x.jpg" id="fort-worth"/></div>
<div class="houston"><img src="x.jpg" id="houston"/></div>
<div class="san-antonio"><img src="x.jpg" id="san-antonio"/></div>
<div class="portland"><img src="x.jpg" id="portland"/></div>
</div>
</section>
<section class="grid one">
<div class="standardtext">X Marks the spot. Click to see locations in each city.</div>
<div class="about-austin hide">
<h3 class="center">Austin of Texas</h3>
<p>Austin Austin Austin Austin Austin Austin Austin Austin Austin Austin Austin Austin</p>
</div>
<div class="about-dallas hide">
<h3 class="center">Dallas of Texas</h3>
<p>Dallas Dallas Dallas Dallas Dallas Dallas Dallas Dallas Dallas Dallas Dallas Dallas</p>
</div>
<div class="about-denton hide">
<h3 class="center">Denton of Texas</h3>
<p>Denton Denton Denton Denton Denton Denton Denton Denton Denton Denton Denton Denton</p>
</div>
<div class="about-new-york hide">
<h3 class="center">New York City of New York</h3>
<p>New York New York New York New York New York New York New York New York New York</p>
</div>
<div class="about-fort-worth hide">
<h3 class="center">Forth Worth of Texas</h3>
<p> Forth Worth Forth Worth Forth Worth Forth Worth Forth Worth Forth Worth Forth Worth</p>
</div>
<div class="about-houston hide">
<h3 class="center">Houston of Texas</h3>
<p> Houston Houston Houston Houston Houston Houston Houston Houston Houston Houston</p>
</div>
<div class="about-san-antonio hide">
<h3 class="center">San Antonio of Texas</h3>
<p> San Antonio San Antonio San Antonio San Antonio San Antonio San Antonio San Antonio</p>
</div>
<div class="about-portland hide">
<h3 class="center">Portland of Oregon</h3>
<ul>
<li>Portland</li>
<li>Portland</li>
<li>Portland</li>
<li>Portland</li>
<li>Portland</li>
<li>Portland</li>
<li>Portland</li>
</ul>
</div>
</section>
</body>
</html>
Raw
script.js
$(document).ready(function(){
$('.au-img img').on('click', function(e) {
var $this = $(this),
$id = $this.attr('id'),
$class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
$('.standardtext').addClass('hide');
$('.about-' + $id).removeClass('hide');
$('div[class*=about]').not($class).addClass('hide');
});
});
Raw
style.css
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Andika', sans-serif;
font-weight: 400;
}
.grid {
width: 100%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.left { float: left; }
.right { float: right; }
.center {text-align: center;}
.clear {clear: all;}
.one { width: 100%; }
.two { width: 50%; }
.navthree { width: 20%; }
.three { width: 33%; }
.bigfour { width: 75%}
.four { width: 25%; }
.five { width: 20%; }
.six { width: 16.66%;}
.seven { width: 13.7%;}
.eight { width: 11%;}
.standardtext {
padding-top: 25px;
}
.hide {
display: none;
}
.map {
position: relative;
}
.austin {
position: absolute;
top: 480px;
left: 460px;
}
.dallas {
position: absolute;
top: 440px;
left: 480px;
}
.denton {
position: absolute;
top: 420px;
left: 480px;
}
.new-york {
position: absolute;
top: 175px;
left: 875px;
}
.fort-worth {
position: absolute;
top: 440px;
left: 440px;
}
.houston {
position: absolute;
top: 507px;
left: 485px;
}
.san-antonio {
position: absolute;
top: 507px;
left: 445px;
}
.portland {
position: absolute;
top: 80px;
left: 70px;
}
@media screen and (max-width: 640px) {
.one {
width: 100%;
margin: 0 auto;
float: none;
}
.two {
width: 100%;
float: none;
margin: 0 auto;
}
.menu {
width: 100%;
margin: 10px auto;
}
.four {
width: 50%;
}
.five {
width: 50%;
float: left;
margin: 0 auto;
}
.six {
width: 33.33%;
float: left;
margin: 0 auto;
}
.three {
width: 95%;
float: none;
margin: 0 auto;
}
.navthree {
width: 100%;
float: none;
}
.logo {
float: none;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 480px) {
.left {
float: none;
margin: 0 auto;
}
.right {
float: none;
margin: 0 auto;
}
.two {
width: 100%;
float: none;
margin: 0 auto;
}
.menu {
width: 100%;
margin: 10px auto;
}
.three {
width: 95%;
float: none;
margin: 0 auto;
}
.four {
width: 95%;
float: none;
margin: 0 auto;
}
.five {
width: 95%;
float: none;
margin: 0 auto;
}
.six {
width: 95%;
float: none;
margin: 0 auto;
}
}
@brianfryer
Copy link

Looks like I'm missing a couple of images: http://imgur.com/XBSrMoJ

@mattjared
Copy link
Author

Live link is here: http://mattjared.co/map/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment