I need a semi-transparent image layered over everything in my webpage, but so that users can click through to the form inputs and text fields underneath. The user will not interact with the top image layer.
I'm thinking I can create the image and adjust the opacity in photoshop. Then put the png in a div with the appropriate z-index. But then user clicks still go to that top div, not to the layers underneath.
Is there something more I can do from here, or another method to accomplish the desired effect?
I'm just working with html, css, js. No server side stuff. Thanks!
For a click through image/div, check this answer:
Click through a DIV to underlying elements
.
Quoting code:
CSS
pointer-events:none;
background:url('your_transparent.png');
IE conditional
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',
sizingMethod='scale');
background:none !important;
Here is a basic example page with all the code.
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
Update:
You can combine it with this technique http://jsfiddle.net/jpCfz/6/ from Make overlay background click-through-able for IE (the question ays it works in IE but not in Firefox), or you may need a bit of JavaScript that is described in Click through a DIV to underlying elements other answer than quoted above.
Update 2:
I didn't want to open this because maybe you have good reasons to do it this way, but obviously, as mentioned in the other answer, you may consider using a background image and opacity instead (so the picture is below the content not on top of it) and then you don't need to worry about clicking. If this is possible in your case, go for it.
You might want to think about this in the opposite way: form elements on top, image behind.
Encapsulate the form elements in a container with a white background and adjust opacity on this container element. Let your image sit behind the content and use absolute positioning to isolate it from the rest of the DOM layout.
<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
<!-- form elements, etc -->
</div>
Should get you close to the effect you want without having to fight the browser's default event handling.
Related
I've made an header composed of a top transparent section with logo and social link plus a navbar that have a padding from top. this is the transparent header that i've made. On the navbar i have some anchor and it work well (i've added the padding as requested in bootstrap then it work fine). The problem is that when i scroll the page, the content go behind my header. look here what is happening now. This isn't what i would like to have. I've read a ton of post about similar situation but i've not find a solution. Is there a javascript workaround or a tecnique to hide the content div when they pass over the navbar??? How can i achieve this? I'd really like to save the transparent top header! Thanks a lot and regards!
I've found the simplest solution without JS or Jquery.
1) Be sure that your header is contained into a specific div and set a class for it. example:
<div class="content_header">...</div>
2) Assuming that you've already set a background-image for your body (or for the div that contain your content), add this in your css:
.content_header {
position: fixed;
background: url("...same of body's background image") no-repeat center fixed (same shorthand parameter, if any);
background-size: cover;}
3) In this way you'll have a background image that will make a fake "transparent header" effect, and you will resolve the problem of scrolling content that appear behind the transparent header.
I hope that you'll find this useful, and i'd like to thanks the guys that have given me the hints ;)
You can put your scrolling content into an element <div class="content">...</div> and style it overflow hidden:
.content {
overflow: hidden; /* or "auto" or "scroll" */
}
this way everything outside the content element will be hidden.
if this helped you, fine :)
if not I may help you better if you would post an example page.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I've got a design idea that I'm not exactly sure the best way to go about pulling it off in html and css. Basically I want to do what I've (crudely) drawn in this image:
My basically I want a div to appear some distance down from the top of the page that stretches from infinity, to within the bounds of the container to display some content. My code looks something like this
# html
<html>
<body>
<div id="container">
<div id="content">
Some text content
</div>
</div>
</body>
</html>
# css
div#container {
width: 1140px;
margin: 0 auto;
}
div#content {
width: 300px;
background: #000;
color: #fff;
float: left;
}
Where the div#content would be the one that has the background that stretches to infinity. Is this possible to pull off without resorting to altering the background of the tag? I want to use this on multiple pages within my site, all of which have different heights and distances down from the top, so I'd like to be able to do it without having to switch out the background images for the tags for these different pages. And the div#content will have variable content length, so using body background images isn't a very elegant solution. It would be nice to do it without resorting to some kind of absolute positioning as well.
Sorry for rambling, I hope what I am trying to do is clear. Any suggestions?
I whipped this up.
Just adds a div beneath the content area that matches up with the element you have in the header. It goes on infinitely in both directions. I hope this is what you were trying to achieve.
EDIT: As per your request in the comments, I threw this together. It uses jQuery to set the width of the underlying div and its top margin, which is found by getting the top offset of the fg div.
By "infinity," you mean that div#content appears to go forever to the left of the page and beyond? It can't really go for infinity, but you can certainly give the illusion of that.
Sigh.... I am a bit baffled. Maybe because it's midnight and I can't think straight, but I whipped this up:
Live preview (Feel free to fork this fiddle and play around with it to get it just right.)
Is this close to what you're looking for? I wonder if the most robust way to do this right might involve Javascript (jQuery, specifically). It would really help to know the height of that "content" div, and jQuery might help us with the sizing/positioning of it if the window changes its dimensions.
I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))
Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)
Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.
https://developer.mozilla.org/en/CSS/pointer-events
Yes, its possible
Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.
one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay.
That way the whole thing will be clickable , and the div will behave like a div
I am using jQuery and a plugin called Galleriffic to display some images and text on a website I am developing. I have only tweaked the CSS (size and color mostly) to fit my page, but for some reason the text that displays for the next image you click appears below the current text then when the old text fades, it slides up to the top.
Here is a link to my dev page.
Also, the main image does not appear in IE(8), compatibility mode does not change anything. The thumbnails, title and description all appear and change as intended. In the example pages for Galleriffic, IE functions just fine. As I mentioned above, I only tweaked the CSS for sizing and colors, so this should not have affected the image this way right?
Ok the thing that actualy caused the problem is the fact that you commented out the section in your style sheet that makes the image caption kinda stay afloat to the top:
span.image-caption {
display: block;
/*position: absolute;
width: 100px;
top: 0;
left: 0;*/
}
So changing this back i found makes it work as seem intended. But this then causes the image to float over the caption to the left. This i would fix by setting float: right on the div#gallary. div#gallery { float: right; }Then you will probably want to just play with the sizes and margins to make it look nice again.
When you click the next pic in your gallery, the plugin appends the new image text in a div after the currently displaying one. The plugin then starts a fade out animation on the current pic text, and then finally removes it from the DOM. So while the current one is fading out, it keeps the new one below it, until it disappears, causing that snap effect.What your trying to do is simple enough to not use a plugin. If you'd like, I'll help you write the logic for this gallery effect.