We Keep Coding

How to scroll through whole images in CSS

I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy

Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.

Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.

Prevent Cursor from changing on overlap

I am writing the CSS and HTML for a site currently under construction, something I am not too familiar with having to code.
I have, per request, created a navigation menu that sits on the left side of the screen and expands to cover the page content partially when clicked, allowing the user to show and hide the nav when not needed.
The content that the nav overlaps when it is opened is a bunch of tables, with clickable cells and resizable columns (i.e. they change the cursor to a pointer to allow the user to know they can do something with the cells/table columns)
But when the nav expands over the page content, I am still picking up the cursor changes behind it, making it seem clickable in wrong locations.
Can anyone point me in the right direction on how to prevent elements on the page from picking up cursor changes on elements behind it?
I can probably dynamically change the CSS using javascript when the navBar is opened and closed (remove the cursor on open, add it back when closed) but I am searching for a simpler and more universal fix that can be utilized in the future as well.

Sounds like you need to set the z-index property for each of your elements.
If you create elements without assigning a z-index they'll be indexed automatically, any elements you create after you create the nav will have a higher z-index by default.
Make sure all of your elements have a z-index and that the nav has a higher z-index than the elements it will overlap, example:
.nav {
z-index: 100;
}
.el1 {
z-index: 99;
}
.el2 {
z-index: 98;
}
Etc, think of it as layering your elements on top of one another, the if an element has a higher z-index than another it will be on top of it.

You can force cursors to be a certain way using the cursors CSS property (MDN). See below, where I force all elements that aren't links to have a regular cursor:
*:not(a) {
cursor: default
}
Also, see #Nunchy's answer to correctly configure z-indexs so this type of thing won't happen

Semi-transparent layer, but clicks go through to lower layer

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.

Make overlapping div "not clickable" so that content below can be accessed?

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

Can you stop an <img> tag from loading its image using CSS?

Is there any way to stop an <img> tag loading its image by just using CSS? I would like to avoid using JavaScript.
This doesn't seem to work (Firebug still shows the images loading):
display: none;
visibility: hidden;

No — CSS only tells browsers what content should look like, it doesn’t specify loading behaviour.
The best you could do that involves CSS is to remove the <img> tag from your HTML, and replace it with an element that shows an image via CSS’s background-image property. Then the image is controlled more in the CSS than the HTML.
I still don’t think you can guarantee when the image will be downloaded though — I seem to remember early versions of Safari would download images referenced in a stylesheet even if they weren’t used on the current page? Using JavaScript (to create the <img> tag when you want the image loaded) is probably the most reliable way of controlling the timing of images getting loaded.
However, have a look at the page linked to from #Stackle’s answer to see the loading behaviour of browsers in April 2012 with different bits of CSS that hide elements with background images.

This is an old question but today we can do it by using css only.
The answer is Yes, but not support on some browser.
See this http://timkadlec.com/2012/04/media-query-asset-downloading-results/

You can PRELOAD images using CSS only, but not actually delay the loading of images using CSS only.
This can, however, be done easily using something like jQuery Lazy Loader, which is MUCH easier than trying to do it by hand.

Place this at the end of your style sheet:
* img { display: none !important; }

You then set them all to be
.img{visibility:hidden;}
this will prevent them from making an http request but still preserves their size and spacing in the document preventing any redraws.
then when you want to show your hidden images (for instance the ones in view) you add a class to the surrounding html element and in your css tell this to be
.show .img {visibility:visible;}
That should do it, Holmes.