JavaScript - Move An Image With Javascript And See The Actual Movement (please Help !)

I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled.
Here is my code so far.

<form name="form1" method="post" action="">

Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')">

Beef
<INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br>

</FORM>


<form>
<p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;">
Shoulder: <br />

Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br />
Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or
Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br />
Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br />
Specific Cuts wanted:<br />
<textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea>
</div>
</form><br />
<div id="divt2" style="visibility:visible; position:absolute; top ">
Type 2 Input:
<input name="t2" type="text" value="">
</div>
<BR>
</p>
<script type=text/javascript>
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
if (isDOM)
{
if (_h=='s') document.getElementById(_w).style.visibility='visible';
if (_h=='h') document.getElementById(_w).style.visibility='hidden';
}
else if (isIE) {
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
}
else if(isNS4)
{
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>

I need the image to move horizontal instead of vertical. Here is the code.

Code:

        //##########################################################################//
	// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
        // Original Source code: http://youlove.us/
        // Modified and extended by Kudos Web Solutions
        // copyright 2009 kudoswebsolutions.com
        //##########################################################################//

$(function() {
	// Define the height of your two background images.
           //The image to scroll
	   var backgroundheight = 2000;
           //The image to overlay
	   var backgroundheight_two = 1000;
	// Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));

 
	function scrollbackground() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container3').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
	function scrollbackground2() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container2').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground2();
			}, 100
		);
   	}

	// Initiate the scroll
	scrollbackground();
	scrollbackground2();

	// Use the offset defined earlier and apply it to the div.
   		$('#overlay').css("background-position", "50% " + offset2 + "px");
   		$('#overlay2').css("background-position", "50% " + offset2 + "px");
});

Hi,

I'm stumped at the moment trying to make something a little like seen on
Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed.
Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a
textbox it image must move to that position witin the iframe.

Any help will be appreciated.

Regards,
Sreejith

Anyone know of a good tutorial for making an object move repeatedly while a key is held down (ie move right 1px every second while right arrow key is held?)

Hi to all,
I am newbie in JS, and I hope that you can help with one javascript

I am trying to use my function for move of image on menu

the function JS function is
Code:

    var start0l = document.getElementById('arrow1').offsetLeft, maxPoz0, timer0;

    function StartPosun(imgId, maxPoz) {
        clearTimeout(timer0);
        maxPoz0 = maxPoz;
        document.getElementById(imgId).style.left = start0l + 'px';
        timer0 = setTimeout("posun0()", 1);
    }

    function ReturnPosun(imgId) {
        clearTimeout(timer0);
        timer0 = setTimeout("ret0()", 1);
    }

    function ret0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) > 0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) - 1) + 'px';
            timer0 = setTimeout("ret0()", 3);
        }
    }

    function posun0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) <= maxPoz0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) + 1) + 'px';
            timer0 = setTimeout("posun0()", 3);
        }
    }

and the html is

Code:

<ul><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="Aktuality" href="?cz_aktuality,22">
    Aktuality
    <img style="position: absolute; left: 306px;" alt="Aktuality" src="templates/img/menu_arrow.png" id="arrow1">
  </a><ul class="sub1"><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="AKCE: Bike Music Fest 2011" href="?cz_akce-bike-music-fest-2011,34">
    AKCE: Bike Music Fest 2011
    <img style="position:absolute;" alt="AKCE: Bike Music Fest 2011" src="templates/img/menu_arrow.png" id="arrow1">
  </a>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="AdventureMenu v prodejně TOURATECH CZ" href="?cz_adventuremenu-v-prodejne-touratech-cz,33">
    AdventureMenu v prodejně TOURATECH CZ
    <img style="position: absolute; left: 306px;" alt="AdventureMenu v prodejně TOURATECH CZ" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="TOURATECH TravelEvent 2011" href="?cz_touratech-travelevent-2011,32">
    TOURATECH TravelEvent 2011
    <img style="position: absolute; left: 306px;" alt="TOURATECH TravelEvent 2011" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="O produktu" href="?cz_o-produktu,31">
    O produktu
    <img style="position:absolute;" alt="O produktu" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li id="selected" class="l3">
  <a onmouseout="ReturnPosun('arrow3')" onmouseover="StartPosun('arrow3',15)" title="E-shop" href="?cz_e-shop,25">
    E-shop
    <img style="position: absolute; left: 306px;" alt="E-shop" src="templates/img/menu_arrow.png" id="arrow3">
  </a>
</li><li class="l4">
  <a onmouseout="ReturnPosun('arrow4')" onmouseover="StartPosun('arrow4',15)" title="Samoohřev" href="?cz_samoohrev,23">
    Samoohřev
    <img style="position: absolute; left: 306px;" alt="Samoohřev" src="templates/img/menu_arrow.png" id="arrow4">
  </a>
</li><li class="l5">
  <a onmouseout="ReturnPosun('arrow5')" onmouseover="StartPosun('arrow5',15)" title="Partneři" href="?cz_partneri,21">
    Partneři
    <img style="position: absolute; left: 306px;" alt="Partneři" src="templates/img/menu_arrow.png" id="arrow5">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="Kontakty" href="?cz_kontakty,24">
    Kontakty
    <img style="position:absolute;" alt="Kontakty" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>

and the problem is, that I can move with the first one, but I don't how I can move with the others like alone function
I thought that I can use somethink like if (onmouseover == true) .... but I failed
can someone hellp with this problem pls?

How could you say make a x move around a grid using the arrow keys?

Hey guys, I just started to create my first Javascript game. It is a platformer and i just cant figure out how to do the movement. ATM my "character" is just a black rectangle. Here is my code. I have not been able to find the bug.

var c = document.getElementById("mainCanvas");
var ctx = c.getContext("2d");
var level1 = new Image();
level1.src = "Textures/level1.png"
level1.addEventListener("load", function() {ctx.drawImage(level1, 0,0,1024,1024)
ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512
//Render
function playerRender() {ctx.fillRect(playerX, playerY, 55, 118)}
window.addEventListener("keydown", function(evt){
if (evt.keycode == 87) {playerY-=10}
})
var RenderPlayerInterval = setInterval(playerRender() ,10)





Reply With Quote




01-25-2015, 12:34 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Code:

ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512

When you *CALL* that fillRect, neither playerX nor playerY has yet been defined!

SO you are essentially doing Code:

ctx.fillRect( null, null, 55, 118)

And where are the semicolons on the end of EACH LINE. Yes, I know they aren't required. But put them in. It will save you from grief someday.

Is there a way with Firefox/Chrome to get the actual % used instead of the rendered pixel values?

For example I have a table with the following CSS markup
Code:

#tableFoo : { width : 50%; }

In IE to get the percentage set in the CSS file, it is as simple as:

Code:

var width = tableObj.currentStyle["width"]

I am having trouble figuring out a way to get the percentage value with Firefox and Chrome. I am thinking it is not possible other than stylesheet sniffing and ripping out the rules that way which I am not going to do.

Thanks,
Eric

Heres what I did
Created 4 variables
1 - to get which direction the person is pressing (leftright)
2 - if the person is pressing up
3 - to set a direction when a person is pressing any buttons
4 - for images

I made every .05 seconds there should be a check on the conditions for buttons pressed and where the picture is.

Aptana didn't find any errors and personally, I don't like using the program anyway because it makes me feel overwhelmed

If someone could help me pick out the peice that is wrong, that would be nice

should I use the preload as my image source, or keep it as imgs?

Code:

var yvel, i, imgs, updown, ground, reft, leftright, MAX_X, MAX_Y, MIN_X;
MAX_X = 500 /* parseInt(game.style.width) + parseInt(game.style.left); */
MIN_X = 300 /* parseInt(game.style.left); */
MAX_Y = 900 /* parseInt(game.style.height) + parseInt(game.style.top); */
updown = 0;
leftright = 0;
ground = 0;
reft = 1;
yvel = 0;

function init(){
  var guy = document.getElementById("guy");
  imgs=["stand.png", "standleft.png", "jump.png", "jumpleft.png", "walk.png", "walkleft.png", "finishjump.png", "finishleft.png"];
  var preload = new Array();
  for(i=0; i<imgs.length; i++) {
    preload[i]= new Image();
    preload[i].src = imgs[i];
  }
  i = 0;
  document.onkeydown=keyDown;
  document.onkeyup=keyUp;
  movesprite();
}

function movesprite(hori, vert){
  var game = document.getElementById("game");
  x = parseInt(guy.style.left);
  y = parseInt(guy.style.top);
  if (ground = 0) {
    yvel += 3;
    if (hori == 1) { x += 1; right(1); reft = 1; }
    if (hori == -1) { x += -1; left(1); reft = 0; }
    if (hori == 0) { stand(1); }
  }else {
    if (hori == 1) { x += 3; right(0); reft = 1; }
    if (hori == -1) { x += -3; left(0); reft = 0; }
    if (hori == 0) { stand(0); }
    if (vert == 1) { yvel += -15; jump(); }
  }
  checkBounds();
  guy.style.left = x + "px";
  guy.style.top = y + "px";
  setTimeout("movesprite(updown,leftright)", 50);
}

function checkBounds(){
  if (x >= MAX_X)
    {x = MAX_X;}
  if (x <= MIN_X)
    {x = MIN_X}
  if (y + yvel >= MAX_Y)
    {y = MAX_Y; ground = 1;}
  else {ground = 0; y += yvel;}
}

function jump(){
  if (reft == 1) {guy.src = imgs[2];}
  else {guy.src = imgs[3];}
}

function left(ground){
  if (ground == 1) {
    if (guy.src == imgs[1]) {guy.src = imgs[5];}
    else {guy.src = imgs[1];}
  }else {guy.src = imgs[7];}
}

function right(ground){
  if (ground == 1) {
    if (guy.src == imgs[0]) {guy.src = imgs[4];}
    else {guy.src = imgs[0];}
  }else {guy.src = imgs[6];}
}

function stand(ground){
  if (ground == 1) {
    if (reft == 1) {guy.src = imgs[0];}
    else {guy.src = imgs[1];}
  }else {
    if (reft == 1) {guy.src = imgs[6];}
    else {guy.src = imgs[7];}
  }
}

function keyDown(e){
  if (e.keyCode == 37) {leftright = -1;} /*left*/
  if (e.keyCode == 38) {updown = 1;} /*up*/
  if (e.keyCode == 39) {leftright = 1;} /*right*/
/* if(e.keyCode == 40) is down */
}

function keyUp(e){
  if (e.keyCode == 37) {leftright = 0;}
  if (e.keyCode == 38) {updown = 0;}
  if (e.keyCode == 39) {leftright = 0;}
}

onload=init;

Hello everyone,im new to programming and have been learning a little bit of JavaScript.Im mostly learning it for a program called unity 3d,Its a game engine.And well,im stuck and can't figure this part out.i was wondering if anyone could help me.
the script is to make the character move forward and shoot.but the character jumps instead of moving forward. any advice?
Code:

var speed = 3.0;

var rotateSpeed = 3.0;

var bullitPrefab:Transform;



function Update () 

{

		var controller : CharacterController = GetComponent(CharacterController);

		

		// Rotate around y - axis

		transform.Rotate(0, Input.GetAxis ("Horizontal") * rotateSpeed, 0);

		

		// Move Forward / backward

		var forward = transform.TransformDirection(Vector3.forward);

		var curSpeed = speed * Input.GetAxis ("Vertical");

		controller.SimpleMove(forward * curSpeed);

		

		if(Input.GetButtonDown("Jump"))

		{

			var bullit = Instantiate(bullitPrefab, GameObject.Find("spawnPoint").transform.position,

Quaternion.identity);

		}	

}



@script RequireComponent(CharacterController);

Hello,
I am trying to move each cell content from one table to another table. I do not want to lose the value of each cells in table1, but just to show how I got table2
from table1. I would like to show/animate the movement. So when the user clicks the button the data from table1 will scroll towards table2.
I am new to HTML/javascript programming I really appreciate your help

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.