?
Solved

Style button with jquery ui css framework

Posted on 2009-12-21
9
Medium Priority
?
3,016 Views
Last Modified: 2012-06-27
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
Comment
Question by:Panos
  • 5
  • 4
9 Comments
 
LVL 12

Expert Comment

by:Barry Jones
ID: 26096278
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
 
LVL 2

Author Comment

by:Panos
ID: 26096458
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
 
LVL 12

Assisted Solution

by:Barry Jones
Barry Jones earned 800 total points
ID: 26096821
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:Panos
ID: 26096934
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
 
LVL 12

Assisted Solution

by:Barry Jones
Barry Jones earned 800 total points
ID: 26096994
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
 
LVL 2

Author Comment

by:Panos
ID: 26097276
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
 
LVL 2

Author Comment

by:Panos
ID: 26111891
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
 
LVL 2

Accepted Solution

by:
Panos earned 0 total points
ID: 26120155
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
 
LVL 12

Expert Comment

by:Barry Jones
ID: 26140521
Glad you got a solution, thanks for the points..
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question