Trouble with chat layout

Trouble with chat layout - javascript

I am trying to replicate a chat layout on a site I am working on. I was able to create the chat bubble and get the content in pretty much the right spot, I am just having trouble getting it exactly how I want. There are only a few tiny things I am having trouble with. I can't figure out how to get the triangle on the side of the bubble's border to be as thin as the rest of the bubble, as well as making it lower and smaller. I'm having trouble with positioning the sign in image a little lower like in the image of what I need it to look like. And lastly the "Sign In to Comment" needs to be a little to the left of the image. If anyone could shed any light on any of these things, it would be super appreciated!
Currently:
What I am trying to achieve:
As you can see I am very close! just a few tiny things giving me trouble.
HTML:
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
<div class="cell two">
<img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
</div>
</div>
<span class="si">Sign In to Comment</span>
CSS:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:10px; /* controls vertical position */
bottom:auto;
left:auto;
right:-30px; /* value = - border-left-width - border-right-width */
border-width:15px 0 15px 30px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
bottom:auto;
left:auto;
right:-21px; /* value = - border-left-width - border-right-width */
border-width:9px 0 9px 21px;
border-color:transparent #fff;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}

Here is one way to do it:
<div class="wrapper">
<p class="talk-bubble">
talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
</p>
<p class="sign-in">
Sign In to Comment
</p>
<img src="your/image.png" />
</div>
CSS:
div.wrapper {
position: relative;
padding-bottom: 0px;
background-color: #ffffff;
z-index: -2;
}
div.wrapper img {
position: absolute;
bottom: 0;
right: 0;
border: 1px solid black;
width: 40px;
height: 40px;
}
.sign-in {
text-align: right;
margin: 0;
margin-right: 50px;
padding: 0;
}
p.talk-bubble {
border: 1px solid #3A7DBA;
padding: 15px;
background-color: #CDE5F7;
position: relative;
margin-right: 60px;
}
p.talk-bubble:before,
p.talk-bubble:after {
box-sizing: border-box;
padding: 0;
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
border: 20px solid transparent;
}
p.talk-bubble:before {
z-index: -1;
border-bottom: 20px solid #3A7DBA;
right: -12px;
bottom: -1px;
}
p.talk-bubble:after {
border-bottom: 20px solid #CDE5F7;
right: -10px;
bottom: 0px;
}
https://jsfiddle.net/mcgraphix/zLx5967t/

Check this out:
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 .5em;
border:1px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
min-width: 90%;
max-width: 90%;
background-color: #E0F6F2;
}
.triangle-border.blue {
background-color: #CDE5F7;
border:1px solid #3A7DBA;
}
.triangle-border.right {
margin-right:30px;
}
.triangle-border:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:40px; /* controls horizontal position */
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the smaller triangle */
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px; /* value = - border-top-width - border-bottom-width */
left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
/* creates the larger triangle */
.triangle-border.right:before {
top:25px; /* controls vertical position */
bottom:auto;
left:auto;
right:-15px; /* value = - border-left-width - border-right-width */
border-width:5px 0 5px 15px;
border-color:transparent #3A7DBA;
}
/* creates the smaller triangle */
.triangle-border.right:after {
top: 27px;
bottom: auto;
left: auto;
right: -13px;
border-width: 3px 0 3px 13px;
border-color: transparent #ccf;
}
.pagecontent .cols .col.two .sign-in {
table-layout: fixed;
display: table;
outline: none;
}
.pagecontent .cols .col.two .sign-in .cell {
display: table-cell;
margin: 5px;
height: 100%;
}
.pagecontent .cols .col.two .sign-in .cell.one {
width: 85%;
}
.pagecontent .cols .col.two .sign-in .cell.two {
padding-left: 2%;
width: 15%;
}
.pagecontent span.si {
font-size: .8em;
color: #808C8D;
}
<div class="sign-in">
<div class="cell one">
<p class="triangle-border right blue">Join the Conversation</p>
</div>
</div>

Related

How to make my topnav sticky using javascript?

I have a menu on my website that works as expected and i've seen a tutorial from W3Schools. Here it is: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp .
So i put in the css, javascript but as i scroll down the page it doesn't actually work. It could be that my list/topnav is not a div container but i'm not sure.
Here's my home page:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color:#bbb; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
I'm stuck on how to implement their code. Help is appreciated

My code is right, the website works with mobile. I believe it could be the cache that is causing the problem or it could be the sizing of the window.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color:#bbb; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>

Flickering Lines when moving div from Javascript; pixel perfect CSS?

Please take a look at this JSFiddle:
https://jsfiddle.net/a08vkmew/light/
I created a compass with CSS/Html/Javascript that reacts to horizontal mouse movement on the page.
If you move the mouse slowly you will see that the lines change their width slightly which results in a flickering appearance of the compass.
I think this effect occurs when a line does not exactly match up with the according pixels on the screen, so that only half the width of the line can be shown.
In some GUI frameworks we can choose to display the GUI as pixel perfect. Is something like this possible within CSS?
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
}
.arrow.down {
margin-left:-0.5em;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 1em solid dodgerblue;
top: 0em;
}

Trying to animate an element with onClick using JavaScript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want this div to animate on click using JavaScript.
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="140" height="82"/>
</div>
</div> <!-- End Designs -->
Please look at my site to see example
http://mast.salemstate.edu/itc18244/Portfolio/
$('.Thumbnails a').on('click', function(e){
var parent = $(this).parent();
var animationName = parent.data('animation') || 'animated pulse';
parent.addClass(animationName).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
parent.removeClass(animationName);
});

Yes, document ready was missing. See the working demo below.
You could also add data-animation to your div with class .Thumbnail, so you can easily modify the animation just with your HTML markup. See different animation for "Designs".
You can find it also at jsFiddle here.
$(function () {
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function () {
var $this = $(this);
var animationName = $this.data('animation') || 'animated bounce' ;
$this.addClass(animationName).one(animationend, function () {;
$this.removeClass(animationName);
});
});
});
#charset"UTF-8";
#container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
}
body {
/*background-image: url(images/bg.png);*/
background-repeat: repeat-x;
}
name, h3 {
color: black;
padding-left: 5px;
margin: 0;
}
name {
font-size: 51px;
}
h3 {
margin-bottom: 2em;
}
h2 {
margin-top: 30px;
margin-bottom: 5px;
}
p {
font-size: 16px;
margin: 0 0 0 0;
max-width: 960px;
}
#float {
float: left;
padding-left: 10px;
}
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
/*-----------------------*/
/* Navigation */
.nav {
height:auto;
margin: 0 .3em 0 0;
display:inline;
display:inline-block;
}
/* specifying the nav list horizontal */
.nav li {
display: inline;
font-size:16px;
padding: 0 0 0 15.8em;
}
.nav a {
text-decoration: none;
display: inline-block;
}
/* ---------------------------- */
/* Designs_Drawings Div ------ */
#content .Designs_Drawings {
width: 680px;
height: 160px;
margin: 8em auto 3em auto;
}
#content .Designs {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-10deg);
/* IE 9 */
-webkit-transform: rotate(-10deg);
/* Chrome, Safari, Opera */
transform: rotate(-10deg);
float: left;
display: inline-block;
}
#content .Designs p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
background-color: blue;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Drawings Div ------ */
#content .Drawings {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(-350deg);
/* IE 9 */
-webkit-transform: rotate(-350deg);
/* Chrome, Safari, Opera */
transform: rotate(-350deg);
float: right;
display: inline-block;
}
#content .Drawings p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Drawings .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* End Designs_Drawings Div */
/* -------------------------*/
/* Photography_WebSites Div */
#content .Photography_WebSites {
width: 680px;
height: 160px;
margin: 0 auto 4em auto;
}
/* Photography Div ----- */
#content .Photography {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(350deg);
/* IE 9 */
-webkit-transform: rotate(350deg);
/* Chrome, Safari, Opera */
transform: rotate(350deg);
float: right;
display: inline-block;
}
#content .Photography p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .Photography .Thumbnails {
width: 143px;
height: 95px;
/* Give thumb div Border/position */
border-style: solid;
border-width: 1px;
/*---------------------*/
/* Top,Right,Down,Left */
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* Web Sites Div ------ */
#content .WebSites {
background-color: #CCC;
border-style: solid;
border-width: 2px;
width: 230px;
height: 150px;
border-radius: 1em;
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
float: left;
display: inline-block;
}
#content .WebSites p {
text-align: right;
/* Top,Right,Down,Left */
margin: .5em 1em 0 0;
}
#content .WebSites .Thumbnails {
width: 143px;
height: 95px;
/* Give div Border */
border-style: solid;
border-width: 1px;
margin: .5em 0 0 1em;
/* Curves div Corners */
border-radius: 1em;
}
/* --------------------*/
/* Big Box Div --------*/
#content .big_box {
background-color: #CCC;
margin: 1em auto 4em auto;
width: 690px;
height: 483px;
position:relative;
/* Curves div Corners */
border-radius: 1em;
/* Give div Border */
border-style: solid;
border-width: 1px;
}
#content .big_box img {
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
/* ------ */
/* Footer */
.footer {
height: auto;
margin: 0;
display:inline;
display:inline-block;
width: 100%;
}
.footer .info {
margin: 0;
text-align: center;
}
.footer .info li + li::before {
content:" | ";
display: inline-block;
margin-left: .5em;
margin-right: .5em;
}
/* specifying the nav list horizontal */
.footer li {
display: inline;
font-size:12px;
text-align: center;
}
.footer a {
text-decoration: none;
display: inline-block;
}
.footer .info img {
width: 8px;
height: 8px;
}
<link href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<div class="Designs_Drawings">
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<!-- <img src="images/Halloween/bat_sm.png" />
<img src="images/Halloween/frankenstein_sm.png" /> -->
</div>
</div>
<!-- End Designs -->
<div class="Drawings">
<p>Drawings</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Drawings -->
</div>
<!-- End Designs_Drawings -->
<div class="Photography_WebSites">
<div class="Photography">
<p>Photography</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End Photography -->
<div class="WebSites">
<p>Web Sites</p>
<div class="Thumbnails" data-animation="animated bounce"></div>
</div>
<!-- End WebSites -->
</div>
<!-- End Photography_WebSites -->
</div>
</div>

You'll need to wait until the document is ready. Wrap your code up like so:
<script>
$(function(){
var animationName = 'animated bounce';
var animationend = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.Thumbnails').on('click', function() {
$('.Thumbnails').addClass(animationName).one(animationend, function () {;
$(this).removeClass(animationName);
});
});
});
</script>
You also had a JavaScript error because you were missing a }); to close the callback.

Scrollbar in bootstrap application wizard

I have implemented the bootstrap application wizard and it works great but how can I add a scrollbar to each of the pages or cards in this case?
Here is the modal card window without the overflow included:
Here is the css file I added the code for the scrollbar:
/* WIZARD GENERAL */
.wizard {
display:none;
}
.wizard-dialog {}
.wizard-content {}
.wizard-body {
padding: 0;
height: 1500px;
margin: 0;
overflow-y: scroll;
}
/* WIZARD HEADER */
.wizard-header {
padding: 9px 15px;
border-bottom: 0;
}
.wizard-header h3 {
margin: 0;
line-height: 35px;
display: inline;
font-family: 'Segoe UI';
font-family: inherit;
font-weight: bold;
text-rendering: optimizelegibility;
color: #030845;
}
.wizard-subtitle {
font-weight:bold;
color:#AFAFAF;
padding-left:20px;
}
/* WIZARD NAVIGATION */
.wizard-steps {
width: 28%;
background-color: #f5f5f5;
border-bottom-left-radius: 6px;
position: relative;
}
.wizard-nav-container {
padding-bottom: 30px;
overflow-y: scroll;
}
.wizard-nav-list {
margin-bottom: 0;
}
.wizard-nav-link .glyphicon-chevron-right {
float:right;
margin-top:12px;
margin-right:-6px;
opacity:.25;
}
li.wizard-nav-item.active .glyphicon-chevron-right {
opacity:1;
}
li.wizard-nav-item {
line-height:40px;
}
.wizard-nav-list > li > a {
background-color:#f5f5f5;
padding:3px 15px 3px 20px;
cursor:default;
color:#B4B4B4;
}
.wizard-nav-list > li > a:hover {
background-color: transparent;
}
.wizard-nav-list > li.already-visited > a.wizard-nav-link {
color:#030845;
cursor:pointer;
}
.wizard-nav-list > li.active > a.wizard-nav-link {
color:white;
}
.wizard-nav-item .already-visited .active {
background-color:#030845;
}
.wizard-nav-list li.active > a {
background-color:#030845;
}
/* WIZARD CONTENT */
.wizard-body form {
padding: 0;
margin: 0;
height: auto;
}
/* WIZARD PROGRESS BAR */
.wizard-progress-container {
margin-top: 20px;
padding: 15px;
width: 100%;
position: absolute;
bottom: 0;
}
.wizard-card-container {
margin-left: 28%;
}
/* WIZARD CARDS */
.wizard-error,
.wizard-failure,
.wizard-success,
.wizard-loading,
.wizard-card {
border-top: 1px solid #EEE;
display:none;
padding:35px;
padding-top:10px;
overflow-y:auto;
/*
position:relative;
height:300px;
margin-right: 5px;
*/
}
.wizard-card-overlay {
overflow-y: initial;
}
.wizard-card > h3 {
margin-top:0;
margin-bottom:20px;
font-size:21px;
line-height:40px;
font-weight:normal;
}
/* WIZARD FOOTER */
.wizard-footer {
padding:0;
}
.wizard-buttons-container {
padding:20px;
}
.wizard-cancel {
margin-left: 12px;
}
/* Inner Card */
.wizard-input-section {
margin-bottom:20px;
}
.wizard-dialog .popover.error-popover {
background-color:#F2DEDE;
color:#B94A48;
border-color:#953B39;
}
.wizard-dialog .popover.error-popover .arrow::after {
border-right-color:#F2DEDE;
}
.wizard-dialog .popover.error-popover .popover-title {
display:none;
}
.wizard-dialog .popover.error-popover .arrow {
border-right-color:#953B39;
}
When I added the overflow-y this happens:
It seems to show the scrollbar the right way but it also pushes up the navigation buttons. Any ideas on how to fix this would really help.

You need to set a height and overflow on the container.
.wizard-card-container {
height: 300px;
overflow-y: scroll;
}

Dynamic div bottom

I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>

You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}

You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}

We Keep Coding

JavaScript is the programming language of the Web.

Trouble with chat layout - javascript

Related

How to make my topnav sticky using javascript?

Flickering Lines when moving div from Javascript; pixel perfect CSS?

Trying to animate an element with onClick using JavaScript [closed]

Scrollbar in bootstrap application wizard

Dynamic div bottom

Categories

Resources