html/jquery how to hover div with its child when mouseenter

html/jquery how to hover div with its child when mouseenter - javascript

my idea is to create this:
https://blog.hubspot.com/hs-fs/hubfs/dubsat-contact-us-cities.gif?t=1490783992392&width=690&height=585&name=dubsat-contact-us-cities.gif
but the text has to be in div's with a picture not just fading in and fading out pictures. heres my shot:
#first{
position: absolute;
}
#second{
position: absolute;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
position: absolute;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<h1 id="third">Kontaktai</h1>
<!-- <div class="image">-->
<div id="first" onmouseenter="showSecondImage()" onmouseleave="hideSecondImage()">
<h4 class="text-box ">whyyyy</h4>
<img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg" >
</div>
<div id="second">
<h4 class="text-box">why its not working</h4>
<img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg" >
</div>
<script>
$(".unbinded").unbind();
function showSecondImage() {
document.getElementById('second').style.opacity=1;
}
function hideSecondImage() {
document.getElementById('second').style.opacity=0;
}
</script>
why is not not working properly? i though i need to unbind onmouseenter and onmouseleave eventlisteners and bind the picture to listen when mouse enters.. any answers appreciated, im new to this.

You can do this with CSS alone by hiding #second initially, then triggering it to show when you hover either #first or #second
#first {
position: absolute;
}
#second {
position: absolute;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
opacity: 0;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
#first:hover + #second, #second:hover {
opacity: 1;
}
<h1 id="third">Kontaktai</h1>
<div id="first">
<h4 class="text-box ">whyyyy</h4>
<img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg">
</div>
<div id="second">
<h4 class="text-box">why its not working</h4>
<img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg">
</div>

Like Coker says, You can do it only with CSS, and the pseudo-selector :hover.
div
{
width:500px;
height: 200px;
cursor: pointer;
background-size: cover;
transition: background-image .6s ease-in-out;
}
.first
{
background-image: url("http://apopka.uhcpqdoe6fq4wtztv.netdna-cdn.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg");
}
.second
{
background-image: url("http://www.twitrcovers.com/wp-content/uploads/2012/11/Winter-snow-l.jpg");
}
.first:hover
{
background-image: url("http://trucosparadecorar.com/wp-content/uploads/2016/09/oto%C3%B1o2.jpg");
}
.second:hover
{
background-image: url("http://cadenaser00.epimg.net/ser/imagenes/2016/06/20/sociedad/1466419875_801497_1466420115_noticia_normal.jpg");
}
div p
{
color: white;
text-align: center;
font-size: 24px;
position: relative;
text-shadow: 1px 1px 10px black;
top: 43%;
}
div:hover .hidden
{
display:block;
}
.hidden
{
display:none;
font-size: 14px;
}
.shadow:hover
{
background: rgba(0,0,0,0.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hola</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="first">
<div class="shadow">
<p>Spring of Field</p>
<p class="hidden">Spring is wonderful, unless for allergic people that die each year by.</p>
</div>
</div>
<div class="second">
<div class="shadow">
<p>Snow world</p>
<p class="hidden">Go in winter, after the snow doesn't exist anymore.</p>
</div>
</div>
</body>
</html>

Related

How can i animate a height transition after changing the height with javascript?

How can I animate a height change after changing the height with javascript?

Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>

Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}

Make button under image clickable

I'm trying to code a little 'card' that has an image, which when you hover in, it fades the image out and shows up a button which I'm trying to make clickable. The problem is that the button cannot be clicked since it's under the image and when you click on it, it registers as a click on the image. I know I could make it so the user can just click the image, but that doesn't work well on mobile since you cannot hover without clicking.
Here's my HTML: (note: this is a basic version of my actual cards)
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
//background: #1D1E28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card img:hover {
opacity: 0;
}
<div class="card" style="height: 18rem; width: 18rem;">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="...">
<div class="card-body" style="height: 172px;">
</div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button>
</div>
</div>

The solution what i see might be if hover handler will be on the .card:hover img not the .card img:hover. And remove form the image event with pointer-events: none;
.card:hover img {
opacity: 0;
pointer-events: none;
}
document.querySelector('button').addEventListener('click', ev => {
console.log('click');
ev.target.textContent = 'cliked';
});
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
background: #1d1e28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card:hover img {
opacity: 0;
pointer-events: none;
}
<div class="card" style="height: 18rem; width: 18rem">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..." />
<div class="card-body" style="height: 172px"></div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">
Manage server
</button>
</div>
</div>

How can I adjust the written text in text type input?

I am creating an opening search box, that you click then it opens, but i have a problem with the text, this is how it works :
.search {
float: left;
position: relative;
}
.search-box input {
background: #F5B7B1;
color: white;
outline: none;
border: none;
height: 40px;
width: 350px;
max-width: 0px;
-webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
}
.search-box label {
position: absolute;
height: 30px;
width: 40px;
background-color: #E74C3C;
text-align: center;
padding-top: 12px
}
.search-box label i {
cursor: pointer;
color: white;
}
#check:checked ~ .search-box input{
max-width: 350px;
}
#check{
display: none;
}
.search-box input::placeholder{
color: #E5E7E9;
padding-left: 20px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<!-- Fontawesome CDN Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
</head>
<div class="search">
<input id="check" type="checkbox" />
<div class="search-box">
<input type="text" placeholder="Type here..." />
<label for="check">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</html>
It looks good ,but still there a problem which is that the text that the user write will be at the very left, i don't want it like that, i want it to be like the placeholder, with padding: 20px
So i tried to edit the original input :
.search {
float: left;
position: relative;
}
.search-box input {
background: #F5B7B1;
color: white;
outline: none;
border: none;
height: 40px;
width: 350px;
max-width: 0px;
-webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
padding-left: 20px
}
.search-box label {
position: absolute;
height: 30px;
width: 40px;
background-color: #E74C3C;
text-align: center;
padding-top: 12px
}
.search-box label i {
cursor: pointer;
color: white;
}
#check:checked ~ .search-box input{
max-width: 350px;
}
#check{
display: none;
}
.search-box input::placeholder{
color: #E5E7E9;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<!-- Fontawesome CDN Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
</head>
<div class="search">
<input id="check" type="checkbox" />
<div class="search-box">
<input type="text" placeholder="Type here..." />
<label for="check">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</html>
There is another problem here which is the input is out of the area that it should be in, how can I solve this, please!!

Applying right: -18px; to .search-box label and padding-right: 40px; to #check:checked ~ .search-box input will get you what you want:
.search {
float: left;
position: relative;
}
.search-box input {
background: #F5B7B1;
color: white;
outline: none;
border: none;
height: 40px;
width: 350px;
max-width: 0px;
-webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
padding-left: 20px;
}
.search-box label {
position: absolute;
height: 30px;
width: 40px;
background-color: #E74C3C;
text-align: center;
padding-top: 12px;
right: -18px;
}
.search-box label i {
cursor: pointer;
color: white;
}
#check:checked ~ .search-box input{
max-width: 350px;
padding-right: 40px;
}
#check{
display: none;
}
.search-box input::placeholder{
color: #E5E7E9;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<!-- Fontawesome CDN Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
</head>
<div class="search">
<input id="check" type="checkbox" />
<div class="search-box">
<input type="text" placeholder="Type here..." />
<label for="check">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</html>

Use the marging-left css property on .search-box label to place the search button correctly.
Use a negative margin of -20px to close the gap completely, or -18px to let the <input> background show through a little bit as seen in your first example.
.search {
float: left;
position: relative;
}
.search-box input {
background: #F5B7B1;
color: white;
outline: none;
border: none;
height: 40px;
width: 350px;
max-width: 0px;
-webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
padding-left: 20px
}
.search-box label {
position: absolute;
height: 30px;
width: 40px;
background-color: #E74C3C;
text-align: center;
padding-top: 12px;
margin-left: -18px;
}
.search-box label i {
cursor: pointer;
color: white;
}
#check:checked ~ .search-box input {
max-width: 350px;
padding-right: 38px;
}
#check{
display: none;
}
.search-box input::placeholder{
color: #E5E7E9;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<!-- Fontawesome CDN Link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
</head>
<div class="search">
<input id="check" type="checkbox" />
<div class="search-box">
<input type="text" placeholder="Type here..." />
<label for="check">
<i class="fas fa-search"></i>
</label>
</div>
</div>
</html>
A right padding of 38px – at least 18px to offset the negative margin + optional 20px to match the left padding for symmetry – should be applied to .search-box input to not let longer search texts go below the search button.
Thanks to #Tim for pointing this out in the comments.

image hover over and text inside the image

.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
This is css for my hover over image and text appreance.
http://jsfiddle.net/LbLHc/
here is what i have. How do i put the text inside of my image when i hover over?
thank you

Here is solution for you problem.
Html Code
<div class="row">
<div class="relative imgContainer">
<a href="works/nytimes/nytimes.html">
<span class="text">NY times magazine: Table of Contents</span>
<img src="http://placehold.it/500x200" class="img-responsive" />
</a>
</div>
<div class="relative imgContainer">
<span class="text">Eloquence Magazine</span>
<img src="http://placehold.it/700x500"class="img-responsive" />
</div>
</div>
**Css Code**
.imgContainer:hover .text{
display:block;
opacity:1;
}
.relative{
position: relative;
}
.imgContainer{
height: 250px;
width: 400px;
margin-bottom: 20px;
}
img{
height: 250px;
width: 400px;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
display:none;
width: 100%;
height:100%;
text-align: center;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
display:block;
opacity:1;
}
FiddleLink
http://jsfiddle.net/anu1718/Y2AYj/

If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.
In your code I added a class (fadingtext) to the container:
<div class="row">
<div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
<span class="text">Title</span>
<img src="http://placehold.it/500x200" class="img-responsive"/>
</a>
</div>
<div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>
<img src="http://placehold.it/700x500" class="img-responsive" />
</div>
</div>
And here is your CSS with the fixed selectors:
.fadingtext .text {
position: absolute;
font-family:"courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255, 255, 255, 0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0;
left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fadingtext:hover .text {
opacity:1;
}
Here is a modified version of your jsfiddle:
http://jsfiddle.net/Rws85/2/

Twitter Bootstrap not working in CodeIgniter website but working in fiddle

My Problem is that i cant get the twitter bootstrap to work in my website
whereas it works perfectly fine in the fiddle: http://jsfiddle.net/Mns8q/32/
Can anyone tell me what is the problem.?
Thanks in advance.
This code is present in the view that is called when you reach the url in my website, which is same as the fiddle :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>
<style>
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.menu {
height:100%;
/* background-color: #3D6AA2; */
&.collapse {
float:left;
height: 100% !important;
width: auto;
}
&.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
&.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
&.collapse.in.width {
width: auto;
}
&.collapse.in.height {
height: auto;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
}
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
html = textHash[key];
$('#contentm').html(html);
}
$("#menu a").click(function(e) {
$('#menu').collapse('hide');
changeContent(e.target.innerText);
});
textHash = {
"Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil. And by \"devil\", I mean Robot Devil. And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
"Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
"Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>
</head>
<body>
<div class="frame">
<div id="menu" class="menu nav-collapse collapse width">
<div class="collapse-inner">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
Menu
</div>
</div>
<ul class="nav nav-tabs nav-stacked">
<li><a>Futurama</a></li>
<li><a>Star Wars</a></li>
<li><a>Doctor Who</a></li>
</ul>
</div>
</div>
<div class="view">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="contentm">
Integer eu quam et lacus luctus molestie.
</div>
</div>
</div>
</body>
</html>

It appears that you are not using SCSS on your site, while you are on the jsfiddle.
You could re-write your CSS as follows:
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
}
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
.menu {
height:100%;
}
.collapse {
float:left;
height: 100% !important;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}

Develop Reference

JavaScript is the programming language of the Web.

html/jquery how to hover div with its child when mouseenter - javascript

Related

How can i animate a height transition after changing the height with javascript?

Make button under image clickable

How can I adjust the written text in text type input?

image hover over and text inside the image

Twitter Bootstrap not working in CodeIgniter website but working in fiddle

Categories

Resources