How can I put these buttons side by side - javascript

How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>


<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen

Related

jQuery toggle() for radio button selects multiple at a time, needs to work like simple radio button

I have created two radio buttons, and for both radio buttons, I used for creating <i> font icon. As I had created that earlier as a check box and it worked properly, I used the same code for creating the radio buttons. Fixed the position; it works if I go by the check box. For these radio buttons, I used the toggle() function in jQuery. But when I use the radio buttons, then I saw that I can not do one selection at a time.
function togperm()
{
$("#perm").toggle();
}
function togchq()
{
$("#chq").toggle();
}
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont{ color:rgb(0,98,168) !important; }
.shcursor{cursor: pointer;}
.f10{font-size: 1.0em !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togchq()">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togperm()">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>

You can use .find() and .not() methods to achieve same . First you can get closest div which contains both your radio button then using .not() exclude div where click event has occur then simply use hide() to hide other i icon.
Demo Code :
$(".radiocirl").on("click", function() {
//get the `i` tag
var selector = $(this).find(".bluefont")
selector.toggle(); //toggle same
//get closest div `outer` and find `i` tag not(the one which is inside the div which is clicked hide it)
$(this).closest(".outer").find(".bluefont").not(selector).hide()
})
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont {
color: rgb(0, 98, 168) !important;
}
.shcursor {
cursor: pointer;
}
.f10 {
font-size: 1.0em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--aded outer class-->
<div class="col-md-12 outer">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>

Display bootstrap wells on left and right side of the page

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?

You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen

I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>

Hide container div on click

I click Click Me! to display the #formcontainer div.
I click it again to hide it, but it doesn't hide :-(
Can someone explain why?
Demo: https://jsfiddle.net/v809wxp9/
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You are not adding the class back to it when class is missing.
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You have to add Following Line in Else Condition :
$("#formcontainer").addClass('hassent');

You are only remove the class at time of click.Then else statement add with class$('#formcontainer').addClass('hassent');.Its get back with original position.
jQuery( document ).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function(){
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
}else{
$('#formcontainer').addClass('hassent');
$('#topimage').slideUp();
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner{
padding:15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size:30px;
text-transform:uppercase;
letter-spacing:3px;
}
#sub-page-banner .tog{
margin-top:0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer{
overflow:hidden;
height:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add the class you remove

Use toggle() function
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
//if ($("#formcontainer").hasClass("hassent")) {
// $('#formcontainer').removeClass('hassent');
// $('#topimage').slideDown();
// $('#formcontainer').css('height', '0');
//} else {
// $('#formcontainer').css('height', 'auto');
// }
$('#formcontainer').toggle();
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

See below code just need to addd $('#formcontainer').addClass('hassent');
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!

Background image parrallax choppy on mobile

Just trying to learn how to implement a simple background image with parrallax. It works fine on desktop/laptop, but is very choppy and doesnt work properly on mobile devices. Using bootstrap-sass with rails.
Any obvious errors/tips that you can see?
CSS
.bg {
background: url('home.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 450px; /*same height as jumbotron */
padding-top: 0;
top:80px;
left:0;
z-index: -1;
}
#backPic {
height: 450px;
padding-top: 150px;
color: white;
text-shadow: #444 0 1px 1px;
background:transparent;
#media(min-width: $screen-lg-min) {
text-align: left;
margin-left: 0;
}
}
JS
<script>
var jumboHeight = $('#backPic').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
HTML
<!DOCTYPE>
<head>
<% content_for :title, "Golden Museum | Home" %>
</head>
<body>
<div class="bg"></div>
<div class="container vertical-center">
<div class="row">
<div class="col-xs-12 col-lg-8">
<div class="container">
<div id="backPic" class="jumbotron">
<h1 class="text-center" id="homeTitle">Golden & District<br> Museum & Archives</h1>
<h2 class="lead text-center">Preserving the records, pictures and artifacts of the Golden Area</h2>
</div>
<div id="mainCont" class="row">
<div id="socialRow" class="row">
<div class="container">
<div class="col-xs-9 col-sm-3 col-lg-2">
<a href="https://www.facebook.com/pages/Golden-Museum-and-Archives/150197378373720?fref=ts" class="btn btn-block btn-default btn-facebook">
<i class="fa fa-facebook"></i> Visit on Facebook!
</a>
</div>
</div>
</div>
<div class="row">
<div id="aboutJumbo" class="jumbotron">
<%= render 'statics/text/home.text' %>
</div>
</div>
<div id="blogRow" class="row">
<div id="blogBox" class="container">
<h2>Recent News</h2>
<%= render 'blog' %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Categories