Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flip image horizontally with selectmenu.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #43621
    Yammaski
    Member

    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”.

    #129480
    JohnMotylJr
    Participant
    #129482
    Yammaski
    Member

    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)

    #129483
    JohnMotylJr
    Participant

    @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;
    }
    #129486
    Yammaski
    Member

    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 ?

    #129489
    JohnMotylJr
    Participant

    @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.

    #129490
    Yammaski
    Member

    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 !?

    #129491
    JohnMotylJr
    Participant

    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.

    #129499
    Yammaski
    Member

    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.



    #129508
    JohnMotylJr
    Participant

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

    #129514
    Yammaski
    Member
    #129521
    JohnMotylJr
    Participant

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

    #129523
    Yammaski
    Member

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

    #129633
    Yammaski
    Member

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




    #129636
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.