move image down on scroll - javascript

usually when you scroll down on a page, the content moves up.
I need to create something similar to a window shade. Imagine a wall (your browser) with a window (a div) that has a pull-down shade (image) attached at the top. lets pretend that it's at top:-100px. When you pull the shade down (scroll down the div) the shade (image) 'reveals itself.' (goes from a top:-100px position, to top:0px position, to fill your window.
any help would be much appreciated!
this is a basic mockup that i've managed to piece together so far, from scouring similar questions here. it's obviously not working, and IT IS NOT RELAVENT TO WHAT I WANT TO DO AT ALL, but i was trying to make it relavent, but to no avail.
<!DOCTYPE html>
<html>
<head>
<script>
var $scrollingDiv = $("#aerobot");
$(window).scroll(function () {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() + 30) + "px"
}, "slow");
});
</script>
<style>
body {
height: 600px;
overflow:scroll;
}
#one {
width: 300px;
height: 400px;
position:relative;
float:left;
background-color:pink;
}
img {
z-index:1000;
top:0;
position:absolute;
width: 350px;
height: 50px;
background-color:blue;
right:0;
display:block;
}
#parent {
width: 400px;
height: 400px;
background-color:red;
position:relative;
display:block;
}
</style>
</head>
<body>
<div id="parent">
<img title="yo" src="images/aerobot.png" id="aerobot" align="right" />
<div id="one"></div>
</div>
</body>
</html>
any help would be super duper appreciated!

Here is your code. I think it is self-explanatory.
var img = document.getElementById("aerobot");
window.onscroll = function() {
var bodyHeight = parseInt(getComputedStyle(document.body).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.body.scrollTop;
var scrollPCT = (scrollTop / (scrollLimit/100)) / 100;
img.style.top = bodyHeight * scrollPCT - img.offsetHeight + "px" ;
}
FIDDLE

An easy way to get a picture to stay where it was originally placed is to use css.
The way to do this would be with a position: fixed;

Related

I need the contents of an iframe to expand like an animation and fill up the entire screen and shrink to it original size

I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);

Sticky Header - buggy jumping on scroll

I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere.
At a specific document height (scrollable until a little more than calling of sticky-effect) the sticky header jumps between position: fixed and position: static.
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
I also tried a margin-bottom on #not-sticky with the same height as the #sticky to keep a constant document-height, but the same jumpy-sticky-effect occurred.
Any idea to fix that thing?
Scroll fires too many times and trying to set an element style will always & inevitably create jumps (even barely noticeable but still jaggy).
The best way I've found is to
clone our element,
make that clone fixed
play with clone's visibility style.
Pure JS:
;(function(){ /* STICKY */
var sticky = document.getElementById("sticky"),
sticky2 = sticky.cloneNode(true);
sticky2.style.position = "fixed";
document.body.appendChild(sticky2);
function stickIt(){
sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
}
stickIt();
window.addEventListener("scroll", stickIt, false );
}());
#sticky{
height:100px;
background:#ada;
height:50px;
position:relative;
/* needed for clone: */
top:0;
width:100%;
}
/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>
So when you see the "header" fix, that's actually our fixed clone getting visible on-top.

div resize with browser

I'm trying to build a simple image viewer that resizes with the browser width/height. I believe I'm almost there. However, I need a hint on how to finish this. Here is the code. I didn't want to use jquery because I'm trying to keep this as simple and as light as possible.
Thank you,
MK
<style type="text/css">
body {
background-color: #999;
}
#fullscreenPhoto {
border: thin solid #F00;
}
</style>
<body onresize="resizeImage()">
<div onload="resizeImage()" margin="0" border="0" id="fullscreenPhoto">
<img src="resizeImage.jpg" width="100%" >
</div>
<script type="text/javascript">
var divResize = document.getElementById('fullscreenPhoto');
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_height = divResize.offsetHeight
var image_width = divResize.offsetWidth
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
divResize.style.width = "auto"
divResize.style.height = "100%"
}
else
{
divResize.style.width = "100%"
divResize.style.height = "auto"
}
}
</script>
</body>
How about setting maxHeight and maxWidth instead of width and height where it needs to be 100%. That way you may not even need to specify 'auto'
So in your example it would be
if (height_ratio > width_ratio)
{
divResize.style.maxHeight = "100%"
}
else
{
divResize.style.maxWidth = "100%"
}
The div is never loaded. It is a primitive HTML type. You have to put the onload statement in the image tag. And as the image is within the Div, you don't have to resize it. It gets stretched by the image.
Ok, here s another answer altogether (based on your comment on wanting to set the 'stretch' based on 'height'... this one doesnt event use JavaScript! Just make sure the html and body CSS property height is set to 100% and then set the image CSS height property to 100%
HTML:
<div margin="0" border="0" id="fullscreenPhoto">
<img src="http://www.walmik.com/wp-content/themes/spring/images/motif.png" >
</div>
CSS:
html, body {height: 100%; margin: 0; padding: 0;}
#fullscreenPhoto img {position:fixed; top:0; left:0; width:auto; height:100%;}
And finally, here s a working example: http://jsfiddle.net/XwBxh/
And here s a small addition in case you want to support IE6:
html { overflow-y: hidden; }
body { overflow-y: auto; }
#fullscreenPhoto img { position:absolute; z-index:-1; }

How to scroll diagonally with jQuery or Javascript

Are there projects or plugins that utilize javascript or jQuery to scroll diagonally?
e.g. when you scroll down your content, It would be pulled at the top-left corner of the browser; and when you scroll up your content would be pulled at the bottom-right of the corner.
I see some similar project/website that they animate their elements when scroll. Most of the site that use javascript has some lags with the effect though. Another i've seen is using html5 + parallax effect similar to "Nike a Better World" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)
Can you point me where can be a good starting point? Basically I want to scroll the items diagonally left-or-right. If this can be done plainly in HTML5, I would highly consider that since I feel It would have less lag or less calculation being done.
I was able to create the effect that you wanted in a fiddle:
http://jsfiddle.net/t0nyh0/8QTYt/36/
Important Tidbits
A "fixed" full-width and full-height wrapper that holds all your moving elements help you animate the div more consistently based on the scroll position (which is effectively the "keyframe" number).
scroll_max, wrapper_width, and wrapper_height helps normalize the dimensions of wrapper. I.e. the very bottom of the scroll corresponds to the bottom/right of the wrapper, and the very top of the scroll corresponds with the top/left of the wrapper.
Set your body's height to whatever number of "keyframes" that you want.
To move from top left to bottom right on going down, adjust the top and left properties. For the reverse, adjust the bottom and right properties. Of course, you will need to formulate your own calculations for more complex animations, but know that doing $window.scrollTop() will give you the "keyframe" number.
HTML
<div id="wrapper">
<div id="a">
<h1>Meats</h1>
</div>
<div id="b">
<h1>Veggies</h1>
<hr/>
<p>Veggies sunt bona vobis, proinde vos postulo esse magis daikon epazote peanut chickpea bamboo shoot rutabaga maize radish broccoli rabe lotus root kohlrabi napa cabbage courgette mustard squash mung bean.</p>
</div>
</div>​
CSS
body
{
height: 1000px; // 1000 keyframes
}
#wrapper
{
width: 100%;
height: 100%;
position: fixed;
border: 2px solid navy;
overflow:hidden;
}
#a {
position:absolute;
background-color: #daf1d7;
width: 300px;
height: 300px;
}
#b
{
position: absolute;
background-color: #d2d0ee;
width: 200px;
height: 200px;
bottom: 0px;
right: 0px;
}
​
Javscript
var $window = $(window);
var $a = $('#a');
var $b = $('#b');
var scroll_max = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var wrapper_height = $('#wrapper').height();
var wrapper_width = $('#wrapper').width();
$window.scroll(function() {
console.log(scroll_max);
$a.css({
'top': ($window.scrollTop() / scroll_max) * wrapper_height,
'left': ($window.scrollTop() / scroll_max) * wrapper_width
});
$b.css({
'bottom': ($window.scrollTop() / scroll_max) * wrapper_height,
'right': ($window.scrollTop() / scroll_max) * wrapper_width
});
});​
Here's a potential solution for you (jsFiddle example):
jQuery:
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#a').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
$('#b').css({
'width': 300-$(this).scrollTop(),
'height': 300-$(this).scrollTop()
});
});
CSS:
#a,#b {
position:fixed;
background: orange;
}
#a{
top:0;
left:0;
}
#b {
bottom:0;
right:0;
width:300px;
height:300px;
}
body {
height:2000px;
}
HTML:
<div id="a"></div>
<div id="b"></div>

Position the center of a div to given coordinates on a page

var x=200, y=140
How would I position the center of a div (width & height = 50px) to the above coordinates?
You can achieve this with pure CSS. Assuming your square div is static at 50px, parent div can have any coordinates:
.parent{
position:relative;
width:200px;
height:140px;
}
.child{
position:absolute;
top:50%;
left:50%;
margin-top:-25px; /* negative half of div height*/
margin-left:-25px; /* negative half of div width */
width:50px;
height:50px;
}
Check working example at http://jsfiddle.net/F4RVf/1/
this should work:
//onload
$(document).ready(function() {
var x=200;
var y=140;
var div = $("#myDiv");
var divWidth = div.width() / 2;
var divHeight = div.height() / 2;
div.css('left', x - divWidth );
div.css('top', y - divHeight);
});
here is the CSS
#myDiv{position:absolute; left:0; width:50px; height:50px; background-color:red;}
See it in action here: http://jsfiddle.net/cgvAB/3//
Depending on the rest of the page, you could use absolute positioning (potentially inside of a position:relative parent, if those are offsets):
<style type="text/css">
#myDiv {
position: absolute;
width: 300px;
height: 300px;
left: 200px;
top: 140px;
margin: -150px 0 0 -150px;
}
</style>
If your div is variable height/width, you'd need to do the margin bit with javascript (eg with jQuery):
<script type="text/javascript">
var $myDiv = $('#myDiv');
$myDiv.css({
'margin-left': -($myDiv.outerWidth({ 'margin': true }) / 2),
'margin-top': -($myDiv.outerHeight({ 'margin': true }) / 2)
});
</script>
<div id="mydiv" style="position: absolute; top:115px; left:175px; width:50px; height:50px;"></div>
*in case of dynamic coordinates add the following to event handling javascript function:
myDiv = document.getElementById('mydiv');
myDiv.style.top = x - 25 + 'px';
myDiv.style.left = y - 25 + 'px';

Categories