We Keep Coding

Is a sticky header possible in AMP?

So far I haven't found a solid way to create a sticky header on AMP pages. I know there are CSS workaround/hacks, but nothing I can use in a production environment. A simple "position:fixed;" unfortunately won't work in my case.
Out of all the components, I thought there would be one that toggles a body class on scroll, but I haven't found anything yet. Also don't think "amp-position-observer" will be of any use.
Am I missing something? Ideally I'd like to be able to toggle an element's class name after a scroll of X amount of pixels. Is this possible in AMP?

Toggling an element's classname after a scroll of X amount of pixels is currently not supported as amp-position-observer does not allow changing amp-state.
You can combine amp-position-observer to change parts of the header using amp-animation. However, it's application is limited as the supported CSS properties are limited. Nevertheless, with a little bit of creativity this approach can be quite flexible. One possible pattern is to duplicate elements in your header which are then shown/hidden based on your scrolling position.
Here is a sample highlighting the header based on the currently focused section.

I built a working solution of a sticky header within an amp-list. The pitfall is that amp elements add display: block and position: absolute on many elements.
To use position: sticky you need to use display: inline and position: relative on all subelements on your header. Make sure these are actually applied and not overwritten, use id to get a higher specificity over the amp css classes.
Here's an example using an amp list
css:
All divs need display: inline
The amp-list gets an id (not class) to apply css to itself and the generated child div
Divs can be nested as long as they use display: inline
.sticky {
position: sticky;
z-index: 1;
display: inline-block;
box-sizing: border-box;
width: 100%;
background-color:white;
top: 40px;
}
.inline {
display: inline;
}
#list-wrapper, #list-wrapper>div {
display: inline;
position: relative;
}
<div>
<amp-list [src]="..." items="." single-item layout="flex-item" id="list-wrapper">
<template type="amp-mustache">
<div class="inline">
<span class="sticky">
<span>Sticky header</span>
</span>
</div>
</template>
</amp-list>
<div>Your content</div>
<div>

Disqus comments are overlapping my footer

I have spent 10 hours on this issue but I am still unable to solve it. I am using bootstrap 3 with disqus comments. Somehow disqus comments are overlapping my footer. See following picture.
I have tried many tricks but none of them worked.
Following is my HTML code:
<div class="wrapper">
<div class="sections">
<div class="row">
.... truncated unnecessary code
<div id="comments">
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<footer>
.....
</footer>
CSS
.wrapper {
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
.sections {
width: 100%;
padding-top: 20px;
border-bottom: #d8d8d8 solid 1px;
height: auto !important;
}
#comments {
width: 100%;
min-height: 350px;
height: auto !important;
}
Here is what I have done so far:
Changed iframe size using js but it does not work
setInterval(function() {
$('#comments').css({
'height': $('#disqus_thread').height() + 'px'
});
}, 1000);
Changed disqus_thread height to 400px but it does not change the height when new comments are posted
Used disqus onReady event to change the height of iframe but this one is also not working. Perhaps, disqus comments are loading after calling onReady event?
JS Code
this.callbacks.onReady = [function() {
resizeIframeWidth($('#disqus_thread iframe'));
}];
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}

You can handle the loaded events like this
// called by disqus
function disqus_config() {
this.callbacks.onReady = [function() {
// if your code respond to this event to resize the sidebar
$(window).trigger('resize');
}]; }

There are a heap of things it could be and you'd need to provide a link to your site where this occurs to diagnose properly. A code sample just isn't enough as the problem will becoming from your site's CSS (most likely).
Probably culprits:
no "clear:both" property on or between the comments and your footer.
alternatively, try clear:both; to #comments
the footer element has some crazy negative top margin, or has position: absolute.
I understand that it's jQuery that is causing a dynamically loaded object to break things. But the solution will actually be bullet proof CSS in my opinion.
Ensure that the following CSS properties:
clear:both;
width: 100%;
display:block;
float: none;
Are applied to the footer & comments ID's/elements or alternatively, that you have a full width block clearing element between the main area and the comments AND the comments and the footer. Alternatively, you might just get away with applying these to the #comments div (ie: just making it self clear, regardless of how high it goes).
If this STILL isn't working, put overflow:hidden on your #comments. It won't be wonderful, but at least it will stop the behaviour you describe :)

I solved this problem by removing position:relative from .sections css rule.

Javascript conflict with Foundation

I have Foundation installed in an application where prettyPhoto is also used.
The problem is the top-bar menu is disabled (hovering, links and dropdown are all disabled as per this page here on certain pages, whereas on any other page for example here the functions are fully enabled.
I have isolated the problem in the following generated code:
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
If it is removed, the functions return. I believe it is a javascript issue because links and css would appear to not cause the issue in other page locations...
How can both set of functions be made to co-exist?

The problem is not with JavaScript conflicts.
It is because of the
<div id="container">
according to css
#container {
margin: 0 auto;
position: absolute;
padding-top: 50px;
padding-left: 142px;
z-index: 300;
}
your z-index is 300. Which means it is on top of everything including couple of menu-options.
remove your z-index property everything should be fine

Creating an overlay page for app

I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.

I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/

Fixed div as background on mobile devices

I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?

I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.

You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}