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
Related
I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.
I'd like to render a Google Maps canvas to a hidden div and then, when an event is triggered elsewhere on the page, make the div visible again.
Unfortunately, when I try styling the div with "display:none" and then later displaying it, I get just a gray box where the map would be. If I eliminate the display:none tag and the showing logic, the map works fine.
Anyone have any ideas?
You can toggle visibility: hidden on; that will make everything keep its dimensions (while still remaining invisible). This would help if Google is asking the page for how wide and tall it is. Keep in mind with visibility: hidden the map canvas will still take up space in the page; if this is not something you want then you can do something like position: absolute.
Set the div's opacity to 0.01 or some such - that makes it practically invisible.
Got this to work by setting the map's div to position:absolute and left:-10000px.
Then I just set the position to inherit when I want it to appear.
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 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