SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    syracuse
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new to javascript..function doesnt seem to be working?

    So I was looking around online and found some examples on dynamically changing CSS tags with javascript. I though I'd start with something easy -- make the background image of a <div> move 100 pixels when a button is clicked, but I haven't had any luck.

    Here's the javascript I'm using:
    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
    function slide() {
            var thebox = document.getElementById("strip");
            thebox.style.backgroundPosition="-100px 0px";
    }
    --!>
    </script>
    and here's the CSS I'm trying to modify:
    HTML Code:
    <style type="text/css">
    <!--
    
    #strip
        {
        background-color: #000000;
        background-image: url("./filmstrip.jpg");
        background-position: 0px 0px;
        display: block;
        width: 100px;
        height: 100px;
        overflow: hidden
        }
    
    --!>
    </style>
    the source in the body is just:
    HTML Code:
    <center>
    <div id="strip"> test </div>
    <a href="javascript:slide()">Slide</a>
    <button onclick="slide()">click</button>
    (I tried both methods for calling the function but niether works)

    So is there something obvious I'm doing wrong? thanks for any help

  2. #2
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code worked for me after I fixed the closing comment tags. Instead of
    --!>
    they should be:
    -->

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    syracuse
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FauxPas
    Your code worked for me after I fixed the closing comment tags. Instead of
    --!>
    they should be:
    -->
    I think I figured that out about the same time you posted. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •