I have some divs with just a width, height, and border. I am using:
$(".the_divs").bind("mousemove",function(ms){
do_stuff(this);
});
My divs do not have any background css set (so you can see what is behind them). However, ie6 only fires the mousemove event when the mouse is over the border of the div. So, if you quickly move the mouse into the div (past the border), it never gets fired.
If I set the background to a color this problem is fixed.
I tried the following with no luck:
background: none transparent;
I think I could put another div inside and set the width to 100% or something, but I'm looking for the easiest solution as this is part of a bigger project.
Thanks
I think I've found a hack/fix. On my ie6 only css sheet, I set the background of these divs to a transparent gif. It seems to work.
You can avoid having a transparent GIF background by simply using an invalid image URL, for example:
background-image: url(#);
this sounds like a css issue with ie 6. I would recommend trying
display:block
also, setting the width and height of the div is probably a good idea too. here's a great resource to understanding and fixing a lot of the weird shit that ie6 does:
http://satzansatz.de/cssd/onhavinglayout.html
Related
What I'm trying to do is have a block(let's call it .top) that is fixed and another block(let's call this one .content), that, when scrolling, goes over .top, this all while retaining everything that .top contains clickable.
Now there are some obvious setups
this
http://jsbin.com/rucifuzu/1/edit?html,css,output
or this
http://jsbin.com/hufomaxu/1/edit?html,css,output
problem with both is a) you have to account for scrollbar width b) scrolling/swiping on .top won't do anything with the element with overflow: auto underneath it
I have thought about a couple of solutions.
First would be pointer-events: none on .top, which would make it "transparent" for mouse events, thus triggering scroll on whavever is under it, the problem with is that click events won't work either, and since I plan on having clickable and selectable thing inside .top, it's a problem. I could reset pointer-events back to auto just for those click/selectable thing, but considering one of those clickable things is gonna be big ass headline, I'm gonna have a problem with scroll not working with mouse position on it again.
Second was what I call scroll delegation, using JS I would catch mousewheel events and change scrollTop on the overflow: auto element. This would work fine, except that it might result in different scroll "feel" while this delegation is happening and while native scroll on .content kicks in. It's also pain in the arse to get this behaving correctly on touch devices.
So neither is ideal. Have I missed any genious and simple solution to this problem?
TL;DR Goal is to have the .top element BOTH clickable and "scroll-thru-able"
this way .top is clickable, but element under it won't scroll - http://jsbin.com/hufomaxu/1/edit?output
this way element under it will scroll, but .top is not clickable - http://jsbin.com/tuluwili/1/edit?output
Not sure I understand 100% - you want to visually cover up a fixed element while scrolling but still be able to click on it?
One simple solution might be using 3 layers instead of 2.
Bottom layer contains your links and is fixed.
Middle layer is the one that will scroll over it and cover it up.
Top layer is fixed and is identical to Bottom layer except clear all the background colors and set opacity to 0.
When you scroll it would look like the bottom is being covered up but you could still click on the top invisible layer.
Might not work if you need to do things like drag to copy text or interact in other ways with the middle layer.
If i add a green div of a certain height to my page then scroll-bars are added, as expected. When i remove the div the scroll-bars disappear in all browsers but remain in IE and a white void takes the place of the div, somehow the div height is not recalculated correctly after the removal.
Please see this fiddle for a live demo, you will see that it works in all browsers except in IE.
http://jsfiddle.net/nzbrg/16/
The problem seems to be resolved when removing the overflow:scroll for html tag rule, unfortunately this is not an option.
I tested this in latest versions of IE, Chrome and FF and Opera.
Why is this happening and how can i force IE to display the correct height after the dom insertion ?
Note that when you resize the window the white void space disappears immediately, so i just need a way for this to happen without actually re-sizing the window.
It seems that when IE renders a height at 100%, if it grows it will stay the largest size as that is now it's new 100%. To make it shrink again, instead of giving it a height, you need to give it a min-height - change your html and body css to
body, html {min-height:100%;}
this should make your wrapper resize after the green block is removed:
http://jsfiddle.net/nzbrg/6
EDIT
The only way I have found to make ie re-render the page is to set the overflow property on the html:
$('html').css('overflow', 'auto');
http://jsfiddle.net/nzbrg/13/
Add $('body').css('height', 0);
http://jsfiddle.net/nzbrg/4/
I fixed this problem by animating the dom insertion and removal ( needs to be both ) with jQuery, this solution only works because i can use an animation off course.
I don't think this will work if you turn of animation
I would love to find a better solution, but currently this is going to be it. It looks better with the animation anyway so it's win-win ( for me at least ) :)
see here:
http://jsfiddle.net/nzbrg/15/
$("#spacer").slideDown();
$("#spacer").slideUp();
Sneaky Update:
If you disable animation with $.fx.off = true; then it seems to work to. Might have something to do with the way that the animation fumble with the styles to hide and show the div instead of just plain removing it.
Strange because i did also try to hide the element before removing it but was unsuccessful.
Anyway i'm sticking with the animations.
I have an overflow: hidden div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space.
This is what I do for the CSS:
#div-grabscroll {
cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
cursor: url(../img/closedhand.cur), n-resize;
}
This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the pointer cursor overrides my closedhand cursor.
The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the closedhand.
Is there a way to override the cursor without modifying CSS for everything that the mouse might move over? I tried !important on the :active style but that didn't do it.
Answer / Question: What would happen if you had a duplicate div which sat on top of the grabscroll div, but which had no background or content of any type so as to not hide anything behind it, and then set the cursor hand on this.
Does z-index overwrite importance this way?
Does this make sense?
Effectively you have grabscroll - button - opaque grabscroll in that layered order.
This is a very similar problem to creating "modal" dialog boxes, and it will probably have a similar solution: I think you'll have to create an iframe positioned over the content you're scrolling, making it higher up in the z-index order than the content, for the duration of the scroll. This is because on IE (at least) form controls tend not to obey z-index well, which is why "lightbox"-style things do this iframe shim thing.
Here's an answer I gave to another question here on SO which demonstrates the basics of the iframe shim. In that case it's for modal purposes, but the concept and most of the code would apply.
I have a Google Map on one web page where I want to disable both scrolling and zooming. I accomplish this by having an empty DIV element with absolute positioning cover the map area.
Firefox/Chrome work fine, but IE6 doesn't really care about this DIV. For some reason, it just lets me drag the map. I set the DIVs background color to green, and verified that the DIV was indeed being displayed. Weird thing is, when the DIV has a visible color, it works. It blocks all events from being transferred to the map. But when the color is transparent, it doesn't work.
Any ideas why IE6 does so? I've googled a lot and all I come up with are z-index bugs, which this probably is not, since the DIV works fine with a solid background color.
This is a bug in IE6/7, try using a fully transparent background image, it should work.
Try it with a background-color and visibility: hidden;
If that doesn't work, try one of the hasLayout tricks on this page: http://reference.sitepoint.com/css/haslayout
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