i have this following jsfiddle link
where am trying to squeeze the webpage to show an AD towards right
http://jsfiddle.net/5o6ghf9d/1/
Works fine on dekstop browsers
But its not getting squeezed on ipad safari/chrome browsers
Below are functions used to squeeze/unsqueeze the web page
function squeeze_page(){
d.body.style.paddingRight='160px';
d.body.style.paddingLeft='160px';
d.body.style.marginLeft='-160px';
d.body.style.overflowX='hidden !important';
is_page_squeezed=true;
}
function unsqueeze_page(){
d.body.style.paddingRight='';
d.body.style.paddingLeft='';
d.body.style.marginLeft='';
is_page_squeezed=false;
}
Let me know if any other way is there where i can squeeze the webpage
Perhaps this is what you're looking for: JSFIDDLE
If you want to have the AD slide from right when showing, it's better to use the CSS transition like in my example.
First, you need to have a container for the content, which in my example, I add
<div id="container">
...
<!-- Your Content Here -->
...
</div>
to contain all your <p> content, then using the CSS, I set this
#test {
position:fixed;
width:160px;
background:blue;
right:-160px;
top:0px;
bottom:0px;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#test.show {
right:0;
}
position:fixed; to make it's position fixed to the viewport whenever you're scrolling it, top and bottom set to 0 to make it's height full, and the transition is to make it looks like slide from right to left when it shows
The same with the div container that's using this style
#container {
margin-right:0;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#container.squeezed {
margin-right:160px;
}
so that it looks like it's being squeezed by the AD
then use this script to add or remove the class from #container and #test
window.onscroll = function () {
if (pageYOffset > 100) {
$("#test").addClass("show");
$("#container").addClass("squeezed");
} else if (pageYOffset < 100) {
$("#test").removeClass("show");
$("#container").removeClass("squeezed");
}
}
Related
I'm using a bit of jquery to have a Bootstrap 4 navbar fade in when scrolling down past a certain point, by adding and removing a specific class. However, the code I have won't show the navbar if I reload the page having already scrolled down, and when scrolling back up the CSS transition doesn't fade the bar out but simply pops out of view instantly. How can I fix those issues? Would it be better to rely on purely jquery instead of relying on a CSS class? If so, how would that work? Thanks!
JS:
$(window).scroll(function(e) {
if($(window).width() >= 768)
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$('.navbar-home').addClass("navbar-hide");
} else {
$('.navbar-home').removeClass("navbar-hide");
}
});
CSS:
.navbar-home {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.navbar-hide {
opacity: 1;
visibility: visible;
}
You also need to call the same code on page load. Change the listener to:
$(window).on("scroll load", function(e) {...})
I've been trying to come up with a solution to this design issue, which seems simple but it's perplexing me.
I have content fixed to the bottom of the screen - some of it is always present, some is hidden from time to time.
The crux is that I want the content above to drop down. I have had some success with javascript but its not perfect. The nearest I've got so far is using max-height.
https://jsfiddle.net/6jax19gf/29/
The fiddle is a working representation of what I'm trying to achieve using max-height. However, max height isn't ideal because much of the content is dynamic.
I'd like to come up with a better solution that isn't hard-coded using max-height.
#fixed-footer {
position:fixed;
left:0;
bottom:0;
width:100%;
}
#fixed-footer-floating {
padding:0 16px;
margin-bottom:16px;
box-sizing:border-box;
}
.fab-button {
background-color:lime;
display:inline-block;
height:40px;
width:40px;
border-radius:50%;
}
#fixed-footer-auto {
background-color:red;
color:white;
text-align:center;
transform: translateY(0);
transition: max-height 0.2s ease-out;
max-height: 76px;
}
.some-content {
padding:14px 16px;
box-sizing:border-box;
}
#fixed-footer:hover #fixed-footer-auto {
transform: translateY(100%);
transition: transform 0.2s ease-in, max-height 0.4s 0.2s ease-out;
max-height: 0;
}
<div id="fixed-footer">
<div id="fixed-footer-floating">
<a class="fab-button"></a> This content always floats above the red box!
</div>
<div id="fixed-footer-auto">
<div class="some-content">This area is responsive so may expand or contract vertically depending on the screen size and page state. It's content can be made to made disappear completely on certain events.</div>
</div>
</div>
Hover over the bottom red area to make the content disappear. This would usually be triggered using javascript.
I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?
You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle
Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});
I am trying to create a sort of loading animation, with 3 bars that are below eachother that all have seperate keyframes.
The 3 bars are div elements, located inside a parent div.
<div id="menu">
<div id="menubox1"></div>
<div id="menubox2"></div>
<div id="menubox3"></div>
</div>
The animation properties are assigned to the individual menubox ids.
#menubox1:after {
content: '';
position: absolute;
bottom: 0px;
transform: translateY(-50%);
border-top: 1px solid #FFDADA;
animation: menukeyframes1;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: inherit;
}
#keyframes menukeyframes1 {
0% { width: 100%; left:0;}
...
}
My goal is to play the animation while the cursor is hovering over the parent div.
My attempt was to play around with animation-play-state which was set to running or paused, depending if the parent div was hovered.
The problem is that the animation is immediatly paused, before the animation is complete, which looks kind of bad if it stops mid-motion.
Is there a good fix for this, preferrably without JavaScript/jQuery, and across all browsers?
As you see it can't be done with just CSS at this moment, and as good jquery answers are already referenced, it's worth to mention that it could be solved in few lines of vanillaJS:
var dur = 2000;
document.querySelectorAll('.smooth').forEach(el=>{
var t;
el.addEventListener('mouseover',_=>{t = performance.now();el.style.animationPlayState = 'running'})
el.addEventListener('mouseout',_=>window.setTimeout(()=>el.style.animationPlayState = 'paused',dur-(performance.now()-t)%dur));
})
working pen
non-es6: BABEL
You can always fade out the animated divs using transitions.
Something like this might work for you:
#menubox1 {
opacity: 0;
transition: opacity .5s linear;
}
#menu:hover {
#menubox1 {
opacity: 1;
transition: opacity .5s linear;
}
}
So I've successfully tested a css fade-in transition effect of two images using the following Javascript as a trigger so it starts when the page loads (and NOT on hover or click). Now how can I add a 10 second delay to the start of the transition? I was hoping a simple "transition-delay: 10s;" would do the trick but it seems to be getting ignored. I don't want to use key frame animations because it's not compatible with older browsers.
Here's the script:
<script type="text/javascript">
window.onload = function(){
document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");
}
</script>
Here's my CSS:
#MountainsBkg1 img {
width: 2348px;
opacity: 1;
position: absolute;
left: 0;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
transition-delay: 10s;
}
#builder-layout-52bf21c0ea5ff.loaded #MountainsBkg1 img {
opacity:0;
}
The correct function would be:
window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)
If you're looking for a javascript only answer for this (that works on everything).
I'm also assuming that this is only going to be applied on the initial load of the page.