Skrollr & Z-index - javascript

I've got a bit of an issue with skrollr & z-index.
http://i.imgur.com/whCViHV.png
I'm trying to have the picture at the top to go underneath the blog post.
I can't for the life of me work out why, no matter where/how I apply the z-index (I assume that's what I should be doing) the image ALWAYS sits above the post.
I've tried everything I can think of, putting it inside divs, inside the css...
You can make it go underneath the blog post by putting the post in the skrollr div, but then I run into lots of issues with line height.
I've stripped all my failed z-index attempts out, so it should be 'conflict free' of my old, stupid code.
http://jsfiddle.net/8fb4C/ (not 100% sure that this is correctly done)
https://github.com/pxlprfct/Blog-SO-Question
<div id="skrollr-body">
<div id="test"
data-0="top:0px;"
data-1000="top: 400px;" >
<img src="apple.jpg" alt="">
</div>
</div>
<article>
<h1>
Hi there helpful person!
</h1>
<p>
Hi there, I've been trying, and failing, to do what I thought was a reasonably simple thing.
</p>
<p>
I just want the picture to stay where it is, (don't worry about the horrible aspect ratio and how it looks crushed, I'm fixing that after) and the 'blog', well the article to overlap it.
</p>
<p>
I've been pratting around with z-index and have done pretty much everything I can think of, but the image still persists to scroll on top of the text (rather than underneath).
</P>
<p>
I have tried a few sketchy things that worked, but didn't work well. I think i'm missing something mega obvious, anyways. Thanks for being awesome :)
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt earum eum recusandae accusantium porro facere vero nulla delectus. Adipisci, omnis velit molestias nemo expedita! Ad, enim similique placeat rerum. Libero.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, fuga eius ipsa alias repudiandae itaque neque totam veniam ut minus dignissimos eveniet dicta unde quos enim possimus optio nihil omnis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, magni est officia quis vitae veritatis doloribus laudantium corporis doloremque ratione ut ullam voluptatibus numquam quos optio voluptas veniam corrupti repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, provident, maxime beatae ea distinctio aperiam dicta ipsa soluta consequatur eius explicabo cumque possimus iure temporibus laudantium eveniet et ex placeat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, quidem sint labore saepe explicabo aspernatur sunt vero quos minima nesciunt velit et debitis est accusantium eveniet dolorum sed quibusdam voluptate!
</p>
</article>

Adding position: fixed and tweaking the z-index to -1 does the trick. You also have to set the top and left to 0, but that's secondary:
#test {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
JSFiddle:
http://jsfiddle.net/8fb4C/1/

Related

createElement in another html page?

I am trying to create an App which has 2 html files, index.html and bookmarks.html. Index.html has some question cards which contain some text and a bookmarks button.
My goal is that when I press the bookmark button in the question card from index.html, that card should be replicated in bookmarks.html.
I was thinking to use the createElement approach, but I have no idea how to do this when the elements that should be created are on a different page...
For more clarity, here is the html code for the question cards in index.html:
<section class="question-card">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vitae
labore repudiandae tenetur. Qui maiores animi quibusdam voluptatum
nobis. Nam aperiam voluptatum dolorem quia minima assumenda velit
libero saepe repellat. Tempore delectus deleniti libero aliquid rem
velit illum expedita nostrum quam optio maiores officiis consequatur
ea, sint enim cum repudiandae inventore ab nemo? Eum dicta illum odio
harum, commodi similique. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Inventore maxime ipsa accusamus, soluta provident
tenetur aliquid ad nisi voluptate iste quaerat ab ullam voluptatem
illo eos optio ut dolor nostrum.
</p>
<button type="button" class="qc-bookmark-icon">
<img src="/assets/bookmark-icon.jpeg" alt="bookmark icon"/>
</button>
</section>
And this is what it looks like, with the bookmark button on the top-right corner.
Do you have any idea if this would be the right approach and if yes, how could I implement this?
If not, I am open to any suggestions, how I could make this work...
Thank you.

javascript Animation doesn't work properly. The item doesn't fit into the section

I was trying to do my first Portfolio website. I tried to run following html code in a browser, but unfortunately my code doesn't run as I expect. The main problem is that the lat div (github) from services section doesn't ,,fit into the window. I mean it doesn't stop when I scroll to the very bottom of the page. I think it it should be visible when I scroll to the very end, but I am not sure why it isn't. Could you please check and advise?
Emilia Front End DeveloperEmilia BXxXHomeAboutSkillsMy ProjectsContact meResumeHi, I'm EmiliaYour Web DeveloperLorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur doloremque eius sit ratione eveniet laborum inventore recusandae consequuntur ipsum, nostrumabout meAbout meLorem ipsum dolor sitLorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere blanditiis eum, quam possimus sint maiores ab consequuntur placeat deserunt harum dolor enim nostrum repellat dolorum atque unde nisi labore. My SkillsMy Skills HTML My projectsCSS My projectsAngular My projectsReact My projectsGIT My projectsAOS.init({duration: 800,offset: 150,});main JS file:let navbar = document.querySelector('.header .navbar');document.querySelector('#menu-btn').onclick = () =>{navbar.classList.toggle('active');}window.onscroll = () => {navbar.classList.remove('active');}

ClassList Remove seems not working in Edge

I have implemented this animated tabs in my app, following this setup on codepen.
Now, instead of jquery I wanted use vanilla Javascript, this is what I wrote:
<div class="slides">
<div class="slides__slide">
<span class="slide-title">
yoga coaching
<i class="ion-chevron-down"></i>
</span>
<div class="experience__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem ab voluptate provident voluptatum
veniam cupiditate beatae expedita veritatis aliquid officia doloribus dolore maiores doloremque mollitia! A ducimus autem ut!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus obcaecati velit autem tenetur doloribus perferendis esse odit
animi quasi deserunt recusandae perspiciatis a sapiente aliquam qui libero dolor officiis assumenda.
</div>
</div>
this is the javascript:
const slideTitles = Array.from(document.querySelectorAll('.slide-title'));
let activeClasses = []
slideTitles.forEach(function(el){
el.addEventListener('click',function(){
if(activeClasses.length>0){
activeClasses[0].classList.remove('active')
activeClasses[0].firstElementChild.getElementsByTagName('i')[0].classList.replace('ion-chevron-up','ion-chevron-down')
//activeClasses[0].firstElementChild.lastElementChild.classList.replace('ion-chevron-up','ion-chevron-down')
activeClasses = []
}
this.parentElement.classList.add('active')
this.lastElementChild.classList.replace('ion-chevron-down','ion-chevron-up')
activeClasses.push(this.parentElement)
})
})
This implementation works well in chrome, firefox opera (I cannot test it on Safari at the moment) but in Edge I have some problem: first of all, when a slide is clicked, the width is incremented first, and then the position (with no transition effect apparently), this happens also in the codepen, but in my implementetion also the remove classList function seems not works: because if i click to another card, the one that is previously selected remains in an active position, and does not go up.
The classList implementation seems work in Edge, and also the code I wrote works in another browser..

setting drop range for wow js

hello i try to reach like on this page http://mynameismatthieu.com/WOW/index.html
if we look at that doge image (right from such easy and right from very JS), the doge image drop to bottom (from way top)
i try to reach that result with this:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus velit obcaecati et, tenetur excepturi voluptatum doloremque reprehenderit esse nisi quae necessitatibus facilis provident voluptatem quos, dolorem dicta, modi eos iusto.</p>
<div class="about-tile">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur commodi saepe atque vitae harum, alias impedit sunt. Praesentium esse voluptatem possimus, autem, tenetur maiores modi ab veritatis nam architecto excepturi!</h2>
<hr class="divider wow fadeInDown" data-wow-duration="2s" data-wow-delay="0.5s" >
</div>
or you can see on here:
https://jsfiddle.net/fvjqj7f0/2/
as you can see the result from what i code, the hr only go down a little bit. i need to the hr start go down from h1 how to do like that
Your issue is actually due to the fadeInDown animation :
fadeInDown make it appear a little bit higher than its final place.
In the demo bounceIndown is used to drop from the top of the page.
On animate css website you can have all the availables animations. You can use fadeInDownBig to archieve a drop from the top of the page, but i believe that you can't use wow.js to drop from a specific position. You should use keyframes animations to do so. (with some custom javascript)
Here is the working example

Sticky footer till document height greater than viewport

EDIT
Incorrectly marked as a duplicate, I marked it duplicate before I tested the answer on the referred question. It doesn't provide the exactly what I want, which is a sticky footer initially and only float to the bottom of the page when the content is larger than the viewport.
/EDIT
EDIT2
Found the answer over here, pure CSS and does exactly what I want.
/EDIT2
I want a sticky footer until the document height is greater than the viewport height, then it just should be at the end of the document.
The document is build up like this:
<body>
<div class="header">
<!-- content -->
</div>
<div class="page-content">
<!-- content -->
</div>
<div class="footer">
<!-- content -->
</div>
</body>
Fiddle
The .header has a height of 101px and .footer has a height of 173px.
.page-content has a variable height depending on the content.
What I want is for .footer to stick to the bottom of the viewport as long as .page-content doesn't contain enough content for the document to have a greater height than the viewport
I tried giving .page-content a min-hieght so it always overflows the viewport but that is just plain ugly.
Is this possible pure CSS or does Javascript/JQuery come in to play here?
Two relatively newer methods that can be used are using calc and flexbox. Both have decent support (above 90% without prefixes for calc and with prefixes for flexbox). Using them is pretty simple, especially compared to some of the older (and admittedly more supported) methods. If you really want to push support then viewport units can make them even simpler.
Method One - Calc:
CSS:
/* Only needed if not using vh in main */
html, body {
height: 100%;
}
header {
/* Needs to be static */
height: 70px;
}
footer {
/* Needs to be static */
height: 30px;
}
main {
/* Can use 100vh instead of 100% */
min-height: calc(100% - 70px - 30px);
}
HTML:
<header></header>
<main></main>
<footer></footer>
DEMO: codepen
Method Two - Flexbox:
CSS:
body {
display: flex;
flex-direction: column;
/* If using percent then html needs a height of 100% */
min-height: 100vh;
}
main {
flex: 1;
}
HTML:
<header></header>
<main></main>
<footer></footer>
DEMO: codepen
The flexbox version is nice because header and footer can be fluid. The flex: 1; in main makes sure that main will fill any remaining space left after header and footer take whatever they need. Calc's version is less powerful, requiring a static header and footer, but no prefixes. They both work fine for me, personally, with either autoprefixer or prefixfree making sure I don't have to worry about prefixes either way.
You are probably looking for something like Ryan Faits "HTML 5 Sticky Footer"
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer Content here</p>
</div>
</body>
</html>
In this example the footer will be 4em high. You will probably want to adjust this to your wishes by modifying the "margin"of the ".wrapper"and the "footer" "height"
You can use this css to your footer to make it at the bottom of viewport.
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 173px;
}
Check this out:
$(function () {
$(".large-content").hide();
$("a").click(function () {
$(".large-content").toggle();
fixHeight();
});
fixHeight();
});
function fixHeight() {
if ($(window).height() >= $(document).height())
$("body").addClass("fixed-footer");
else
$("body").removeClass("fixed-footer");
}
* {font-family: 'Segoe UI'; font-size: 10pt; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 10px;}
.header, .footer {text-align: center; color: #fff; background-color: #000;}
body.fixed-footer {padding-bottom: 2em;}
body.fixed-footer .footer {position: fixed; width: 100%; bottom: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
Header Section
</div>
<div class="page-content">
<p>Small Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam error quas culpa, sapiente sunt asperiores impedit ipsa cupiditate tempore, molestias, vitae laboriosam suscipit pariatur odit? Cumque fugiat iste provident.</p>
<p>Click for large content!</p>
<div class="large-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas est quos officia repellat debitis molestiae incidunt et consequatur ut, dicta rerum qui delectus impedit saepe suscipit explicabo dolorem at ea?</p>
</div>
</div>
<div class="footer">
Footer Section
</div>

Categories