sticky-kit flashes when sticky - javascript

I have some adsense ads displayed on a test page using sticky-kit v1.1.2.
When I scroll down the page (I am using Chrome browser), the ads flash/reload when the sticky-kit becomes sticky.
I have read this trouble shooting guide that does seems to address the exact issue that I am experiencing, but does not work for my code.
My code is displayed below. I have deliberately left out the two following div's, because I am unsure where they should be inserted (I have tried many scenarios, but none work for me):
<div class="sticky-parent">
<div class="sticky-spacer">
</div>
</div>
Here is my HTML code:
<div id="id_side_advert_container" class="side_advert col-md-2">
<div class="margin-bottom-20">
<div id="id_side_advert_wrapper">
{# google adsense code to display side advertiements #}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- zoodal-side-advertisement-responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890112987"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
Here is my JQ code:
// sticky-kit code for the side advertising sticky - with an offset of 15px when sticky.
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})

The following shows how that solution in your question should be set up to work (here I'm using an iframe to simulate your ads).
$("#sidebar").stick_in_parent({
offset_top: 15,
parent: ".content", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
.content {
overflow: hidden;
}
.content .sidebar {
width: 200px;
margin: 10px;
margin-right: 0;
float: left;
overflow: hidden;
font-family: sans-serif;
}
.content .main {
margin: 10px;
margin-left: 222px;
border: 1px solid blue;
height: 2000px;
overflow: hidden;
}
.footer {
margin: 10px;
text-align: center;
font-size: 13px;
border-top: 1px dashed #dadada;
color: #666;
padding-top: 10px;
min-height: 233px;
}
.sub {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
<h1>Example sticky flicker fix</h1>
<div class="content">
<div class="sticky-spacer">
<div id="sidebar" class="sidebar">
<em>Ads go here. <span style="color:maroon">Demo'ing with an iFrame instead.</span></em>
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="https://unsplash.it/200/200" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe>
</div>
</div>
<div class="main">
This is the main column
<p class="sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.
</p>
<p class="sub">
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.
</p>
<p class="sub">
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.
</p>
</div>
</div>
<div class="footer">
My very tall footer!
</div>
With this I don't notice any flickering in Firefox or Chrome.
I recommend, as a test, you try placing your ads in this JSFiddle (it is the same code as the above snippet): https://jsfiddle.net/2jkf4qcr/1/.

I had the similar issue with sticky-kit library. The solution was to not use the spacer (spacer: false):
<div class="sticky-parent">
</div>
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent",
spacer: false,
});

Related

Using CSS to wrap text around image and have it behave like a background image

I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.
the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>

How to stop Bootstrap 4 slider images from moving position on slide when background-attachment:fixed applied? (Parallax effect)

I am attempting to add a Parallax scrolling effect to my Bootstrap 4 slider. However, when the slider changes to the next image, the image has to move into place after it has been changed. How do I stop this from happening?
.customOverlayText {
position: absolute;
color: white;
z-index: 2;
left: 0;
right: 0;
}
.carousel-inner .carousel-item {
height: 500px;
background-size: cover;
background-position: center center;
background-color: black;
background-attachment: fixed;
}
.general {
background-color: #f0f0f0;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 50px;
}
#media only screen and (max-width: 1146px) {
.general {
padding-left: 50px;
padding-right: 50px;
}
}
<div class="carousel slide" data-pause="false" data-ride="carousel">
<div class="customOverlayText d-flex h-100 align-items-center justify-content-center">
<center>Overlay</center>
</div>
<div class="carousel-inner text-center">
<div class="carousel-item active" style="background-image:url(http://coopertimewell.com/testing/images/slider/1.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/2.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/3.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/4.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/5.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/6.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/7.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/8.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/9.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/10.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/11.jpg);"></div>
<div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/12.jpg);"></div>
</div>
</div>
<center>
<div class="general" id="redGeneral">
<h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Dolor sit amet consectetur adipiscing elit pellentesque habitant
morbi tristique. Nisl pretium fusce id velit ut tortor pretium viverra. Velit dignissim sodales ut eu sem integer vitae justo eget. Scelerisque viverra mauris in aliquam sem. Nunc consequat interdum varius sit amet. Fames ac turpis egestas sed tempus
urna. At volutpat diam ut venenatis tellus in metus. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Eget mauris pharetra et ultrices neque ornare. Id aliquet risus feugiat in ante metus dictum. Accumsan in nisl nisi
scelerisque eu ultrices vitae auctor eu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Consectetur lorem donec massa sapien faucibus et. Mauris pharetra et ultrices neque ornare aenean. Amet nisl purus in mollis nunc sed id.</h2>
</div>
Also, am I able to add the text overlay onto the Parallax scrolling effect?
A parallax effect normally requires at least two layers moving at different speeds. I don't think the BS carousel is designed to do this.
Also images are usually added with the
<img src="">
attribute rather than using a background image to maintain the perspective ratio.
If you want to proceed with the effect you are trying to achieve then could you add some sort of image explanation or example you have seen? I think this would be difficult using the BS framework (lots of overrides).
https://getbootstrap.com/docs/4.0/components/carousel/
With your question could you add a complete code example with your question? Edit it then use the (<> icon).

Can't Get Navigation Menu slideToggle to Work

I am fairly new to javascript in web design and can't seem to figure out even after quite a bit of research how to properly get my navigation menu to slidetoggle and push the content below it up and down. Ideally, if I could get some help on getting the menu to appear as wide as the container below it so things look even that would be great.
I don't have the slideToggle code in the jsfiddle, but here is one of the things i tried:
$("#menu-button").click(function() {
$("a").slideToggle(1000);
});
Here is the fiddle of the current setup of my code: https://jsfiddle.net/3uag19p1/18/
I updated for you the structure of html. You need to place #menu-button outside to make sure it always visible
<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
<nav class="site-navigation" id="myTopnav">
Home
Business
Background
Info
Login
</nav>
And for the problem with slidetoggle and push the content below it up and down, you just use position: absolute. Don't add position for .site-navigation a. This will make the position go wrong.
.site-navigation {
position: absolute;
right: -100px;
top: 100px;
transition: all 0.3s;
width: 100px;
}
.site-navigation.responsive {
right: 51px;
}
Use overflow-x: hidden to hide the menu to make sure we don't have scroll to see this menu
#page {
height: 100%;
background-color: #1c222b;
overflow-x: hidden;
}
I added animation to make this go smoothly
Here is the fiddle
You should change the structure of the HTML to this:
<body id="page">
<div id="wrapper">
<header id="masthead">
<div class="container header-container">
<div class="site-branding">
<h1 class="site-title">
Logo
</h1>
</div>
<nav class="site-navigation" id="myTopnav">
Home
Business
Background
Info
Login
</nav>
<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</header>
<div id="content">
<main class="container content-padding">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem nibh, porttitor quis interdum sed, eleifend non eros. Quisque vitae augue mi. Etiam eget ligula volutpat purus dictum porttitor. Cras eleifend quam sit amet venenatis finibus. Aliquam sagittis lacus quis aliquet consequat. Pellentesque sed placerat sem, eu auctor enim. Curabitur ante lorem, ornare eget bibendum vitae, posuere at tortor. Etiam sit amet neque in nulla molestie rutrum sed ac urna. Vivamus enim tellus, interdum a eleifend at, laoreet in nisl. Etiam condimentum, arcu id lobortis tempus, justo turpis varius nisi, a mollis nulla risus et augue. Donec rutrum, erat in aliquet eleifend, leo risus imperdiet velit, ut feugiat lacus nulla iaculis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu odio sem. Aliquam id ullamcorper dolor, quis dapibus lacus. Fusce eu lorem ac ipsum condimentum pellentesque a et velit.</p>
</main>
</div>
</div>
</body>
Then style the menu button so that it appears on the right side of the page:
#menu-button {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
To make the menu appear as wide as the container, make the width to 100%:
.site-navigation {
float: right;
width: 100%;
}
Preview it here: JSFiddle

How to resize textarea depending on the parent element

So I need to resize the textarea in this form to take the whole available space in the box depending on the parent element (#wrapper). How do I do that?
I will exactly put the negative number calculation more precise when I am sure how much text will go there.
The calculation code I wrote in, calculates height of textarea to 0px.
var boxHeight = ($("#wrapper").height()-200);
$( window ).ready(function(){
$("#Box").height( boxHeight );
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XxX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>
</body>
</html>
You can easily do this with CSS alone:
textarea {
width: 100%;
height: 100%;
}
If you know that #wrapper will have a specified height, the you use CSS to get a reasonable fit for the textarea.
First, specify a value for the height in the #wrapper rule.
Then, set a height for #Form by using absolute positioning and the CSS calc function to set the form to be the height of the parent minus 200px.
You then need to do a similar trick to the p element wrapping the textarea, leaving 50px height for the buttons.
Finally, set height and width to 100% for #Box, and set box-sizing: border-box to take into account the border of the textarea element.
Comment: Although this can be done, the approach depends on two hard-coded values for the height of the text before the form and the height of the buttons. JavaScript/jQuery may be the better approach. Either way, #wrapper needs a height value.
#wrapper {
border: 1px dotted blue;
height: 500px;
position: relative;
}
#Form {
border: 1px dotted blue;
height: calc(100% - 200px);
position: absolute;
width: 100%;
bottom: 0;
}
#Form p {
border: 1px dashed blue;
height: calc(100% - 50px);
margin: 0;
}
#Box {
height: 100%;
width: 100%;
box-sizing: border-box;
}
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>

div scrollbar not appearing

I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
Well you're using overflow-style which isn't supported in any major browser yet ..
Setting overflow to auto or scroll on .scroll-area will have the vertical scrollbar appear as expected
http://jsfiddle.net/kRcaR/1/
You should explicitly set overflow to auto (or to scroll if you need scrollbars appear all the time):
.scroll-area {
overflow: auto;
}
DEMO: http://jsfiddle.net/aNTHx/
You need to set overflow: auto or if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;
Your div should have this overflow styling for vertical scrolling:
.scroll-area {
overflow-y: scroll;
}
Or if you want to scroll horizontal:
.scroll-area {
overflow-x: scroll;
}
Your hiding the scroll bar with overflow: hidden;.
If you change to:
.scroll-area {
overflow-style: auto;
overflow: auto;
}
HTML
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>
CSS
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: scroll;
}
DEMO
http://jsfiddle.net/YxsLc/1/
EXPLANATION
If You want to scroll content in html elements You should use property overflow: scroll;
Goodluck in future code.

Categories

Resources