|
JavaScript - Moving With Javascript
Hello everyone. I am trying to make a flag with css and then move it with javascript.
Code: <html>
<head>
<title>Flag</title>
<link rel="stylesheet" type="text/css" href="flag3.css" />
<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}
</script>
</head>
<body>
<h1>The flag of ___ by www</h1>
<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
<script language="JavaScript">
moveObjRight(bar3);
</script>
</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window. Any help will be appreciated. Thank you. Similar TutorialsHello. I am getting to learn JavaScript, and as for my first personal project, I would like to have a page with some text on it and when the user scrolls, a div containing a picture will move with the user when they scroll. I have found a solution, however, I do not like it. Code: <html>
<head runat="server">
<title>Test</title>
<link type="text/css" href="Main.css" rel="Stylesheet" />
</head>
<body class="mainbackground">
<div id="group">
<div id="sizer" class="sizeholder"></div>
<div id="image" class="image"></div>
</div>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</form>
<script type="text/javascript" >
window.onload = function () {
onscroll = function () {
var scrollevel = document.body.scrollTop;
if (scrollevel == 0) {
if (window.pageYOffset)
scrollevel = window.pageYOffset;
else
scrollevel = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
scrollevel = scrollevel + 250;
document.getElementById("sizer").style.height = scrollevel + 'px';
}
}
</script>
</body>
</html>
As you can see, it works by getting the scroll position and adding 250, to a height property-element above the image div. I have tried to use document.getElementById("image").style.top = scrollevel + 'px', but it does not work. Any ideas??? Hello all! I am fairly experienced in HTML but javascript I am useless with. My website can be found here; http://mgwalker.site90.com/index.html If you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen. In Chrome it is centered in the div, as it should be... Please help I have no idea why this would happen! I have a website at: http://www.zionism101.org/defaultfornow.aspx The page works on Google Chrome, Mozilla Firefox, and IE-9. It sort-of works on IE-8, however, the problem is that on IE-8, there is about 2 seconds where everything is shown on top of everything else in a mess. This is bad. The website is unusual in that it uses a menu to slide screens from right to left. This has implications. For instance, I need the menu to appear on all screens, so I use absolute positioning, and then use javascript to calculate the center position. The same goes for a logo image. And on top of that, some screens (which are really DIVs) have items positioned by absolute and relative positioning within them, and those positions are often calculated via javascript (and then set). On IE-8, the result is not good. I think what is happening is that the browser first shows everything as it appears before javascript is run, and then slowly the javascript is run, which puts everything in the correct position. So initially, not only is everything in the wrong position, but different DIVs appear on top of each other. I could tell every user to get IE-9 or chrome, but thats not a good solution. Thanks, Gid P.S. one solution might be to make the screen go black for an instant, until everything has settled down. If thats the only solution, how would I do that? P.P.S. there are actually 3 pages in the site: the login page, the logout page, and the founders page. Everytime the user switches between them, the jumble for 2 seconds occurs. What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
Hi, I'm noob , but i have nice idea i want to do it but i can't .. i tried many ways to do it .. but didn't work any of them .. the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room like this pic : I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. I'm trying to create something like: http://www.deliciouslysortedibiza.com/ But I want the links to move like it does in there. Does anyone know the easiest way I could achieve this? Since I'm fairly new to Javascript and all. Thanks ! Hello, I'm newbie in javascript, but i want to make an moving image. In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^ Any advices, tutorial links or smthing.. Thx Hi there folks. I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen. I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those. The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further! Any help is greatly appreciated. Hello, I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable. Code: <center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
<script language="JavaScript">
var Image = document.getElementById("Ball");
var Position = 100;
function moveDown()
{
Image.style.top = Position + 20
}
</script>
Thanks, Celia Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything. What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll. Can anyone point me in the right direction? Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript'> <script type = 'text/javascript'> function unselectall(form) { var i=0; for(i=0;i<=15;i++) { tdname = 'invbox'+i; if (document.getElementById && document.getElementById(tdname).style) { document.getElementById(tdname).style.borderColor = '#000000'; form.selected.value = 0; } else { i=20; } } } function selectthis(form, pos) { unselectall(form); var tdname = 'inventory'; document.getElementById(tdname).style.borderColor = '#ffff00'; form.selected.value = form.position1.value; } </script> </head> <body> <form id='inventorytable' method='post' action='addflowerlight.php'> <table id='inventory' border=1> <tr> <td id = 'invbox1' ><img src = 'images/Lights/6inv.jpg' onclick="selectthis('inventorytable', 1);"><input type = 'text' id = 'position1' value='6'></td></tr></table> <input type ='text' id='selected'> <input type ='submit' value='Equip Light'> </form> </body> </html> What am I doing wrong? The onclick wont trigger. Hi Guys, seen some pages who give alerts or Warnings mentioning that i'm moving away from my webpage. Best example is hotmail when you are on the compose mail screen and when click another link it is asking for confirmation. Can you one please shed some light on how to do this. Your help is greatly appreciated. Cheers Dileep Hello ! I'm searching help regarding a script, function, or w/e that could enable me to move a DIV with acceleration & deceleration. Note: the DIV has a setTimeout on it to change sprites (I'm basically moving a little character) More details for what the script/function has to do - One function to start - It's accelerating from 1px/X to 5px/X (where X is in millisecond) in Y millisecond - One function to stop (which is obviously decelerating from 5px/X to a fixed position in Y millisecond (same as acceleration) Currently I have a stupid script whe First occurence of key pressing starts the move, and the continuous keypress occurence makes my object move 5px. I'm pretty sure it takes hugue amount of time for the browser to do it, so I'm trying to improve. My ideas: - Improve this method, obviously not a good solution in my opinion - Using a while loop that will trigger moving every Y millisecond (But that might kill the sprites's setTimeout) - Massive setTimeout every Y millisecond (Would that be good ?) - Using somehow a sleep() php-like function (It doesn't exist in JS ?) I hope I can improve my system quickly Thanks for helping, nico I have 2 DIVs on a page, Div1 and Div2. I want to copy the contents from Div1 into Div2, then suppress the contents of Div1. I want to do this when the page loads. This is what I did: Code: <div id="Div1" style="color:red;">This is the text to be moved</div>
<div id="Div2" style="color:green;"></div>
<script type="text/javascript">
function swapIt()
{
document.getElementById('Div2').innerHTML = document.getElementById('Div1').innerHTML;
document.getElementByID('Div1').style.display = "none";
}
onload = swapIt();
</script>
This, of course, does not work, but I don't know javascript well enough to figure out why. Could someone give me an example of what would work in this case? Hi All I am currently working on a site using Lightbox 2.04 and all i would like to do is make a slight alteration to it's basic function and that is: Move the Cation and close button to the top of the display rather than the bottom. This however appears to be proving a little tricky, i have searched the net to no avail and pretty much moved everything around in the .js file and have even had an open post on Huddletogether for the last few weeks but to no avail. Can anyone help. Please!!! Thanks in advance. My code is: Code: <html>
<head>
<script type='text/javascript'>
winx=220
winy=176
self.resizeTo(winx,winy);
</script>
<img id="default"
style="z-index: 0;left: 0; position: absolute; top: 0px"
height=32 width=32 align=baseline border=0 hspace=0 src='save.gif'></p>
<script type="text/javascript">
document.getElementById("default".style.top = '0px';
document.getElementById("default".style.left = '0px';
</script>
The image shows up, but it doesn't move. I can't seem to find out what I'm doing wrong. Edit: Finally spotted it, I was missing a ")" ._. |
|||||||