- This topic is empty.
-
AuthorPosts
-
March 24, 2013 at 3:23 am #43621YammaskiMember
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 #129480JohnMotylJrParticipantDoes this help? http://codepen.io/johnmotyljr/pen/FLxHo
March 24, 2013 at 5:32 am #129482YammaskiMemberOk, 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 #129483JohnMotylJrParticipant@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 #129486YammaskiMemberWorks 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 #129489JohnMotylJrParticipant@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 #129490YammaskiMemberI 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 #129491JohnMotylJrParticipantWell, 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 #129499YammaskiMemberI 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 #129508JohnMotylJrParticipant@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 #129514YammaskiMember[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 #129521JohnMotylJrParticipantSo 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 #129523YammaskiMemberno no … it”s working now like I would … thanks :-)
March 25, 2013 at 12:32 pm #129633YammaskiMemberCan I add a second id to the code ?
It works, but is it according to the rules ?
March 25, 2013 at 12:37 pm #129636Paulie_DMemberPretty 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?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.