Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    Hello one and all.
    I'm experimenting with DOM and Javascript - in particular, I'm trying to create a sliding banner ad - with left and right arrows either side of the ad, which control the direction the ad moves in.
    http://www.victoriassecret.com/ - there is an example of what I'm trying to do on this web site. (near the bottom of the page)
    Right now I'm just having trouble trying to positon - ANYTHING using Javascript!
    <html>
    <head>
    <script type="text/javascript">
    function positionGraphic()
    {
    if (!document.getElementById) return false;
    if (!document.getElementById("graphic")) return false;
    var elem = document.getElementById("graphic");
    elem.style.postion = "absolute";
    elem.style.left = 50 + 'px';
    elem.style.top = 50 + 'px';
    }
    </script>

    </head>
    <body onLoad="positionGraphic();">
    <p id="graphic">Whee!</p>
    </body>
    </html>

    I'm getting this from the book 'DOM Scripting' by Jeremy Keith -
    Can anyone see what might be wrong, or know of a reference site I can visit to see examples of what I'm trying to achieve here?

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    The problem is simple... it has to do with the duplicity of the + operator in JavaScript. By default, it wants to add (math), but it can also be used to concatenate (strings)
    Code:
    elem.style.left = 50 + 'px';
    This will return NaN (not a number), because it's trying addition rather than concatenation.

    To make a number concatenate, you have to start the equation with a string. In this case, an empty string will trigger concatenation mode:
    Code:
    elem.style.left = '' + 50 + 'px';

  4. #3
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    <html>
    <head>
    <script type="text/javascript">
    function positionGraphic(x, y)
    {
    fX = x;
    fY = y;
    if (!document.getElementById) return false;
    if (!document.getElementById("graphic")) return false;
    var elem = document.getElementById("graphic");
    elem.style.postion = "absolute";
    elem.style.left = fX + 'px';
    elem.style.top = fY + 'px';
    }
    </script>
    </head>
    <body onLoad="positionGraphic(50, 50);">
    <p id="graphic">Whee!</p>
    </body>
    </html>
    How about this then - this still doesn't place the 'Whee' text at 50, 50 -

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    right, you still have to use the empty string ('') before the variable, because it's equating the variables fX and fY to integer values, so triggering addition instead of concatenation.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Oops... just tested it and that wasn't the problem at all!!

    You have to add absolute positioning to the element to be able to move it.

    Code:
    <html>
        <head>
            <script type="text/javascript">
                function positionGraphic(x, y) {
                    fX = x;
                    fY = y;
                    if (document.getElementById) {
                        if (document.getElementById("graphic")) {
                            var elem = document.getElementById("graphic");
                            elem.style.postion = "absolute";
                            elem.style.left = '' + fX + 'px';
                            elem.style.top = '' + fY + 'px';
                        }
                    }
                }
            </script>
        </head>
        <style type="text/css">
            #graphic {
    		position: absolute;
    	}
        </style>
        <body onLoad="positionGraphic(50, 50);">
            <p id="graphic">Whee!</p>
        </body>
    </html>

  7. #6
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    Brilliant! Thank you! That was really doing my head in!

  8. #7
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    Just in case you or anyone was interested - this was my final solution for this.
    It works! - the locations of your graphics and their links are all stored in the array. To adjust the position of the banner, just change the positioning in the CSS section for #window
    This banner ad displays 8 images that are 200px * 72px. If you use different size pics, you'll have to adjust the CSS and Javascript to fit.
    - but I expect this is pretty simple stuff to most of the folks in this forum.
    <html>
    <head>
    <script type="text/javascript">

    // This array stores all the ad images and their links.
    pic = new Array(7);
    pic[0] = '<a href="#"><img src="image1.png"></a>';
    pic[1] = '<a href="#"><img src="image2.png"></a>';
    pic[2] = '<a href="#"><img src="image3.png"></a>';
    pic[3] = '<a href="#"><img src="image4.png"></a>';
    pic[4] = '<a href="#"><img src="image5.png"></a>';
    pic[5] = '<a href="#"><img src="image6.png"></a>';
    pic[6] = '<a href="#"><img src="image7.png"></a>';
    pic[7] = '<a href="#"><img src="image8.png"></a>';

    // This function animates the graphic to the right

    function animateRight(dist, counter)
    {
    c = dist;
    elem = document.getElementById("graphic");
    elem.style.left = '' + dist + 'px';
    if (c == 0) { return; }
    c = c + 10;
    delay = setTimeout("animateRight(c, 0)", 10);
    }
    // This function animates the graphic to the left

    function animateLeft(dist, counter)
    {
    clearTimeout(autoMate);
    c = counter;
    total = dist;
    c = c - 10;
    elem = document.getElementById("graphic");
    elem.style.left = '' + c + 'px';

    if (c == total)
    {
    return;
    }
    delay = setTimeout("animateLeft(-820, c)", 10);
    }
    </script>
    </head>
    <style type="text/css">
    body {display:block; }
    img {border:0px; }
    #graphic {
    position: relative;
    width: 1700px;
    height: 72px;
    left: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    }
    #window {
    position:absolute; overflow:hidden;
    width:820px;
    height:72px;
    left:220px;
    top:0px;
    }
    #leftArrow {
    position:absolute;
    width:20px; left:180px;
    }
    #rightArrow {
    position:absolute;
    width:20px; left:1040px;
    }
    </style>
    <body>
    <!--
    The CSS graphic object holds with ads, within the Window CSS object. Window is set to be 820 pixels wide, to include 4 ad images at 200 pixels and the arrow graphic
    -->
    <div id="window">
    <div id="graphic">
    <a href="#" onClick="animateLeft(-820, 0);"><img src="left_arrow.png" border="0"></a><script type="text/javascript">document.write(pic[0] + pic[1] + pic[2] + pic[3] + pic[4] + pic[5] + pic[6] + pic[7]); </script><a href="#" onClick="animateRight(-820, 0);"><img src="right_arrow.png" border="0"></a>

    </div>

    </div>

    <!-- This section of javascript sets the animation to start after 5 seconds. -->
    <script type="text/javascript">autoMate = setTimeout("animateLeft(-820, 0)", 5000);</script>


    </body>
    </html>

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Something to make your life easier, especially if you have any server-side interaction that counts the photos from a directory...

    Quote Originally Posted by shoffman3572
    // This array stores all the ad images and their links.
    pic = new Array(7);
    pic[0] = '<a href="#"><img src="image1.png"></a>';
    pic[1] = '<a href="#"><img src="image2.png"></a>';
    pic[2] = '<a href="#"><img src="image3.png"></a>';
    pic[3] = '<a href="#"><img src="image4.png"></a>';
    pic[4] = '<a href="#"><img src="image5.png"></a>';
    pic[5] = '<a href="#"><img src="image6.png"></a>';
    pic[6] = '<a href="#"><img src="image7.png"></a>';
    pic[7] = '<a href="#"><img src="image8.png"></a>';
    Can easily become
    Code:
    var images = //whatever number the backend gets for you, or hard-code if it's all in the browser;
    var pic = new Array(images);
    for (i=1; i<=images; i++) {
      pic.push('<a href="#"><img src="image'+i+'.png"></a>');
    }
    By starting the for loop at 1, it's allowing you to count from 1 instead of 0, that way you don't declare an array(7) when you actually have 8 pieces ;-)
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com