Skip to content

Instantly share code, notes, and snippets.

@rugbyprof

rugbyprof/Example.html

Last active August 29, 2015 14:03
Show Gist options
  • Save rugbyprof/720feb08ee65f0f84cb9 to your computer and use it in GitHub Desktop.
Save rugbyprof/720feb08ee65f0f84cb9 to your computer and use it in GitHub Desktop.
Download ZIP
Rudimentary example using bootstrap and jquery.
Raw
Example.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Contact Card</title>
<!-- Include our personal style sheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Include Bootstrap's style sheet -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- This is a local style sheet -->
<style>
#ContactContainer{
display:none;
}
</style>
</head>
<body>
<!--
This first container contains the form that will
populate our contact card. For your assignment, you
will need to add or change some form fields adapting
it to the new contact card.
-->
<div class="container" id="FormContainer">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-5">
<h2>Sign Up</h2>
<form class="form-horizontal" role="form" id="contactForm">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user" style="font-size:14px"></i></div>
<input type="text" class="form-control" id="formName" placeholder="Name">
</div>
</div>
</div>
<div class="form-group borderDiv">
<label for="WebSite" class="col-sm-2 control-label">Website</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-code" style="font-size:14px"></i></div>
<input type="text" class="form-control" id="formWebSite" placeholder="Web Site">
</div>
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-envelope" style="font-size:14px"></i></div>
<input type="text" class="form-control" id="formEmail" placeholder="Email Address">
</div>
</div>
</div>
<div class="form-group">
<label for="PhoneNumber" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-mobile" style="font-size:18px"></i></div>
<input type="text" class="form-control" id="formPhoneNumber" placeholder="Phone Number">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="CreateButton">Create Contact</button>
</div>
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
<!--
This second container hold the actual contact card
information. We set the 'display' attribute to 'none'
so we can hide it until after we get the form filled
out. Is this a normal way of doing this? Not really,
it's classroom assignment, and this example is just
that ... an example.
-->
<div class="container" id="ContactContainer">
<div class="well well-sm quick-contact">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<h1 class="title-contact" id="contactTitle">Quick Contact</h1>
<h3 id="emailAddress">
+12 34567890, +12 34567890</h3>
</div>
<div class="col-md-4 contact-email">
<h2 id="webSite">
[email protected]</h2>
<h3 id="phoneNumber">
+12 34567890, +12 34567890</h3>
</div>
<div class="col-md-4">
<div class="row contact row-first">
<div class="col-md-6">
<a href="http://www.jquery2dotnet.com" class="skype"><i class="fa fa-skype"></i>skype</a>
</div>
<div class="col-md-6">
<a href="http://www.jquery2dotnet.com" class="google"><i class="fa fa-google-plus"></i>google</a>
</div>
</div>
<div class="row contact">
<div class="col-md-6">
<a href="http://www.jquery2dotnet.com" class="linkedin"><i class="fa fa-linkedin"></i>linkedin</a>
</div>
<div class="col-md-6">
<a href="http://www.jquery2dotnet.com" class="twitter"><i class="fa fa-twitter"></i>twitter</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--
This is our Jquery script that handles:
1. grabbing the info from the form,
2. showing our contact card,
3. placing the form info into the card,
4. hiding the form
-->
<script>
$(function() {
//I can use regular comments inside our script tag!
//Log the debug param to the console. I'm leaving this in
//as an example of how to write to the console.
console.log($.urlParam('debug'));
//If I put ?debug=true on the URL, I will auto populate
//our form to speed up coding. This is an unnecessary
//step, but pretty helpful.
if($.urlParam('debug')){
$('#formWebSite').val('http://cs.mwsu.edu/~griffin');
$('#formPhoneNumber').val('(940) 636-0014');
$('#formName').val('Terry Griffin');
$('#formEmail').val('[email protected]');
}
//Add a Jquery animation to the classes: .title-contact and .contact-email
$(".title-contact, .contact-email").fadeIn("slow");
//This attaches a function to the submit button of our form.
//When the form is submitted, it runs this function.
$( "#contactForm" ).submit(function( event ) {
// Stop form from submitting normally or block
// it from going to wherever the "action" dictated.
event.preventDefault();
// Set the css attribute of the ContactContainer to "block"
// essentially showing it. 'display:none' hides an element.
$('#ContactContainer').css( "display", "block" );
//Hide the form we just filled out.
$('#FormContainer').css( "display", "none" );
//Copy all the data from the form, to our contact card.
//Remember each form element has an 'id' so
//$('#idname') references an element on the page with that id.
//.html grabs the 'html' or the stuff in between the tags
//.val grabs the value that is in the form field
// So .html is for elements (div,p,li,etc.) and .val is for form fields (input type="something")
$('#webSite').html($('#formWebSite').val());
$('#phoneNumber').html($('#formPhoneNumber').val());
$('#contactTitle').html($('#formName').val());
$('#emailAddress').html($('#formEmail').val());
});
});
// This is a function I found that grabs the "GET" params off the URL
// and makes them available as variables.
// Example: "?debug=true" is accessed like: $.urlParam('debug')
// If the URL looked like: ?id=98373&name=Terry&location=Texas then
// I could access each var like: $.urlParam('id') or $.urlParam('name') or $.urlParam('location')
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment