Display remaining items count in a list of divs - javascript

I have a horizontal list of divs, and I want to display the remaining items count while scrolling.
Here's a playground code i try on
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </>
</div>
So, How can i replace the count word with the actual remaining count?

Something like this - you may want to add 6 for the border on both sides of the divs
const count = document.querySelector(".count");
const divs = document.querySelectorAll(".item").length;
document.querySelector(".horizontal").addEventListener("scroll", function() {
count.textContent = divs - parseInt(this.scrollLeft / 50)
})
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </div>
</div>

Related

How to toggle the "parent" div when all "child" div are toggled (filtered as no result)?

I am making an instant search function using .filter() and .toggle().
It is basically working, but I would like to make the "search result" better by hiding the whole parent .char-section div section when there is no result inside (ie. no .item in the below example).
For example, when searching for banana, the script currently works like this:
https://i.stack.imgur.com/UMrbK.png
The desired result should look like this :
Here is the script:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".item").filter(function () {
$(this).toggle(
$(":is(.title)", this)
.text()
.toLowerCase()
.includes(value.toLowerCase())
);
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>
On CodePen: https://codepen.io/pen/qBYbdYx
☝️ Edit: updated with the script in answer
Big thanks for any idea!
PS. Another small problem is that reset button can only reset the input field, but not reset the whole results list. The user must focus the input and hit "Esc" key. I will put this as another question later.
I have to disagree with another answer:
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
With this code, the "char-section" is going to be visible if and only if the last item of the section is. So the "A" section won't be visible if the search is on "Apple", for example.
My suggestion is 1/ hide all the "char-sections" 2/ show them in the same each/filter loop if one of their "item" children is visible, as follows:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
// hide all the sections
$(".char-section").hide();
// 'each' better than 'filter' here, because there's no filtering
$(".item").each(function () {
if ($("p.title", this).text().toLowerCase().includes(value))
// shows the item AND its "char-section" parent
$(this).show().parents(".char-section").show();
else
// hides the item, leaves its parent alone
$(this).hide();
});
});
});
HTH
This can be done rather easily. If we look at your html structure, we realize that the main 'container' <div> for an item, is of class char-section. So if we're searching through your title DIVs, we can get a reference to it's parent using:
.closest(".char-section")
on the object in question.
Now all we have to do is hide or show the whole container using the equally named show()/hide() methods in case the search was successful or not.
Here's an example:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".item").filter(function(e) {
let hit = $(":is(.title)", this).text().toLowerCase().includes(value.toLowerCase());
$(this).toggle(hit);
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>

CSS "position: sticky" on horizontal scroll

I'm trying to build a horizontal scroll with multiple content boxes that belong to one title. So I'd like the title to stay while the content scrolls past it, until the next section with a new title comes.
Here's what I was trying to do: https://jsfiddle.net/kjo4duts/23/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
</div>
Is there a way to address the "position: sticky" property to the outer parent (.scroll)? Or is there a smooth way to do it in JavaScript?
I tried to change the HTML structure, but with Flexbox you need a container for each box to get a horizontal layout..
Thanks in advance!
Edit: For anyone with the same problem. The solution is to add a relative position to the outer parent and the change the HTML structure a bit.
See updated Fiddle: https://jsfiddle.net/r2czqwn7/20/
Parent (.scroll) has to be position: relative at first as you can check below but I would consider different structure (all contents with same title could be in same div) to stick it over multiple items.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-flow: column;
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
display: inline;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
.item .content:first-child {
margin-top: 1rem;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
</div>

How to get div height based on image height?

I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>
This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>
You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container
After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

image fade in then text not working

When I keep the mouse on image, it should display the text with title and some description. This context is working only for the first image and for the remaining images it's not working.
I used jquery plugin. It's not working. Code below.
What are the changes need to be done, let me know. Thanks in advance
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('#whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>
IDs must be unique within an html page. You can change your id=whatever to class=whatever and then use $(".whatever") to apply to all.
Updated snippet:
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('.whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>

CSS - positioning a scroll div

HTML:
<div class="wrapper">
<div class="scrolls">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
</div>
</div>
CSS:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
This is the result:
qshg7muq9vam.png http://jsfiddle.net/masgp4fg/
But I want to text "aruturek" was under the image, and is centered.
______________
| |
| |
| HEAD | and more...
| |
| |
______________
NICK
How I can position this?
Sorry for my english, I am from Poland! D:
Fiddle here: http://jsfiddle.net/masgp4fg/
Try this css:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.scrolls div{
display: inline-block;
margin-right: 2em;
margin-left: 2em;
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
And this html:
<div class="wrapper">
<div class="scrolls">
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
</div>
</div>
JSfiddle example here: http://jsfiddle.net/btz4sfsr/
You can update your html and css as per the below fiddle.
http://jsfiddle.net/kiranvarthi/v859mz30/
.scrolls .imagediv {
height: 150px;
float: left;
}
Your english is much better than my Polish
Just make a div for your images and the description.
<style>
.avatar {text-align:center;}
.avatarname {}
</style>
<div class="wrapper">
<div class="scrolls">
<div class="avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="avatarname">
aruturek
</div>
</div>
...
Put your image and name in a div floating left, and add a br between img and name :
HTML:
<div class="wrapper">
<div class="scrolls">
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
</div>
</div>
CSS (add this class):
.one-avatar {
float:left;
}
JSFIDDLE UPDATED : http://jsfiddle.net/ghorg12110/masgp4fg/3/
Is this what you want?
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.cont {
float: left;
padding: 10px;
}
<div class="wrapper">
<div class="scrolls">
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
</div>
</div>

Categories

Resources