Results 1 to 2 of 2

Thread: Javascript not working for liquid css button

  1. #1
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Javascript not working for liquid css button

    I have a web application but need to introduce various themes in it. So i used liquid css buttons so that images used for buttons are less and take minimum time to load.

    But later i found that javacript:return functionname() doesnt work in it.
    Please find the CSS code to find a solution for the same.

    body {
    margin: 0;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    .btn {
    float: left;
    clear: both;
    background: url(images/btn_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
    }
    .btn a{
    float: left;
    height: 40px;
    background: url(images/btn_stretch.png) repeat-x left top;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
    }
    .btn span {
    background: url(images/btn_right.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
    }
    .btn_addtocart { background-color: green; }


    HTML code:

    <div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
    <div class="clear"></div>
    Background Color: Red

    The existing application uses
    <input type="image" onClick="javascript:return FunctionName()>

    I need a alternative javascript to apply the above css code as the above css code doesnt support onClick="javascript:return FunctionName().

    Please help!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    body {
    margin: 0;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    .btn {
    float: left;
    clear: both;
    background: url(images/btn_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
    }
    .btn a{
    float: left;
    height: 40px;
    background: url(images/btn_stretch.png) repeat-x left top;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
    }
    .btn span {
    background: url(images/btn_right.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
    }
    .btn_addtocart { background-color: green; }
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function FunctionName(){
     alert('submit');
     return false;
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <form onsubmit="return FunctionName()">
    <div class="btn btn_addtocart"><a href="#">Submit</a><span></span></div>
    <div class="clear"></div>
    Background Color: Red
    
    The existing application uses
    <input type="image" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
    </form>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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
  •