• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3067
  • Last Modified:

Style button with jquery ui css framework

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>

Open in new window

screen.gif
0
Panos
Asked:
Panos
  • 5
  • 4
3 Solutions
 
Barry JonesCommented:
Use the background css property to assign the icon as a background image:

You may need to adjust the positioning...
.fg-button-icon-right {
  background: transparent url(images/button-right-icon.png) no-repeat top right;
}

Open in new window

0
 
PanosAuthor Commented:
Hi Thefoot.
Here is a part of the theme.css of jquery ui ....that handlles the icons.
Please try to help me using the below css because i don't have a separate icon to use this as background like your solution.
/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); }

/* positioning */
.....
.ui-icon-circle-plus { background-position: 0 -192px; }
.....

Open in new window

0
 
Barry JonesCommented:
Hi

You should download the image "ui-icons_ffffff_256x240.png" and store it in your images directory.  This type of image is called a "sprite".  It basically contains many icons/images, and you show the correct part by using the css property "background-position".

The below code uses the CSS shorthand syntax for "background", where all the background sub-attributes are specified on one line.

The way that jQuery UI names the image sprites; they include the colour in the filename.  If you want one for a different colour, then obviously download the correct one.

Hope this helps..

TheFoot

.fg-button-icon-right {
  padding-right: 2.1em;
  background: transparent url(images/ui-icons_ffffff_256x240.png) no-repeat 0 -192px;
}

Open in new window

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
PanosAuthor Commented:
With this changes :
in style:
.fg-button-icon-right {
      padding-right: 2.1em;
      background-color: transparent;
      background-image: url(js/ui/development-bundle/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png);
      background-repeat: no-repeat;
      background-position: 0 -192px;
}

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

I have a screen like below.
screen2.gif
0
 
Barry JonesCommented:
If you dont need the entire sprite, then use an editing software like photoshop and simply cut the image that you want.  Then it will be simple to position...
0
 
PanosAuthor Commented:
I can not explain why it is not working with the span in the button.I know that it will work just cutting and putting the image there but i was wondering if i could use the way that links are working.I will wait if there will be another opinion before i close the question.
0
 
PanosAuthor Commented:
Hi TheFoot.
After testing and testing i find out that:
1.The first code (The code in the question) is working in:IE ,Safari,Chrome  but NOT in FF3.
2.To work in FF i have to add these lines of css (copied from a comment on this site:http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/):


Positioning of icons in buttons arent working.
Adding the following works in FF3, but not sure about others:

button.fg-button-icon-left .ui-icon {left: -2em;}
button.fg-button-icon-right .ui-icon {right: 1.7em;}
button.fg-button-icon-solo .ui-icon {left: 0;}
3.Adding these lines now in style brings problem to the other browsers so i must  handle this somehow.

Can you helpme with this?
0
 
PanosAuthor Commented:
Finally i found a solution.
I'm using coldfusion.Using this tutorial:http://www.mollerus.net/tom/blog/2007/10/simple_browser_and_os_sniffing_in_coldfusion.html i'm checking what browser has the client and than using cfif tag i'm specifying what style will be used.
Here is the full 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">
<head>
<!--- Get the user's platform and browser --->
<cfif CGI.HTTP_USER_AGENT contains "MSIE">
	<cfset REQUEST.userAgent = "IE">
<cfelseif CGI.HTTP_USER_AGENT contains "Opera">
	<cfset REQUEST.userAgent = "OP">
<cfelseif CGI.HTTP_USER_AGENT contains "Safari">
	<cfset REQUEST.userAgent = "SF">
<cfelseif CGI.HTTP_USER_AGENT contains "Netscape">
	<cfset REQUEST.userAgent = "NS">
<cfelseif CGI.HTTP_USER_AGENT contains "Gecko">
	<cfset REQUEST.userAgent = "MZ">
<cfelse>
	<cfset REQUEST.userAgent = "NS">
</cfif>

<cfif CGI.HTTP_USER_AGENT contains "Mac">
	<cfset REQUEST.platform = "Mac">
<cfelseif CGI.HTTP_USER_AGENT contains "Linux">
	<cfset REQUEST.platform = "Linux">
<cfelse>
	<cfset REQUEST.platform = "PC">
</cfif>

<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>
<cfif REQUEST.userAgent EQ 'MZ'>
<style type="text/css">
 button.fg-button-icon-left .ui-icon {left: -2em;}
 button.fg-button-icon-right .ui-icon {right: 1.7em;}
 button.fg-button-icon-solo .ui-icon {left: 0;} 
</style>
</cfif>
 <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>
<br />


</body>
</html>

Open in new window

0
 
Barry JonesCommented:
Glad you got a solution, thanks for the points..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now