Develop Reference

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

use scrollTop in Aside not the html,body

i try to use scrollTop ,
when user Click on the ( li ) element i get the (data-id) from (li) and scroll to the box in aside that have the same id;
problem is when i click the for example (li) number 2 every things fine but when i click it again aside scroll back to top and if you click rapidly it get worst
var aside = $('.aside');
$("li").on('click',function (){
id = $(this).data("id")
$('.aside').animate({
scrollTop: $('div.item[data-id="' + id + '"]').offset().top
}, 300, 'linear')
});
html,body {
width: 100%;
height: 100%;
float: right;
margin:0;
padding: 0;
}
.aside {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right:0;
background: #ccc;
overflow-y: scroll;
}
.estateWrap {
width: 100%;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
.item {
float: right;
margin: 0px;
padding:0px;
width: 100%;
height: 150px;
background: #f5f5f5;
margin-bottom: 100px
}
<html>
<head>
<meta charset="UTF-8">
<title> index </title>
<script src="jQuery.min.js"></script>
</head>
<body>
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
<li data-id="4">4</li>
</ul>
<div class="aside">
<div class="estateWrap">
<div class="item" data-id="1">1</div>
<div class="item" data-id="2">2</div>
<div class="item" data-id="3">3</div>
<div class="item" data-id="4">4</div>
</div>
</div>
</body>
</html>

You need to consider that the offset top position of your item elements change after they have been scrolled. The top value becomes 0. That is why after you click on the same link again it will go all the way up to 0.
You could add the current top position of the parent aside element like so:
var aside = $('.aside');
function scrollAside (topPos) {
aside.animate({
scrollTop: topPos
}, 300, 'linear')
}
$("li").on('click',function () {
var id = $(this).data("id"),
crntScrollPos = aside.scrollTop(),
top = $('div.item[data-id="' + id + '"]').offset().top;
if (top + crntScrollPos !== crntScrollPos) {
scrollAside(top + crntScrollPos);
}
});
html,body {
width: 100%;
height: 100%;
float: right;
margin:0;
padding: 0;
}
.aside {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right:0;
background: #ccc;
overflow-y: scroll;
}
.estateWrap {
width: 100%;
height: 100%;
float: right;
margin: 0;
padding: 0;
}
.item {
float: right;
margin: 0px;
padding:0px;
width: 100%;
height: 150px;
background: #f5f5f5;
margin-bottom: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
<li data-id="3">3</li>
<li data-id="4">4</li>
</ul>
<div class="aside">
<div class="estateWrap">
<div class="item" data-id="1">1</div>
<div class="item" data-id="2">2</div>
<div class="item" data-id="3">3</div>
<div class="item" data-id="4">4</div>
</div>
</div>

Use position instead of offset:
position();
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Scroll div content on mouse move

I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.
So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?
For now I have the following code:
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Also the number of items can be dynamically changed so I have another trouble to make it working.

Is this almost what you intends??
Just add the following style rules:
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
Demo
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>

Expandable/Collapsable div, wont close and has unwanted space

I have created a navigation based on expandable and closable divs, the autoclose and open works but there is always a invisable div present that takes up space. Also when reclicking a menu item should close the div. Tried different closing methods but it wont let me.
Here is what I got so far:
HTML
<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div></div>
<div id="navcontent">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div>
</div>
^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>
CSS
.containerdiv
{
min-width:400px;
max-width:500px;
overflow:hidden;
display:block;
margin-left:auto;
margin-right: auto;
}
.secondtopdiv
{
width: 100%;
height: 100px;
background: #61c5bb;
color:#000000;
vertical-align: middle;
line-height: 100px;
}
#nav{
width: 100%;
overflow: hidden;
}
#navcontent {
position: relative;
float: left;
width: 100%;
min-height: 100px;
overflow: hidden;
}
.spacerdiv
{
height:20px;
}
.divtitle {
font-size: 18px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
div.panel {
position: absolute;
background: #61c5bb;
height: 100%;
width: 100%;
display: none;
}
Jquery/JS:
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
top: -($target.height())
}).animate({
top: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
top: -$this.height()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Link to fiddle: http://jsfiddle.net/6swdzycc/10/

If i understood correctly, you remove the min-width from #navcontent and can use the following script:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($other.length) $other.removeClass("active").slideUp("slow", function () {
$target.toggleClass("active").slideToggle("slow");
})
else $target.toggleClass("active").slideToggle("slow");
});
});
JSFiddle

div.panel1 {
background: #61c5bb;
height: 150px;
width: 100%;
display: none;
}
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div>
</div>
<div id="navcontent">
<div class="panel1" id="target1">Target 11111</div>
<div class="panel1" id="target2">Target 21111</div>
<div class="panel1" id="target3">Target 31111</div>
</div>
<script>
$('document').ready(function(){
$('.panel').click(function(){
var thisHref=$(this).attr('href');
$('.panel1').hide();
$(thisHref).slideToggle('slow');
});
});
</script>

Link back out from child HTML loaded in div to parent HTML

I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that was there previously. This is for an image gallery, with a main navigation (parent) and then the detailed view with smaller navigation (child). Here is the parent HTML, index.html (with CSS and JS embedded):
<html>
<head>
<title>Java Factory</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
#container {
width: 1020px;
height: 634px;
}
ul#flavors {
list-style: none;
width: 1020px;
height: 634px;
position: relative;
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li {
position: absolute;
}
.wakey {
width: 309px;
height: 309px;
top: 0px;
left: 30px;
}
.smooth {
width: 309px;
height: 309px;
top: 0px;
left: 355px;
}
ul#flavors li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors li a {
text-indent: -9000px;
}
ul#flavors li a:hover {
background: url(images/coffee/thumbs_large.jpg) no-repeat 0 0;
}
ul#flavors li.wakey a:hover {
background-position: -30px -640px;
}
ul#flavors li.smooth a:hover {
background-position: -355px -640px;
}
#top {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="web">
<div id="top">
</div>
<nav id="container">
<ul id="flavors" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="smooth">Smooth Caffeinator</li>
</ul>
</nav>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
And here is the child HTML:
<html>
<head>
<title>div container switch test</title>
<style type="text/css">
#coffee_return {
height: 36px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wakey">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container1 {
width: 1020px;
height: 624px;
background: url(images/coffee/wakey.jpg) no-repeat 0 0;
}
ul#flavors1 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors1 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors1 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors1 li a {
text-indent: -9000px;
}
ul#flavors1 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors1 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors1 li.smooth a:hover {
background-position: -157px 11px;
}
#coffee_return {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container1">
<ul id="flavors1" class="coffeenav">
<li class="smooth">Smooth Caffeinator</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div id="smooth">
<style type="text/css">
.shell {
width:100%;
height:100%;
}
#container2 {
width: 1020px;
height: 624px;
background: url(images/coffee/smooth.jpg) no-repeat 0 0;
}
ul#flavors2 {
list-style: none;
width: 1020px;
height: 624px;
position: relative;
}
ul#flavors2 li {
position: absolute;
}
.wakey {
width: 159px;
height: 169px;
top: 455px;
left: 30px;
}
.smooth {
width: 159px;
height: 169px;
top: 455px;
left: 188px;
}
ul#flavors2 li a {
display: block;
outline: none;
height: 100%;
}
ul#flavors2 li a {
text-indent: -9000px;
}
ul#flavors2 li a:hover {
background: url(images/coffee/thumbsml_rollover.jpg) no-repeat 0 0;
}
ul#flavors2 li.wakey a:hover {
background-position: 1px 11px;
}
ul#flavors2 li.smooth a:hover {
background-position: -157px 11px;
}
</style>
<div class="shell">
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
<nav id="container2">
<ul id="flavors2" class="coffeenav">
<li class="wakey">Wakey Wakey</li>
<li class="vanilla">Vanilla Dream</li>
</ul>
</nav>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</body>
</html>
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
And the demo for this is: http://mmdsgn.com/divsample/5/ -- You'll see the return button appears at the top when you click either of the first two boxes (only ones that work right now) and I need that graphic button to call up the original div id content in the parent HTML.

Change the path on "href" to "../" instead of "x"
<img src="images/coffee/return_btn.jpg" border="0">
or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.
<img src="images/coffee/return_btn.jpg" border="0">
Edit:
Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)

You'll want to change your original script a bit:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
$('#coffee_return').on('click', function () {
$('#web').load('./ #web');
return false;
});
});
return false;
});
});
</script>
This basically says: After loading a section of coffee.html, look for a coffee_return button and add onclick behavior to re-load the original page into your #web section.
Also, change that href on your coffee_return button to # or JavaScript:void(0); since it's trying to load a document called "x" currently:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>

You cannot use same id on multiple elements, as you said
"
The button inside each referenced div id in the child HTML is this:
<div id="coffee_return">
<img src="images/coffee/return_btn.jpg" border="0">
</div>
". This would give erroneous results. Rather, assign them a class and bind event with their class.