CSS Drive forums | Javascript not working on liquid css button

Javascript not working on liquid css button

Posted: 20 October 2010 12:19 PM

[ Ignore ]

Newbie

Total Posts: 3

Joined 2010-10-20

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=”[removed]return FunctionName()>

Can i have a similar css to run the above javascript??

Profile

prans_2412

Posted: 21 October 2010 01:47 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 1

Joined 2010-10-21

what is the use of liquid buttons??

Profile

arc_85

Posted: 22 October 2010 04:58 AM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 3

Joined 2010-10-20

Let me explain it briefly

I am redesigning a web application . I want to introduce color themes in it.
When i click on a particular theme i want a new look to appear including buttons.
For this i m using the above css code which uses only 3 button images(single image sliced in 3)
wherin only the background color is to be changed thru css and new button gets created.

For eg in a login screen
The earlier web application used:


<input type="image" onclick="[removed]return validate()>

wherin the validate function includes

function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;

if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
} 

I cannot use [removed]return validate() with this new html code
i.e.

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

Profile

‹‹ Another IE CSS issue(s) Style Numbers only with CSS ››