I currently have a DIV with an image and 2 children, like so:
<div id="main">
<div id="left"></div>
<div id="right"></div>
<img ... />
</div>
I'm applying a 3D transform to #main like so:
'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)';
Here's the CSS I have for left/right:
#left, #right {width:50%;height:100%;position:absolute;z-index:999999;}
#right {right:0;}
Clicking on either left or right will navigate to the prev/next image.
I also have some fade hover events setup on the left/right containers. It works good works well in all browsers when the rotation degrees are 0.
However, whenever I apply a rotateX or rotateY it has some odd positioning problems in Opera and Chrome only.
All other browsers seem to handle the events of the left/right divs relative to the 3D transform just fine. However in Opera and Chrome, the transforms seem to mess with the triggering of the mouseenter,mouseleave and click events of the left/right divs.
To make this even more strange, it will only happen on one of the child elements. Whatever side of #main is positioned farther away in 3D space presents problems. The DIV that is closest to the viewer will still hover just fine.
I've also added borders and colors to each DIV, and it isn't an actual positioning issue. Both DIVs show up perfectly.
Here's a screenshot. The white border is applied to #main.
Inside #main you can see the 2 left/right DIVs. The problematic one (pushed farther back in space) has a white gradient. I've applied a purple border to each one. The foreground one in bright green works perfectly.
Any suggestions would be awesome. Works in everything except Opera and Chrome.
Thanks!
Ok, so finally figured this out and will hopefully help others.
When working in 3D space certain browsers will correctly intersect/clip other elements. Safari is one of these browsers. When rotating an element in 3D space like in the screenshot above, the actual #main is intersecting with the background element. The correct way a browser should handle this is by clipping off the part that goes "into" the element behind it. However, the majority of browsers do not show clipping and will instead show the transformed element (although it's intersecting another element) like in the screenshot above. Safari, however correctly handles this and would clip off the part of #main where it intersects the background.
For whatever reason, Chrome and Opera still show #main when clipping occurs, however any events that are bound to the transformed element will not be fired because you're hovering over the background element, and not the element that has been transformed.
All other browsers that don't clip transformed elements will fire events on those transformed elements.
The solution is to adjust the Z axis of the transformed element.
Related
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I'm using absolute positioning to move a VERY large SVG img around inside another div element. I've set up a jsFiddle as a demo:
http://jsfiddle.net/wEBnE/6
This works fine in all browsers except (you guessed it) IE. Click the button in the jsFiddle a few times. It increases the top position 3 times until it goes beyond -84245px - then the image stops moving. The css property still increases, but the visible element remains in the same position.
As far as I can tell, this only happens with an img tag. I have other div elements that work fine like this.
Am I correct in thinking it must be some sort of built-in IE maximum setting and is there a way to override this behaviour?
Thanks
I have to prototype a bulb shape (even an ellipse would be fine) vertical slider. I started with using http://jqueryui.com/demos/slider/slider-vertical.html and changed the shape of the parent element to the desired (ellipse for now) shape. The problem is that when I drag the slider it grows in rectangular manner and thus, doesn't take the elliptical shape (as it's parent element).
Can you please suggest if there is a better way to achieve this. If this is the correct way then how should I mask off the color from the edges so as to make the slider background elliptical too.
For reference to the problem: http://share.axure.com/UMILTD/
I would recommend achieving this effect with the border-radius CSS property. You can set the border-radius of the parent to create the shape and then set its overflow to hidden to keep the rectangle behind it from showing through.
I have a live example of this here - http://jsfiddle.net/qUbZf/3/. There does seem to be some issue in Chrome with how the overflow is handled, but it looks fine in Firefox and IE9.
IE < 9 do not support border-radius, but the shape will simply fallback to a box and will still be usable.
I'm designing a page that has a Content Area which scales against a diagonally striped background.
The Content Area div is a fixed width that will scale vertically with content. Because the border is a drop shadow, I have a repeating background image (40px wide by 80px high) that has to line up with the page background image. I need the div to scale in multiples of 80px high so that the repeating backgrounds concur with each other.
Is there an elegant solution that will allow me to scale the Content Area div so that it always displays at a multiple of 80px high? If not, is there another approach I can take to solving this problem rather than scaling the div to a multiple of 80px?
Thanks in advance!
Ryan
Unless you absolutely need the drop shadow to appear in older browsers, you can generate it with the CSS3 box-shadow property instead of using an image. This is much more flexible as the shadow is generated by the browser and will fall nicely on the background regardless of how things line up.
Jimmy's idea is solid, assuming the browser supports this css property. Another, weirder idea to consider might be to have jquery insert a div into the DOM that has fixed positioning and is offset to your content div and a z-index that would put it behind your content div. Then you could this new under-div an opacity (you can use fadeTo but maybe there's something better). Basically give the content div a real shadow by having an identically sized div underneath with 50% opacity.
why dont you leave the stripped background out of the content areas and use a transparent png for the images that will use a drop shadow. Since you're already trying to use javascript to fix a css problem, why not use DD_belatedPNG so that the alpha transparency will display correctly in IE6
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.