Develop Reference

Get id of an element with the same class

I have multiple div boxes with the class printPic which will have their own unique id. On hover in/out, toggle the display of printPicOverlay which is a child of printPic. The way I have it set up now, printPicOverlay for all ids are toggled on hover.
What would be the best way to show/hide printPicOverlay on hover for each individual id?
$(".printPic").hover(function () {
$(".printPicOverlay").toggle();
}, function () {
$(".printPicOverlay").toggle();
});
.printPic{
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "2">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "3">
<div class = "printPicOverlay"></div>
</div>

Just to add another alternative – this is really easy in plain CSS, without any Javascript/JQuery:
.printPic {
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay {
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}
.printPic:hover .printPicOverlay {
display: block;
}
<div class="printPic" id="1">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
<div class="printPicOverlay"></div>
</div>
It's also probably a bit more performant – using native browser functionality rather than finding elements via jquery.
Docs on :hover pseudoclass
If you want to animate the overlay appearance, it's possible with a bit of tweaking (visibility instead of display etc.):
.printPic {
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay {
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
position: absolute;
visibility: hidden;
opacity: 0;
transform: scale(0.8) translate(0, 10%);
transition: visibility 0s, opacity 0.5s ease-in, transform 0.3s ease-in;
}
.printPic:hover .printPicOverlay {
transform: scale(1);
visibility: visible;
opacity: 1;
}
<div class="printPic" id="1">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
<div class="printPicOverlay"></div>
</div>

Instead use $(this), with $(this).find() like:
$(this).find(".printPicOverlay").toggle();
Have a look at the snippet below:
$(".printPic").hover(function () {
$(this).find(".printPicOverlay").toggle();
}, function () {
$(this).find(".printPicOverlay").toggle();
});
.printPic{
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "2">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "3">
<div class = "printPicOverlay"></div>
</div>
Hope this helps!

You could use $(this).find() similar to the below.
What jQuery find does, is get all descendants by the specified selector .printPicOverlay and toggle only those matched elements.
Using $(this) will use the context of the currently hovered over element only.
$(".printPic").hover(function () {
$(this).find(".printPicOverlay").toggle();
}, function () {
$(this).find(".printPicOverlay").toggle();
});
.printPic{
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "2">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "3">
<div class = "printPicOverlay"></div>
</div>

The issue is because you need to use the this keyword to find() the .printPicOverlay element within the hovered .printPic, like this:
$(".printPic").hover(function() {
$(this).find(".printPicOverlay").toggle();
});
.printPic {
height: 10em;
width: 10em;
display: inline-block;
background-color: red;
position: relative;
}
.printPicOverlay {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printPic" id="1">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
<div class="printPicOverlay"></div>
</div>
However, it would be much better, and more simple to achieve this in CSS alone. There's no need for JS at all:
.printPic {
height: 10em;
width: 10em;
display: inline-block;
background-color: red;
position: relative;
}
.printPicOverlay {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none;
position: absolute;
}
.printPic:hover .printPicOverlay {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printPic" id="1">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="2">
<div class="printPicOverlay"></div>
</div>
<div class="printPic" id="3">
<div class="printPicOverlay"></div>
</div>

$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation
Just a different approach; I rather use only CSS by #helb.
While you already over the element ; and with toggling you can achieve your target. with little animation if you wish.
$(function(){
$(".printPic").hover(function () {
$('#' + $(this).attr('id') + '> div').toggle(100);
});
});
.printPic{
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "2">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "3">
<div class = "printPicOverlay"></div>
</div>

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>

Logo moves when js script inserts text in paragraph

The main problem is that my logo that is positioned next to the title with a negative margin and when a user fills in a username and proceeds the logo jumps down probably because text is inserted in the paragraph. But I can't find a solution to fix this.
HTML:
#logo{
display: flex;
flex-flow: row;
margin-top: -2.9rem;
margin-left: 11rem;
-ms-transform: rotate(-15deg); /* IE 9 */
-webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
transform: rotate(-15deg);
justify-content: space-between;
float: left;
vertical-align: top;
position:absolute;
}
#logo>img{
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<header>
<div id="hoofding">
<div id="titel">
<h1>Sudoku</h1>
</div>
<div id="home" >
<div id="Welkom">
<p id="afmeldennaam" class="hidden"></p>
</div>
<a id="afmelden" class="hidden">Logout</a>
</div>
</div>
<nav class="hidden" id="navigatie">
<ul>
<!--<li>Home</li>-->
<li>Sudoku</li>
<li>Highscores</li>
</ul>
</nav>
</header>
<div id="logo">
<img src="assets/media/logo.png" alt="logo" class="visible-lg">
</div>

You should locate the logo/image in the same containing element (#hoofding) as the title. Then use relative positioning to position it outside of the element.
Here's a contrived example.
function locate( selector, base ) {
base = base && 1 === base.nodeType ? base : document;
return base.querySelector( selector );
}
var btn = locate( 'button' ),
hb = locate( '.header-bottom' ),
user = locate( '.user' );
btn.addEventListener( 'click', function ( e ) {
hb.classList.toggle( 'hide' );
user.classList.toggle( 'hide' );
} );
body {
margin: 0;
}
header {
}
.header-top,
.header-bottom {
display: flex;
height: 75px;
align-items: center;
}
.header-top {
padding: 0 1rem;
color: white;
background-color: black;
}
.header-top a {
color: white;
}
.user {
flex-grow: 1;
text-align: right;
}
.header-bottom {
justify-content: center;
}
.hb-item {
margin: 0 1rem;
padding: 0.5rem 1rem;
color: white;
background-color: teal;
border-radius: 0.25rem;
}
h1 {
margin: 0;
color: teal;
}
.logo {
display: block;
transform: rotate( -13deg );
position: relative;
top: 25px;
left: 15px;
}
.hide {
display: none;
}
<header>
<div class="header-top">
<h1>Sudoku</h1>
<img class="logo" src="http://placehold.it/100x100/fc0">
<div class="user hide">
<span>Welcome User!</span>Logout
</div>
</div>
<div class="header-bottom hide">
<div class="hb-item">One</div>
<div class="hb-item">Two</div>
</div>
</header>
<main>
<button>Click Me!</button>
</main>

Use the id='logo' inside the id="hoofding".
Put the id='logo' after the id="titel".
The id='logo' doesn't need flex attributes.
The id='logo' doesn't need the float attribute.
The id='logo' doesn't need the flex-flow attribute.
Use the transform: rotate(-15deg); in the img tag, not in the id='logo'.
Delete the margins left and top from the id='logo'.
You can use about margin-top: 15px; in the img tag.

If you place the logo into the title div then it will work, all you have to do then is just adjust the margins and padding.
example:
HTML
<nav>
<div class="brand">
<h3>LogoName</h3>
<img src="https://cdn0.iconfinder.com/data/icons/20-flat-icons/128/crest.png" alt="">
</div>
</nav>
CSS
nav{
background-color: black;
height: 50px;
}
.brand{
position: relative;
}
.brand h3{
display: inline;
color: white;
}
https://jsfiddle.net/q24L6ct4/2/

Vertical scrolling but remove scrollbar

This has been asked several times across the internet; however, I can't get a solution that works for me. I need to maintain the ability to have vertical scrolling but hide the scrollbar from view at all times in the y direction.
I need my #content-main div to scroll independently from every other div. This works as is; however, I have a scrollbar I need to get rid of but I don't know how or why it is so difficult to do.
My code is set up like so:
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
</div>
</body>
And the CSS relevant for what I'm trying to do:
* {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
html, body {
margin: 10px;
padding: 0;
background: #ccc;
overflow: hidden;
}
#ipad {
padding: 0;
margin: 0;
width: 768px;
height: 1024px;
background: #fff;
overflow: hidden;
}
#content-main {
width: 600px;
height: 100%;
float: right;
overflow: auto;
}
I've seen this "solution" but it does not work for me: http://jsfiddle.net/5GCsJ/954/
And I've seen this but these did not work when applied to my #content-main div: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Any help would be greatly appreciated.

I have given CSS for two div separately #content-main div to scroll independently from every other div. And Should Close the DIV of #ipad div before start of #content-main div. here is the code of what you want.
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>

Fade in div on mouseover

This is a followup to my earlier question, Fade in/out js mouseover event.
I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.
My basic code is:
<style type="text/css">
.hidden{
display:none;
}
#container {
margin: 0%;
padding: 0;
width: 100%;
background-color: #222222;
}
#left, #right {
float: left;
margin: 0% 0 0% 0%;
padding: 0%;
background-color: #000;
}
#right {
float: right;
margin: 0% 0% 0% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
$ ("#products img").mouseover(function(){
$ (".description").stop(true, true);
var newSelected = $(this).attr("alt");
$ ("#" + oldSelected).fadeOut('normal',function(){
$ ("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
<body>
<div id="container" style="width: 974px; height: 200px;">
<div id="left" style="width: 200px; height: 200px;">
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
</div>
<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
.. content ..
</div>
<div class="description" id="services">
.. content ..
</div>
<div class="description" id="contact">
.. content ..
</div>
</div>
</div>
I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.
How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?

You can try .slideDown and .slideUp
or .show() .hide() with duration