|
JavaScript - Moving A Div Forward Pixel By Pixel
I'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat.
But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere. I call a function from the xhtml document like so: Code: <body onload = "moveText()">
<div id="movingText">
<p>This message should scroll forward</p>
</div>
............
and the function looks like: Code: function moveText() {
var movingText = document.getElementById("movingText");
movingText.style.left = (parseInt(movingText.style.left) + 1) + "px";
setTimeout("moveText()", 50);
}
it seems so clear cut, I can't imagine what could be wrong but apparently all my browsers don't like it. Anyway spot anything? Similar TutorialsHello... Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div. I'm new to Javascript, but am learning it. Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser. Here's the code : Code: <script language="javascript">
var divh = document.getElementById('top').style.pixelHeight;
</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>
this gives me undefined in my browser What am I doing wrong?? Thanks Kevin How do I get the pixel position of the caret in an editable IFrame? I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob Hello All, I'm about to pull my hair out dealing with this pixel. This is the information CJ has given me. The OID (order ID) is a unique alphanumeric ID that needs to be generated on your end, and will be assigned to each unique transaction that occurs. If the OID is not unique, meaning if our system detects a duplicate OID for another transaction, the second transaction will be ignored, which is why it is important that unique OIDs are generated for each transaction (in your case, for each lead form that is completed and submitted) and What I would suggest doing for your OID, is hardcoding a time and date stamp into the pixel to act as the OID. When you do this, you must exclude any symbols (colons, slashes, periods, etc) from the time/date stamp, and have the time be recorded all the way down to the millisecond. Since it will be extremely rare (if it happens at all) that two transactions will occur within the same millisecond, it will create a unique number to act as the OID for each lead that is submitted. I have no idea what this means or how to do it. Here's an example of a pixel. http://cj.com/u?CID=1520654&OID=Invo...TYPE=344815&IT EM1=lead&AMT1=0&QTY1=1&CURRENCY=USD& METHOD=IMG" height="1" width="20"> Someone please help, I am at my wits end. What are these used for? How are they done in JS? Any refs online?
Hard to explain so: On my site, on the 'edit profile' page, I have this code to give a field value (because the back end code is hidden as it's a purchased script): Code: <table>
<tr>
<td>
<span class="title">
Facebook URL:
</span>
<br/>
<span class="details">
Enter the full URL
</span>
</td>
<td align="left">$ControlPanelMyProfileUser-profile_facebook$</td>
</tr>
</table>
<script type='text/javascript'>
if($('profile_facebook').value == "") {
$('profile_facebook').value = "http://";
}
</script>
Then, on the users profile page I have this code to hide a row if no info or just http:// is entered: Code: <ul>
<li id="facebook1"><a href="$RateViewProfileUser-profile_facebook$">Facebook Profile</a></li>
</ul>
if(document.getElementById('facebook1').innerHTML=='<a href="">Facebook Profile</a>')
{
document.getElementById('facebook1').style.display='none';
} else if(document.getElementById('facebook1').innerHTML=='<a href="http://">Facebook Profile</a>')
{
document.getElementById('facebook1').style.display='none';
}
In IE, on the users profile page, the source is showing: Code: <a href="http://">Facebook Profile</a> But, the li item with ID of facebook1 isn't hiding and when hovering over the link it shows "http:///" which may be why it's not working? Even though the source shows "http://"?? Any ideas why it isn't hiding? So far what I have the animation just..repeats over and over again, it doesn't go forward and backward as a seem-less bouncing little pin. Rattling my brain here, any help? I uploaded it to my server he http://www.boomspeed.com/alenna06/BouncingPushPin.html Also zip file attached Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pin bouncing</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
var pins = new Array(9);
var curPins= 0;
var direction;
var begin;
for (var i = 0; i < 9; ++i){
pins[i]=new Image();
pins[i].src="pin" + i + ".gif";
if (i == 8)
begin = setInterval("bounce()", 90);
function bounce() {
if (curPins == 8){
curPins = 0;
}
else
++ curPins;
document.getElementsByTagName("img")[0].src = pins[curPins].src;
if(curPins == 0){
direction = "up";
}
else if (curPins == 8)
direction ="down";
document.getElementsByTagName("img")[0].src= pins[curPins].src;
}
}
/* ]]> */
</script>
</head>
<body>
<img src="pin0.gif" alt="Image of push pin bouncing" />
</body>
</html>
Hi, Sorry very beginner in JS I am using formmail and JS to collect booking info calculates a total and sends to email. Formmail redirects to a thankyou page. Here I can send the total to paypal. I have looked and looked, but cant work out how to pass the total from the booking form to the thankyou page. How can I do this simply. Code not supplied because its nothing wonderous. Thanks Hi Everyone, I have the following problem that I have been trying to figure out for a few hours now and am hoping someone can give me a help out. I am opening a popup - this popup is solely to take an image url and as such has one field. On this 1st popup I have a 'button' which when clicked launches a 2nd popup window containing a file browser. The user selects the file by double clicking on the image they want, the url is passed back to the 1st popup, poulating the field and the 2nd popup is closed. Work perfectly in FF etc.. but in IE7 and IE8 it will not work. I am using the following function, linked to the button in the 1st popup, to open the 2nd popup window pass across the name of the field and the window object to the 2nd window. Code: function popupTwoInit(file_path, field_name, win) {
var w = window.open(file_path, null, 'toolbar=yes,menubar=yes,width=900,height=600');
w.fileFileField = field_name;
w.fileFileWin = win;
}
Where w is holding the window object created by the window.open, field_name is the name of the field on the popup that I wish to pass back a value to and win is the window object of the 1st popup. I am using this function as the callback to poulate the field in the 1st dialog after an image in the 2nd dialog has been selected: Code: filebrowser_callback(url) {
window.fileFileWin.document.forms[0].elements[window.fileFileField].value = url;
window.fileFileWin.focus();
window.close();
}
So this function accesses the passed through window object and field name from the window.open function, populates the field, gives the 1st popup focus and closes the 2nd popup. I thought about using opener in the 2nd popup to access the window object and field in the 1st popup but opener seems to refer to the main page in the browser - perhaps because I am using 2 popups OR I have got that wrong. Like I say works perfectly in FF but IE is always undefined for both 'window.fileFileWin' & 'window.fileFileField' which seems to suggest that the object is not interpreted by IE in the first function? I am a PHP developer with limited Javascript knowledge so any help would be great. Thanks very much. 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 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. 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 ! 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. 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. 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, 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 : 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. <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 |
|||||||