Develop Reference

How to make other styles set as default when we changing class of element using JavaScript

I have created div and place it right margin of the page with position:fixed. I need to place the div to bottom margin when I call the JavaScript function. I tried to use classList.add() and classList.remove() to accomplish my task.
here is the CSS classes I created,
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
}
This is JavaScript code what I tried,
function test(){
document.getElementById('target').classList.remove('example-right');
document.getElementById('target').classList.add('example-bottom');
}
When I trigger the test() function it removes the example-right and replace it with example-bottom. But the div's top value is not going to change after the function is triggered. So, it is not place the div on bottom margin of the window. I can puttop:## px; to example-bottom. But when page is resizing and
Is it possible to Solve this problem using CSS. I know I can use document.getElementById('target').style.top = window.innerHeight- div_Height to change the top value. but I like to know is there any way to do it using css or another method. (otherwise I have to use JavaScript all the times when I need to change the position)
pure CSS and JavaScript only

You . have done right. Only thing is understanding a bit of css more.
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
top:inital
left:50px;
bottom:0px;
}

add this css
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
top:auto;
}
function test(){
document.getElementById('target').classList.remove('example-right');
document.getElementById('target').classList.add('example-bottom');
}
.example-right{
position:fixed;
top:50px;
right:0px;
}
.example-bottom{
position:fixed;
left:50px;
bottom:0px;
top:auto;
}
#target{
width:200px;
height:200px;
background:red;
}
<div id="target" class="example-right">
</div>
<br/>
<button onclick="test()">Click</button>

Making a canvas animation a background element on a parent div

Currently I have this piece of code running a canvas animation that shows subtle stars moving and sparkling. Currently the canvas is it's own element but I'm wanting to move it to be a background element on a parent div. Can anybody show me how to do this. JS fiddle attached here - https://jsfiddle.net/83aahcng/
<div id="container">
<canvas id="pixie"></canvas>
</div>

I would just put a div over pixie like this... div over pixie.
HTML:
<div id="container">
<div id="over_stuff">
Here's some stuff over #pixie!
</div>
<canvas id="pixie"></canvas>
</div>
CSS:
#container {
overflow:hidden;
position:relative;
z-index: 1;
}
#pixie {
z-index:0;
background:#010222;
background:
}
#over_stuff{
color:white;
position:absolute;
top:0px;
left:0px;
z-index:5;
padding:10px;
}
Is there is something I'm not understanding? This seems way too simple

Overlay for images doesn't work

I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!

I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.

Is it possible to position an element with absolute positioning relative to a container if it is OUTSIDE the container?

Lets say you have two divs:
<div class="div1"></div>
<div class="div2"></div>
div1 has relative positioning and div2 has absolute positioning. Can div2 be positioned as if it was inside div1 either using CSS or pure Javascript?

Using JavaScript.
You have to wrap divs inside parent container with position: absolute and set div2 position to absolute as well.
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>
And then using javascript:
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
div2.style.left = div1.offsetLeft + 'px';
div2.style.top = div1.offsetTop + 'px';
See JS fiddle

Maybe this fits your question? http://jsfiddle.net/bghxmm3o/
Absolute div2 (blue) positioned into relative div1 (red).
It's just CSS:
#d1 {
position:relative;
top:10px;
left:10px;
width:200px;
height:200px;
background:red;
}
#d2 {
position:absolute;
top:100px;
left:50px;
width:20px;
height:20px;
background:blue;
}

Yes and no, it depends on how you build it and the surrounding HTML. If you put this code directly inside the body then yes, because the body would then be the parent element of both .div1 and .div2. And if you didn't know it already positioning something absolute positions the element to the top left corner of the "closest" relative positioned parent element. (Hard to explain in text)
But if you were to have other HTML outside these two div elements, then you would need a parent element with a position relative.
So as an example:
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS
.parent {
float:left;
position:relative;
}
.box1 {
width:100px;
height:100px;
float:left;
position:relative;
}
.box2 {
width:100px;
height:100px;
position:absolute;
}

CSS / JS transform:translate3d and scrolling - smooth on Android, no momentum on iPhone

I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.

I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.