I want to move the entire content of the .main-section-image before the .main-section .content .title. But when I use my jQuery code, the content of all other divs is duplicated.
How I can use an if condition to prevent duplicated text from adding to the area?
$('.main-section-image').insertBefore('.main-section .content .title');
.duo-left {float: left;}
.duo-right {float: right;}
.main-section {width: 100%; float: left;}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/200x200.png">
</div>
<div class="clearfix"> </div>
</div>
You're inserting all .main-section-image elements before all .content .title elements.
Since you have multiple .main-section elements that each contain their own images and titles, multiple images are inserted before all the titles.
I suggest using jQuery's each() to make the change within each .main-section separately.
Below, I'm using jQuery's selector context, which uses find().
I also add a button and click handler to perform the insert.
But that's just for demonstration, so feel free to remove that code.
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target);
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
Edit
You asked about how to add a class after the change. You can use jQuery's addClass().
Since insertBefore returns a jQuery object, you can chain addClass afterwards, like this:
$image.insertBefore($target).addClass('another-class');
Here's a demonstration:
$('#go').on('click', function() {
$('.main-section').each(function() {
var $image = $('.main-section-image', this);
var $target = $('.content .title', this);
$image.insertBefore($target).addClass('another-class');
});
});
.duo-left {
float: left;
}
.duo-right {
float: right;
}
.main-section {
width: 100%;
float: left;
}
.main-section .content {
width: 65%;
}
.main-section .main-section-image {
width: 35%;
}
.another-class {
outline: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Make The Change</button>
<hr>
<div class="main-section">
<div class="content duo duo-right">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-left">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
<div class="main-section">
<div class="content duo duo-left">
<div class="title">
<p><span class="red">TITLE</span> </p>
</div>
<div class="description">
<p>Section description</p>
</div>
</div>
<div class="main-section-image duo-right">
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="clearfix"> </div>
</div>
Related
I have this fiddle that I'm working on, and I can't figure out how to show (toggle) the content inside the black block I made + in the same time toggle "+" and "-" signs for the CLICKED div..
Structure example:
$('.column_column > div > div').hide();
$('.column_column h4').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('div');
$(".column_column > div > div").not($this).hide();
// here is what I want to do
$this.toggle();
});
.sp_appear {
background: black;
color: #FFF;
display: block;
float: left;
width: 100%;
min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
<div class="column_attr">
<h4 href="">element1
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 1</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element2
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 2</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element3
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 3</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element4
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 4</div>
</div>
</div>
<div class="sp_appear"></div>
Can someone please help? Attaching the code - https://jsfiddle.net/kp9d0vfb/
Is this what you want?
$('.column_column > div > div').hide();
$('.column_column h4').click(function(e){
e.preventDefault();
// hide all span
var $this = $(this).parent().find('div');
$(".column_column > div > div").not($this).hide();
// here is what I want to do
$this.toggle();
$(this).find("span").text(($(this).find("span").text() == "-") ? "+" : "-");
});
.sp_appear {
background: black;
color: #FFF;
display: block;
float: left;
width: 100%;
min-height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column_column">
<div class="column_attr">
<h4 href="">element1
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 1</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element2
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 2</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element3
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 3</div>
</div>
</div>
<div class="column_column">
<div class="column_attr">
<h4 href="">element4
<span class="sp_toggle_icon">+</span>
</h4>
<div>content 4</div>
</div>
</div>
<div class="sp_appear"></div>
I have a carousel, using owlCarousel, and I'm trying to make the elements in the carousel to expand on hover. The way it's implemented, is it's simply displayed: none by default, then on hover, it's displayed to block. Nothing fancy.
It's taken out of the flow by an absolute positioning, this way the carousel will not expand on element hover.
The problem is, when the element get's hovered, the details, expanded element doesn't show. I tried giving it a high z-index, but it doesn't seem to fix the problem. Here's the code:
CodePen FIle
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 300px;
position: absolute;
top: 100%;
bottom: 0;
right: 0;
left: 0;
display: none;
z-index: 20;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
See if this will work for you:
Set .owl-carousel .item to your content height + detail height (I used 200px)
Set margin-top of .owl-carousel.owl-theme .owl-nav to -(detail height) + 10px (it was originally 10px)
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item {
height: 200px;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 100px;
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
}
.owl-carousel.owl-theme .owl-nav {
margin-top: -90px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
You can try not giving a top value, and instead a height of auto to .details
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
height: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?
What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it
You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().
Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});
When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.
Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
I have a problem creating boxes of equal height for bootstrap 3. In the beginning, I had issues with image sizes being different, so I tried hacking it via JS and resizing them on the fly. The problem is that if there is no cache for the image, JS fails and screws up the layout even more. I ended up resizing all images to 700 x 700 pixels, but the problem is still there since the accompanying text might be of various lengths.
I created an example in the fiddle: https://jsfiddle.net/7yqkgm2c/
I am not good with CSS and I am wondering if you will be able to help me with solution.
This is the JS that I used to make all boxes the same height (remove it from the fiddle)
$(document).ready(function () {
//function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout
var heights = $(".thumbnail").map(function () {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".thumbnail").height(maxHeight + 15);
//end same height products
});
This is the result that I want to achieve (or propose your solution if you think you know how to approach it better):
Here is my fiddle: https://jsfiddle.net/vhkmyaf3/18/
Assuming you are in control of the markup, I cleaned up how each product might look:
<div class='product-container col-xs-12 col-sm-6 col-md-3'>
<div class='item'>
<img src='http://placehold.it/700x700' />
<div class='item-text'>
<h5>Product Title</h5>
<p>Product description. Lorem ipsum dolor sit amet.</p>
</div><!-- end of item-text -->
<div class='price-point'>
<div class='price'>$100</div>
<a class='btn btn-info' href='#'>View</a>
</div><!-- end of price-point -->
</div><!-- end of item -->
</div><!-- end of product-container -->
The product-container div is used once for each product, and all product-container divs appear inside a div called items-row. You would repeat the items-row div if you wanted a new row of products, but since you are using bootstrap this isn't strictly necessary as the products should stack.
I only included the basic CSS you would need for the structure, plus a bit of padding/borders etc for clarification. The key CSS to achieve the equalised heights you want is the use of display:flex :
.items-row, .product-container {
display: webkit-box;
display: moz-box;
display: ms-flexbox;
display: webkit-flex;
display: flex;
}
As shown in the example, you would need to cancel the display:flex and replace with display:block for any device where you wish the products to stack in a single-column. The fiddle linked above should demonstrate that your image size and product description can be quite flexible while still maintaining equalised heights.
You can give the product description or title a min-height property. Regardless of how much text they contain, the height will always match up.
I have created a class called "product-description" and given it a min-height of 95 pixels. This only affects the text underneath the title but you can do the same for the product name if you need to.
You can then use media queries to target different sizes and adjust these values accordingly.
HTML:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="categories-list" class="row list-group">
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME VERY LONG LONG LONG LONG LONG LONG</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345grhj 4567u456uy4567g</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here </p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$1</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
padding-top: 70px;
font-size: 12px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
html * {
outline: 0 !important;
}
.ui-pnotify {
padding-top: 70px;
}
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 10px;
}
/* PANEL COLLAPSE */
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
/* PANEL COLLAPSE */
.filters {
max-height:165px;
overflow-y:auto;
}
.bottom_align{
position: absolute;
margin-top: 3px;
margin-bottom: 10;
bottom: 10px;
}
.thumb1 {
width: 250px;
height: 250px;
}
.product-description {
min-height: 95px;
}
JSFiddle
I have the following table, I want to choose an option and toggle the color between them. but can not repeat (only one option should be in green...) I've tried everything... =/
$(".roundedOpt").click(function(){
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
http://jsfiddle.net/HVw7E/326/
To toggle one in each list, do
$(".roundedOpt").on('click', function () {
var opts = $(this).closest('td').find('.roundedOpt');
opts.not(this).css('background', '#337AB7');
$(this).css('background', '#4AA14A');
});
FIDDLE
You don't need a variable for this, just use this. :) And I just reset all your blue items to blue first, then set the this clicked item to green. I upudated your js fiddle with this:
$(".roundedOpt").click(function()
{
$(".roundedOpt").removeAttr("style");
$(this).attr("style","background:#4AA14A;");
});
table {
border: 1px solid #000;
}
.roundedOpt {
border-radius: 50%;
width: 16px;
height: 16px;
background: #337AB7;
color: white;
text-align: center;
position:relative;
z-index:1;
font-size: 11.5px;
font-weight: bold;
cursor: pointer;
}
div.dleft {
position: absolute;
}
div.dright{
width:auto;
padding-left:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
<tr id="trDetail1">
<td style="vertical-align: middle;">
<span>Options list #1</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
<br/>
<tr id="trDetail2">
<td style="vertical-align: middle;">
<span>Options list #2</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
</table>
Just take off your style on click
$(".roundedOpt").click(function(){
$(".roundedOpt").attr("style","");
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
Look at this Fiddle