CODEWITHSUNDEEP
jqueryhtmlcsscss-transforms
user4774980
user4774980

Reputation:

Translate an element every time relative to its current position?

My goal is to translate the box along 'X' axis by 100px every time the button is clicked. I've somehow made it possible by using a temp variable in jQuery. Is there any other way this can be achieved purely through CSS such that when the button is clicked, the box should translate 100px from the current position?

var temp = 100;
$(document).ready(function(){
	$('#b1').click(function(){
		$('#box-one').css("transform","translate("+temp+"px, 0px)");
		temp = temp + 100;
	});
});
#box-one
{
	background-color: blue;
	height: 100px;
	width: 100px;
	transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="box-one"></div>
  <button id="b1">Move</button>
</body>
</html>

Upvotes: 7

Views: 4931

Answers (5)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

You can chain space-delimited transform values on the transform property. You could simply read back the applied transform and add translate(100px, 0px) to the string, compensating for the default none value.

Working Example:

$(document).ready(function(){
	$('#b1').click(function(){
        var transform = $('#box-one').css('transform');
		$('#box-one').css('transform', (transform !== 'none' ? transform : '') + ' translate(100px, 0px)');
	});
});
#box-one
{
	background-color: blue;
	height: 100px;
	width: 100px;
	transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div id="box-one"></div>
  <button id="b1">Move</button>
</body>
</html>

This removes the need for a counter variable. There is no way to completely remove JavaScript from the equation (at least not in a flexible manner).

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Here is a pure CSS method, although it's a bit crazy.

Add more inputs (and associated CSS) as needed:

html, body {
  margin: 0;
  padding: 0;
}

#box-one {
  background-color: blue;
  height: 100px;
  width: 100px;
  transition: all 0.3s ease;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
  transform: scaleX(7) scaleY(2);
  top: 100px;
}

input:first-of-type {z-index: 1;}
input:checked {display: none;}
input:checked + input {z-index: 1}

input:checked:nth-child(1)  ~ #box-one {transform: translateX(100px);}
input:checked:nth-child(2)  ~ #box-one {transform: translateX(200px);}
input:checked:nth-child(3)  ~ #box-one {transform: translateX(300px);}
input:checked:nth-child(4)  ~ #box-one {transform: translateX(400px);}
input:checked:nth-child(5)  ~ #box-one {transform: translateX(500px);}
input:checked:nth-child(6)  ~ #box-one {transform: translateX(600px);}
input:checked:nth-child(7)  ~ #box-one {transform: translateX(700px);}
input:checked:nth-child(8)  ~ #box-one {transform: translateX(800px);}
input:checked:nth-child(9)  ~ #box-one {transform: translateX(900px);}
input:checked:nth-child(10) ~ #box-one {transform: translateX(1000px);}
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
<div id="box-one"></div>
<button>Move</button>

Upvotes: 3

Spike
Spike

Reputation: 61

CSS cannot do onclick events. However on anchor tag <a> you can use :visited and :active psuedo class to emulate a click behavior. try here: : http://jsfiddle.net/8aagpgb4/13/

This is a bit hackish but somehow I hope you will get the idea :)

Upvotes: 0

Alvaro Montoro
Alvaro Montoro

Reputation: 29695

I think the answer for this will be: no, you cannot do it exclusively with CSS... Or maybe just "not at this moment".

HTML and CSS are declarative languages that describe how the page should organize and how it should be represented by the browser. But they are "static": they don't change, or at least they don't change by themselves (as they can be changed by using script languages such as JavaScript).

Because of that, and in your particular case, every time that you click the button, you need a different language to keep track of those changes and apply an action accordingly (as you are currently doing with JavaScript).

Why did I say "not at this moment"? Because CSS is getting some features that make it slightly dynamic, and if extended (and notice that this is just me dreaming), they could help you achieve things like you describe without the need of JavaScript.

For example: counter-reset and counter-increment allow to keep track of the number of occurrences of an element, and they can be used in the content of ::before and ::after. If they were extended so you could use them in other rules (e.g.: as a numeric value), and if they kept track of not only elements but selectors (e.g.: :active), you could achieve what you wanted without using JavaScript... but again, that's me daydreaming.

Upvotes: 1

Muhammad Abdul-Rahim
Muhammad Abdul-Rahim

Reputation: 2020

Let's try using .animate() to complete this task.

$(document).ready(function(){
    $('#b1').click(function(){
        $('#box-one').animate({
            "left":     "+=100px"
        }, "slow");
    });
});

We're going to need to modify our CSS slightly. Let's get rid of transition and add a position attribute:

#box-one
{
    background-color: blue;
    height: 100px;
    width: 100px;
    position: relative;
}

Upvotes: 1

Related Questions