Develop Reference

Emulating `position: fixed;` with javascript, but without it being jumpy, laggy, or having "hickups"

I'm trying to emulate position: fixed; using javascript, the reason being that the element has to be inside a scrollable div (overflow-scroll-y), and position: fixed; only works relative to the window scroll, not an elements scroll, though normally in a case like this I could fix it by using position: absolute; and everything would just work, but the scollable div / container element needs to have perspective: 1px; which brakes the position: absolute; adjustment, so back to just js emulation.
Now it works, with javascript, but all too often the element in question lags a bit behind the scroll, creating a kind of "jumpy" feeling (it's especially bad on Firefox), that is say it's fixed at the top of the element, if the user scrolls it's suppose to be exactly at the top always, but in reality it sometimes goes a bit (or allot) too high or low, depending on the scrolling direction, and then snaps in place again, this snapping or jumpy effect is undesirable, and is not present in cases where you can fix the element using either position: fixed; or position: absolute;.
I've made a jsFiddle Example, if you don't notice the undesirable effect in your browser you can try uncommenting the increaseLag function, on my computer the lag is clearly visible on Firefox but not as noticeable on Chrome unless I enable the increaseLag function (I'm running Ubuntu).
How could one tackle this? Is there perhaps a pure css solution I'm missing or an alternative js route?
My current buggy solution uses a scroll event on the container element which updates the top css property of the "fixed" element relative to the updated scroll position.
$("#container_element").scroll(function() {
//increaseLag(this);
var scrollTop = $(this).scrollTop();
$(".fixed_emulation").css("top", scrollTop+"px");
});
#container_element {
width: 100%;
height: 100%;
overflow-y: scroll;
perspective: 1px;
}
.fixed_emulation {
background-color: #000;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
}
<div id="container_element">
<div class="fixed_emulation"> :) </div>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
...
</div>

featherlight.js - possible to use it together with img-zoom WITHIN the lightbox?

I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!

The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!

Overlay an animated div on top of a JavaScript animated canvas

I recently found a codepen with some JavaScript which creates a cool looking node effect: http://codepen.io/thetwistedtaste/pen/GgrWLp
as well as this 'glitch' effect on text using #keyframes animation:
http://codepen.io/anon/pen/YyjLJZ
I wanted to implement both on my practice website but I'm finding it hard to place the text on top of the canvas with the animation.
Here is what I have at the moment:
http://codepen.io/anon/pen/EVeVvE
What I want to achieve is the 'TEXT' to be in the centre with the glitch animation as well as the moving nodes in the background.
Is this possible?
I've tried adding a z-index to the wrap class but I don't think I'm using it correctly.
Here's what it looks like:
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
Do I need to add a z-index to every frame of the animation? Would anyone be able to help me out with this please?
Without using the z-index, the animation works fine but the text appears at the bottom of the page which is where I don't want it to be.

This works in the latest versions of Safari and Chrome, however the clip property is deprecated and may not work in certain browsers. clip-path should be used instead, and it will need vendor prefixes. See this CodePen for a demo.

Make elements move horizontally only when window shrinks

I'm working on a personal website (a portfolio site, I guess), and have things looking how I want when the browser window is full-screened, but parts get cut off when the window is shrunk down (of course). I'm using Windows 7, and always dock a window on either side of my screen. It would be really great to have my website work so that certain parts are fixed in place when the browser is full-screened, but once the browser window hits a certain size, they then move in as the window shrinks. Is this possible? Does this require JavaScript (which I'm not good at at all)?
Here is a link to screen-shots of the page in question, with the third image being shopped to show what I want to happen:
http://imgur.com/a/EDWjh#0
I want the side-nav (black box/text on the left) and the logo (top-right, which also links to my index page) to be fixed when the window is big, but pinch in (and be flush with the sides of the browser window) when it shrinks.
The CSS for the pieces in question are:
#blackbox{
background-color: black;
width: 175px;
height: 180px;
left: 50%;
margin-left: 355px;
margin-top: -20px;
position: fixed;
z-index:4;
}
#navleft{
width: 175px;
height:430px;
background-color:black;
position: fixed;
margin-top: -50px;
left: 50%;
margin-left:-530px;
}
And the relevant HTML is just divs, with the top-right black box having a section for the logo image, which links to my index page, and the left side-nav having text links to other pages.
For what it's worth, the meat of the page is a 1060px wide container.
I hope some of you can help me with this, and I sure hope the solution isn't too tough. Thanks a lot in advance for all of your time and guidance, and I'd be more than happy to answer any questions I can. Thanks!

#media
As correctly pointed out by Chris, you can use media queries to do this without needing javascript. See here: jsfiddle
Note that the same applies as the jQuery example - jsfiddle moves the middle bar when resizing the page, this will not happen when using the full browser page.
The relevant css is:
#media screen and (min-width: 400px) {
.testPos
{
right:auto;
left:200px;
}
}
jQuery
Here is a simple example with an input showing how to do it using jquery: jsfiddle
The input will be in a fixed position until the window is resized to be too small, then it will stick to the right. Note: because the jsfiddle middle bar moves according to the size, the input will also move initially, this will not happen on a normal window where the side of the browser that are not being resized are fixed (note that the distance from the bar will be constant).
There are css classes that are added and removed according to the size of the window:
.naturalPos
{
left:200px;
}
.stickRight
{
right:0px;
}

It does not require JavaScript on modern browsers (ones that support CSS version 3). You can use media queries to serve up different CSS depending on the width of the viewport.
Example from the linked article:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}

If you need this to work using Javascript you can use the window.resize event to wrap whatever functions you require to adjust the page:
window.onresize = function(event) {
...
}

Making a scrolling menu using positon: fixed;

I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea comes from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?
PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)

Remy Sharp has a very nice tutorial (with video) on how to do exactly this:
http://jqueryfordesigners.com/fixed-floating-elements/

Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.

Add this tto your stylesheet instead of the class you have now for #leftcol
#leftcol {
position: fixed;
top: 50%;
margin-left: 20px;
margin-top: -150px;
text-align: center;
}
Then add the following to your #container class:
position: relative;
Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.