I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
I'm building an app that uses angular and node.
Ive done some CSS work to get the styling how I like.
When I view the buttons on the web, at all screen sizes,
it looks great, but on the iPhone, it looks horrible.
Everything is aligned weird and the padding/margins are incorrect.
Only inside the button.
Ive tried -webkit-appearance: none!important;
but have had no luck. I tried it on every element.
Anyone know what I can do to get my buttons to render like they
do on the web?
Here is a fiddle that replicates the problem. View it on phone and web view : https://jsfiddle.net/2543ge0a/2/
.socialBtn {
-webkit-appearance: none!important;
width: 300px;
color: #fdfdfd;
font-weight: bold;
text-align: center!important;
font-size: 17px;
}
.field p.control {
margin: 0 auto;
text-align: center!important;
}
.fbBtn {
-webkit-appearance: none!important;
background-color: #3b5998!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.googleBtn {
-webkit-appearance: none!important;
background-color: #D84B37!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.linkedinBtn {
-webkit-appearance: none!important;
background-color: #0077b5!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.signUpBtn {
-webkit-appearance: none!important;
background-color: #0077be!important;
border-radius: 0;
text-align: center;
color: #fdfdfd;
border: none;
}
.page {
padding-top: 0;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 50px;
}
.title.has-text-centered {
color: #111;
font-size: 60px;
font-weight: 500;
margin-bottom: 1rem;
width: auto;
}
h4.title {
font-size: 25px;
text-align: center;
}
.subtitle {
margin-top: 1.5rem!important;
text-align: left;
line-height: 1.5;
}
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 35px;
line-height: 1.3;
}
#media(max-width: 325px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 22px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.2;
font-size: 17px;
}
}
#media(max-width: 400px) {
h3.title {
color: #fdfdfd;
text-align: left;
font-size: 28px;
line-height: 1.3;
margin-bottom: 10px;
}
.subtitle {
margin-top: 1rem!important;
text-align: left;
line-height: 1.3;
}
}
a {
color: #FF9933;
}
.subtitle.is-6 {
margin-bottom: 30px;
}
button {
-webkit-appearance: none!important;
text-align: center!important;
}
#ctaBtn {
-webkit-appearance: none!important;
padding: 5px 7px;
height: 40px;
width: 150px;
color: #fdfdfd;
font-weight: 600;
font-size: 18px;
box-shadow: 2px 2px 6px #111!important;
background-color: #FF9933;
border: none;
text-align: center!important;
-webkit-transition: all .15s ease; /* Safari and Chrome */
-moz-transition: all .15s ease; /* Firefox */
-ms-transition: all .15s ease; /* IE 9 */
-o-transition: all .15s ease; /* Opera */
transition: all .15s ease;
}
section.section {
background-color: transparent;
padding-top: 0;
padding-bottom: 140px;
}
.button:hover {
-webkit-appearance: none!important;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-ms-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
}
.button:active {
-webkit-appearance: none!important;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.is-primary {
background-color: #0077be!important;
}
.is-primary:hover {
background-color: #0077be!important;
opacity: .8;
}
input.input, textarea.textarea {
border-radius: 0;
border-right: none;
border-top: none;
border-left: none !important;
box-shadow: none !important;
background: transparent!important;
color: #fdfdfd;
}
input::-webkit-input-placeholder {
color: #111!important;
opacity: .6;
}
input:-moz-placeholder { /* Firefox 18- */
color: #111!important;
opacity: .6;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #111!important;
opacity: .6;
}
input:-ms-input-placeholder {
color: #111!important;
opacity: .6;
}
.textarea {
min-height: 10px;
}
input.input:focus, textarea.textarea:focus {
border-bottom-color: #0077be;
}
p.content {
color: #111;
}
#error {
z-index: 1000;
color: red;
font-weight: bold;
text-align: center;
padding: 13px 30px;
margin: 0 auto;
top: 0;
opacity: 0;
height: 0;
width: 300px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
img.image {
margin: 0 auto;
}
#media(min-width: 650px) {
img.image {
max-height: 400px;
max-width: 300px;
}
}
#media screen and (min-width: 1008px) {
.page {
padding-left: 150px;
padding-right: 150px;
}
.container {
width: inherit;
}
.subtitle.is-6 {
font-size: 20px;
}
a {
font-size: 22px;
font-weight: 500;
cursor: pointer;
}
}
#media(max-width: 700px) {
.socialBtn {
-webkit-appearance: none!important;
width: 250px;
text-align: center!important;
}
}
<div class="modal" [ngClass]="{'is-active': signup}">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<i class="fa fa-times-circle" aria-label="close" (click)="onClickAction('exit')" style="float: right;
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px); translateX(10px)"></i>
<div class="container">
<h4 class="title"
style=" font-family: 'Ubuntu', sans-serif;color: #0077be;">For the innovators</h4>
<h6 class="subtitle has-text-centered">Signup</h6>
<p class="content">For our first <strong style="color: #FF9933; font-size: 17px;">1000</strong> users, we're offering
<strong style="color: #FF9933; font-size: 17px;">free</strong>
fees on all transactions for the first year. We'll take care of the business, you just provide the electronics.</p>
<div *ngIf="!signupComplete">
<div class="field" style="text-align: center">
<div class="card">
<input
type="email"
name="email"
#emailT="ngModel"
[(ngModel)]="user.email"
placeholder="email *required"
required
style="color: #111"
class="input">
<input
type="text"
name="name"
#nameT="ngModel"
[(ngModel)]="user.name"
placeholder="name"
style="color: #111"
class="input">
<input
type="text"
name="image"
#imageT="ngModel"
[(ngModel)]="user.image"
placeholder="image url"
style="color: #111"
class="input">
</div>
</div>
<div class="field">
<p class="control">
<button
(click)="onSignup()"
class="button socialBtn signUpBtn has-text-centered">Join rent
</button>
</p>
</div>
<h4 class="subtitle has-text-centered">Or</h4>
<div class="field">
<p class="control">
<button
(click)="authSignin('facebook')"
class="button socialBtn fbBtn">
<span class="icon is-small">
<span class="fa fa-facebook"></span>
</span> <span> | Signup with Facebook</span>
</button>
</p>
</div>
<!--<div class="field">-->
<!--<p class="control">-->
<!--<button-->
<!--(click)="authSignin('linkedin')"-->
<!--class="button socialBtn linkedinBtn">-->
<!--<span class="icon is-small">-->
<!--<span class="fa fa-linkedin"></span>-->
<!--</span> <span> | Signup with Linkedin</span>-->
<!--</button>-->
<!--</p>-->
<!--</div>-->
<div class="field">
<p class="control">
<button
(click)="authSignin('google')"
class="button socialBtn googleBtn">
<span class="icon is-small">
<span class="fa fa-google"></span>
</span> <span> | Signup with Google</span>
</button>
</p>
</div>
</div>
<img src="../../assets/animat-checkmark-color.gif" alt="" class="image" *ngIf="checkmark">
<h4 class="title" *ngIf="thankyou">Thanks for signing up! <br>Look out for an email</h4>
</div>
</section>
</div>
</div>
As you described that Everything is aligned weird and the padding/margins are incorrect on iPhone. It seems that viewport is missing, So add this viewport to your header. Hope this will help you.
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
Today when testing a project of mine, I found out that the mobile navigation of my website isn't show it's list items on some iOS devices.
I tested on Iphone 5 and IPad mini, and those worked,
then i tested on an Iphone 4 and a old Ipad and it didnt show the list items of my navigation. So i think it i enclosed the problem to a outdate iOS or device i guess?
I really have no idea how i should be debugging this problem without being able to use the inspect element tool i have on a desktop. I also don't really find a problem in my code.
My website url is: http://gillesvercammen.be/praniels/
if anyone could be brave enough to test this on an older iOS device, that would be awesome. Below I will put some snippets of relevant code for the bug.
Please forgive me if my code is a little messy, this is my first decent sized project.
This is my full navigation (although the problem only lies in the list items not showing when expanding the hamburger menu)
<header>
<a href="#" title="praniels logo" class="logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<nav class="floatfix nav">
<div id="hamburgerknop">
<a href="#" title="praniels logo" class="mobile-logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<span id="hamburger" class="fa fa-bars"></span>
</div>
<ul class="main-nav">
<li><a class="<?php if(isset($home)){ echo($home); } ?>" href="<?=$prefix?>index.php" title="naar homepage">Home</a></li>
<li><a class="<?php if(isset($overons)){echo($overons);} ?>" href="<?=$prefix?>over-ons/over-ons.php" title="naar over ons">Over Ons</a></li>
<li><a class="<?php if(isset($producten)){echo($producten);} ?>" href="<?=$prefix?>producten/producten.php" title="naar producten">Producten</a></li>
<li><a class="<?php if(isset($workshops)){echo($workshops);} ?>" href="<?=$prefix?>workshops/workshops.php" title="naar workshops pagina">Workshops</a></li>
<li><a class="<?php if(isset($klanten)){echo($klanten);} ?>" href="<?=$prefix?>klanten/klanten.php" title="naar klantenpagina">Klanten</a></li>
<li><a class="<?php if(isset($contact)){echo($contact);} ?>" href="<?=$prefix?>contact/contact.php" title="naar contactpagina">Contact</a></li>
</ul>
<ul class="icon-nav">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram" target=_"blank"></span></li>
</ul>
<?php
if(isset($_SESSION["fldEmail"])){
?>
<span class="fa fa-lock"></span>Logout
<?php if(isset($_SESSION["admin"])) { ?>
<span class="fa fa-lock"></span>Admin
<?php } else {}}
else { ?> <span class="fa fa-unlock-alt"></span>Login <?php }
?>
</nav>
</header>
Following are some relevant CSS lines
header {
/*background-color: rgba(255,255,255,0.5);*/
position: fixed;
left: 0;
height: 120px;
top: 0;
width: 100%;
z-index: 10;
display: block;
}
.logo {
z-index: 12;
position: absolute;
left: 50px;
top: 0;
display: block;;
width: 150px;
padding-top: 10px;
}
.nav {
z-index: 11;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
.main-nav {
list-style: none;
}
.mobile-logo {
display: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
height: 120px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav li a {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
text-decoration: none;
display: block;
line-height: 16px;
height: 16px;
padding: 25px 10px 24px;
}
.nav li a:hover {
color: rgb(212,192,152);
}
.nav ul li .active {
color: rgb(212,192,152);
}
.icon-nav {
position: absolute;
right: 0px;
top: 0;
margin-right: 50px;
}
.icon {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 44px;
height: 0;
padding-top: 44px;
overflow: hidden;
text-align: left;
white-space: nowrap;
}
.logout {
position: absolute;
right: 10px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.admingo {
position: absolute;
right: 80px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.fa-lock, .fa-unlock-alt {
margin-right: 5px;
}
.logout:hover {
border: 1px solid rgb(212,192,152);
color: rgb(212,192,152);
}
/* ================= RWD =============== */
#media screen and (min-width: 769px) {
.logo {display: block !important; }
#hamburgerknop { display: none !important; }
.nav { display: block !important; }
}
#media screen and (max-width: 768px) {
header {
height: 80px;
}
.main-nav {
display: none;
}
.expand .main-nav {
display: block;
}
#hamburgerknop {
background: rgba(31,15,16, 0.35);
padding: 8px;
text-decoration: none;
width: 100%;
z-index: 2;
height: 80px;
}
#hamburgerknop span {
margin-top: 15px;
cursor: pointer;
display: block;
padding: 3px 4px 3px;
position: relative;
color: rgb(246,246,226);
font-size: 2em;
line-height: .8;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0;
width: 100%;
height: 100%;
background-color:rgb(31,15,16);
padding: 0;
}
.main-nav {
height: 0px;
}
.nav li:nth-child(1){
padding-top: 5%;
}
.nav li {
display: block;
position: relative;
font-size: 1em;
font-weight: bold;
height: 20%;
}
.nav li a {
height: initial;
display: block ;
background: none !important;
color: #fff;
text-decoration: none;
}
.nav {
clear: both;
position: fixed;
}
nav {
height: auto;
display: none;
position: fixed;
}
.expand {
display: block !important;
}
.logo {
display: none;
}
.mobile-logo {
z-index: 12;
position: absolute;
top: 0;
display: block;
margin-top: 5px;
width: 100px;
}
}
Please use below mentioned code:
.non-transparent {
background-color: #1f0f10 !important;
max-height: 100%;
overflow: auto;
z-index: 11;
}
instead
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
I have build a pretty simple animation with CSS (just moving an image a few pixels) which works fine on all browser I had available for testing EXCEPT the iPad mobile Safari (iOS 8.1).
On the iPad nothing even slightly moves. The image sits still.
Has anybody else encountered such a bug or behaviour with iOS? ... or am I missing something important with webkit here?
Thanks for hints ;o)
This is what I did so far:
body { font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; text-align:left;
SCROLLBAR-FACE-COLOR: #001428; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #001428;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #001428; text-align:center; width:100%; margin:0 auto}
.BodyHeader {background-image: url(../images/Header-Singleton.jpg); background-repeat: repeat-x; position:absolute; height:90px; width:100%; border: 0px solid #cc0033;}
.BodyHeaderPic { background-image: url(../images/Header.jpg); background-repeat: repeat-x; position:absolute; right:200; height: 90px; width:322px; border:0px solid #cc0033;}
.BodyScroller {position:absolute; left:1%; top:90px; width:98%; bottom:10px; overflow:auto; border: 0px solid #FF9933;}
.BodyMain { position:absolute; left:0; top: 30px; width:70%; border:opx solid #cc0033; text-align:left; vertical-align:text-top; z-index:1}
.Footer { position:absolute; width:640px; left:50%; margin-left:-320px; bottom: 5px; height:25px; border:1px solid #dcdcdc; text-align:center; font-size:10px; color:#7896be; z-index:9999;}
.Footer p { margin:5px;}
a {font:Arial, Helvetica, sans-serif; color:#2d5578; text-decoration:none; border: none}
a:hover {font:Arial, Helvetica, sans-serif; color:#7896be; text-decoration:underline; border: none}
a:active {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
a:selected {font:Arial, Helvetica, sans-serif; color:#cc0033; text-decoration:none; border: none}
img {border: none;}
h1 {font-style:normal; font-variant:normal; font-size:12pt; font-family:Arial; color:#2d5578; padding-top:5px; padding-bottom:5px; margin:0px; }
h2 {font-style:normal; font-variant:normal; font-size:11pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
h3 {font-style:normal; font-variant:normal; font-size:10pt; font-family:Arial; color:#7896be; padding-top:5px; padding-bottom:5px; margin:0px; }
.vbar-lightblue {width:300px; height:2px; background-image:url(../images/vbar-lightblue.jpg); background-repeat:no-repeat}
.HPflyInImages {position:absolute; left:50%; margin-left:200px; top: 220px; width:217px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:999;}
.HPflyInImagesCrossFrame1 {position:absolute; left:50%; margin-left:135px; top: 180px; width:317px; height:241px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:100; background-image:url(../images/imageCrossFrame.png)}
.image1 {position: relative; right:-200px; top:00px; border: 0px solid #cc0033; text-align:right; width:200px;}
.CrossFrameSmall1 {position:absolute; right:50px; top: 150px;z-index:100;}
.CrossFrameSmall1MoveImage{position:absolute; right:150px; top: 205px;z-index:99;
-moz-animation-name: moveImage;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: moveImage;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-name: moveImage;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards
}
#-moz-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#-webkit-keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
#keyframes moveImage {
0% {transform: translateX(0px);}
75% {transform: translateX(-150px);}
100% {transform: translateX(-100px);}
}
.HPflyInImagesSmall {position:absolute; right:50px; top: 200px; border: 1px solid #cc0033; overflow:hidden;}
.HPflyInImagesCrossFrameSmall1 {width:200px; height:180px; border: 1px solid #cc0033; overflow:visible; text-align:right; }
.HPflyInImagesCrossFrameSmall2 {width:195px; height:180px; border: 1px solid #cc0033; overflow:hidden; background-image:url(../images/imageCrossFrameSmall.png)}
.CrossFrameSmallMoveImage { }
/* *** Menu *** */
.Menubar {position: absolute; left:0px; top:90px; width:100%; background-color:#cc0033; text-align:left; background-image:url(../images/MenueBackground.jpg); background-repeat:repeat-x; }
.Menubar ul { left:10px;}
/* *** MAIN *** */
.mainHephy {position:absolute; right:100px; width:170px; height:220px; top:20px; background-image:url(../images/mainHephy.jpg); background-repeat:no-repeat; border: 0px solid #cc0033;}
.wiseSpell {position:relative; top: 310px; border:0px solid #996600; text-align:left; width: 95%;}
.quotation { font-size:8px; margin:0px; padding:5px; color:#7896be}
.mainGreetings {position: relative; top: -50px; text-align:left; width:400px; padding-left:50px; }
/* *** PRIVATE *** */
.tdHeader { font-weight:bold; color:#325f82}
.moreBody { width:600px;}
.imageGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** AVIATION *** */
.FlightBooklet {position:absolute; left:50%; margin-left:100px; top: 80px; width:244px; border: 0px solid #cc0033; overflow:hidden; text-align:right; z-index:101;}
.imageAVGallery {position:absolute; left:50%; margin-left:-040px; width:430px; top: 100px; border:0px solid #cc0033; text-align:left; vertical-align:text-top}
/* *** CONTACT *** */
.FMS-TextLine { width:400px;}
.FMS-TextField { width:600px; height:150px;}
.FMS-Button { width:100px;}
and this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/CSS/CSS3Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<link rel="stylesheet" type="text/css" href="/CSS/ASW.css">
<title>ASW 15</title>
</head>
<body ontouchstart="">
<div class="BodyHeader"></div>
<div class="BodyHeaderPic"></div>
<script language="javascript" type="text/javascript" src="/JS/ASW-MenueEmbed.js"></script>
<script language="javascript" type="text/javascript" src="/JS/ASW-FooterEmbed.js"></script>
<div class="BodyScroller">
<div class="BodyMain">
<br />
<div class="moreBody">
<h1>... more</h1>
<br />
</div>
</div>
</div>
<img src="../images/imageCrossFrameSmall.png" alt="Hephy" class="CrossFrameSmall1"/>
<img src="../images/more01.jpg" alt="Hephy" class="CrossFrameSmall1MoveImage"/>
</body>
</html>
At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?
DEMO= http://jsfiddle.net/UznQe/
<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="themes/theme1.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
var total = $("#theList input[type=checkbox]").length;
var numChecked = $("#theList input[type=checkbox]:checked").length;
if (numChecked == 1) {
$("#progress").css('background', 'red');
} else if (numChecked == 2) {
$("#progress").css('background', 'orange');
} else if (numChecked == 3) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
var prog = numChecked * 100 / total;
$("#progress").css("width", prog + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Task list</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 1 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
</div>
Task 2 (40%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
</div>
Task 3 (5%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
</div>
Task 4 (10%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
</div>
Task 5 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 6 (15%)
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>
</body>
</html>
Updated FIDDLE
Instead of counting the number of checked checkboxes, you add up the values of the checked checkboxes:
//calculate percentage
perc = 0;
$("#theList input[type=checkbox]:checked").each(function( index ) {
perc += parseInt($(this).val());
});
if (perc < 15) {
$("#progress").css('background', 'red');
} else if (perc < 30) {
$("#progress").css('background', 'orange');
} else if (perc < 60) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
$("#progress").css("width", perc + "%");
parseInt($(this).val()) gives you an integer representation of the value.
Here is one example in codepen check this.
<form>
<p>
<input type="checkbox" name = "box1"/>
<input type="checkbox"name = "box2" />
<input type="checkbox" name = "box3"/>
</p>
</form>
<div class="progressbar-container">
<div class="progressbar-bar"></div>
<div class="progressbar-label"></div>
</div>
<div class = "ready"></div>
Here is the javascript for this
$(document).ready(function() {
// get box count
var count = 0;
var checked = 0;
function countBoxes() {
count = $("input[type='checkbox']").length;
console.log(count);
}
countBoxes();
$(":checkbox").click(countBoxes);
// count checks
function countChecked() {
checked = $("input:checked").length;
var percentage = parseInt(((checked / count) * 100),10);
$(".progressbar-bar").progressbar({
value: percentage
});
$(".progressbar-label").text(percentage + "%");
}
countChecked();
$(":checkbox").click(countChecked);
});
The changes of the progress bar applied through CSS.
body { margin: 20px 50px; }
h1 { font-size: 1.5em; }
p { margin: 0; }
input[type="checkbox"] {
height: 20px;
width: 20px;
margin-right: 10px;
}
.ready { font-size: 1.5em; }
.ui-progressbar-value { background: lightgreen; }
.progressbar-container {
position: relative;
width: 350px;
}
.progressbar-bar {
height: 25px;
margin: 10px 0;
border-radius: 7px;
}
.progressbar-label {
position: absolute;
top: 2px;
left: 45%;
z-index: 2;
}