troubleshooting Question

Style button with jquery ui css framework

Avatar of Panos
PanosFlag for Germany asked on
jQuery
9 Comments3 Solutions3218 ViewsLast Modified:
Hello experts.
I'm trying to style my buttons using jquery ui css framework.(demo:http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/)
The problem i have is to place the icons in the buttons like the links do.
Below is my testcode and a screenshot.
Any help?
<!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">
<head>
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/development-bundle/ui/ui.core.js"></script>
<link type="text/css" rel="stylesheet" href="js/ui/development-bundle/themes/ui-lightness/ui.all.css"  />
 <style type="text/css">
 body {
	font-family: "Segoe UI", Frutiger, Tahoma, "Helvetica", "Helvetica Neue", Arial, sans-serif; 
	font-size:62.5%;
	background:#fff; 
	color: #444;
margin: 20px;
}

#demoHeader {
	background:#3d8717;	
	padding: 15px;
	position: relative;
margin: 0 0 5em 0;
height: 1%;
}
a img {border: 0;}
#demoHeader img {float: left; margin-bottom: .9em;}

#demoHeader h1 { float:left; font-size:1.4em; line-height: 1.8em; font-weight:bold; margin: 0; color: #fff; padding-left: 20px; border-left: 1px solid #fff; margin-left: 20px;}
#demoHeader h1 a {color: #fff; font-weight:bold;}
p#copyright {color: #fff; padding: .5em 0 0; margin: 0; clear: both; border-top: 1px solid #fff; width: 100%; font-size: 1.1em;}


 .fg-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
	
	a.fg-button { float:left; }
	
	/* remove extra button width in IE */
	button.fg-button { width:auto; overflow:visible; }
	
	.fg-button-icon-left { padding-left: 2.1em; }
	.fg-button-icon-right { padding-right: 2.1em; }
	.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
	
	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
	
	.fg-buttonset { float:left; }
	.fg-buttonset .fg-button { float: left; }
	.fg-buttonset-single .fg-button, 
	.fg-buttonset-multi .fg-button { margin-right: -1px;}
	
	.fg-toolbar { padding: .5em; margin: 0;  }
	.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
	.fg-toolbar .fg-button { font-size: 1em;  }

	/*demo page css*/
	h2 { clear: both; padding-top:1.5em; margin-top:0; } 
	.strike { text-decoration: line-through; }

 </style>
 <script type="text/javascript" language="javascript">
 $(function(){
		//all hover and click logic for buttons
		$(".fg-button:not(.ui-state-disabled)")
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		)
		.mousedown(function(){
				$(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
				if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
				else { $(this).addClass("ui-state-active"); }	
		})
		.mouseup(function(){
			if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
				$(this).removeClass("ui-state-active");
			}
		});
	});

 </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
</head>

<body>
				

<h2>Icons in buttons-links</h2>

<a href="#" class="fg-button ui-state-default fg-button-icon-right ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Next</a>
				
<h2>Icons in buttons</h2>
<button class="fg-button ui-state-default  fg-button-icon-right ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span> Next</button>

</body>
</html>
screen.gif
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 3 Answers and 9 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros