I have 3 <div>s as follows. In that one of the <div> has panel bar so its height may be increased based on the content of each panel bar. Now I want to increase the height of other two divs based on the height of the <div> which has panel bar. How can I achieve this?
<div class="leftdiv">
</div>
<div class="maindiv">
//Panel bar is inside this div.
</div>
<div class="rightdiv">
</div>
"leftdiv" and "rightdiv" height should be increase base on "maindiv" height???
You could also do it using css and positioning the divs absolutely or relatively, with margins for the central item.
Fiddle:
http://jsfiddle.net/o403Ljoq/
Code:
<div class="parentDiv">
<div class="leftDiv" >text</div>
<div class="mainDiv">text<div>Something with height</div>
<div style="height:200px;">something else with height</div></div>
<div class="rightDiv" >text</div>
.parentDiv
{
position:relative;
background-color:gray;
}
.leftDiv
{
background-color:blue;
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:100px;
}
.mainDiv
{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
.rightDiv
{
background-color:green;
position:absolute;
right:0px;
top:0px;
bottom:0px;
width:100px;
}
Demo
html
<div class="container">
<div class="leftdiv">a</div>
<div class="maindiv">//Panel bar is inside<br/> this div.<br/>//Panel bar is inside<br/> this div.</div>
<div class="rightdiv">c</div>
</div>
css
.leftdiv {
background:red;
display:table-cell;
}
.maindiv {
background:green;
display:table-cell;
}
.rightdiv {
background:blue;
display:table-cell;
}
.container{
display:table;
width:100%;
}
try this example using bootstrap (row col-wrap class) Try the example in full screen mode
#media (min-width: 768px) {
/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.col-base{
margin-top: -15px;
}
}
#media (max-width: 767px) {
.row.base{
display:none;
}
}
.col-wrap{
overflow: hidden;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row col-wrap">
<div class="col-sm-4 col">
<div class="well">
<p>A </p>
<p>B </p>
<p>C </p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
<p>MAIN CONTAINER</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="well">
<p>D </p>
<p>E </p>
</div>
</div>
</div>
<div class="row base col-wrap">
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
<div class="col-sm-4 col-base"><div class="well"></div></div>
</div>
</div>
You may use JavaScript for achieving the result:
var commonHeight = $(".maindiv").height();
$(".leftdiv").height(commonHeight);
$(".rightdiv").height(commonHeight);
The full example and demo is here:
http://jsfiddle.net/pLmp1zpr/
Use flexbox to do this.
Wrap your divs in a container.
HTML:
<div class="container">
<div class="leftdiv"></div>
<div class="maindiv"></div>
<div class="rightdiv"></div>
</div>
CSS:
.container{
display:flex;
align-items:stretch;
flex-flow:row wrap;
}
.leftdiv,.rightdiv,.maindiv{
flex:1 0;
}
Here is the DEMO.
Related
so I'm currently having an issue with creating multiple popups with multiple buttons. I have multiple buttons up but when I click them they all show the same pop-up. How do I assign different pop-ups to each button? I feel like I've tried everything and I can't seem to figure it out. Any help would be greatly appreciated.
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
document.getElementById("popup-2").classList.toggle("active");
document.getElementById("popup-3").classList.toggle("active");
document.getElementById("popup-4").classList.toggle("active");
document.getElementById("popup-5").classList.toggle("active");
document.getElementById("popup-6").classList.toggle("active");
document.getElementById("popup-7").classList.toggle("active");
document.getElementById("popup-8").classList.toggle("active");
document.getElementById("popup-9").classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup()" class="btn btn1">Un</button>
<button onclick="togglePopup()" class="btn btn2">Dois</button>
<button onclick="togglePopup()" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup()" class="btn btn4">Quatro</button>
<button onclick="togglePopup()" class="btn btn5">Cinco</button>
<button onclick="togglePopup()" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup()" class="btn btn7">Sete</button>
<button onclick="togglePopup()" class="btn btn8">Oito</button>
<button onclick="togglePopup()" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>
You could pass popup numbers as params to togglePopup as :
more about template strings here
function togglePopup(num){
document.getElementById(`popup-${num}`).classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('1')">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('2')">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('3')">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('4')">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('5')">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('6')">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('7')">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('8')">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup('9')">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup('1')" class="btn btn1">Un</button>
<button onclick="togglePopup('2')" class="btn btn2">Dois</button>
<button onclick="togglePopup('3')" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup('4')" class="btn btn4">Quatro</button>
<button onclick="togglePopup('5')" class="btn btn5">Cinco</button>
<button onclick="togglePopup('6')" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup('7')" class="btn btn7">Sete</button>
<button onclick="togglePopup('8')" class="btn btn8">Oito</button>
<button onclick="togglePopup('9')" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>
A very short and effective solution -
Get all the popups, open buttons and close buttons by class names, loop through them, attach eventlisteners to each of then and you are done!
What it reduces -
No need to have a onclick for each of your open and close buttons.
No need to have special id for each popup, close buttons and open buttons.
This drastically reduces the size of your html.
One more advantage - In future, if you want to add more popups, there is no need to touch the JS, the existing code will handle it.
function togglePopup(num){
popups[num].classList.toggle("active");
}
let popups = document.getElementsByClassName("popup");
let closeBtns = document.getElementsByClassName("close-btn");
let openBtns = document.getElementsByClassName("btn");
for(let i = 0; i<closeBtns.length; i++){
closeBtns[i].addEventListener("click", function(){togglePopup(i)});
openBtns[i].addEventListener("click", function(){togglePopup(i)});
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button class="btn">Un</button>
<button class="btn">Dois</button>
<button class="btn">Tres</button>
<br><br>
<button class="btn">Quatro</button>
<button class="btn">Cinco</button>
<button class="btn">Seis</button>
<br><br>
<button class="btn">Sete</button>
<button class="btn">Oito</button>
<button class="btn">Nove</button>
<br><br><br><br><br>
</div>
I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.
I created a gif so you can see what I mean. GIF
I have so far the basic structure on jsfiddle
When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.
Is the animation you can see in the gif possible with css or does it need javascriptl?
$(".row.boxes-container .box").click(function (e) {
$(".box-content-full").addClass("open");
});
.row.boxes-container{
position:relative;
}
.box:hover{
cursor:pointer;
}
.box-content{
padding:30px;
background-color:#f03939;
}
.box-content-full{
display:none;
width:0%;
transition: width 1s;
}
.box-content-full.open {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display:block;
transition: width 1s;
}
.box-content-full.open .inner{
padding:30px;
margin-left:15px;
margin-right:15px;
background-color: red;
}
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
I did not use your html code but tried to get a result as close as possible to your gif:
$('.box').on('click', function() {
var $element = $(this);
var $openElement = $('<div class="absoluteBox"></div>');
$openElement.css('left', $element.position().left);
$openElement.css('right', $element.width());
$element.html($openElement);
$openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
});
.wrapper {
position:relative;
display:inline-block;
}
.box {
background-color:#CC0000;
width:150px;
height:200px;
display:inline-block;
margin-right:10px;
}
.box:last-of-type {
margin-right:0;
}
.absoluteBox {
position:absolute;
background-color:blue;
height:200px;
width:150px;
}
.box:hover {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box">
</div>
<div class="box"></div>
</div>
I made the opening box blue to be better noticed. This has to be changed via css of course to red.
Updated your fiddle:
EDIT 2:
Now it should reset when you click the box.
P.S. Click the second box for the effect.
P.P.S. The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!
EDIT:
Updated answer to expand element that was clicked.
https://jsfiddle.net/bszv7f90/9/
$(".row.boxes-container .box").click(function(e) {
$(this).children().each(function(i) {
if ($(this).attr('class') == 'box-content-full') {
$(this).toggleClass("exp");
}
});
$(".box-content-full").toggleClass("open");
$(".box-content").toggleClass("clicked");
});
.container {
max-width: 600px;
}
.row.boxes-container {
position: relative;
}
.box:hover {
cursor: pointer;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content-full {
display: none;
width: 0%;
transition: width 1s;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content.clicked {
display: none;
}
.box-content-full.open {
position: absolute;
max-width: 0%;
width: 0%;
z-index: 2;
display: none;
transition: width 1s;
}
.box-content-full.open.exp {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display: block;
transition: width 1s;
}
.box-content-full.open .inner {
padding: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
Now it should expand.
I preserved your code to make a quick copy-paste.
I have a lot of overflow:hidden; items, how can I show overflow:hidden; items when I click next and previous like in my example below? I would also like to have moving forward and backward effect. I have tried some plugin but it doesn't work when I click next and prev. Any idea of how to do that easily ?
.container{
width:580px;
height:70px;
background:#ccc;
overflow-y:hidden;
}
.item{
display:inline-block;
z-index:5;
background:#fff;
margin:5px;
padding-top:10px;
width:100px;
height:50px;
text-align:center;
}
.prev , .next{
cursor:pointer;
width:50px;
}
.prev:hover , .next:hover{
background:#000;
color:#fff;
}
<div class="prev">Prev</div>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div class="next">Next</div>
I have a web application which was created for desktops and now we are trying to utilize Twitter Bootstrap to make it responsive. We have few sidebar layouts where we want them to collapse in order different from their actual order. Right now when viewing on mobile phone left column is shown on top of content column. We want to show content on top for mobile device. I know about push-pull classes in twitter bootstrap but that doesn't seems to work unless I make changes to HTML. We can't change the HTML since there are other legacy themes which will break. Any help will be appreciated.
Updated: Here is the jsfiddle to reproduce the issue. As you can see it results in Blue sidebar on Green content column and I want the exact inverse of it where Green should be on top of Blue column.
<div id="outerPageContainer" class="container">
<div id="innerPageContainer">
<div id="header" class="row">
<div class="zone col-md-12 alert alert-warning">
Header
</div>
</div>
<div id="contentContainer" class="row">
<div id="leftColumn" class="col-md-3">
<div class="zone alert alert-info">
Sidebar
</div>
</div>
<div id="mainColumn" class="leftSidebarLayout col-md-9">
<div class="zone alert alert-success">
Content
</div>
</div>
</div>
<div id="footer" class="row">
<div class="zone col-md-12 alert alert-warning">
Footer
</div>
</div>
</div>
</div>
http://jsfiddle.net/4z7bq8ft/5/embedded/result/
Kind Regards
Bootstrap alredy brings responsive design, but only to 768px (Ipad width). You can use this bootstrap functionality with their column system:
.col-xs- to <768px .col-sm- to ≥768px .col-md- to ≥992px and .col-lg- to ≥1200px
there is more info in the web: http://getbootstrap.com/css/
If you want responsive design below 768 you will need to do it yourself by using:
#media (mix-width: 600px, max-width: 768px) for example.
Try the method bellow and order as needed.
.plate {
display: flex;
flex-direction: row;
}
.one, .two, .three, .four, .five {
width: 100px;
height: 100px;
display: inline-block;
text-align: center;
line-height: 100px;
font-weight: bold;
color: white;
font-size: 24px;
}
.one {
background-color: red;
order: 2;
}
.two {
background-color: green;
order: 3;
}
.three {
background-color: orange;
order: 1;
}
.four {
background-color: darkorange;
order: 5;
}
.five {
background-color: orange;
order: 4;
}
<div class="plate">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
</div>
See CSS Flexible Box Layout Module
Try this : http://jsfiddle.net/4z7bq8ft/9/
and html & css code is here
<form id="form1" runat="server">
<div id="outerPageContainer" class="container">
<div id="innerPageContainer">
<div id="header" class="row">
<div class="zone col-sm-12 alert alert-warning">
Header
</div>
</div>
<div id="contentContainer" class="row">
<div id="mainColumn" class="leftSidebarLayout col-sm-9">
<div class="zone alert alert-success">
Content
</div>
</div>
<div id="leftColumn" class="col-sm-3">
<div class="zone alert alert-info">
Sidebar
</div>
</div>
</div>
<div id="footer" class="row">
<div class="zone col-sm-12 alert alert-warning">
Footer
</div>
</div>
</div>
</div>
</form>
.col-sm-9 {
float: right !important;
width: 75%;
}
#media screen and (max-width:768px) {
.col-sm-9 {
width: 100%;
}
.col-sm-3 {
float: left;
width: 100%;
}
}
I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$('.topnavbtn').mouseenter(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
}).mouseout(function(){
$(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
$(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
$(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
});
});
</script>
HTML:
<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
And CSS:
.topnavbtn {
height:34px;
float:left;
display:inline-block;
margin:7px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
line-height: 34px;
}
.topnavbtn .left {
height:34px;
width:9px;
background:url(images/nav/images/navLeft.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .right {
height:34px;
width:9px;
background:url(images/nav/images/navRight.png) no-repeat;
float:left;
display:inline-block;
}
.topnavbtn .mid {
background:url(images/nav/images/navBg.png) repeat-x;
height:34px;
width:auto;
float:left;
display:inline-block;
}
This is a syntax error :
$(this).$('.left').css(...
try
$('.left', this).css(...
Just replace
$(this).$('.left')
with
$(this).children('.left')
and so on for rest of classes .