Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #32476 > unrolled thread

Rotating something on click

Back to article view | Back to comp.lang.javascript

Contents

  Rotating something on click bit-naughty@hotmail.com - 2017-02-05 10:12 -0800
    Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-05 19:16 +0100
    Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-05 20:35 +0100
      Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-05 23:07 -0800
        Re: Rotating something on click Martin Honnen <martin.honnen@gmx.de> - 2017-02-06 12:05 +0100
          Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:09 -0800
            Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-06 23:15 -0800
              Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 11:09 +0200
            Re: Rotating something on click Osmo Saarikumpu <osmo@weppipakki.com> - 2017-02-07 10:40 +0200
    Re: Rotating something on click "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-02-05 13:36 -0800
      Re: Rotating something on click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-02-06 04:58 +0100
    Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 03:33 -0800
      Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:04 +0100
        Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:10 +0100
          Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:19 +0100
            Re: Rotating something on click "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-02-07 13:38 +0100
        Re: Rotating something on click bit-naughty@hotmail.com - 2017-02-07 23:52 -0800

#32476 — Rotating something on click

I want a link, which, when clicked, will rotate stuff - eg. if there is a link "Hello" on screen, when it's clicked, I want it to rotate, say 90 degrees. How do I do that? I found out about the transition property in JS, but I'm unclear on how to code the  transition and the "transform: rotate" stuff in Javascript....


Thanks.

[toc] | [next] | [standalone]

#32478

bit-naughty@hotmail.com wrote on 05 Feb 2017 in comp.lang.javascript:

> I want a link, which, when clicked, will rotate stuff - eg. if there is
> a link "Hello" on screen, when it's clicked, I want it to rotate, say 90
> degrees. How do I do that? I found out about the transition property in
> JS, but I'm unclear on how to code the  transition and the "transform:
> rotate" stuff in Javascript.... 

Here we go again.

Instead of searching for the many examples on the web yourself
you opt for letting us do the job.

This 'cogent' enough?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#32479

On 05.02.2017 19:12, bit-naughty@hotmail.com wrote:
> I want a link, which, when clicked, will rotate stuff - eg. if there
> is a link "Hello" on screen, when it's clicked, I want it to rotate,
> say 90 degrees. How do I do that? I found out about the transition
> property in JS, but I'm unclear on how to code the  transition and
> the "transform: rotate" stuff in Javascript....


Like any CSS property, you can set the inline style of an element using
   element.style.propertyName
e.g.
   element.style.transform = 'rotate(90deg)';

It seems only block level elements and inline blocks are transformable 
(https://drafts.csswg.org/css-transforms/#transformable-element), so for 
a link to be transformable you need to set display as inline-block as well:

<a href="#" data-angle="0" onclick="rotate(this); return false;" 
style="display: inline-block;">Hello</a>


function rotate(element) {
   element.dataset.angle =  (Number(element.dataset.angle) + 90) % 360;
   element.style.transform = 'rotate(' + element.dataset.angle + 'deg)';
}

Sample at https://jsfiddle.net/7og9uctw/3/.

[toc] | [prev] | [next] | [standalone]

#32483

On Sunday, February 5, 2017 at 1:35:39 PM UTC-6, Martin Honnen wrote:
 
> Like any CSS property, you can set the inline style of an element using
>    element.style.propertyName


Ah no - I want there to be an *animation*, ie, when it's clicked, it'll actually *spin around* that many degrees. In fact *this* is what I'm not clear about - how do I tell it that there'll be a *transition* FIRST and THEN the rotation (if I understand things correctly)? The "element.style.transform = 'rotate(90deg)';  " part I had pretty much already figured out.... :)

[toc] | [prev] | [next] | [standalone]

#32491

On 06.02.2017 08:07, bit-naughty@hotmail.com wrote:
> On Sunday, February 5, 2017 at 1:35:39 PM UTC-6, Martin Honnen wrote:
>
>> Like any CSS property, you can set the inline style of an element using
>>    element.style.propertyName
>
>
> Ah no - I want there to be an *animation*, ie, when it's clicked, it'll actually *spin around* that many degrees. In fact *this* is what I'm not clear about - how do I tell it that there'll be a *transition* FIRST and THEN the rotation (if I understand things correctly)? The "element.style.transform = 'rotate(90deg)';  " part I had pretty much already figured out.... :)

You can set the CSS
   transition-property: transform
and then the duration e.g.
   transition-duration: 2s;

<a href="#" data-angle="0" onclick="rotate(this); return false;" 
style="display: inline-block; transition-property: transform; 
transition-duration: 2s;">Hello</a>

function rotate(element) {
   element.dataset.angle =  Number(element.dataset.angle) + 90;
   element.style.transform = 'rotate(' + element.dataset.angle + 'deg)';
}

as in https://jsfiddle.net/7og9uctw/5/.

[toc] | [prev] | [next] | [standalone]

#32533

On Monday, February 6, 2017 at 5:05:27 AM UTC-6, Martin Honnen wrote:

> You can set the CSS
>    transition-property: transform
> and then the duration e.g.
>    transition-duration: 2s;
> 

..so, in Javascript, it would be like:

elem.style.transition-property = "transform";

and

elem.style.transition-duration = "2s";

then?

[toc] | [prev] | [next] | [standalone]

#32534

..and also, I was reading this page:

https://css-tricks.com/controlling-css-animations-transitions-javascript/


In "Manipulating CSS Transitions", it says: "To trigger an element's transition, toggle a class name on that element that triggers it." - could you give me an example of this? It's kind of hard to visualise in my head....

[toc] | [prev] | [next] | [standalone]

#32536

On 07/02/2017 09:15, bit-naughty@hotmail.com wrote:
> https://css-tricks.com/controlling-css-animations-transitions-javascript/
>
> In "Manipulating CSS Transitions", it says: "To trigger an element's transition, toggle a class name on that element that triggers it." - could you give me an example of this? It's kind of hard to visualise in my head....

As a rule of thumb, it is best to manipulate classes through the 
className property, as all the style properties can be set in CSS 
(cleaner scripts, easier maintenance). IOW, change the elements class 
instead of it's individual style properties. For syntax examples see e.g.:

http://www.w3schools.com/jsref/prop_html_classname.asp

-- 
Best wishes, Osmo

[toc] | [prev] | [next] | [standalone]

#32535

On 07/02/2017 09:09, bit-naughty@hotmail.com wrote:
> On Monday, February 6, 2017 at 5:05:27 AM UTC-6, Martin Honnen wrote:
>
>> You can set the CSS
>>    transition-property: transform
>> and then the duration e.g.
>>    transition-duration: 2s;
>>
>
> ..so, in Javascript, it would be like:
>
> elem.style.transition-property = "transform";
>
> and
>
> elem.style.transition-duration = "2s";
>
> then?
>

The syntax for compound properties is:

element.style.propertyName

(e.g. elem.style.transitionDuration = "2s";)

instead of property-name

-- 
Best wishes, Osmo

[toc] | [prev] | [next] | [standalone]

#32480

bit-n...@hotmail.com wrote:
> I want a link, which, when clicked, will rotate stuff - eg. if there is a link "Hello" on screen, when it's clicked, I want it to rotate, say 90 degrees. How do I do that? I found out about the transition property in JS, but I'm unclear on how to code the  transition and the "transform: rotate" stuff in Javascript....

CSS alone can accomplish this now:

<style type="text/css">
#rot{
  position: absolute;
  top: 100px;
  left: 100px;
}

#rot:target {
  transform: rotate(90deg);
}
</style>

<!-- ... -->

<a href="#rot">Rotate</a>

<div id="rot">&rarr;</div>

See: <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>

and also: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms>

[toc] | [prev] | [next] | [standalone]

#32481

Michael Haufe (TNO) wrote:

> bit-n...@hotmail.com wrote:
>> I want a link, which, when clicked, will rotate stuff - eg. if there is a
>> link "Hello" on screen, when it's clicked, I want it to rotate, say 90
>> degrees. How do I do that? I found out about the transition property in
>> JS, but I'm unclear on how to code the  transition and the "transform:
>> rotate" stuff in Javascript....
> 
> CSS alone can accomplish this now:
> [using the :target selector]

It should be noted that because of this and CSS transitions/animations, all 
of which Time Magazine (<https://time.com/>) does with CSS scripting when 
you go to their Web site with enabled ad blocker, and click the “break 
time.com” button, could also be done *easier* using CSS only.  All it takes 
is a common container element with an ID.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#32541

..OK, so if I want some text rotated on a click, what do I do? this is my code:

var el = document.getElementById("bonus");


el.addEventListener("click", function(event) {
	event.preventDefault();
        el.style.transitionProperty = "transform";
        el.style.transform = "rotate(10deg)";
	}
);	


...doesn't seem to work...?

[toc] | [prev] | [next] | [standalone]

#32543

bit-naughty@hotmail.com wrote on 07 Feb 2017 in comp.lang.javascript:

> ..OK, so if I want some text rotated on a click, what do I do? this is
> my code: 
> 
> var el = document.getElementById("bonus");
> 
> 
> el.addEventListener("click", function(event) {
>      event.preventDefault();
>         el.style.transitionProperty = "transform";

Why is that needed?

>         el.style.transform = "rotate(10deg)";
>     }
> );     
> 
> 
> ...doesn't seem to work...?
> 

This works fine in chrome:

<div id=el style='width:50px;'>qwerty</div>

<script type='text/javascript'> 'use strict'

let el = document.getElementById("el");

el.addEventListener("click", function(event) {
        el.style.transform = "rotate(45deg)";
	}
);	

</script>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#32544

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 07 Feb 2017 in 
comp.lang.javascript:

> let el = document.getElementById("el");
> 
> el.addEventListener("click", function(event) {
>         el.style.transform = "rotate(45deg)";
>     }
> );     

btw, for the haters of global variables,
this [ I mean "this" ] works fine too:

document.getElementById("el").addEventListener("click", function(event) {
        this.style.transform = "rotate(45deg)";
	}
);	




-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#32545

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 07 Feb 2017 in 
comp.lang.javascript:

> "Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 07 Feb 2017 in 
> comp.lang.javascript:
> 
>> let el = document.getElementById("el");
>> 
>> el.addEventListener("click", function(event) {
>>         el.style.transform = "rotate(45deg)";
>>     }
>> );     
> 
> btw, for the haters of global variables,
> this [ I mean "this" ] works fine too:
> 
> document.getElementById("el").addEventListener("click", function(event) {
>         this.style.transform = "rotate(45deg)";
>     }
> );     

and this:

document.getElementById("el").addEventListener("click", function(event) {

   this.style.transform = "rotate(45deg)";

   window.setTimeout(
      'document.getElementById("el").style.transform = "rotate(-45deg)";'
      ,500);

   window.setTimeout(
      'document.getElementById("el").style.transform = "rotate(0deg)";'
      ,1000);
   }

);	





-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#32546

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 07 Feb 2017 in 
comp.lang.javascript:

> and this:

Just answering myself, like Jonas:

<div id=el style='width:50px;font-size:80px;'>qwerty</div>

<script type='text/javascript'> 'use strict'

document.getElementById("el").addEventListener("click", function(event) {
	this.style.transition = 'all 1s ease';
	let x = 
      'document.getElementById("el").style.transform = "rotate($deg)";';
	window.setTimeout(x.replace('$','45'), 1);
	window.setTimeout(x.replace('$','-45'), 1000);
	window.setTimeout(x.replace('$','0'),2000);
	}
);	

</script>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#32562

On Tuesday, February 7, 2017 at 6:04:14 AM UTC-6, Evertjan. wrote:

> 
> This works fine in chrome:
> 
> <div id=el style='width:50px;'>qwerty</div>
> 
> <script type='text/javascript'> 'use strict'
> 
> let el = document.getElementById("el");
> 
> el.addEventListener("click", function(event) {
>         el.style.transform = "rotate(45deg)";
> 	}
> );	
> 
> </script>
> 

OK, I just tried that - the "let" didn't work in *my* Chrome, but when I changed it to var, I got it to work.  But that *animation* is not showing - which is what the transitionProperty was for - on clicking it quickly changes to the rotated version - how do I make it *spin*?

...and also the center is wrong - eg. if I have the word "Hello", I'd like it to spin about the middle "l" - how do I do that? I tried putting in a DIV and then a SPAN around the "Hello", didn't work - it's in a couple of nested DIVs, and seems to want to spin somewhere about THOSE!! :(

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web