Develop Reference

Rotate an item on a background image with transform and js

I have a background image and another image element as needle. So you will see 3 tabs above the snippet page. My goal is to change the position of the needle when you click to the buttons. But there are some problems like if you click 2nd or 3th tab first, the needle moves wrong direction.
And if you move between 3th and 1st tabs the bottom of needle is moving out of the black little circle.
How can I achieve my purpose without any visual errors? Maybe some other way to achieve this?
function asama3() {
document.getElementById("ibre").style.transform = "rotate(-68deg)";
document.getElementById("ibre").style.left = "210px";
document.getElementById("ibre").style.top = "178px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(-107deg)";
document.getElementById("ibre").style.left = "157px";
document.getElementById("ibre").style.top = "180px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(-145deg)";
document.getElementById("ibre").style.left = "113px";
document.getElementById("ibre").style.top = "211px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 258px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>

As it rotates at the center, you can create a hidden div and wrap them both in an outer div and makes sure the center lines up with the black dot:
function asama3() {
document.getElementById("outer").style.transform = "rotate(68deg)";
}
function asama2() {
document.getElementById("outer").style.transform = "rotate(107deg)";
}
function asama1() {
document.getElementById("outer").style.transform = "rotate(145deg)";
}
#outer {
display: flex;
width: 300px;
height: 5px;
position: absolute;
left: 108px;
top: 278px;
transition: all 1s;
}
#ibre {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: #070707;
}
#hidden {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: transparent;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama1()">1. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama2()">2. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama3()">3. aşama</h1>
</div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div id="outer">
<div id="ibre"></div>
<div id="hidden"></div>
</div>
</div>
This way it pivots on that dot to wherever you need it pointing.

Something like this, i think
function asama3() {
document.getElementById("ibre").style.transform = "rotate(140deg)";
document.getElementById("ibre").style.left = "250px";
document.getElementById("ibre").style.top = "220px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(80deg)";
document.getElementById("ibre").style.left = "165px";
document.getElementById("ibre").style.top = "190px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(40deg)";
document.getElementById("ibre").style.top = "220px";
document.getElementById("ibre").style.left = "120px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 270px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>

Stepper with pure javascript - previous function not working

How to make it return to false once exceeded max step (which is the last step), previous function not working once exceeded max step, I tried to set current step as -1 but still doesn't work.
I get this error msg (TypeError: bullets[current] is undefined) on my console when it exceeded max step.
Can somebody help me with this? Thanks in advance.
const bullets=[...document.querySelectorAll('.bullet')];
const max=4;
let current=-1;
function next(){
current+=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
function previous(){
bullets[current].classList.remove('hovered');
current-=1;
if(!bullets[current]){
return false;
}
bullets[current].classList.add('hovered');
}
.progressbar{
display:flex;
justify-content:space-between;
align-items:flex-end;
width:90%;
margin:0 auto;
margin-bottom:40px;
}
.item{
text-align:center;
width:20%;
position:relative;
}
.text{
height:50px;
margin:10px 0px;
color:#3CB371;
}
.bullet{
border:1px solid #3CB371;
height:20px;
width:20px;
color:#3CB371;
display:inline-block;
transition:background-color 500ms;
line-height:20px;
}
.bullet.hovered{
color:#fff;
background-color:#3CB371;
bottom:10px;
}
.bullet.completed:after{
content:'';
position:absolute;
bottom:80px;
height:1px;
width:calc(133% - 21px);
background-color:#3CB371;
margin-left:7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</div>

You're unconditionally incrementing/decrementing current at the moment. Even if you don't try changing the classList on this call of next or previous, the next time either button is clicked, the current index may not exist. So, in previous, when you do bullets[current].classList.remove('hovered'); at the beginning of the function, that will throw if the last current went beyond the possible indicies for the bullets collection.
Consider using Math.max / Math.min to ensure that current is constrained to the possible indicies (or -1, in the case that nothing should be highlighted):
const bullets = [...document.querySelectorAll('.bullet')];
let current = -1;
function next() {
current = Math.min(current + 1, bullets.length - 1);
bullets[current].classList.add('hovered');
}
function previous() {
if (bullets[current]) {
bullets[current].classList.remove('hovered');
}
current = Math.max(current - 1, -1);
}
.progressbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.item {
text-align: center;
width: 20%;
position: relative;
}
.text {
height: 50px;
margin: 10px 0px;
color: #3CB371;
}
.bullet {
border: 1px solid #3CB371;
height: 20px;
width: 20px;
color: #3CB371;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.hovered {
color: #fff;
background-color: #3CB371;
bottom: 10px;
}
.bullet.completed:after {
content: '';
position: absolute;
bottom: 80px;
height: 1px;
width: calc(133% - 21px);
background-color: #3CB371;
margin-left: 7px;
}
<div class="progressbar">
<div class="item">
<div class="bullet completed">1</div>
<div class="text">Hello Hello Hello</div>
</div>
<div class="item">
<div class="bullet completed">2</div>
<div class="text">Hello</div>
</div>
<div class="item">
<div class="bullet completed">3</div>
<div class="text">Hello</div>
</div>
<div class="item completed">
<div class="bullet">4</div>
<div class="text">Hello</div>
</div>
</div>
<div onclick="previous();">Previous</div>
<div onclick="next();">Next</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>

How to superpose text on image

Actually my balise section is under my image, or I want to superpose them ?
#demo {
margin: 0;
max-width: 350px;
text-align:center;
}
h2 {
margin: 0px;
padding:0px;
}
section {
border:1px solid #eee;
padding: 20px;
margin-top:-370px;
}
.credit {
margin-top:0px;
}
<img src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 15px auto">
<p>Exclusive / July 15, 2015
<br/>Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
How can I do ?
Here is my jsfiddle: www.jsfiddle.net/kodjoe/ys484rpw/

I have given your image a class and set the image and demo section to position absolute with bottom 0
$('article').readmore({speed: 500});
#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px!important;}
.credit { margin-top:0px; }
.abs, #demo {position:absolute; bottom:0; max-width:350px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive / July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>
</article>
</section>

I think you should watch " z-index " and I think if you round all of the elements in a single div and add 'position: absolute'. Sorry for my english i'm a beginner.

How would I make it so this box can be minimized and maximized?

#you {
background-color: rgba(65,64,61,0.5);
position: absolute;
top: 0px;
right: 200px;
padding: 7px;
border-radius: 0px 0px 3px 3px;
width: 165px;
border: 2px solid #41403d;
}
#exitb {
background: url(http://playneko.co.uk/exit.png);
height: 19px;
width: 19px;
border-radius: 3px;
}
#exitb:hover {
background: url(http://playneko.co.uk/exit_hover.png);
}
Thats my css code andd this is the box I have
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;">
<img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
</div>
<div style="position: absolute; z-index:1">'.$aanwezag.'</div>
<br/>
</td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>
How would I add the exit image on the right of the box to be able to minimize and maximise the box? if you can help it would be greatly appreciated.

For example, you have to wrap a content which should toggle into a separate div and toggle this div instead of whole #you element
<div id="you">
<div id="exitb">-</div>
<div id=content>
...
</div>
</div>
$("#content").slideToggle();
https://jsfiddle.net/Qy6Sj/1602/

I'm not quite sure if this is what you wanted or not. I have moved the #exitb id out of the #you wrapper and positioned it as absolute as well in order to move it into the image. Moreover, I simplified the code a little bit to use just a text, + and -, instead of image icons.
HTML:
<div id="exitb">-</div>
<div id="you">
...
</div>
Javascript:
$("#exitb").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#you").slideToggle();
});
CSS:
#exitb {
text-align: center;
color: #fff;
background-color: red;
height:19px;
width:19px;
border-radius:3px;
cursor: point;
position:absolute;
top:0px;
right:200px;
z-index: 10;
cursor: pointer;
}
JsFiddle.