I've done some work with parallax scrolling and resizing my image using javascript, but I cannot figure out how to getting a homepage to line up perfectly with the edge of the window.
The code I have does not line up with the bottom edge of the webpage.
If I do a fix value I can get it to line up; however, depending on whether or not someone has a toolbar it messes up the alignment.
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 2700px;
width: 100%;
margin-top:-10px;
background-color:#4dbbac;
position: relative;
z-index:1;
}
</style>
</head>
<body onresize="myFunction()">
<img id="image" src="IMG.JPG" style="margin:;" />
<div id="content"></div>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var yourImg = document.getElementById('image');
yourImg.height = h;
yourImg.width = w;
}
</script>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .5 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</body>
</html>
i'm not sure if i got your question right but why you dont use bottom property?
image.style.bottom = 0;
Related
I tried to use appendChild function in order to create a new image node with some style properties. After using it, all properties vanishes. The images supposed to be randomly positioned on the leftSide div, however, actually, they are put align in a row.
<html>
<head>
<title>Matching Game</title>
<style>
#rightSide {
position: absolute;
left: 700px;
border-left: 1px solid black;
width:700px;
height:700px;
}
#leftSide {
width:700px;
height:700px;
position: absolute;
}
</style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id='leftSide'>
</div>
<div id='rightSide'>
</div>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById('leftSide');
var generateFaces = function() {
for(var i = 0; i < numberOfFaces; i++)
{
var img = document.createElement('img');
img.src = 'smile.png';
img.style.top = Math.floor(Math.random()*600);
img.style.left = Math.floor(Math.random()*600);
theLeftSide.appendChild(img);
}
}
</script>
</body>
</html>
http://i.stack.imgur.com/fZaYA.png
Math.floor(Math.random()*600); is going to return a number. Unless the value is 0, the CSS left and top properties require a length. Lengths have units.
Additionally, you haven't changed the position property away from static, so the left and top properties will have no effect as they apply only to positioned elements.
that should solve your problem.
var img = document.createElement('img');
img.style.top = Math.floor(Math.random()*600) + 'px';
Im not sure what im doing wrong, but iv created 5 images placed at random positions in the left div and i want to copy all 5 - the firstchild and place them on the right side. So il have 5 images on the left and 4 on the right. I debugged my if with alert and it does run, but i cant figure out what wrong with my code? Why is it not print images to the right hand side? Any help is appreciated thank you
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNode[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
You have a typo in this line:
leftSideImages.removeChild(leftSideImages.childNode[0]);
it should be:
leftSideImages.removeChild(leftSideImages.childNodes[0]);
Full code:
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNodes[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
I am attempting to make a image move randomly using plain javascript.
Upon the event onclick the image location should move according to the random number that is generated.
Here is my code:
<html>
<head><title> Move Image </title>
<style type="text/css">
#smiley { position: relative; top: 0px; left: 0px; }
</style>
<script type="text/javascript">
function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";
obj.onclick= "changeImg();"
}
</script>
</head>
<body>
<img id="emotion"
src="http://www.google.com/images/srpr/logo4w.png"
width="42" height="42">
</body>
</html>
Any idea?
Thank you!
This one works without inline script in all browsers
Codepen demo
var object = document.getElementById('item');
object.onclick=function(){
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
object.style.top = x + 'px';
object.style.left = y + 'px';
};
HTML
<img id="item" src="http://...png" />
CSS
#item {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
transition: all 1s;
}
You're never assigning changeImg() to the <img>
<img ... onclick="changeImg()">
The element must be position: absolute if you plan on using top and left.
The <img> tag has the ID of emotion, not smiley.
You don't need to set the <img>'s onclick property each time the changeImg() function is called. Once is enough.
You never set the position of the image object. Instead, you set "smiley" to relative, but the image is "emotion".
Try
#emotion{ position: relative; top: 0px; left: 0px; }
I would suggest you to call the function rather than the string literal.
example:
obj.onclick = changeImg;
<html>
<head><title> Move Image </title>
<style type="text/css">
#emotion { position: absolute; top: 0px; left: 0px; border:1px solid red;}
</style>
<script type="text/javascript">
function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";
}
</script>
</head>
<body>
<img id="emotion"
src="http://www.google.com/images/srpr/logo4w.png"
width="150" height="42" onclick="changeImg()"/>
</body>
</html>
I have posted my problem at http://jsfiddle.net/ugnf4/ as it would be make it easier.
Below is my html / javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" style="background: #cdcdcd;"></div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
});
</script>
</body>
</html>
Currently #mainContainer div has overflow hidden as i dont want to show scroll bars and #pageContainer div (inner div) is scaled at 1.37 using css3, as in certain cases based on screen / browser width height #pageContainer's content would be hidden because of overflow hidden.
I want to code javascript so that if somebody moves cursor in #mainContainer, based on position of mouse X and Y co-ordinates I would like to move #pageContainer so that similar position of #pageContainer would be visible (I hope it is clear).
I m having problem as I m using -webkit-transform-origin, unable to understand how to move #pageContainer around with respect to mouse co-ordinates of #mainContainer.
UPDATE:
I m looking something like what happens in issuu.com website when you open an ebook and zoom it more than the browser size (Should make it more clear)
I m looking for algo or pointer how to achieve it (how to calculate it) not necessarily a working script.
How can this be achieved.
Below is working html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" >
<div id="pageContainerInner"style="background: #cdcdcd;">
</div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
#pageContainerInner {
position: relative;
width: 1218px;
height: 774px;
border: 1px solid #000000;
top: 0;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
var pageWidth = 1220;
var pageHeight = 776;
var scale = 1.37;
var scaledDelta = 5; //Percentage mouse position approximation
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
// Calculate the offset of scaled Div
var offsetX = $('#pageContainer').offset().left;
var offsetY = $('#pageContainer').offset().top;
// Calculate div origin with respect to screen
var originX = (-1 * offsetX) / scale;
var originY = (-1 * offsetY) / scale;
var wWdt = $(window).width();
var wHgt = $(window).height();
// Now convert screen positions to percentage
var perX = e.pageX * 100 / wWdt;
var perY = e.pageY * 100 / wHgt;
// Div content which should be visible
var pageX = perX * pageWidth / 100;
var pageY = perY * pageHeight / 100;
// Calculate scaled divs new X, Y offset
var shiftX = (originX - pageX) + (e.pageX / scale);
var shiftY = (originY - pageY) + (e.pageY / scale);
$('#pageContainerInner').css({'left': shiftX+'px', 'top': shiftY+'px'});
});
</script>
</body>
</html>
Hope this will help others.
I have posted a probable solution at http://jsfiddle.net/PYP8c/.
Below are the modified styles for your page.
BODY {
margin: 0px;
padding: 0px;
}
#mainContainer {
width: 100%;
overflow: hidden;
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#pageContainer {
position:absolute;
top:0px;
}
This is the javascript code for the same.
$(document).ready(function() {
//setHeight();
//$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
var contentHeight = $("#pageContainer").height();
var minTop = 774 - contentHeight;
if(minTop>0)
minTop = 0;
var currTop = ((e.pageY-10)/774.0)*(minTop);
document.getElementById("pageContainer").style.top = currTop+'px';
});
Its just a demo on how you could get the text to move based on the mouse coordinates.
You could make a lot of changes, like adding a scrollbar that fades which gives the user a feedback about how much content is still available in both the vertical directions.
Also I have used hard coded values for height, but in your final version I would recommend you get the height of the mainContainer division dynamically.
I have a pretty huge image being displayed in a container, the image stretches with the view port as it gets resized, but as the image is so big I have added scroller buttons to the side of the page, up and down, the only problem I have now is that when I press up or down there is no limit, the user can keep going until the image is completely out of sight, how can I stop that from happening?
Here is the code I have thus far,
HTML:
<body>
<div id="wrapper">
<div class="scroll top"></div>
<div id="content">
<div id="zoom_container">
<img id="image" src="8052x2000px" />
</div>
</div>
<div class="scroll bot"></div>
</div>
</body>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
height: 100%;
max-height: 100%;
}
#content {
min-height: 100% !important;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#image {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jQuery:
//side scroller bar
$('.scroll').live('click', function(){
var direction = $(this).hasClass('top');
var img_pos_top = $("#zoom_container img").position().top;
var inc = 0;
inc = $("#zoom_container img").height() / 10;
if(direction)
{
inc = $("#zoom_container img").position().top + inc;
}
else
{
inc = $("#zoom_container img").position().top - inc;
}
$("#zoom_container img").css({ position: 'relative',top: inc });
});
so as you can see I am incrementing or decrementing the top positioning of the image by 10% of it's height each click, how can I make sure the top of the image will never go further down than the top of the viewport and the bottom of the image never further up than the bottom of the viewport?
Is there a better more efficient way of achieving the same result?
Have a try this one.
<html>
<head>
<title>Canvas Sizing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var canvasContext;
resizeCanvas();
$(window).resize(function() { resizeCanvas() });
function resizeCanvas()
{
var w = window.innerWidth - 40;
var h = window.innerHeight - 40;
var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';
$('#contentholder').empty();
$(canvasString).appendTo('#contentholder');
canvasContext = $('#mainCanvas').get(0).getContext('2d');
drawOnCanvas();
}
function drawOnCanvas()
{
var x = 15;
var y = 35;
canvasContext.font = "30pt serif";
canvasContext.fillStyle="#0f0";
canvasContext.fillText("Hello World!", x, y);
}
});
</script>
<style>
#mainCanvas
{
background-color: #000;
border: solid 3px #0F0;
}
body
{
background: #000;
}
#contentholder
{
width: 99%;
height: 99%;
margin: auto;
}
</style
</head>
<body>
<div id="contentholder"></div>
</body>