I have some code for slider:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500);
}
CSS:
.mySlides {
display:none;
width: 100%;
height: 100%;
}
.w3-animate-right{
position:relative;
-webkit-animation:animateright 0.9s;
animation:animateright 0.9s;
}
#-webkit-keyframes animateright{
from{right:-700px; display: none;} to{right:0; display: block;}
}
#keyframes animateright{
from{right:-700px; display: none;} to{right:0; display: block;}
}
Now as you see from css image is coming from -700px because slider width is 700px But I am trying to make it display:none for image parts that are not inside the slider frame. I caan do it by putting invisible "walls" next to slider by making it with bigger z index and to slide image under it. But I want to do it without that if it is possible. I will add some paint pic how I would like it to be...
img
The best practice for this is to use the overflow: hidden; css attribute to keep all content outside a div hidden.
More information can be found on this page.
You can create a CSS carousel using overflow: hidden. The exact structure can be found, for example, here:
https://dl.dropboxusercontent.com/u/2629908/sandbox/fluid-css-carousel/index.html
Related
I have an Overlay that I display on a webpage while some SQL is performed in the background, this SQL can take a good few seconds, so I set this Overlay to be on the screen for 10 seconds using JavaScript. What I want to do, is prevent the user from clicking, and scrolling altogether while this Overlay is visible.
I have the pointer events set to 'none' which doesn't seem to work, even with a high z-index, and displaying as 'block'. For some reason, when the Overlay is displayed, the user can still scroll, click, and highlight text just like the overlay is not even there.
This is my Overlay in CSS:
#overlay {
position:fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(120, 120, 120, 0.9);
pointer-events: none;
z-index:100000;
}
My JavaScript:
//The function to start displaying the overlay
function start()
{
document.getElementById("overlay").style.display = "block";
}
//The function to stop displaying the overlay
function end()
{
alert("Finished!");
document.getElementById("overlay").style.display = "none";
}
setTimeout(function() { start(); }, 1); //starting the Overlay
setTimeout(function() { end(); }, 10000); //ending the Overlay after 10 seconds
You should disable scrolling by add overflow: hidden to body
function start()
{
document.getElementById("overlay").style.display = "block";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
//The function to stop displaying the overlay
function end()
{
alert("Finished!");
document.getElementById("overlay").style.display = "none";
document.getElementsByTagName("body")[0].style.overflow = null;
}
Remove pointer-events: none to allow the user to click on the overlay, and add user-select:none; instead.
This way, the user can not select anything on the overlay. The user will only be able to resume selection on the other parts of the page once the overlay is hidden.
function start() {
document.getElementById("overlay").style.display = "block";
}
//The function to stop displaying the overlay
function end() {
document.getElementById("overlay").style.display = "none";
console.log('Finished');
}
setTimeout(function() {
start();
}, 1); //starting the Overlay
setTimeout(function() {
end();
}, 10000); //ending the Overlay after 10 seconds
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(120, 120, 120, 0.9);
z-index: 100000;
user-select: none;
overflow: hidden;
/* not really needed, but this prevents scroll bars from appearing */
}
#main {
background-color: #bada55;
display: inline-block;
padding: 5em;
margin: auto;
}
<div id="overlay">
<p>
This is part of the overlay inner HTML
</p>
</div>
<div id="main">
This is something not inside the overlay
</div>
Why my menu toggle is not smooth transition? I've added transition 200ms and it doesn't work at all. How can I fix this?
#sidebar-container2
min-height: 100vh
width: 80px
display: none
transition: 200ms
#sidebar-container
min-height: 100vh
methods: {
sidebar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "block";
menu.style.display = "none";
},
openbar() {
var menu = document.querySelector('#sidebar-container');
var menuSmall = document.querySelector('#sidebar-container2');
menuSmall.style.display = "none";
menu.style.display = "block";
}
You can't do transitions with display, however you can do so with opacity and visibility: Transitions on the CSS display property
I am trying to animate images using CSS on a webpage. The animation is working fine but I want to START the animation it only when user reaches at a particular section of the page. Here is my code:
<div class="sec1-right">
<img class="sec1-dmush1" src ="sec1-dmush1.png">
</div>
CSS
.sec1-right{
position: relative;
width: 50%;
float: right;
box-sizing: border-box;
min-height: 600px;
margin-top: 86px;
}
/* first section animation */
.sec1-dmush1 {
animation: fadeAndScale .9s cubic-bezier(.45,-0.22,.34,1.69);
transform-origin:center bottom;
max-width: 150px;
width: 100%;
position: absolute;
left: 180px;
top: 300px;
z-index: 0;
}
Animation
#keyframes fadeAndScale{
from{
opacity:0;
transform: scale3d(0,0,1);
}
to{
opacity: 1;
transform: scale3d(1,1,1);
}
}
How can I achieve
You need to write scroll event in javascript. element offsetTop minus window height. So as soon as element comes in viewport event starts.
Javascript:
var scrollpos = window.scrollY; // window scroll position
var wh = window.innerHeight-50; // as soon as element touches bottom with offset event starts
var element = document.querySelector(".sec1-dmush1"); //element
window.addEventListener('scroll', function(){
if(scrollpos > (element.offsetTop - wh)){
element.classList.add("onScroll");
}
});
JsFiddle
jQuery:
$(window).scroll(function(){
var wh = $(window).height()-50;
if($(window).scrollTop() > $('.sec1-dmush1').offset().top-wh){
$('.sec1-dmush1').addClass('onScroll');
}
});
jsFiddle
If you have multiple elements to animate. You can use waypoint js to reduce some efforts.
var wh = $(window).height();
var waypoints = $('.sec1-dmush1').waypoint(function(direction) {
$(this.element).addClass('onScroll');
console.log(11);
}, {
offset: wh-50
});
jsFiddle
using javascript you can find the scroll event . After the specific px(height). You can add a class to the existing class(jquery) for which you trying to animate.
Apologies for the long winded question but any help would be much appreciated!
I have a navigation div on a website that disappears when the screen gets smaller to be replaced by a menu button, using a media query. The menu button uses JavaScript to show and hide the menu.
This all works apart from one small bug that I can't figure out, it's a bit hard to explain so I'll bullet point it -
1) Open small browser window so button shows.
2) Open and close menu using button.
3) Maximise screen.
4) The button disappears (which it should) but the menu doesn't reappear.
You can see a live example here - http://andrewbruce.me
I'll put relevant code below -
var clicks = 0;
function decide(x) {
if (clicks == 0) {
document.getElementById("nav").style.visibility = "visible";
document.getElementById("nav").style.opacity = "1";
x.classList.toggle("change");
clicks = 1;
}
else if (clicks == 1) {
document.getElementById("nav").style.visibility = "hidden";
document.getElementById("nav").style.opacity = "0";
x.classList.toggle("change");
clicks = 0;
}
}
#nav {
height: 100%;
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
visibility: visible;
opacity: 1;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;}
#media handheld, screen and (max-width: 1000px) {
#nav {width: 40%; visibility: hidden; opacity: 0;}
.menuButton {visibility: visible;}
}
<div class="menuButton" onclick="decide(this);">
<div id = "bar1"></div>
<div id = "bar2"></div>
<div id = "bar3"></div>
</div>
Try this.
I hope helps.
#media (min-width: 1000px){
#nav{
opacity:1!important;
visibility: visible!important;
}
}
You should not change style by this method document.getElementById("nav").style, it will add inline style and override your properties. Instead create a class with those properties, then use scripts to toggle it.
For example:
CSS
.nav-hidden {
visibility: hidden;
opacity: 0;
}
JS
element.classList.add("nav-hidden");
element.classList.remove("nav-hidden");
use below JS
window.addEventListener("resize", menuChange);
function menuChange() {
if (window.innerWidth > 999){
document.getElementById("nav").style.visibility = "visible";
document.getElementById("nav").style.opacity = "1";
x.classList.toggle("change");
}
}
I'm using javascript to display my background image because I'd like to have a random background image on each reload. Anyway, because of this my typical CSS transitions and animations won't do, because instead of fading the background it fades the text inside of my body.
Is there any way around this so that on each reload the background fades in?
This is the code I am using to display the random image:
var randomImage = Math.floor(Math.random() * 18) + 1;
document.body.style.backgroundImage = "url(images/" + randomImage + ".jpg)";
and I'm unsure how to make it fade in... any thoughts?
Using: https://css-tricks.com/snippets/css/transparent-background-images/
http://jsfiddle.net/wby2xf6f/1/
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div:after {
transition: opacity 5s;
content: "";
background: url(http://www.wina.ugent.be/style/img/h1.png);
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
div.fadein:after {
opacity:1;
}
And then add the class .fadein with Javascript/JQuery.
http://jsfiddle.net/wby2xf6f/1/
On a sidenote: it might be better to select the background-image at random on the server side (using php/ruby/whatever).
Updated, but less semantic version: http://jsfiddle.net/wby2xf6f/5/
.fill {
position:absolute;
height:100%;
width:100%;
z-index:-1;
display:none;
background:url(http://www.wina.ugent.be/style/img/h1.png);
}
$('.fill').fadeIn(5000)
This example with your code above
$(document).ready(function(){
var img1 = "http://www.clarkcraft.co.uk/images/des/48040.jpg";
var img2 = "http://glamorouslymommy.com/wp-content/uploads/2013/05/small-background1.jpg";
setInterval(function(){
var randomImage = Math.floor(Math.random() * 18) + 1;
if(randomImage<=5){
$("div").css("background","url("+img2+")").show().fadeOut("slow"); $("div").css("background","url("+img1+")").show().fadeIn("slow");
}
else{
$("div").css("background","url("+img1+")").show().fadeOut("slow"); $("div").css("background","url("+img2+")").show().fadeIn("slow");
}
}, 1000);
});
div {
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:none"></div>