Grow your CSS skills. Land your dream job.

Flip image horizontally with selectmenu.

  • # March 24, 2013 at 3:23 am

    My css rule to flip an image when selecting a certain opition works fine in IE and Firefox. But it doesn’t work in Chrome !?

    [See testpage ](http://www.stickers.be/X_Tests/Flip_Image/Flip_Image_Horizontal.asp) : image must flip when selecting “ja, spiegelbeeld”.

    # March 24, 2013 at 4:49 am

    Does this help? http://codepen.io/johnmotyljr/pen/FLxHo

    # March 24, 2013 at 5:32 am

    Ok, thanks … works in FF & Chrome, but this time not in IE !?

    I editted your code a bit (for so much as I can) and now it seems to work in the 3 browsers. I hope this code is like it should !?

    [See this testpage.](http://www.stickers.be/X_Tests/Flip_Image/CSS_Tips.asp)

    # March 24, 2013 at 6:10 am

    @Yammaski,
    Oh yeah, sorry about that, forgot to add the extra syntax

    .flipped {
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    transform:scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
    }
    # March 24, 2013 at 6:36 am

    Works fine. Still one point. I implemented it into my webpage, but now all images on the page flips. Isn’t it possible to add an id to the image and the code, so only that image will flip ?

    # March 24, 2013 at 6:52 am

    @Yammaski, ohh yeah, for sure. If you only want to target that one image just give it an ID and when you target it with the jQuery just use that id as the selector rather then $('img'). I will update that pen to show you exactly what i mean.

    http://codepen.io/johnmotyljr/pen/FLxHo

    Would you like me to comment the jQuery so you understand exactly what is going on? There is literally too many ways to accomplish this, that was just the first that popped into my head.

    # March 24, 2013 at 7:11 am

    I understand it, but I can’t write it … thanks anyway. ;-)
    Now another point … sorry … but I need already the “img id” for another script (to change background color).
    Can the code be applied to a div ?
    I tried to change “.toggleClass” to “.toggleDiv”, but it seems that it isn’t so easy !?

    # March 24, 2013 at 7:15 am

    Well, you can change the color of the div by adding a class or by using the css method in jQuery

    $(elem).css('background-color','#f00');

    I guess it would be easier trying to understand the overall scope of what you need to do because there could probably be an easier, and less complex way to do this all that the same time rather in little chunks.

    # March 24, 2013 at 7:53 am

    I fixed it. I also had to give an id to the selectmenu bacause everytime you selected an option in another selectmenu on the page, the image flipped.



    # March 24, 2013 at 8:31 am

    @Yammaski, yeah hence why i always use id’s to hook with my JS. What are you needing to change the background color of?

    # March 24, 2013 at 8:51 am

    [Here you can see a rough testpage](http://www.stickers.be/X_Tests/Detail_CSS/DetailData_CSS_BackColor.asp)

    # March 24, 2013 at 10:20 am

    So you want to change the background color of <div id="Detail_Image"><div>? What color do you want to change it to?

    # March 24, 2013 at 10:41 am

    no no … it”s working now like I would … thanks :-)

    # March 25, 2013 at 12:32 pm

    Can I add a second id to the code ?
    It works, but is it according to the rules ?




    # March 25, 2013 at 12:37 pm

    Pretty sure 2 IDs is a no-no….that’s not to say it won’t work though.

    Don’t see the necessity though…an ID is for a unique item. If you know what it is, why would you need to give it another name?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".