Tried writing "transition: height 1s ease-out;" in Internal CSS, inline CSS, javascript but nothing works.
I am using Chrome(latest as of now).
It works when I had different funtions like onmouseover to open the shutter and onmouseclick to close it.
<script>
function departmentShutter(){
if(document.getElementById("departmentShutter").clientHeight === 100 ){
document.getElementById("departmentShutter").style.height = "inherit";
}
else{
document.getElementById("departmentShutter").style.height = "100px";
}
}
function studentShutter(){
if(document.getElementById("studentShutter").clientHeight === 100 ){
document.getElementById("studentShutter").style.height = "inherit";
}
else{
document.getElementById("studentShutter").style.height = "100px";
}
}
</script>
The CSS is as follows: Just focus on transition to work.
.dashboard{
width: 100%;
height: fit-content;
position: fixed;
}
.dashboardContent{
height: -webkit-fill-available;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow-x: auto;
}
.department{
height: 100%;
width: 50%;
left: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.student{
height: 100%;
width: 50%;
right: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.departmentShutter{
height: inherit;
transition: height 1s ease-out;
width: 50%;
left: 0px;
display: inline-block;
background-color: #09d;
float: left;
z-index: 99;
position: fixed;
}
.studentShutter{
height: inherit;
transition: height 1s ease-out;
width: 50%;
right: 0px;
display: inline-block;
background-color: #2d0;
float: left;
z-index: 99;
position: fixed;
}
.departmentShutter span,.studentShutter span{
font-size: 5em;
}
.rectangle{
height: 200px;
width: 200px;
background-color: #78015d;
}
HTML:
<div class="dashboard">
<div class="dashboardContent">
<div id="departmentShutter" class="departmentShutter cursorPointer disable-selection" onclick="departmentShutter()">
<span class="center">Department</span>
</div>
<div class="department">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
<div id="studentShutter" class="studentShutter cursorPointer disable-selection" onclick="studentShutter()">
<span class="center">Student</span>
</div>
<div class="student">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
</div>
</div>
Transitions only work on values that can be converted to numbers and values that have been explicitly set on an element up front, so that the CSS rendering engine can determine the progression from the start value to the end value. inherit is not a value that is numeric, so the transition doesn't work.
Change height:inherit to height:100% in the .departmentShutter and .studentShutter classes as well as in the JavaScript.
Also, there is no need for two separate functions for the sizing of the two separate div elements since the two functions do exactly the same thing, just on different elements. The two functions can be combined into one and to determine which element needs to be sized, you need only use the this keyword, which will be bound to whichever div initiated the event in the first place.
Lastly, don't use inline HTML event attributes (onclick, etc.) to bind your event handlers. That is how it was done 20 years ago, but unfortunately it just keeps getting copied and pasted today, so new users don't know any better. There are many reasons not to use this technique anymore. Instead, separate your JavaScript completely from your HTML and follow modern standards for event binding.
// Get your DOM refernces just once to avoid excessive DOM scans
// Find both div elements that should be clickable and place them both in an array
var shutters = Array.from(document.querySelectorAll(".departmentShutter, .studentShutter"));
// Loop through the array...
shutters.forEach(function(shutter){
// Assign a click event handler to each
shutter.addEventListener("click", function(evt){
// Loop through array and reset heights of both shutters
shutters.forEach(function(shutter){
shutter.style.height= "100%";
});
if (this.clientHeight === 100) {
this.style.height = "100%";
}
else {
this.style.height = "100px";
}
});
});
.dashboard {
width: 100%;
height: fit-content;
position: fixed;
}
.dashboardContent {
height: -webkit-fill-available;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow-x: auto;
}
.department {
height: 100%;
width: 50%;
left: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.student {
height: 100%;
width: 50%;
right: 0px;
display: inline-block;
float: left;
z-index: 0;
position: fixed;
margin-top: 100px;
}
.departmentShutter {
height: 100%;
transition: height 1s ease-out;
width: 50%;
left: 0px;
display: inline-block;
background-color: #09d;
float: left;
z-index: 99;
position: fixed;
}
.studentShutter {
height: 100%;
transition: height 1s ease-out;
width: 50%;
right: 0px;
display: inline-block;
background-color: #2d0;
float: left;
z-index: 99;
position: fixed;
}
.departmentShutter span, .studentShutter span {
font-size: 5em;
}
.rectangle {
height: 200px;
width: 200px;
background-color: #78015d;
}
<div class="dashboard">
<div class="dashboardContent">
<div id="departmentShutter" class="departmentShutter cursorPointer disable-selection percentHeight">
<span class="center">Department</span>
</div>
<div class="department">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
<div id="studentShutter" class="studentShutter cursorPointer disable-selection percentHeight">
<span class="center">Student</span>
</div>
<div class="student">
<table>
<tr>
<td><div class="rectangle"></div></td>
</tr>
</table>
</div>
</div>
</div>
Related
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Problem:
On hover div .galleryIndex will be "filled" with div .galleryHover. .galleryIndex has width in percentage and doesn't have fixed height. I want to put div .white_line_gallery_hover at the bottom of div .galleryHover.
HTML:
<div class="galleryIndex">
<img src="images/galleryIndex1.png" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
CSS:
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:100%;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
width: 90%;
height: 10%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
Try giving ".white_line_gallery_hover" "position: absolute; bottom: 0" and removing the "height: 10%". This will cause "white_line_gallery_hover" to overlay the bottom portion of the image in "galleryIndex".
See: http://jsfiddle.net/ff22qayv/
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
position: absolute;
bottom: 0;
width: 90%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
<div class="galleryIndex">
<img src="https://placekitten.com/g/300/300" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
If this is not what you want, you might consider updating your question with a visual representation of the desired result.