One background on grid divs and js scroll animation - javascript

I have a HTML grid and 4 divs in. On one hand I want to apply a single background image on these one. On the other hand, I want to translate the divs on scroll.
It works but when I scroll, the background image is not extended anymore.
<html>
<body>
<section id="home">
<div id="bloc1" class="bloc"> </div>
<div id="bloc2" class="bloc"> </div>
<div id="bloc3" class="bloc"> </div>
<div id="bloc4" class="bloc"> </div>
</section>
</body>
</html>
JS & CSS on JSFiddle : https://jsfiddle.net/SO3HSBF5/84wmv1cn/4/
Anyone can help me ?

Related

image in html hiding under nav bar in header

i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"

AngularJS: How to make the inner div visible

I have 3 divs of the same size stacked on each other. Each of the divs has got the size of the screen which is visualized on the image with the black frame.
What I would like to achieve is to make div2 visible at the beginning. This is means div2 is filling the screen and the other divs are just visible when I am swiping up or down.
Right now, div1 is visible at the beginning since it is the first div.
Any help?
<div id="wrapper" style="overflow:hidden" layout="column">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Try this library:
https://github.com/alvarotrigo/fullPage.js
HTML
<div id="fullpage">
<div class="section" id="div1">a</div>
<div class="section active" id="div2">b</div>
<div class="section" id="div3">c</div>
</div>
CSS
#fullpage>div{
height: 100vh;
}
In order to view the second square on page load add active class to the div.
Hope it helps.

Detect body scroll offset

I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});

picturefill.js issue with z-index

I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>

jQuery: Gallerific Half Working

I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example

Categories