I am expecting the images to shift to the right. Runner increments and prints 1px, 2px, 3px etc. to console, but new margin wont be set. What's the problem?
Together with the code below, what I have written above should be sufficient to understand my problem. But I am, at this point, simply writing to get rid of the prompt to write more text.
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal{
background-image: url('whiteboard.jpeg');
position:absolute;
z-index:-1;
}
.scaled{
transform:scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
}
.normal, .scaled{
width:100vw;
}
div img{
width:100%;
height:auto;
}
</style>
<script>
window.onload=function(){
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner =0;
setInterval(function(){
normal.style.marginRight="-"+runner+"px";
scaled.style.marginRight="-"+runner+"px";
runner++;
console.log("respons - "+runner+"px")
},50);
}
</script>
The marginRight style describes the distance of the div element to its parent's right side. A negative marginRight will not work here - instead try marginLeft. Depending your desired direction of the animation use a positive or negative value.
window.onload = function() {
const normal = document.getElementById('normal');
const scaled = document.getElementById('scaled');
let runner = 0;
setInterval(function() {
normal.style.marginLeft = "-" +runner + "px";
scaled.style.marginLeft = "-" +runner + "px";
runner++;
console.log("respons - "+runner+"px")
}, 50);
}
<body>
<div class="normal">
<img id="normal" src="whiteboard.jpeg">
</div>
<div class="scaled">
<img id="scaled" src="whiteboard.jpeg">
</div>
</body>
<style>
.normal {
background-image: url('whiteboard.jpeg');
position: absolute;
z-index: -1;
background-color: blue;
}
.scaled{
transform: scale(120%);
z-index:2;
clip-path: circle(5% at 33% 42%);
background-color: red;
}
.normal, .scaled{
width: 100vw;
}
div img {
width: 100%;
height: auto;
}
</style>
Related
i am trying to change background image on scroll, but cant seem to find any guide, so i will try my luck here.
here is a video of exactly what i am trying to achieve - https://www.youtube.com/watch?v=7u1aIxQCIXg
i want to have a background image, and text that goes over when i scroll, and when i come to a certain point, the background image changes/fades over and not scrolls up from the bottom
i have tried some, but does not have the skills at this point
although you didnt provided any progress you made still i enjoyed making it
accept my answer if you find it usefull please check my codepen link
demo
<style>
body {margin: 0;padding: 0;}
.section {
height: 100vh;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin:auto;
font-size: 2.5em;
border:1px solid white;
color:white;
padding:1em;
text-shadow: 2px 2px 3px black,
2px 2px 3px black;
}
.BG {
position: fixed;
z-index: 0;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.anim {opacity:1;}
.show {color:orange;}
</style>
<body>
<div class="main">
<div class="section BG">
<div class="show"></div>
</div>
<div class="section" BGurl="https://i.ibb.co/0DxzSg0/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image-371487.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/31YPsfg/triangles-1430105-340.png"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/Y3BgqMc/7f3e186790208b63dadda09d6b91d334.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/GCQP61b/photo-1513151233558-d860c5398176-ixlib-rb-1-2.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/D9WGPf9/pngtree-modern-double-color-futuristic-neon-background-image-351866.jpg"><div class="text">SECTION</div></div>
</div>
</body>
<script>
function scrollPictureChange(){
var main = document.querySelector(".main"),
sections = main.querySelectorAll(".section"),
BG = main.querySelector(".BG"),
el = document.querySelector(".show"),cords,index=0,h = window.innerHeight,lastIndex=null,offset=0
applyBG(0)
window.addEventListener("scroll",function(){
scrollY = Math.abs(document.body.getClientRects()[0].top)
index = Math.floor(scrollY / (h - offset))
if(index != lastIndex){ // on index change
if(lastIndex != null){
applyBG(index)
}
lastIndex = index
}
el.innerText = `index : ${index} height : ${h} top : ${scrollY}`
})
function applyBG(index){
BG.classList.remove("anim")
setTimeout(function(){
BG.style.backgroundImage = `url(${sections[index + 1].getAttribute("BGurl")})`
BG.classList.add("anim")
},300)
}
}
window.onload = scrollPictureChange
window.onresize = scrollPictureChange
</script>
I would like to have some help about the transition of a div in CSS or JavaScript.
I have a <div> with dispay:none;.
With some JS, i change the display option on display:block.
All is working correctly.
But i would like to know how to make a transition when the <div> appear on the screen.
Like the player Spotify when you want to search something.
Thanks for you help.
And really sorry for my BAD english !
You can do it with a JQuery like this:
$(function() {
var open=false;
$('.menubar span').click(function(){
if(open==false){
$('.search').css('left','50px');
open=true;
}
else{
$('.search').css('left','-100px');
open=false;
}
});
});
.menu{
position:fixed;
left:0;
top:0;
width:50px;
height:100%;
background:#222021;
z-index:4;
}
.menubar{
width:50px;
height:100%;
color:white;
font-family:arial;
}
.search{
position:absolute;
left:-100px;
top:0;
width:100px;
background:lightgrey;
height:100%;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
<div class="menubar">
<span>Home</span>
</div>
</div> <div class="search"><input type="search"></div>
Click "Menu" in the menu bar, and the search bar slides out, click again to hide it.
To use JQuery, you have to include the jquery library:
include this in <head>:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Or download it from:http://jquery.com/download/
Then, just use the script like normal JS, in a <script> tag.
EDIT:
With your problem in the comments below, #navbar had a static position, which means z-index will not work for it:
#nav-bar {
background-color: #23232C;
bottom: 0px;
left: 0px;
top: 0px;
width: 220px;
height: 100%;
margin-top: -17px;
z-index: 99;
position: absolute;
}
The following answers uses CSS Style Declarations to accomplish the transition effect.
if you declare the transition: all 1s style on an element. If the style property changes on that element your browser's (user-agent's) graphic device will calculate and update the frames (or visual changes) that occur between the two states (initial state, and end state). However, the property that is being changed must be scalar; that is, both the initial value and new value are scalar (like 0% being set to 100%). Additionally, if you're changing a property that is not scalar, but affects the rendering of other properties.. they will skip the transition effect (aka display:none being set to display:block).
Note: Instead of changing the inline style on the elements using Javascript, we're going to instead change the class of those elements; meaning, the following styles represent visual states, which we'll toggle between..
Again, the transition style declaration (or rather, the graphic device) will handle the incremental rendering of the frames between these two states.
Code Sample of changing 4 style properties (explicitly)
var str = 'hide';
var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
{
var elms = document.querySelectorAll('div.block');
for (var i = 0, lng = elms.length; i < lng; i++)
{
elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
elms[i].className = elms[i].className + ' ' + str;
}
str = (str === 'show') ? str = 'hide' : 'show';
});
.block {
display:block; position:absolute;
top:0;
left:0;right:80%;
bottom:0;
background-color: rgba(0,0,0);
border:0.1em solid black;
min-width:5em;
transition: left 2s, opacity 2s, right 2s, background-color 1s;
}
.wrapper
{
display:block;position:relative;background-color:whitesmoke;
min-height:10em;
width:auto;
}
.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}
<button id="toggler">Toggle Block</button>
<div class="wrapper">
<div class="block"></div>
</div>
The following is a fairly more complex slider, which ulitmately uses the same principal for rendering the transitions.
$("div.slide > button.show" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slidePrev = slide.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
})
$("div.slide > button.hide" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slideNext = slide.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slidePrev.toggleClass("hide").toggleClass("show");
})
html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}
div.wrapper {position:relative;
left:0;right:0;top:0;bottom:0;
width:auto;
background-color:whitesmoke;
display:block;
overflow:hidden; height:100%;
}
button {line-height:2em;padding:0.2em;display:block;}
div.slide {
display:block;
position:absolute;
border:0.2em solid black;
background-color:white;
top:0;
bottom:0;
right:0;
left:0;
opacity:1;
transition: left 1s, opacity 0.5s;
}
div.slide:nth-child(1) {
left: 1em;
z-index: 1;
}
div.slide:nth-child(2) {
left: 3.5em;
z-index: 2;
}
div.slide:nth-child(3) {
left: 6em;
z-index: 3;
}
div.slide:nth-child(4){
left: 8.5em;
z-index: 4;
}
div.slide.hide {
opacity:0.3;
left: 59%;
}
div.slide.show {
opacity:1;
}
div.show > button.show {display:none;}
div.hide > button.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
</div>
I have a landing page, consisting of three frames, this frames always take 100% of viewport height and width.
I need to make transitions between frames, like "powerpoint presentation" etc. User scroll's, frame-1 slides up above viewport and frame-2 becomes in his place from bottom of viewport. I have almost zero experience in javascript/jquery. Have some ideas, that you can see in the code, but this ideas not works.
HTML:
<div class="wrapper" id="wrapper">
<div class="frame frame-1">
<!-- Content here -->
</div>
<div class="frame frame-2">
<!-- Content here -->
</div>
<div class="frame frame-3">
<!-- Content here -->
</div>
</div>
CSS:
.wrapper {
height: 300vh;
}
.frame {
position: fixed;
height: 100vh;
transition: all 1s ease;
}
.frame-1 {
top: 0vh;
}
.frame-2 {
top: 100vh;
}
.frame-3 {
top: 200vh;
}
JS:
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) {
$element1.css("top", "-100vh");
$element2.css("top", "0vh");
$element3.css("top", "100vh");
} else if ($(this).scrollTop() >= 100) {
$element1.css("top", "-200vh");
$element2.css("top", "-100vh");
$element3.css("top", "0vh");
} else {
$element1.css("top", "0vh");
$element2.css("top", "100vh");
$element3.css("top", "200vh");
}
});
If you have a set number of frames, I would suggest placing them all in a single div, and changing the top value of that. that way, only one value need be modified.
Like this: http://jsfiddle.net/xkh4D/10/
(Note that, though px are used, vh or whichever other unit should work just as well... haven't tried %, though...)
HTML
<div id='yo' class='view'>
<div>
<div class='frame red'></div>
<div class='frame green'></div>
<div class='frame blue'></div>
</div>
</div>
<input type='button' value='Scroll' onclick='scrollFrame()'/>
CSS
.view {
position:relative;
width:300px;
height:250px;
border:1px solid black;
overflow:hidden;
}
.view > div {
position:absolute;
width:inherit;
height:inherit;
top:0px;
}
.frame {
width:inherit;
height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }
JavaScript
scrollFrame = function()
{
var h = $('#yo').height();
var y = parseFloat($('.view > div').css('top'));
var hsum = $('.view .frame').length * h;
console.log('h,y,hsum',h,y,hsum);
if (hsum-h == -1*y)
$('.view > div').animate({'top':0});
else
$('.view > div').animate({top:y-h},500);
}
This js could be your solution
http://alvarotrigo.com/fullPage/
I'm struggling on my website with members selecting in Firefox/Chrome etc to disable popup boxes / javascript alerts.
I use alert boxes to confirm things like, for example, if someone wants to delete a message.
However, if they delete a few messages too fast one after the other then Firefox etc gives the option to block further javascript alerts. Then my members can no longer delete their messages.
I'm sure they can fix it client-side, but what can I do server-side to stop members being given the option to block javascript alerts?
Thanks
Matt
I'm not sure that default browser alerts/popups are a great way to go from a UX perspective. Browsers typically block them for a very good reason - ads.
You might be interested in a library called alertify.js (http://fabien-d.github.io/alertify.js/).
Creating alerts with this library is pretty simple, and browsers will not block them:
alertify.alert("Hello World");
Confirm dialogs like what you mentioned in your question are pretty simple too:
alertify.confirm("Are you sure you want to delete the message?", function (e) {
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
});
I whipped this together quickly if you do not want a heavy footprint (Not really styled either). But you can put raw html into your confirm boxes with this code.
HTML
<div id="confirm">
<div class="message"></div>
<button onclick="$('#confirm').hide()[0].success();">Ok</button>
<button onclick="$('#confirm').hide()[0].failure();">Cancel</button>
</div>
JS
var $confirm = $("#confirm");
function confirm(msg, success, failure) {
$confirm.find(".message").html(msg);
$confirm.show();
$confirm[0].success = success;
$confirm[0].failure = failure;
}
CSS
#confirm {
display : none;
width : 100px;
height : 100px;
position : fixed;
border : 1px solid black;
top : 5px;
right : 5px;
}
http://jsfiddle.net/hVC5A/4/
you can use a custom confirm/alert/prompt box here is an example i have made just note the css animations was some experimenting i was doing you dont need to include these
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="customAlert.css" />
<title>Custom Alert</title>
</head>
<body>
<div id="customAlertOverlay"></div>
<div id="customAlertBox">
<div>
<div id="customAlertHead"></div>
<div id="customAlertBody"></div>
<div id="customAlertFoot"></div>
</div>
</div>
<p>other content</p>
<button onclick="cAlert('Error', 'Message')">click me</button>
<script src="customAlert.js" type="text/javascript"></script>
</body>
</html>
css:
#customAlertOverlay{
display: none;
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 9;
animation : cAlertFlash linear 1s infinite;
}
#customAlertBox{
display: none;
position: fixed;
background:#FFF;
border-radius:7px;
width:550px;
z-index: 10;
top:30%;
}
#customAlertBox > div{
background:black;
margin:8px;
border-radius: 10px;
border:5px solid black;
}
#customAlertBox > div > #customAlertHead{
border-radius:10px 10px 0 0;
background: #FF6600; /*FF7112*/
font-size:19px;
padding:10px;
color:black;
text-align: center;
}
#customAlertBox > div > #customAlertBody{
background:#FF6600;
padding:20px;
color:black;
}
#customAlertBox > div > #customAlertFoot{
background: #FF7112;
padding:10px;
text-align:center;
border-radius: 0 0 10px 10px;
}
#customAlertBox > div > #customAlertFoot:hover{
background: #FF5E5E;
border-top: black 1px solid;
}
#keyframes cAlertFlash {
0% {opacity: 0.1;}
25% {opacity: 0.75;}
50%{opacity: .75;}
100%{opacity: .1;}
}
javascript:
function cAlert(headMSG, bodyMSG){
var customAlertOverlay = document.getElementById("customAlertOverlay");
var customAlertBox = document.getElementById("customAlertBox");
var winH = window.innerHeight;
var winW = window.innerWidth;
var customAlertHead = document.getElementById("customAlertHead");
var customAlertBody = document.getElementById("customAlertBody");
var customAlertFoot = document.getElementById("customAlertFoot");
customAlertOverlay.style.height = winH+"px";
customAlertBox.style.left = ((winW/2) - (550/2)) +"px";
customAlertHead.innerHTML = headMSG;
customAlertBody.innerHTML = bodyMSG;
$("#customAlertOverlay").slideDown("fast");
$("#customAlertBox").slideDown("fast");
customAlertFoot.innerHTML = "Ok";
}
$(document).ready(function(){
$("#customAlertBox").draggable();
$(document).on("click", "#customAlertFoot", function(){
$("#customAlertOverlay").slideUp("fast");
$("#customAlertBox").slideUp("fast");
});
});
FIDDLE - working with exception of dialog close
I want to have a div that is on the center of the page (I use 300px now) and when some seconds pass, I want to make visible a second div and make them both to be at the center with 50px difference, this is what I've done now, my first problem is why the opacity change of the second div doesn't apply?
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8" />
<style type="text/css">
#main {
position: absolute;
top: 200px;
left: 300px;
}
div.c {
width: 200px;
height: 200px;
float:left;
position:relative;
left:200px;
-webkit-transition:left 2s;
}
#left {
background-color: palevioletred;
}
#right {
-webkit-transition:opacity 2s;
background-color: ThreeDDarkShadow;
opacity:0;
}
</style>
<script type="text/javascript">
window.onload = function () {
setTimeout("myfunc()", 3000);
}
function myfunc() {
var stupido = document.getElementsByClassName("c");
for (var i in stupido) {
stupido[i].style.left = 0;
}
document.getElementById("right").style.opacity = 1;
}
</script>
</head>
<body>
<div id="main">
<div id="left" class="c">x</div>
<div id="right" class="c">x</div>
</div>
</body>
</html>
As stupido is an HTMLCollection instead of an array, its length property got looped through. stupido[i].style === undefined, generates error, script crashes.
Change for(var i in stupido) to for(i=0; i<stupido.length; i++)
Also, don't use string in setTimeout when possible
Working fiddle