All geek questions in one place

Do you want to translate an element each time relative to its current position?

My goal is to translate field along the x axis at 100px each time the button is clicked. I somehow made this possible using the temp variable in jQuery. Is there any other way that can only be achieved using CSS, so when the button is pressed, the field 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>
+6
source share
5 answers

Here is a clean CSS method, although it's a little crazy.

Add additional inputs (and related 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>
+4
source

Try using .animate() to accomplish this task.

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

We need to change our CSS a bit. Let’s get rid of the transition and add the position attribute:

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

I think the answer for this would 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 be organized and how it should be displayed by the browser. But they are "static": they do not change, or at least do not change on their own (since they can be changed using script languages ​​such as JavaScript).

Because of this, and in your particular case, every time you click the button, you need a different language to track these changes and apply the appropriate action (as you are doing with JavaScript now).

Why did I say "not at this moment"? Since CSS gets some features that make it slightly dynamic, and if it is extended (and notice that I only dream about it), they can help you achieve things that you describe without the need for JavaScript.

For example: counter-reset and counter-increment allow you to track the number of occurrences of an element, and they can be used in content from ::before and ::after . If they were extended, so you can use them in other rules (for example: as a numeric value), and if they track not only elements, but also selectors (for example :active ), you can achieve what you want without using JavaScript ... but then again, what I dream.

+1
source

You can bind conversion values ​​separated by spaces in the transform property. You can simply read the application conversion and add translate(100px, 0px) to the string, compensating for the default value of none .

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 eliminates the need for a counter variable. It is not possible to completely remove JavaScript from the equation (at least not in a flexible way).

+1
source

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

This is a bit hacky, but somehow I hope you get this idea :)

0
source

Source: https://habr.com/ru/post/984964/

More articles:


All Articles