image fade in then text not working - javascript

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>

Related

Display remaining items count in a list of divs

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>

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>

Using a toggle to turn off all other active classes on separate divs

I'm having a small issue getting a toggle to work in a particle way, for all I know it can't be done using a toggle which is why I'm writing on here to see if someone can show me the best method. So at the moment I have 3 divs all of which have onclick events, and each have a toggle css class. What I'm trying to achieve is when one is clicked if the others are active they return back to the previous class.
function orgClick(clicked_id) {
var id = (clicked_id);
document.getElementById(id).classList.toggle('org_container_active');
}
.org_container {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #e1dfe1;
border-radius: 15px;
display: inline-block;
}
.org_container_active {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #2bbe43;
border-radius: 15px;
display: inline-block;
}
.org_name {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
.org_logo {
padding-top: 10px;
margin: auto;
width: 100px;
}
.org_info {
padding: 5px 10px 10px 5px;
}
<div class="org_container" id="org1" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 1</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org2" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 2</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org3" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 3</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" class="noselect">
</div>
<div class="org_info">
<p></p>
</div>
</div>

document.querySelectorAll() lets you search for all elements that match a CSS selector. You can use it to deactivate all active containers:
for (let div of document.querySelectorAll('.org_container_active')) {
div.classList.remove('org_container_active');
}

How to create a button to every list item which opens a menu over it?

I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.

I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?

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