Develop Reference

Is there any way to make position:sticky work inside iframe based on the parent document scroll?

I am having a usecase where the <footer> inside the <iframe> should be sticky at bottom (<iframe> doesn't have a scrollbar) based on the parent document scroll.
Note:
position: sticky works as expected inside <iframe> only when it has a scroll.
Please share your thoughts.

Their is not a way to do this with css of standard browser APIs. You might however find it useful to look at a library called
iframe-resizer which provides an API to tell the iframe the scroll position of the parent page.
You would then need to write a little bit of JS to take this stream of position data and use it to position your div.

Prevent iframe scrolling until parent element reaches top/bottom of iframe

I've integrated a Dash dashboard into a Flask application. Basically I've sticked to this medium and tailored it to my needs. Everything works as expected and the dashboard's content shows up as an iframe element. My problem is that the whole iframe situation feels a little hacky since the website has two scroll bars. The outer one for the main content and the inner one for the iframe. The UX is just not perfect as the iframe content sometimes starts scrolling before it's entirely visible.
There's one obvious solution to this problem that sadly isn't suitable for my dashboard. I could just increase the height of the iframe element until it fits the entire dashboard. That way I would get rid of the scrollbar. However, I have a sticky element in my dashboard that follows the user from a certain element onwards. Getting rid of the iframe's scrollbar would break the sticky element and I would really like to keep it.
Another solution I thought about that I'm just not capable of developing on my own is the following:
Enable main scrollbar and disable iframe scrollbar if the iframe element is not entirely visible. If the iframe element is entirely visible check if the iframe's scrollbar is at its topmost/bottommost position and enable upwards/downwards scrolling while disabling downwards/upwards scrolling.
I guess (hope) it's a lot harder to phrase than to actually code it. So I prepared some top-notch powerpoint visuals for easier understanding.
Blue background: main content
Red bordered rectangle: current view (scrollable)
Yellow rectangle: iframe (scrollabe)
Is there a way to achieve this behavior? I'm not particularly good at js & css so I would really appreciate if you could help me out.
Cheers

Skrollr. change content in fixed div

I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.

Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).

Making scrollable lightbox

For a new project, I need to make an scroable lightbox like one that open after clicking any image on pinterest. Requirements are:
Lightbox must support HTML contents.
Contents might be more that monitor screen (Fixed width but no limit for height).
Lightbox should not have its independent scrollbars but must use browser's scrollbar like pinterest.
When light box is open, scrolling events should scroll only light box but not the background.
Only Pure Javascript and/or JQuery and/or HTML5/CSS3 solution is acceptable.
I went through quite a few lightbox JS and even JQuery plugins. It seems most support single screen lightbox.
Does some one know any available JS/JQuery plugin to achieve above requirements. If not, is there any tutorials which could help making custom plugin to achieve above requirements.
Thanks in advance,
Kapil.

What you are looking is possible only through HTML/CSS. Use of any Javascript library is just needed to make it easy and JS/JS Lib depends on personal taste.
In terms of main logic, in pintrest, scrolling feature is achieved through CSS property 'overflow-y: scroll'. For overlay (lightbox background), no width/height is defined but CSS properties (top:0;bottom:0;left:0;right:0;) will do the magic.
With above CSS properties (obviously few others for design), scroll feature for lightbox will appear. However you will notice two vertical scrollbars; one for body and other for lightbox. Here the trick is to make body scrollbar disappear. This can be done by giving CSS property ('overflow: hidden') to body when lightbox opens and remove it when it close, which can be done through JS/JS-lib easily. Thus we will have two scrollbars but displaying only one at a time gets the required effect.
Hope this helps.

Use fancybox (together with jQuery):
http://www.fancyapps.com/fancybox/
var options = {/* options*/};
$(".links").fancybox(options);
And if you have a link pointing to html content like this:
<a href='#inline' class='links'>Open fancybox</a>
it will open the fancybox with the content of #inline, e.g.:
<div id='inlines' style='display: none'>
My brilliant fancybox content.
</div>
It uses standard scrollbars and if you make it big enough, the other content cannot be scrolled.

How to display modal dialog within the web page?

So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.

What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.

There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.

You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/

I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.