Using document.getElementById

Question

koneill 0 Newbie Poster

10 Years Ago

I have some code that allows one to move an image by clicking links (move left, move right etc) - the code works in IE but not in Google Chrome - therefore I have added to the JavaScript a check for this via g = (document.getElementById) ? 1 : 0; and then I'm accounting for this in the function for example by utilizing the syntax as such to no avail:
if (g) document.getElementById('imageTwo').innerHTML.left += 5;

I tried this also with

if (g) document.getElementById('imageTwo').left += 5;

Full code snippet is below:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Layer Test</title>
    <style>
.container {
    position: relative;
}

.imageOrig {
    position: absolute;
}

.image {
    position: absolute;
}

.imageOne {
    z-index: 0;
}

.imageTwo {
    z-index: 1;  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter: alpha(opacity=50);
  opacity: 0.5;
}

 .navigation {
        width:430px;
        height:211px;
}
</style>

    <script language="javascript">

        n = (document.layers) ? 1 : 0;
        ie = (document.all) ? 1 : 0;
        g = (document.getElementById) ? 1 : 0;

        function moveleft() {
            if (n) document.imageTwo.left += 5;
            if (ie) imageTwo.style.posLeft += 5;
            if (g) document.getElementById('imageTwo').innerHTML.left += 5;

        }

        function moveright() {
            if (n) document.imageTwo.left -= 5;
            if (ie) imageTwo.style.posLeft -= 5;
            if (g) document.getElementById('imageTwo').innerHTML.left -= 5;
        }

        function moveup() {
            if (n) document.imageTwo.top -= 10;
            if (ie) imageTwo.style.posTop -= 10;
            if (g) document.getElementById('imageTwo').innerHTML.top -= 10;
        }

        function movedown() {
            if (n) document.imageTwo.top += 10;
            if (ie) imageTwo.style.posTop += 10;
            if (g) document.getElementById('imageTwo').innerHTML.top += 10;
        }

        function reset() {
            if (n) document.imageTwo.left = 100;
            if (ie) imageTwo.style.posLeft = 100;
            if (g) document.getElementById('imageTwo').innerHTML.left = 100;
            if (n) document.imageTwo.top = 100;
            if (ie) imageTwo.style.posTop = 100;
            if (g) document.getElementById('imageTwo').innerHTML.top = 100;
        }

</script>

</head>
<body>

   <div class="container">
<table border="0">
 <tr>
   <td>
                <img src="images/sample image1.jpg" class="imageTwo image" id="imageTwo"><br/>
    </td>
    <td class="navigation"><&nbsp;</td>
    <td class="navigation">
            <a href="#" onclick="moveright();">Move image right</a><br/>
            <a href="#" onclick="moveleft();">Move image left</a><br/>
            <a href="#" onclick="moveup();">Move image up</a><br/>
            <a href="#" onclick="movedown();">Move image down</a><br/>
            <a href="#" onclick="prev();"><img src="back.jpg" border="0" /></a>
            <a href="#" onclick="next();"><img src="next.jpg" border="0" /></a>    

    </td>
  </tr>
</table>
</div>

</body>
</html>

javascript

4 Contributors
7 Replies
371 Views
2 Days Discussion Span
Latest Post 10 Years Ago Latest Post by koneill

piers 8 Junior Poster in Training

10 Years Ago

Hi,

Have you tried using if (g) document.getElementById('imageTwo').style.left -= 5;

AffineMesh 0 Newbie Poster

10 Years Ago

It's best to avoid coding for specific browsers. All those tests can be avoided. Try something like:

var x = 0;
var image = document.getElementById("imageTwo");
function moveright() {
    image.style.left = (x += 5) + "px";
}

Note that image.style.left is a string, not a numeric value. You can't simply use image.style.left +=5. That would create a string with the character '5' appended to the value of image.style.left. The resulting string might end up looking like "100px5", which isn't a valid value for image.style.left, so the assignment would fail.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

koneill 0 Newbie Poster · Answer 1 · 2014-09-25T23:36:34+00:00

Yes - I did try the (g) document.getElementById('imageTwo').style.left -= 5; to no avail. It must be something very much DOM related that is being missed.

koneill 0 Newbie Poster · Answer 2 · 2014-09-26T20:55:40+00:00

OK - this is what I have now as I took the above as a test and am trying to use it for just one of the functions. It doesn't work in IE or Chrome when I test this - I even changed in the function the var to imagemove thinking maybe it was conflicting with the image class of the same name - any help would be great.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Layer Test</title>
    <style>
.container {
    position: relative;
}

.imageOrig {
    position: absolute;
}

.image {
    position: absolute;
}

.imageOne {
    z-index: 0;
}

.imageTwo {
    z-index: 1;  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter: alpha(opacity=50);
  opacity: 0.5;
}

 .navigation {
        width:430px;
    height:211px;
}
</style>

<script language="JavaScript">
    var x = 0;
    var image = document.getElementById("imageTwo");
    function moveright()
    {
     image.style.left = (x += 5) + "px";
    }
</script>

</head>
<body>

<div class="container">
<table border="0">
 <tr>
   <td>
    <img src="images/sample image1.jpg" class="imageTwo image" id="imageTwo"><br/>
    </td>
    <td class="navigation">&nbsp;</td>
    <td class="navigation">
            <a href="#" onclick="moveright();">Move image right</a><br/>
            <a href="#" onclick="moveleft();">Move image left</a><br/>
            <a href="#" onclick="moveup();">Move image up</a><br/>
            <a href="#" onclick="movedown();">Move image down</a><br/>
            <a href="#" onclick="prev();"><img src="back.jpg" border="0" /></a>
            <a href="#" onclick="next();"><img src="next.jpg" border="0" /></a>    

    </td>
  </tr>
</table>
</div>

</body>
</html>

piers 8 Junior Poster in Training · Answer 3 · 2014-09-26T21:17:25+00:00

Hi,

I just thought of another option. You could use JQuery with the animate() method. On the below page it shows you the exact arrow functionality you need.

http://api.jquery.com/animate/

Also JQuery has Chrome Support see this: http://jquery.com/browser-support/

LaxLoafer 71 Posting Whiz in Training · Answer 4 · 2014-09-27T06:58:12+00:00

The point at which you're calling the document.getElementById('imageTwo') the image element doesn't actually exist. As a result, the value of image will be null.

You need to call the function after the IMG tag has been created. You can do this either by placing a script block after the tag, or defining a body.onload function and placing it within. For example:

<html>
<head><title></title>
<script>
function myOnload() {
    image = document.getElementById("imageTwo");
}
function moveright() {
    image.style.left = (x += 5) + "px";
}
</script>
</head>
<body onload="myOnload()">
<img src="image.jpg" id="imageTwo">
<a href="#" onclick="moveright();">Move right</a>
</body>
</html>

Don't forget to include your CSS, otherwise style.left might be ignored.

koneill 0 Newbie Poster · Answer 5 · 2014-09-27T22:17:10+00:00

Excellent - adding the

function myOnload() 
{
image = document.getElementById("imageTwo");
}

and then calling it in the <body> tag worked.

I'll also check out the jQuery if I need to exapnd this further.