I am trying to use ngAnimate to collapse in / out boxes. I did something like that and it works, but how do I get rid of the height property? Boxing can be used to extend (the text in it), but then the text will be coming out over the edge.
.myTest {
transition: all linear 0.5s;
height: 400px; /* I want to get rid this */
}
.ng-hide {
height: 0;
}
<div class="content myTest" ng-show="show">
<div class="row">
<div class="col-md-15">
<div class="text1">{{text1}}</div>
<div class="analytic">{{analytic}}</div>
<div class="text2">{{text2}}</div>
</div>
</div>
<div class="row">
<div class="col-md-15">
<div class="label">{{'label'|translate}}</div>
<div class="text3">{{text3}}</div>
</div>
</div>
</div>
Please Refer This Code
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
This has also been answered with many approaches in this question. There is no easy way to make this animation work perfectly every time without using javascript to measure the height of the inner contents or using a css scale (see the link).
Also, to ensure that the text is hidden when the container is collapsed, be sure to use overflow: hidden; in the class
A basic example using max-height rather than height to getter a tighter box around the data:
.myTest {
transition: all linear 0.5s;
max-height: 400px; /* Set to something larger is expected */
overflow: hidden;
}
.ng-hide {
max-height: 0;
}
I will use http://augus.github.io/ngAnimate/ It's the good package for animation without hard work. For using that you need just include css and add class for animated div.
Ie.
li.animation.slide-down ng-repeat='item in vm.items | filter: vm.filters'
Is this what you expected? I don't have the height in here and the animation works just fine.
var demoApp = angular.module('demo-app', ['ngAnimate']);
demoApp.controller('DemoCtrl', function($scope) {
$scope.text1 = 'Sometext1';
$scope.analytic = 'This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.This is a huge paragraph.';
$scope.text2 = 'Sometext2';
$scope.text3 = 'Sometext3';
$scope.show = true;
$scope.toggleDiv = function() {
$scope.show = !$scope.show;
};
});
.myTest {
border: 1px solid gray;
margin: 10px;
transition: all linear 0.5s;
}
.ng-hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script>
<body ng-app="demo-app">
<div ng-controller="DemoCtrl">
<button ng-click="toggleDiv()">Toggle Div</button>
<div class="content myTest" ng-show="show">
<div class="row">
<div class="col-md-15">
<div class="text1">{{text1}}</div>
<div class="analytic">{{analytic}}</div>
<div class="text2">{{text2}}</div>
</div>
</div>
<div class="row">
<div class="col-md-15">
<div class="label">{{'label'}}</div>
<div class="text3">{{text3}}</div>
</div>
</div>
</div>
</div>
</body>
Base on what I understand about the OP, you are looking for something like this below. Try my code and this should works smooth.
HTML
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck">Lorem ipsum dolor sit amet, pro no tamquam alienum, eloquentiam interpretaris eum cu. Nec ex simul tantas, ea qui conceptam expetendis. Alii dolore labores in sit, eius fierent luptatum an quo. Sit ut aliquam minimum reprimique. Tempor concludaturque sed an.
Posse definiebas id quo, eu elitr principes consulatu vim, no natum habeo tation per. Vim ne sumo abhorreant, vel ad equidem expetendis, in nobis meliore cum. Dolor ubique vis ex, ubique populo detraxit ad est, adolescens mnesarchum et vis. Stet tation necessitatibus qui ad, ex intellegam delicatissimi eum. Vix cu altera disputationi, vel nonumes quaestio at. In vel illud consequat.
Fierent perfecto efficiantur pro id, splendide definitiones vim ne, ius ut solum alterum platonem. Percipit accommodare nam id. An est altera albucius incorrupte. Exerci volumus scriptorem qui an, ocurreret mnesarchum te sit, qui meis constituto te.</div>
</body>
CSS
div {
transition: all linear 0.5s;
background-color: #3598dc;
height: 100%;
width: 100%;
position: relative;
padding: 10px;
top: 0;
left: 0;
color: #ffffff;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
Try it and explore. Happy coding :)
Related
I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.
This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here
Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...
I have given multiple backgrounds to a single div in a webpage. I wanted that as I scroll down that the background-image(Stickman), which is at the front, should remain of the same size, and the background-image(Landscape), which is behind it, should zoom.
I want to keep the size of stickman less than the container size.
But in my code both the background images are getting zoomed, kindly help me with it.
Below is the code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>
You've just forgot to set a value for the stickman.
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
See the snippet below:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});
body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
I have a layout with an image on the left and a tab menu on the right. I would like the image and the text to always occupy each 50% of the width (except if the browser window is too small, in which case the image and tabbed menu stack on top of each other), meaning that both should automatically resize.
The image and tab menu are set as two columns:
.col-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 100%;
clear: both;
}
.col {
flex: 1;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
<div class="col-container">
<div class="col" style="background:white">
<img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="">
</div>
<div class="col" style="background:white">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
</div>
Full running code here: fiddle
Now, my problem is that I would like height of the content of any tab to be limited to that of the image. There should never be text that goes further down than the left image's height. It means that if there is too much text, it should become scrollable. As the viewer windows get rescaled, both the image and the "allowed text height" should adapt. As you can see on the fiddle example, the text in the "About" tab currently runs down way past the image height.
I have rewrote your code a little so it can work as desired. This code is fully responsive (resize the browser to see) and cross browser supported.
I have coloured the background red so you can see what is happening here.
I have also reduced #media all and (max-width:700px) to 500 just for this demo so it fits the stackoverflow window.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
.col-container,
.col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.col-container {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.col {
background: #b00;
position: relative;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
#menu {
position: relative;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
background: #fff;
z-index: 10;
}
.scroll {
overflow-y: auto;
position: absolute;
top: 0;
max-height: 100%;
z-index: 5;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
#media all and (max-width:500px) {
.col-container {
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
}
.InputItem,
.col {
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
flex: 1 1 auto;
text-align: center;
}
.scroll {
position: relative;
padding-top: 0;
}
}
<div class="col-container">
<div class="col">
<img id="menuImg" src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="" width=100%>
</div>
<div class="col">
<div id="menu" class="col">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
<div class="content col">
<div id="Home" class="tabcontent scroll">
<h3>Home</h3>
<div>
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime
hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae
sunt, non sunt tamen ab earum spe causae diligendi profectae. Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem
ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter
ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Accedebant
enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute
velut filo pendere statum orbis terrarum fictis vocibus exclamabant. Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt
et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. Ut enim benefici
liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. Et quia Mesopotamiae
tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta
vastarat. erat autem quod cogitabat huius modi. Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus. Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus
parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Oportunum
est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Quae dum ita struuntur, indicatum
est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi,
qui atrocium criminum ponderibus urgebantur. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas
Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? At
nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem,
ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam. Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros
excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
</div>
</div>
<div id="About" class="tabcontent scroll" style="display:none;">
<h3>About</h3>
<p>Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can use flex and then position properties on the divs to acheive this.
Add this CSS to your fiddle and you are done.
.col-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.col {
flex: 1;
border: 1px solid red; /*For demo purpose*/
}
.col:nth-child(2) {
position: relative;
overflow: auto;
}
#Home {
position: absolute;
}
#About {
/*This only for the first load. You are anyway changing the display property
on the tab clicks*/
display: none;
}
See the fiddle
You should give max-height to tabcontent class.
overflow: auto;
max-height: 386px;
you can get img elemet height than you can et tabcontent height
if you use jquery it s easer than dom js
var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;
Just add this and try I hope this will sort out your problem.
.scroll
{
height:100vh;
overflow:hidden;
}
If it does not work just comment :) remember just add this in last of your css. Do not delete anything.
here's my situation:
So I'm trying to toggle a sidebar by clicking another div. It's a 100% height sidebar that is fixed to the right side of the viewport. Essentially I am trying to wrap a 300px div around both the 50px wide toggle div and the 250px wide sidebar div, and I want to hide the sidebar portion using a negative margin-right pixel value. Using the .toggle:active selector (so this occurs when the toggle div is clicked), I want to show the sidebar portion by setting that margin-right pixel value back to 0px.
Code so far:
<div class="wrapper">
<a href="#">
<div class="toggle">Toggle</div>
</a>
<div class="cart">Cart</div>
</div>
CSS so far:
.wrapper {
position:fixed;
width:300px;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-250px;
}
.toggle {
position:relative;
display:block;
width:50px;
height:100%;
background-color:grey;
float:left;
}
.toggle:active .wrapper {
margin-right:0px;
}
.cart {
position: relative;
width:250px;
height:100%;
background-color:red;
float:right;
}
Here's the jsfiddle!
Here's my question:
How can I target .wrapper to change a css attribute when .toggle:active is engaged? Also, how can I specify when the sidebar is visible and when it's not?
I'm new to Javascript, but it seems like I'll need it to do this due to the callback function. If CSS-only is possible, I'd lean toward that solution. Please note that I want to use margin-right so that I can opt to use CSS transitions later to animate my element sliding left and right.
CSS Only Solution
DEMO: http://jsfiddle.net/Victornpb/yJYJC/30/
Just use this:
/* Closed */
.wrapper{
margin-right:-250px;
}
/* Opened */
.wrapper:hover{
margin-right:0px;
}
Javascript solution
DEMO: http://jsfiddle.net/Victornpb/yJYJC/6/
JS:
var wrapper = document.getElementsByClassName('wrapper')[0];
var toggle = document.getElementsByClassName('toggle')[0];
window.onload=function(){
toggle.onclick=function(){
wrapper.classList.toggle('opened');
}
}
CSS:
.wrapper{
position:fixed;
width:300px;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-250px;
}
.wrapper.opened{
margin-right:0px;
}
A CSS-only solution (DEMO):
<div class="wrapper">
<label for="toggle">
Toggle
</label>
<input id="toggle" type="checkbox" />
<div class="cart">Cart</div>
</div>
(The hidden checkbox is used to determine the toggle state)
#toggle {
display:none; /* hide checkbox */
}
/* the label associated with the checkbox (trigger) */
label{
display:block;
}
/* move the div adjacent to the input (.cart) inside the visible area */
/* when the input is checked */
#toggle:checked ~ .cart{
right:0;
}
/* the div that's being toggled */
.cart {
position: absolute;
width: 250px;
height: 100%;
right: -250px;
}
:active only works for links (i.e. <a> tags), so it can't be used on .toggle, since it's a <div>. Even if you put it on the link, I don't think it'll do what you want though, and there's no way to "target" the parent.
Having a <a> surrounding a <div> like that is pretty strange too, you shouldn't need that.
So, you'll need javascript, yes. But you can't really target a class in javascript. You have two solutions:
If you can add an id to the wrapper, you can create a function in javascript that will toggle the state of the sidebar:
<div class="wrapper" id="myId">
<a href="#">
<div class="toggle"
onclick="document.getElementById('myId').style.marginRight = (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0';">Toggle</div>
</a>
<div class="cart">Cart</div>
</div>
Notes: The part (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0' tests if the margin-right is 0 and if so changes it to -250px and vice versa. What I've done here might not be the best way to do, but I wanted to limit it to something short so you can use it this way, if you don't really understand javascript very well. You will be able to improve it when you'll get to know it better.
Also, you will have to put the onclick on every .toggle div you have... You can use event handlers, but I'm pretty sure you don't know what that mean and that might not be a good idea to simply copy-paste this. You can always use the second point for that, since it makes things relatively easy to understand.
If you really want the class (or need to repeat this a lot), you will have to use jQuery, a javascript library, by adding this (preferably in the <head>):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
Then you can add this (to the head preferably still):
<script type="text/javascript">
$(document).ready( function()
{
var cart_visible = false;
$('.toggle').on('click', function()
{
if ( cart_visible )
$('.wrapper').css('margin-right', '-250px');
else
$('.wrapper').css('margin-right', '0');
cart_visible = !cart_visible;
});
});
</script>
This time I used a boolean (that takes true or false as a value) to check if the cart was visible or not, changing the value at each click at the same time as the margin-right. This does the same thing as before, just toggles between -250px and 0, but you don't need to put it in every .toggle you might create and it works with a class. It makes you use jQuery though (that's not really a problem though I think)
I don't really see why you want to change margin-right though... If you just want to make it disappear, you can use display: none;, or if you really want to change the position, you can use right (in this case).
CSS Only, two sidebar with different behaviour
There are two different CSS only animated sidebar:
inspired from #vitim.us, use hover for show/hide
inspired from #niceass, use a hidden checkbox to click for show/hide
Features:
Smooth animation
Vertical text on sidebar (wich rotate when open)
Resize body when sidebar are shown
Clean box for body and sidebar
scrollable sidebar content (displaying his scrollbar).
hover (forked from #vitim.us's answer) with some improvements
If not completely finalized, there is some way to
write Open cart / Your cart verticaly
suppress newline between Open/Your and cart by using no-breakable space in the CSS.
resize main content dynamicaly, while side bar is displaying.
body {
font-family: sans;
font-weight: normal;
font-size: 10pt;
}
.main {
width: calc( 100% - 3em );
transition: width ease 1300ms;
}
.wrapper:hover ~ .main {
width: calc( 100% - 17em );
}
h1 {
font-weight: bold;
font-size: 1.3 em;
}
h2 {
font-weight: bold;
font-size: 1.15 em;
}
.wrapper{
position:fixed;
width: 16em;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-14em;
/* Makes opening smoothly */
transition: margin-right ease 1300ms;
-moz-transition: margin-right ease 1300ms;
-webkit-transition: margin-right ease 1300ms;
-o-transition: margin-right ease 1300ms;
}
.inner {
position: relative;
width: 100%;
float: left;
display: inline-block;
transform: rotate(90deg) translate(-3em,0em);
transition: transform ease 1300ms;
}
/* opened */
.wrapper.opened,
.wrapper:hover{
margin-right:0px;
}
.toggle {
position:relative;
display:block;
width:2em;
height:100%;
background-color:#CCC;
float:left;
font-weight: bold;
text-align: center;
padding-top: 50%;
transition: background-color ease 1300ms;
transition: color ease 1300ms;
}
/* toggle style when wrapper is hovered */
.wrapper:hover .toggle{
background-color: #555;
color: white;
}
.wrapper:hover .toggle .inner{
transform: rotate(270deg);
}
/* Warn: there is NBSP, not spaces, after Open/Your */
.wrapper:not(:hover) .toggle .inner:before{
content:"Open";
}
.wrapper:hover .toggle .inner:before{
content:"Your";
}
.cart {
position: relative;
width:13.5em;
height:100%;
background-color:rgba(255,255,255,.4);
float:right;
padding: .2em;
overflow: scroll;
}
<div class="wrapper">
<div class="toggle"><div class="inner"> cart</div></div>
<div class="cart">
<h2>Cart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
<h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
toggle:checked (forked from #niceass's answer)
Same improvements, but using an invisible checkbox, so you have to click on (text of) the sidebar to open them.
(This answer is linked to What does "for" attribute do in HTML tag?)
body {
font-family: sans;
font-weight: normal;
font-size: 10pt;
}
#toggle { display:none; }
.main {
width: calc( 100% - 3em );
transition: width ease 1300ms;
}
#toggle:checked ~ .main {
width: calc( 100% - 17em );
}
h1 {
font-weight: bold;
font-size: 1.3 em;
}
h2 {
font-weight: bold;
font-size: 1.15 em;
}
.wrapper{
position:fixed;
width: 16em;
height:100%;
background-color:orange;
top:0;
right:0;
margin-right:-14em;
/* Makes opening smoothly */
transition: margin-right ease 1300ms;
-moz-transition: margin-right ease 1300ms;
-webkit-transition: margin-right ease 1300ms;
-o-transition: margin-right ease 1300ms;
}
#toggle:checked ~ .wrapper {
margin-right: 0pt;
}
#but {
position: relative;
width: 100%;
float: left;
display: inline-block;
transform: rotate(270deg) translate(-3em,0em);
transition: transform ease 1300ms;
}
/* opened */
#zone {
position:relative;
display:block;
width:2em;
height:100%;
background-color:#CCC;
float:left;
font-weight: bold;
text-align: center;
padding-top: 50%;
transition: background-color ease 1300ms;
transition: color ease 1300ms;
}
/* toggle style when wrapper is hovered */
#toggle:checked ~ .wrapper #zone {
background-color: #555;
color: white;
}
#toggle:checked ~ .wrapper #zone #but {
color: white;
transform: rotate(90deg);
}
#toggle:not(checked) ~ .wrapper #zone #but:before {
content:"Open "; /* non break space */
}
#toggle:checked ~ .wrapper #zone #but:before{
content:"☒ Your ";
}
#toggle:not(checked) ~ .wrapper #zone #but:after {
content:" ☐"; /* figure space */
}
#toggle:checked ~ .wrapper #zone #but:after {
content:"";
}
.cart {
position: relative;
width:13.5em;
height:100%;
background-color:rgba(255,255,255,.4);
float:right;
padding: .2em;
overflow: scroll;
}
<input id="toggle" type="checkbox" />
<div class="wrapper">
<div id="zone"><label for="toggle" id="but">chart</label></div>
<div class="cart">
<h2>Cart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
<h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
I would recommend using jQuery for this. It is simple and less chance for errors.
$('.toggle').click(function() {
$('.cart').toggle();
});
http://api.jquery.com/toggle/
I'm not quite sure how to ask this question. What I'm trying to do is have an element on the bottom of my page that will always stick to the bottom, but if the page is too short it will be pushed down by the other elements on the page.
Example:
The left side middle graphic and the right titles are all contained within #mainBodyContent. If the browser window is small enough that this div runs into the "Latest in Geek" flash box, I want the flash box to be pushed down. However if #mainBodyContent isn't running into the flash box, I want the flash box to stick to the bottom in the place where it's at currently. I'm rather confused as how to pull it off.
Any suggestions/help out there? Am I making sense?
You can use absolute positioning combined with padding. Example can be seen here:
Static Footer Example
<html>
<head>
<style type="text/css">
html, body { height:100%; }
/* layout */
#container {
width:800px; margin: 0px auto;
position: relative; min-height: 100%;
}
#top { height: 12px; } /* margin on header breaks liquid layout */
#header { position: relative; }
#content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */
#footer {
clear: both;
position:absolute;
bottom: 0px;
width:100%;
height:60px;
text-transform: uppercase;
background-color: red;
}
.section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="header">
<h1>Title</h1>
</div><!-- end header div -->
<div id="content">
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end content div -->
<div id="footer">Footer content here</div>
</div><!-- end container div -->
</body>
Try using the CSS selector position:fixed
A quick stab gives you most of what you're looking for. The concern (for me) is that while the resulting footer is at the bottom of the page, the elements above will run underneath it. Some scripting could change that (and is likely how it's done in your example), but this is a start.
<html>
<head>
<style>
#footer {
position: fixed;
bottom: 0px;
background-color: Red;
height: 200px;
}
*html #footer {
position: absolute;
bottom: 0px;
background-color: Red;
height: 200px;
}
</style>
</head>
<body>
<div>A test</div>
<div id="footer">Here's my footer</div>
</body>
</html>
Compare the height of your content to the height of your window. If the window is larger than the height of your content, then set the footer to position: fixed; bottom: 0;.
css:
#footer
{
bottom: 0; /* this line does nothing until you set position: fixed; */
}
javascript:
function setFooterPosition()
{
var foot = document.getElementById("footer");
var docEl = document.documentElement;
foot.style.position = docEl.clientHeight < docEl.scrollHeight ? "" : "fixed";
}
window.onload = setFooterPosition;
window.onresize = setFooterPosition;