We Keep Coding

How can I make an element sticky relative to the window without JavaScript (If Possible)?

I've been loving position: sticky. It solves most, if not all, of the issues without resorting to JavaScript. But, I've hit a wall. I need to make an element that is nested inside a couple of <div> to be sticky. We know that position: sticky works as a blend of position: relative and position: fixed, therefore it will anchor to its first parent.
From MDN:
The element is positioned according to the normal flow of the
document, and then offset relative to its nearest scrolling ancestor
and containing block (nearest block-level ancestor)
In this case, I want to make a header sticky relative to the window and not the container. The HTML makes it difficult for me to restructure it outside nested <div>
Is this possible without JavaScript?
Here's the code:
<div class="attendance">
<!-- Here's the header I want to make sticky to the window, and not to div.attendance-->
<header class="text-center sticky">Monday 11/22/2019</header>
<!-- Header above -->
<div class="date-config">
<div class="form-group">
<input type="checkbox" id="workable" /> No Work<br />
</div>
<div class="form-group">
<label for="notes">Notes:</label>
<textarea id="notes" class="form-control"></textarea>
</div>
<label for="markall">Mark all as>
<select id="markall" class="form-control">
<option></option>
<option>Absent</option>
<option>Present</option>
</select>
</div>
<div class="student-attendance">
Hello :)
</div>
</div>
Any ideas?
P.S: I've found this, but it uses JavaScript.
Edit:
Here's an awful, but working example (Beware! It's in Spanish - Look for the dates! They won't stick to the window!).

Ok! First I'd like to apologize as this question wasn't possible to be answered without rendering the HTML. Fortunately, I have found the solution.
TL;DR In this case, no, you need JavaScript. You will need to implement a translateY transform in the element to achieve this. I don't know if the problem is that the parent element has a transform property and it causes this bug or there's something else causing the issue.
Explanation:
I'm currently using a carousel JS library called tiny slider. I'm displaying form elements instead of images, (Building a responsive table; Had issues when I tried using CSS Grids). So far, so good. The problem started when I wanted to set sticky the date headers.
I went with the modern approach of setting position:sticky, but that didn't work. The elements would get clogged in a certain position and it wouldn't move or stick. I started researching online (which ended up asking this same question), and the HTML itself. I did find that there were many parent <div>s that were created by tiny-slider. My theory was that it was getting attached to one of those parents.
Therefore, I decided to try the old tactic of combining position:fixed with a scroll event. But, that didn't work. Going back online and Google-Fuing a bit, there seems to be an old bug [1] [2] [3] that whenever a translate is applied to one of the parents an out-of-root container is created and position:fixed doesn't work as expected.
I have a hunch that this may be one of the reasons why sticky didn't work, but according to this answer, it doesn't seem like it.
I kept thinking for a while, and resorted to use a transform CSS property with translateY. I made a small experiment in the browser, and it worked!
Hence, I ended up implementing the scroll eventListener and listening to the header's parent's position, and applying getBoundingClientRect() to get the offset. If I had applied it to the element itself, it would have given me the translated position which I applied through CSS.
I was skeptical that this could be a performance bottleneck for mobile browsers. Therefore, I checked that the transform function was called inside a requestAnimationFrame and it had applied a will-change property in the CSS stylesheet.
I ran the code with a 4x CPU Slowdown in Google Chrome, and had good results 😁.
Here's the resulting function I have (Where elemsToFixed are all the <header> elements, and threshold is the top offset so it doesn't conflict with the navbar):
export function fixedHeaderScroll(elemsToFixed: HTMLHeadingElement[], threshold: number) {
if (!elemsToFixed || elemsToFixed.length === 0) {
console.error("elemsToFixed can't be null or empty");
return;
}
console.log('Total elems', elemsToFixed.length);
// We assume that all of the elements are on the same height.
const firstEl = elemsToFixed[0];
let propSet = false;
window.addEventListener('scroll', (e) => {
window.requestAnimationFrame(() => {
const top = firstEl.parentElement!.getBoundingClientRect().top;
if (top > threshold) {
if (!propSet) return;
propSet = false;
setElemsFixed(elemsToFixed, top, threshold, false);
return;
}
propSet = true;
setElemsFixed(elemsToFixed, top, threshold);
});
});
}
function setElemsFixed(elemsToFixed: HTMLHeadingElement[], top: number,
threshold: number, setFixed = true) {
console.log('SetElemsFixed is', setFixed);
elemsToFixed.forEach((elem) => {
if (!setFixed) {
elem.removeAttribute('style');
return;
}
elem.style.transform = `translateY(${(top * -1)}px)`;
});
}
The following picture shows a 4x slowdown in the CPU and the calculation of the style (With 26 elements) is about 29.4ms (Which is great!). Using Chrome 70 on Windows and i7 4700MQ processor.

As you reference to the docs, the position sticky will stick to its "nearest scrollable ancestor", which generally speaking will be any ancestor with 'display: block' (the default) and also things like 'display: flex'. You can make an ancestor not scrollable by setting 'display: contents'. (Depending on the rest of your layout and CSS this may or may not be usable.)

CSS3 timed animation of background image

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.
I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.
If this doesnt make sense, here is the CSS
.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;
and the HTML
<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
<ul>
<li>HOME</li>
<li>MENU</li>
<li>FIND US</li>
<li>ABOUT</li>
</ul>
</div>
<div class="large-logo-wrap">
<img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
</div>
</div>
Thanks for the help!

Use following
<script>
//Here use Array of images ,which you want to show, Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if(nextimage>=images.length)
nextimage=0;
$('.global-header').css('background-image','url("'+images[nextimage++]+'")').fadeIn(500,function(){setTimeout(doSlideshow,1000);});
}
</script>

You would not be using HTML and CSS for carousel. While some cool experiments are out there I would shy away from using that on a production site. You will most likely be using jQuery. If you are new to front-end development and want to set up the slider and move on to the rest of your project, I'd recommend using a plugin.
Here is a popular jQuery plugin you can use: http://dev7studios.com/plugins/nivo-slider/
If you want to learn how to create your own, try following a tutorial that creates a similar slider. Then try playing around with the code to get it to the exact state you want.
Here's a an example of said tutorial: http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

I think depending on the animation you are doing depends on the technique you could use.
if you are sliding the images you could use CSS3 animations to slide between the images. But this means you would have to make one large image that contains all your images and you change the background image position on a cycle.
This might be of some help:
http://designshack.net/articles/css/infinitephotobanner/
or you could try setting different background classes and implementing a change of class on a timer using this:
$(document).ready(function(){
var seconds = 5000; // set in milliseconds
var step = 1; // place to start
var limit = 3; //limit of background images (remember that 0 is the start so 3 is for 4 background images)
$(".global-header").addClass("banner"+step).fadeIn(1000);
setInterval(function(){
$(".global-header").fadeOut(500,function(){
$(this).removeClass("banner"+step);
step = (step > limit) ? 1 : step + 1;
$(".global-header").addClass("banner"+step).fadeIn(1000);
});
},seconds);
});
And then use different class's for the background image. (I used .banner in this instance):
.banner1{
background:url(../images/something.jpg);
}
.banner2{
background:url(../images/somethingElse.jpg);
}
.banner3{
background:url(../images/soemthingElseAgain.jpg);
}
you can experiement with the different range of J-query effects, I used fadeIn for simplicity.
Hope this helps.

vertically center page around a form

I know vertical center in CSS is a pain to begin with, but I've just made it a bit more complicated. On my page, I have:
<ul id="complete">
</ul>
<form id="new_item_form">
<input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>
<ul id="incomplete">
</ul>
It's for a basic task list. Tasks are added to the incomplete ul, and when completed move to the complete ul. What I want to do via css is have the text field vertically centered on the page and stay there, with the two lists butted up against it. I've been looking at all sorts of vertical alignment (a summary of forms found here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ ) but I can't seem to find a way that I can figure out how to adapt to allow what I need. How would I accomplish this style of fixed position centering?
EDIT:
Here's an image of what I'm looking for: https://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png

Is this what you want to obtain?
Of course, my code is a bit sketchy (use of height attribute on tds! Don't scold me to much). But you get the point.
If the height of the table is not known nor fix, but its parent height is known, it won't work (see this example) and you'll have to break it down.
If you just don't know any height at all, it's kind of hard to align...
Further reading on vertical-align

I can't think of any way to do this with CSS, but it's fairly easy to do with JavaScript/jQuery. Here is a working jsFiddle that does what you want on document load. You'd call the code again if you changed the lists, of course.
First, you enclose your lists and form in a div. I called this id="cmiddle". Then you use CSS to set the cmiddle div as position: relative. Then you use JavaScript code to get the enclosing window or frame height, calculate the center for the form, and then, subtract the upper list height to get the correct div position:
$(document).ready(function(e) {
// To work with frames, too
function getParentDocHeight($ele) {
for (;;) {
if (!$ele || !$ele.length) {
return $(window).height();
}
$ele = $ele.parent();
if ($ele.is("frame") || $ele.is("window")) {
return $ele.height();
}
}
}
var $cm = $("#cmiddle");
var formHeight = $("#new_item_form").outerHeight();
var viewHeight = getParentDocHeight($cm)
var formTop = (viewHeight - formHeight) / 2;
var divTop = formTop - $("#complete").outerHeight();
$cm.css("top", divTop);
});
Edit: Kraz was nice enough to add a simulation of adding list items to both lists and calling the code again to recalc. His jsFiddle here.

Well, I'm not sure what you are talking about
But generally,
put the line-height = the div's height. I will create a div around it if necessary
if some very particular situations, i do some math to manually center it
So if you want to centering 1 thing, create a div go around it with line-height = the div's height
And then make the div position: absolute, width, height, ....
Hope this helps

Making axis guide lines over an image that follow the mouse pointer

I have a PNG image of a graph on an HTML page.
I'm hoping to include a set of superimposed x and y guide-lines that appear on mouse over, whose vertex follows the mouse pointer, in order to help users read values on the x and y axes.
For example, they use such an effect on WolframAlpha (doesn't work in IE<8 though):
http://www.wolframalpha.com/input/?i=graph+y%3D2x
Does anyone have any ideas on how to accomplish this, javascript or otherwise? I believe WolframAlpha is somehow using the HTML5 canvas if that helps (see screenshot below).
Although if there's a way to avoid using canvas in order to support IE8, that would be excellent. The gridlines could certainly also extend off the image boundary and across the whole page, if that would make it easier.

Here is a simple implementation
CSS
#imageholder div{ background-color:black;position:absolute; }
#imageholder{;position:relative;display:inline-block;overflow:hidden; }
#horizontal{width:100%;height:1px;}
#vertical{width:1px;height:100%;}
JS(use of jquery)
$('#imageholder img').on('mousemove', null, [$('#horizontal'), $('#vertical')],function(e){
e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
});
$('#imageholder').on('mouseenter', null, [$('#horizontal'), $('#vertical')], function(e){
e.data[0].show();
e.data[1].show();
}).on('mouseleave', null, [$('#horizontal'), $('#vertical')], function(e){
e.data[0].hide();
e.data[1].hide();
});
HTML
<div id="imageholder">
<div id="horizontal"></div>
<div id="vertical"></div>
<img src="http://placehold.it/320x280">
</div>
DEMO
Also with lines that goes across the page DEMO

Continuously scrolling horizontal ticker containing images in jQuery?

I would like to do something like this: http://javascript.about.com/library/blcmarquee1.htm
The script I referenced however seems to be a bit laggy (outdated?), so I was wondering if anyone knew of a better solution. (jQuery solutions welcome.)

Just found this — jQuery-driven, and has images. I’m intending to use it for a current project.
http://logicbox.net/jquery/simplyscroll/
UPDATE: I have now used this in production code. The plugin is capable of looping 70+ 150×65px images pretty smoothly - which a number of another plugin I tried similar to this were failing on.
NOTE it reeked havoc with z-index issues in IE 6 / 7 and was not showing up etc. - But this might also have been partly due to my CSS. To anyone having trouble with it not showing up at all in IE check out the standard IE z-index fixes: http://www.google.com/search?q=ie+z+index+issues
LATEST UPDATE:
Addition things to consider when implementing plug-ins like these:
The number of items and type of content to scroll. I found a number that would start to glitch as soon as you had more than say 15 images to scroll.
I found a number of these plugins that were tied to old versions of jquery
If scrolling images ARE THEY ALL THE SAME SIZE again a number of the plug-ins I experimented with only worked if all the images were the same size but did not make this clear in the tutorials. I believe then the plugins run then set a string of li tags that are all x wide then calculate the total distance of them all chained together to manage the scrolling.
Effects - some would continuously scroll others would move one image pause for a second then move another image
I have now also found these two scroller plugins to be very good as well.
http://caroufredsel.frebsite.nl/
http://sorgalla.com/jcarousel/

The Silky-Smooth jQuery Marquee and Giva Labs' Marquee

Just a thought. Could you do something like this.
<style type="text/css">
.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}
.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}
.inline-image{
display:inline-block;
}
</style>
<script type="text/javascript">
var img;
function imgScroll(){
img = $(".inline-image").first();
img.animate({width:0},2500,'linear',function(){
img.remove();
$(".imgholder").append(img);
imgScroll();
});
}
$(document).ready(function(){
imgScroll();
});
</script>
and the html
<div class="imgwindow">
<div class="imgholder">
<img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
</div>
</div>