How to Show Div Partially and on click show it full - javascript

I want a css option for this
currently i am using this css classes
.a{
top:-102px;
height: 140px !important;
}
.b{
top:0px;
height: 240px !important;
}
but this is opening the div from top to bottom and i want it to open from bottom to top
can Anyone please help its very important
thanks in advance


You need to wrap your div in another div
Give the parent div position:relative
Give the child div position:absolute
Anchor the child div using bottom:0
Demo 1 uses minimal JavaScript:
classList.toggle()
Demo 2 uses only CSS:
<label> and <input type='checkbox'> needed for "trigger"
Demo 1 (Plain JavaScript)
var x = document.querySelector('.x');
x.addEventListener('click', function(e) {
this.classList.toggle('b');
});
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
.b {
height: 240px;
transition: height .5s ease;
}
<div class='y'>
<div class='x'>Click the Red</div>
</div>
Demo 2 (Pure CSS)
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
#chx {
display: none
}
#chx:checked+.y .x {
height: 240px;
transition: height .5s ease;
}
<input id='chx' type='checkbox'>
<div class='y'>
<label for='chx'>
<div class='x'>Click on the Red</div>
</label>
</div>


why don't you try something like this?
.b{
top:0px;
height: 240px !important;
display:hidden;
}
and with jquery
$('.a').click(function(){
$('.b').show('fast');
})


You can put one div inside the main div. And give it overflow: hidden;
HTML
<div class='main_div'>
<div class='overlay_div'>
</div>
</div>
CSS
.main_div{
height: 240px;
}
.overlay_div{
height: 140px;
overflow: hidden;
}
Javascript
$('.overlay_div').click(function(){
$('.overlay_div').css({'overflow': 'visible'});
});


Please check below solution. I hope this will help you.
$('.a').click(function(){
$(this).toggleClass('b');
})
.a{
position:absolute;
top:100px;
height: 50px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
.b{
top:0px;
height: 150px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Hello World!</div>


You can't handle click with CSS. you must add JavaScript for this.
I have made a sample code for hover
Here it's
<div class="wrapper">
<div class="face">Face</div>
<div class="back">Back</div>
</div>
And styling
.wrapper {
border: 1px solid red;
height: 100px;
width: 100px;
overflow: hidden;
}
.wrapper:hover .face {
margin-top: -100%;
}
.face, .back {
height: 100%;
transition: margin ease 0.2s;
}
.face {
background-color: yellow;
}
.back {
background-color: orange;
}
Here's the a CodePen for you:
https://codepen.io/AbuMuslim/pen/GvEwYz
You can use JS as following:
document
.querySelector('.wrapper')
.addEventListener('click', function() {
this.classList.toggle('active');
});
And instead of using hover selector, we change to .active, as following:
.wrapper.active .face {
margin-top: -100%;
}
Here's a CodePen for that: https://codepen.io/AbuMuslim/pen/QMgJVw

Related

bootstrap-3 change transition-property on navbar collapse

Could anybody, please, explain how to change the transition-property of the collapsing element in a standard bootstrap-3 navbar? I want the transition to be something like this, but with the 'top' property when clicked on the hamburger menu: http://jsfiddle.net/2vLjU/1/
<div class="wrapper">
<img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}

Please see this following example i made here:
http://jsfiddle.net/f5jzo25t/
I used css3 ':target' that worked well with 'a' elements.
img:target {
left: 0;
transition: 1s;
}
You can read more about it:
https://www.w3schools.com/cssref/sel_target.asp
Hope that will help you

Div slide from top not slide to reveal

I want the contents of a div to slide down from the top. All of the methods I have tried seem to 'reveal' the contents which is almost static. I want to slide down from off the edge of the screen and push the content too. How would I do this? Jsfiddle here
html
<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>
css
#lizard {
padding:50px;
display:none;
}
#dolphin {
position: fixed;
width: 100%;
background-color: green;
}
#content {
height: 2000px;
}
js
$(document).ready(function(){
$("#dolphin").click(function(){
$("#lizard").stop().slideToggle("fast");
});
});

You can move things with negative margins to create a slide effect instead of a reveal effect.
This is a very rough example but you can see how it's originally hidden with margin-top: -100%; and revealed by setting margin-top to 0;
$(".slide-button").click(function(){
$(".lizard").toggleClass('slideit');
});
html, body {margin: 0; padding: 0;}
div {
text-align: center;
}
.slide-button {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: green;
cursor: pointer;
}
.lizard {
width: 100%;
padding-top: 20px;
overflow: hidden;
background-color: green;
transition: all 0.5s ease;
}
.lizard img {
margin-top: -100%;
transition: all 0.5s ease;
opacity: 0;
}
.lizard.slideit img {
margin-top: 10px;
opacity: 1;
}
.content {
height: 1000px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
<img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>
fiddle
https://jsfiddle.net/Hastig/qjfgsrL0/1/

Cut/Rearange background centered instead of resizing

I have a little test site, where the width of a div gets decreased to 50% and another div appears when we click on button.
Here is my codepen
When you click on the button, the image just gets resized.
Because I am using: background-size: 100%;
But I want the image to move a bit to the left, so that it gets centred.

There's one simple thing you can do:
Just remove the bg image from content-container div and add it to the body
body{
background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
Here's a working example:
$('#button').click(function(){
$('.new-content').toggleClass('half').delay(0).fadeIn(200);
$('.content-container').toggleClass('half').style.width = "50%".backgroundSize = "200%";
});
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
body{
background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
.content-container {
height: 100vh;
display: block;
background-size: 100%;
float: left;
width: 100%;
position: relative;
transition: .2s ease-in-out;
}
.new-content {
display: none;
overflow: auto;
float: right;
width: 0;
height: 100vh;
background: #f60;
transition: .2s ease-in-out;
}
.new-content.half,
.content-container.half {
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
<div class="content">
<div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
</div>
</div>
<div class="new-content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>

making a toggle button to change panels

I have two panels at the top of my application and one button at the button. By default only panel one must be visible, but by clicking on the button panel one fades away, and panel two fades in. I created the layout, but I do not know how to achieve it.
$(".panel2").hide();
$(document).ready(function() {
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>
First of all since I did $('.panel2').hide();, in page load first it loads the panel then hides it. How can I make it invisible from the beginning?
Secondly how can I make the panel2 visible only by pressing the button?
And finally is there anyway to add some transitions effects for changing panels?

You may try:
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
While for the visibility you need:
<div class="panel2" style="display: none;">Panel2</div&gt
The running snippet:
$(function () {
$(".grid-button").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
</div>
<div class="dashboard">
<div class="grid-button">
<span class="grid open"></span>
</div>
</div>
</div>

To make one of the panels hidden in the first place, I'd use a css class called hidden:
.hidden{
display : none;
}
Which simply makes what it sounds like, hiding the element.
Than, I'd set this class in the HTML decleration:
<div class="panel2 hidden">Panel2</div>
That will hide panel2 on page load, and by that you don't have to hide it using js code.
Than, I'd use a helper css class called panel that stands to be a panel identifier (you can either use the data attribute, or any other way of identifying those elements).
For 5 panels, it would look like this:
<div class="panel panel1">Panel1</div>
<div class="panel panel2 hidden">Panel2</div>
<div class="panel panel3 hidden">Panel3</div>
<div class="panel panel4 hidden">Panel4</div>
<div class="panel panel5 hidden">Pane5</div>
At last, to make this work for any number of panels you want (not necesseraly 2), I'd use a "carousel" effect to toggle the panels visibility, while having a way to keep track with them (adding and removing the hidden class), and use the fadeIn/fadeOut effect. (again, instead of identifying the panels using the panel1,panel2,panel3... classes, you can always use the data attribute (please read more about it in jQuery docs), or in any other way).
var currentPanel = 1;
$(".grid-button").on("click", function() {
$(".grid").toggleClass("open close");
$(".panel"+currentPanel).fadeOut("normal", function(){
$(this).addClass('hidden');
});
currentPanel = currentPanel >= $(".panel").length ? 1 : currentPanel+1;
$(".panel"+currentPanel).fadeIn().removeClass('hidden');
});
Just note that the hidden class actually "looses" it's functionality after the first click, since jQuery changes the display property inline, but I think that it might not be harmful to keep them anyway (it will be easier to track them).
You can see an example here: https://jsfiddle.net/j79y5kdb/3/

Expand input field width smoothly on click

I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.
How that can be done?
JSFiddle Demo:
http://jsfiddle.net/9nPW9/
HTML:
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon"></div>
</div>
CSS:
.box{
position: relative;
width: 220px;
}
.search {
width: 200px;
padding: 5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: left;
}
.icon{
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
JS:
$('.icon').click(function() {
$('.search').toggle();
});

Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)
Below is some sample code, you will likely want to edit for your precise needs.
Demo Fiddle
JS
$('.icon').click(function() {
$('.search').toggleClass('expanded');
});
CSS
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width:0;
padding: 5px;
transition: all .5s ease;
position:absolute;
right:20px;
box-sizing:border-box;
opacity:0;
}
.search.expanded {
max-width:200px;
opacity:1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}

You should use .slideToggle() or fadeToggle()
$('.icon').click(function() {
$('.search').slideToggle(500);
});

Categories

Resources