Help needed with project 3

Code Feedback
1

Hi guys.
I have been beating my head up with this project a bit.
I want the shoe in my project to flip the reverse side when the slider reaches 180 degs.
I have tried changing the scale coord, but it still flips it upside down.
can anybody please help me.
much appreciated

https://codepen.io/lukemersh/pen/EJREaJ
2

You have to be a bit more precise with what you mean with flip to the reverse side: I would think that it should flip upside down then. If not, what are you looking for?
I forked your pen here: https://codepen.io/stevenkuipers/pen/qwwKNv

3

right…
at position 0 the shoe faces right, what i want is when the slider reaches the other end for the shoe to be facing left.
think of it realistically, you would want to see both side of the shoe.
upside down is not the reverse of how it originally is.

4

I am assuming then that i have my axis wrong. :grimacing:

5

I might have been confused by the image already being upside down then :wink:
I updated the pen

6

your a star.
by changing the axis it worked, although, dont quite understand the JS yet.

many many thanks

7

i was thinking logically about the if …else function, but wasnt confident enough to implement it.

8

strange that JS doesnt work when i put it on my system.

9

puzzled!!!
whatever i do to change it, it just flips the image upside down.

must be something different in the coding.

the only difference i can see is that our shoes at the beginning are facing opposite directions.

10

That’s because I’ve also removed the transform from the .shoe in your css

img.shoe{
  display:block;
  width:50%;
  height:50%;
  margin:0 auto; 
  transform:scaleY(-1);  <----
  -ms-transform:scaleY(-1); <---   These must go 
  -webkit-transform:scaleY(-1); <---
}
11

i still see them in your code. really confused now lol.

https://codepen.io/stevenkuipers/pen/qwwKNv

i will remove them from my code as you say.
Could you explain a little please.

12

transform:scaleX(-1) flips the image vertically, when you start moving the slider the transform gets overwritten by the transform we set thru javascript, which flips the image horizontally.

13

many thanks.
i will follow your instructions tomorrow. :+1::+1:

14

Nice job! to make this page a bit better, you should use bootstrap to try and improve this.

the ‘Price’ link is hidden by the shoe image.
the rotation is really cool and instead of using a drag to do it, maybe you should put a button there so when pressed, it will rotate the shoe.

15

Hi I do know bootstrap and use it often when freelancing, but for the moment i want to keep it simple and not overcomplicate things too much.

you say the price link is hidden by the shoe?!! I can see it clearly on my screen.

I removed those lines and for some reason it still flips upside down

https://codepen.io/lukemersh/pen/EJREaJ

I will keep on trying.

16

I removed these lines and it hasnt changed anything for me.

please help!!

https://codepen.io/lukemersh/pen/EJREaJ
17

You compare the value to 179 and when it is bigger than you set the transform to scaleX(1), when value is lower you set the transform to scaleX(-1). The default value is scaleX(1) but moving the slider updates it. You need to change something in the comparison. I gave the solution but you should try to see if you determine what it is.

if(value >= 179){ 
  shoe.style.transform ="scaleX(1)";
 }else {
  shoe.style.transform ="scaleX(-1)"; 
 }

 if(value <= 179){ 
  shoe.style.transform ="scaleX(1)";
 }else {
  shoe.style.transform ="scaleX(-1)"; 
 }
18

of course.
I want to understand how things work, I am a freelance web developer, but am doing this course to get a deeper understanding of the code :+1:

1 Like
19

I tried that and it still flips it the wrong way.
Its flipping it upside down and not left to right for me.
its the flipping motion i am trying to change.

20

sorted :+1::+1::+1:

I needed to refresh page for everything to work, something so elemental as that.