SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    move label on image click

    i have the following code that will add/subtract values from the label on the image clicks. Is there a way of modifing this code so that the image clicks will not increment the label, but alternativley move the label up and down on the page?

    Code:
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            addtoquantity_image.Attributes.Add("onclick", "AddQuantity()");
            subtracttoquantity_image.Attributes.Add("onclick", "SubtractQuantity()");
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
            <script>
    
        function AddQuantity() {
            var Quantity = document.getElementById('Quantity');
            var currval = parseFloat(Quantity.innerHTML);
            Quantity.innerHTML = currval + 1;
        }
        function SubtractQuantity() {
            var Quantity = document.getElementById('Quantity');
            var currval = parseFloat(Quantity.innerHTML);
            Quantity.innerHTML = currval - 1;
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
        <div>
            <asp:Label ID="Quantity" runat="server" Text="0"></asp:Label>
            <asp:Image ID="addtoquantity_image" runat="server" ImageUrl="~/images/arrow/arrowup.GIF" />
            <asp:Image ID="subtracttoquantity_image" runat="server" ImageUrl="~/images/arrow/arrowdown.GIF" />
            </div>
        </form>
    </body>
    </html>
    Sorry if this is very basic, my javascipt knowledge is very basic.

    Cheers for any help

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    up and down on the page as in how?
    If you had a series of divs placed on the page that you wanted to move between you could do something like:
    Code:
    //html
    <div id='spot1'><div id='label'>My Label</div></div>
    <div id='spot2'></div>
    <div id='spot3'></div>
    
    <a href='javascript:void(0);' onclick='moveLabel(++currentSpot)'>Move Up</a>
    <a href='javascript:void(0);' onclick='moveLabel(--currentSpot)'>Move Down</a>
    //js
    var currentSpot = 1;
    function moveLabel( spotNum ) {
        if( spotNum < 1 || spotNum > 3 )
            return false;
        var label = document.getElementById('label')
        var toSpot = document.getElementById('spot'+spotNum);
        var fromSpot = document.getElementById('label').parentNode;
        toSpot.appendChild(label.parentNode.removeChild(label));
        return true;
    }
    Just change it to fit your needs


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
  •