JavaScript - Mouse Movement Affect Div's Rotation?
Similar TutorialsI've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript"> if (document.images) { /* preload images */ var subcontractorsOn = new Image (); subcontractorsOn.scr = "subcontractorsOn.gif"; var subcontractorsOff = new Image (); subcontractorsOff.scr = "subcontractorsOff.gif"; } function mouseOn (imgName) { if (document.images) document [imgName].scr = eval (imgName + "On.scr"); } function mouseOff (imgName) { if (document.images) document [imgName].scr = eval (imgName + "Off.scr"); } </SCRIPT> 2nd just calls the functions to preform the swap. this is in the <body> see code below Code: <a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')" onMouseOver="mouseOff('subcontractors')"> <img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a> any insight would be great. regards, Fatmann66 I am creating a website. I am working on the products page first. Please go here to see the site... http://www.fingerguitar.com You see those social network icons under the product description div? When the mouse rolls over the right edge I want a drawer affect that pulls the icons into view and lets the user click one of the social links. When the user rolls his mouse away from the section, the drawer should return to its position. Any help... leads or anything would be awesome and much appreciated! 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? 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 guys, I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted. Is this possible with Javascript? Here is what it looks like so far - Code: <FORM><table id='table_columns'> <tr> <td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns"> 4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr> <td align="right"><p>Column 1</p></td> <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td> </tr> <tr> <td align="right"><p>Column 2</p></td> <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td> </tr> <tr> <td align="right"><p>Column 3</p></td> <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td> </tr> <tr> <td align="right"><p>Column 4</p></td> <td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td> </tr> </table> <br /> <input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM> If 3 Columns, WIDTH4 is not viewed and defaults to "0". If 4 Columns, all are visible and the number is then optional. Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer. 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. was wondering if it made sense to optimize the comparison order inside an if() statement if one of the comparison targets is a function call eg: Code: var a = true, b = function() {return false;}; if (b() || a) {...} if (a || b()) {...} would the second statement run faster because it would theoretically never need to call b() in this situation? can the eval order be relied on? does this depend on the js engine/internal optimizations? thanks, Leon Hi, I want the image in the header of my website to move from left to right and back in an endless loop. The image width is larger than the width of the div which contains the image, so when the image moves to the right, the right end of the image has to disappear. When the image moves back to the left, the left end has to disappear. Now I know I can use the overflow: hidden; element in the CSS file to hide a part of the image. I found already several javascript scripts to move an image over the screen, but these scripts move the image only in 1 direction. I need it to go in the 2 directions in loop. Also these scripts require a position: relative; element to the image, so the hidden overflow of the div doesn't work. An example of this kind of script: Code: <body onload="moveRight()"> <div id="header" style="width: 1010px;height: 170px;overflow: hidden;"> <img src="images/header.jpg" id="header" style="position:relative;top:0px;left:0px; "> </div> <script type="text/javascript"> var userWidth = window.screen.width; function moveRight() { var pp = document.getElementById("header"); var lft = parseInt(pp.style.left); var tim = setTimeout("moveRight()",100); // 100 controls the speed lft = lft+3; // move by 3 pixels pp.style.left = lft+"px"; if (lft > 50) { // left edge of image past the right edge of screen pp.style.left = 0; // back to the left } } </script> </body> Is there any way to improve this script to my requirements, or am I completely looking in the wrong direction? 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); 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; Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code: THE HTML FILE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Greenbrain</title> <script language="javascript" type="text/javascript" src="greenbrain.js"></script> <link rel="stylesheet" type="text/css" href="greenbrain.css"> </head> <body> <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div> <div id=img_intrare> <img src="soare.png"; class="soare"> </div> </body> </html> THE .CSS FILE body {background-image:url(fondhome.png); position:fixed;} img.soare {position:absolute; left:-459px; top:100px; z-index:1;} h1.intrare {z-index:2} THE .JS FILE function intr() { var x, xi; x=0; xi=document.getElementById('img_intrare').style.left; if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"} } ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... 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 **Solved**
I want to display a different adsence add each time my page is refreshed. How could this be acomplished? Is there existing banner rotation scripts at allow you to inser scripts instead of images and links. The scripts I need to rotate look like this. add 1 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> add 2 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Hey guys, Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc. Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help. Thanks in advance! Code: <script language="javascript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=12000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="images/simple_img_11.jpg" randomimages[1]="images/simple_img_2.jpg" randomimages[2]="images/simple_img_3.jpg" randomimages[3]="images/simple_img_4.jpg" randomimages[4]="images/simple_img_5.jpg" randomimages[5]="images/simple_img_6.jpg" randomimages[5]="images/simple_img_7.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { background-color: white; margin: 0; padding: 0; } img { -webkit-transition-property: opacity; -webkit-transition-duration: 3s; position: absolute; width: 320px; height: auto; } img.fade-out { opacity: 0; } img.fade-in { opacity: 1; } </style> </head> <body style="color: black"> <img src="01.jpg"/> <img src="02.jpg"/> <img src="03.jpg"/> <img src="04.jpg"/> <img src="05.jpg"/> <img src="06.jpg"/> <img src="07.jpg"/> <img src="08.jpg"/> <img src="09.jpg"/> <img src="10.jpg"/> <img src="11.jpg"/> <img src="12.jpg"/> <img src="13.jpg"/> <img src="14.jpg"/> <img src="15.jpg"/> <script> var interval = 4 * 1; // Seconds between change var images = document.getElementsByTagName("img"); var imageArray = []; var imageCount = images.length; var current = 0; var randomize = function(){ return (Math.round(Math.random() * 3 - 1.5)); } for(var i = 0; i < imageCount; i++){ images[i].className = 'fade-out'; imageArray[i] = images[i]; } imageArray.sort(randomize); var fade = function(){ imageArray[current++].className = 'fade-out'; if(current == imageCount){ current = 0; imageArray.sort(randomize); } imageArray[current].className = 'fade-in'; setTimeout(fade, interval * 1000); }; fade(); </script> </body> So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! I'm in search for a simple and clean timed rotation script. I have these quotes, and right now they're coded so that a single quote displays and changes upon refresh. The script is really clean, and I would like to maintain the cleanliness but make the images rotate every couple of seconds. Here's the script... Code: <script type="text/javascript"> quote = new Array(3); quote[0] = "Quote 1"; quote[1] = "Quote 2"; quote[2] = "Quote 3"; index = Math.floor(Math.random() * quote.length); document.write(quote[index]); </script> It's probably a really simple piece of coding, but I'm still new to JavaScript, so it's obviously out of my range. I appreciate anyone who will help Hi, I need some help with my code for background image and title rotation! I'd like to get images one, two and three to rotate every one second, and have titles change according to the images. Currently both background and titles are not rotating.. ;-; Code: <script> window.onload = rotate; var adImages = new Array('one.jpg','two.jpg','three.jpg'); var titleImages = new Array('title1','title2,'title3'); var thisAd = 0; function rotate() { thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById("picture1").style.backgroundImage = "url(adImages[thisAd])"; document.getElementById("picture1").title = titleImages[thisAd]; setTimeout("rotate()", 1 * 1000); } </script> And here's my HTML Code: <div id="picture1" style="background-image:url(one.jpg);"></div> And here's my css Code: #picture1{ background-image: url(one.jpg);} Hi All! I'm new to the forums but discovered this site while looking for a solution to my javascript problem. I was able to find/manipulate the following code for changing a banner when a person mouse-overs a button. It is almost exactly what I want it to do, except that I'd like the following functionality to be added to it: 1) When a person hovers over a button, the image that appears should be clickable and open a webpage. 2) I would like to have the banners cycle/rotate by default until a person hovers over a button. When they hover, it should stop the cycle/rotation. Here is an example of what the code produces prior to my desired tweaks above: http://javascript.internet.com/image...e-gallery.html Here is the code I currently have: Code: <html> <head> <script language="JavaScript"> function update(url,index,isSuper) { document['PhotoBig'].src=url; } </script> </head> <body> <div style="margin-left: 30%;"> <table cellpadding="0" cellspacing="0" border="0" width="234"> <tr> <td colspan="8"><img src="images/hipaa-logo.png" name="PhotoBig"></td> </tr> <tr> <td colspan="8"><img src="images/w_spacer.gif" width="1" height="5"></td> </tr> <tr> <td width="120"> </td> <td width="24"><a onMouseOver="update('images/alz-logo.png', 0, false); return false;"><img src="images/button1.png"></a></td> <td width="21"><a onMouseOver="update('images/ecomm-logo.png', 1, true); return false;"><img src="images/button2.png"></a></td> <td width="21"><a onMouseOver="update('images/facebook-logo.png', 2, true); return false;"><img src="images/button3.png"></a></td> <td width="21"><a onMouseOver="update('images/hipaa-logo.png', 3, true); return false;"><img src="images/button4.png"></a></td> <td width="27"><a onMouseOver="update('images/swain-logo.png', 4, true); return false;"><img src="images/button5.png"></a></td> </tr> </table> </div> </body> </html> Any suggestions would be GREATLY appreciated! Thanks! jstwondrng |