Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@Ahnita

Ahnita/Modal script.js

Last active August 29, 2015 14:25
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 Ahnita/54ee3798a0f500eecd39 to your computer and use it in GitHub Desktop.
Save Ahnita/54ee3798a0f500eecd39 to your computer and use it in GitHub Desktop.
Download ZIP
Updates July 17
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/index_style.css" rel="stylesheet">
<link href="css/map.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel ="stylesheet">
<link href="css/modal.css" rel="stylesheet">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- jQuery Media Script -->
<script src = "js/jquery.media.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script type="text/javascript" src="jquery.stellar.min.js"></script>
<!-- map -->
<script type="text/javascript" src="js/map.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCY_H22yH7bp3AF3eVXd9IT4N_lkL8Qqog&sensor=false&extension=.js'></script>
<!-- Kitties -->
<script type="text/javascript" src="js/kitties.js"></script>
<!-- modal -->
<script type="text/javascript" src="js/modal.js"></script>
<script>!function(d,s,id){var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'htttps';if(!d.getElementById(id)){js=d.createElement(s);js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');
</script>
<script>
$(function() {
$('#skype').tooltip();
$('#linkedin').tooltip();
$('#twitter').tooltip();
$('#facebook').tooltip();
$('#soundcloud').tooltip();
$('#github').tooltip();
$('#submit').tooltip();
$('#emailahnita').tooltip();
$('#name').tooltip();
$('#phonenumber').tooltip();
});
</script>
<script src = "js/scripts.js"></script>
<script src = "js/kitties.js"></script>
<script src = "js/map.js"></script>
<!-- Custom styles for this template go here -->
<!-- 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]-->
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '125232304166875',
xfbml : true,
version : 'v2.3'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class = "header-wrapper">
<body data-spy = "scroll" data-target=".navbar">
<!-- navbar starts here -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<nav class="container-fluid">
<nav class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr only"> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</nav> <!-- End of navbar-header -->
</nav> <!-- end f nav container -->
</nav> <!-- end of navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h1>Ahn Bustamante</h1>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h1>Simple</h1>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Responsive</h1>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div> <!-- end of item -->
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Intuitive</h1>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" 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-ahnita" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div> <!-- Jumbotron -->
</div> <!-- end of Header -->
<div class = "content">
<div class = "container" id="about">
<div class="header">
<div class = "col-md-4 col-xs-12">
<img src="img/1.png" width="250" height="250" alt = "Ahnita">
</div>
<div class = "col-md-8 col-xs-12">
<h2>"I sing a song of myself, as others have done before me, but none have sung a song quite like this because this one is mine, and there will never be any like me.
<br>
<br>
- Walt Whitman, Leaves of Grass"
</h2>
</div> <!-- end of col-md-8 col-xs-12 -->
</div> <!-- end of header -->
</div> <!-- end of About -->
<div class = "row">
<div class = "col-md-4">
<div class = "container" id = "skills">
<div class = "skill-column">
<h1><span class="glyphicon glyphicon-check" aria-hidden="true"></span>
<br>
My Skills</h1>
<ul class="list-unstyled" id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
<li>Cartography</li>
<li>Cooking</li>
</ul>
</div> <!-- end of Skill Column -->
</div> <!-- end of container skill -->
</div> <!-- end of col-md-4 -->
<div class = "col-md-4">
<div class= "container" id="main_text">
<h1><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
<br>
More about me</h1>
<p>In the past 10 years, I have been involved in procurement and technology implementation projects within Fortune 500 companies and has been a vital contributor in establishing the structure of an organization. I've worked for big brands such as Apple, Johnson and Johnson, Orica and Barclays Capital to name a few.
<br>
<br>
After months of reflection and finally getting the free time and resources, without much distraction, I'm finally doing what I wanted for a long time. To be an opportunity maker through web development.</p>
</div> <!-- End of main text -->
</div> <!-- End of col-md-4 -->
<div class = "col-md-4">
<div class= "container" id="Services">
<h1><span class="glyphicon glyphicon-tower" aria-hidden="true"></span>
<br>
Services</h1>
<p>Responsive Web Design, User Experience Design, User Interface Design
<br>
<br>
My Process: Empathize, Design, Build
<br>
<br>
Web Dev Unicorn: “Front End, Back-End, User Experience”
</div> <!-- End of services -->
</div> <!-- end of col-md-4 -->
</div> <!-- end of row -->
<div class = "row" id= "works">
<div class = "container" id="projects">
<h1>Projects/Work in Progress</h1>
<div class = "image" id="0">
</div>
<div class = "image" id ="1">
</div>
<div class="image" id = "2">
</div> <!-- End of Projects container -->
</div> <!-- End of row -->
<div class = "container" id= "FAQ">
<div class = "header">
<h1>Frequently Asked Questions</h1>
</div>
<div class = "row">
<h2 class = "learn-more">Learn More</h2>
<div class = "modal-button">
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">View CV</button>
<!-- Small modal -->
<div class = "modal fade bs-example-modal-sm" tabindex="-1" role = "dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h4 class="modal-title" id="myModalLabel">CV of Ahn Bustamante</h4>
<button type = "button" class = "closebutton" data-dismiss ="modal" aria-label="close"><span aria-hidden="true">X</span></button>
</div> <!-- end of modal-header -->
<div class = "modal-body">
<iframe id = "modalframe" src = "img/web developer cv.pdf"></iframe>
</div> <!-- end of modal-body -->
<div class="modal-footer"><button type="okbutton" data-dismiss = "modal" class="btn btn-danger">OK</button></div>
</div> <!-- end of modal-content -->
</div> <!-- end of modal dialog -->
</div> <!-- end of modal fade -->
</div> <!-- end of modal-button -->
</div> <!-- end of row -->
<div class = "services-table">
<table>
<tr class="my-row">
<th>Services</th>
<th>Responsive Website</th>
<th>Interactive Website</th>
</tr>
<tr>
<td>Responsive?</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Interactive</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Design</td>
<td>Template</td>
<td>Original</td>
</tr>
<tr>
<td>Content Development</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Maintenance</td>
<td>No</td>
<td>3 Months</td>
</tr>
</table>
</div> <!-- END OF services TABLE -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div> <!-- end of panel-body -->
</div> <!-- end of collapseOne -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's. I realized a greater purpose in web development.
</div>
</div> <!-- end of collapseTwo -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div> <!-- end of panel heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We go through a feedback loop to see if there's anything that needs to be revised. Once everything is finalized, I can start cracking my fingers to make your website. There will be a review to see if there's any revisions and improvement before launching.
</div>
</div> <!-- end of collapseThree -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div> <!-- end of collapseFour -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div><!-- end of collapseFive -->
</div> <!-- end of panel-default -->
</div> <!-- End of FAQ container -->
<div class = "video">
<iframe src="https://player.vimeo.com/video/66667105?color=ffffff&portrait=0" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="map-canvas" style= width: 100%; height: 100px></div>
<div class = "row">
<div class = "container" id="contact">
<div class = "col-md-6 col-xs-12" id= "contact-text">
<div class = "header">
<h1 id = "contact-header">Contact</h1>
</div>
<h3><span class = "glyphicon glyphicon-envelope"></span> Email</h3>
<a href="mailto:ahn.bustamante@gmail.com?Subject=Hello%20Ahnita!" target = "_top" title="Sending me a love letter? Sure!" id="emailahnita">ahn@ahnbustamante.com</a>
<br>
<h3><span class = "glyphicon glyphicon-map-marker"></span> Location</h3>
Makati, Metro Manila Philippines
<br>
<h3><span class = "glyphicon glyphicon-phone"></span> Skype</h3>
<a href="skype:hola.ahnita?call" id="skype" title="Call Ahnita">hola.ahnita</a>
<br>
<h3><span class = "glyphicon glyphicon-globe"></span> Social Media</h3>
<a href = "https://ph.linkedin.com/in/ahnbustamante" title="Linkedin" id="linkedin"><img src="img/linkedin.png" class="sm-icon" alt="linkedin"></a>
<a href = "https://twitter.com/wahnderlush" title="Twitter" id="twitter"><img src="img/twitter icon.png" class="sm-icon" alt="twitter"></a>
<a href = "https://www.facebook.com/ahnita6" title="Facebook" id="facebook"><img src="img/facebook icon.png" class="sm-icon" alt="facebook"></a>
<a href = "https://soundcloud.com/ahnita" title="SoundCloud" id="soundcloud"><img src="img/soundcloud.png" class="sm-icon" alt="soundcloud"></a>
<a href = "https://gist.github.com/Ahnita" title= "GitHub" id="github"><img src="img/github.png" class="sm-icon" alt="github"></a>
</div> <!-- end of contact text -->
<form>
<div class = "col-md-6 col-xs-12">
<div class = "form-group">
<label for = "name">Name</label>
<br>
<input type="text" class="name" id="name" title = "The most beautiful name you've ever heard" placeholder = "Your Name"></input>
<br>
<label for = "text">Email Address</label>
<br>
<input type ="text" class="email" id="email" placeholder = "Your email"></input>
<br>
<label for = "Phone">Contact Number</label>
<br>
<input type ="number" class="phone" id="phonenumber" title= "please include your area code" maxlength = 12 placeholder = "Your number"></input>
<br>
<label for = "message-box">Message</label>
<textarea type = "text" placeholder = "Your message here" class = "message-box" id="message"style = "resize: none" cols="40" rows="5" maxlength = 150></textarea>
<p id="char-count"></p>
<button type = "submit" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title = "Done? Great! Looking forward to talk to you soon!" id="submit">Submit</button>
</div>
</div>
</form>
</div> <!-- end of contact container -->
</div> <!-- end of row-->
</div> <!-- end of content container -->
<footer>
<div class = "footer">
<div class="fb-share" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-colorscheme="light" data-layout="standard" data-show-faces="true"></div>
</div>
<div class = "twittershare">
<a href="https://twitter.com/wahnderlush" class="twitter-follow-button" data-show-count="false">Follow @wahnderlush</a>
<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>
</div>
<br>
&copy;Ahn Bustamante 2015
</div>
</footer>
<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">
$(document).ready(function(){
var myKitties = [ { title: "Moderne Manila", pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" },
{ title: "Second Project", pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" },
{ title: "Third Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" },
];
for (var i=0; i<myKitties.length; ++i) {
$("#" + i).css("background-image", "url(" + myKitties[i].pic + ")");
};
$(".image").mouseenter( function () {
console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span>" + myKitties[
this.id].title + "</p>");
}).mouseleave( function () {
$("p.info").html("");
});
});
});
</script>
</body>
</html>
Raw
kitties.js
$(document).ready(function(){
var myKitties = [ { title: "Moderne Manila", pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" },
{ title: "Second Project", pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" },
{ title: "Third Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" },
];
for (var i=0; i<myKitties.length; ++i) {
$("#" + i).css("background-image", "url(" + myKitties[i].pic + ")");
};
$(".image").mouseenter( function () {
console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span>" + myKitties[
this.id].title + "</p>");
}).mouseleave( function () {
$("p.info").html("");
});
});
Raw
map.js
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(14.561985,121.013531),
zoom: 15,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: [{"featureType": "water","elementType": "geometry","stylers": [{ "color": "#193341" }]},{"featureType": "landscape","elementType": "geometry","stylers": [{ "color": "#2c5a71" }]},{"featureType": "road","elementType": "geometry","stylers": [{ "color": "#29768a" },{ "lightness": -37 }]},{"featureType": "poi","elementType": "geometry","stylers": [{ "color": "#406d80" }]},{"featureType": "transit","elementType": "geometry","stylers": [{ "color": "#406d80" }]},{"elementType": "labels.text.stroke","stylers": [{ "visibility": "on" },{ "color": "#3e606f" },{ "weight": 2 },{ "gamma": 0.84 }]},{"elementType": "labels.text.fill","stylers": [{ "color": "#ffffff" }]},{"featureType": "administrative","elementType": "geometry","stylers": [{ "weight": 0.6 },{ "color": "#1a3541" }]},{"elementType": "labels.icon","stylers": [{ "visibility": "off" }]},{"featureType": "poi.park","elementType": "geometry","stylers": [{ "color": "#2c5a71" }]}],
}
var mapElement = document.getElementById('map-canvas');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Ahn Bustamante', '', 'undefined', 'ahn@ahnbustamante.com', 'ahnbustamante.com', 14.5615324, 121.0116912, 'https://mapbuildr.com/assets/img/markers/default.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
if (web.substring(0, 7) != "http://") {
link = "http://" + web;
} else {
link = web;
}
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>"+desc+"<p><a href='mailto:"+email+"' >"+email+"<a><a href='"+link+"'' >"+web+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
}
Raw
Modal script.js
$(document).ready(function() {
$('#modal-button').click(function(){
$("#modal-dialog").dialog();
});
});
Raw
script.js
$(document).ready(function() {
$('textarea').css('background-color', 'white');
$("#submit").on("click", function(){
console.log("clicked");
});
$('.message-box').on("keyup", function(){
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
}else {
$("#char-count").css("color", "black");
}
if (charCount >= 149) {
alert("Please do not exceed 150 characters");
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment