Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 12, 2018 10:15
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 anonymous/a9ca086128590bf3e2a395f1f0ca566b to your computer and use it in GitHub Desktop.
Save anonymous/a9ca086128590bf3e2a395f1f0ca566b to your computer and use it in GitHub Desktop.
Download ZIP
// source http://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style id="jsbin-css">
// CSS
#quotes-div{
position: relative;
}
#quotes {
display: none;
}
</style>
</head>
<body>
<div class="quotes-div" id="quotes-div">
<h1 class="quotes" id="quotes" style="color:green;">Det</h1>
<h1 class="quotes" id="quotes" style="color:green;">virker</h1>
<h1 class="quotes" id="quotes" style="color:green;">sku</h1>
</div>
<div>
<form action="index.php" method="post">
<p>
<label for="nameLabel">Your full name: </label>
<br/>
<input type="text" name="username" id="username" placeholder="Name..">
</p>
<p>
<label for="emailLabel">Your email: </label>
<br/>
<input type="text" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Email..">
</p>
<p>
<label for="phonenumberLabel">Your phone number: </label>
<br/>
<input type="text" ="input3" name="phonenumber" pattern="[0-9]*" id="phonenumber" placeholder="Phone number..">
</p>
<br/>
<button type="submit" id="submit" value="submit">Submit</button>
<div id="sequence"></div>
//there you go
// I have more code than this, but this is the problem I have
</form>
</div>
<script id="jsbin-javascript">
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.slideDown(1500)
.fadeIn(1500)
.fadeOut(1400, showNextQuote);
}
showNextQuote();
})();
</script>
<script id="jsbin-source-css" type="text/css">// CSS
#quotes-div{
position: relative;
}
#quotes {
display: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.slideDown(1500)
.fadeIn(1500)
.fadeOut(1400, showNextQuote);
}
showNextQuote();
})();</script></body>
</html>
Raw
jsbin.untitled.css
// CSS
#quotes-div{
position: relative;
}
#quotes {
display: none;
}
Raw
jsbin.untitled.js
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.slideDown(1500)
.fadeIn(1500)
.fadeOut(1400, showNextQuote);
}
showNextQuote();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment