simple facebook status update using curl | facebook auto like link | php code for tweet into twitter
 


 

A Workaround to use Secondary icon to jQuery-UI buttons with jQuery-UI-bootstrap



jQuery UI Bootstrap is a project which brings the beauty of Twitter Bootstrap to jQuery UI widgets, as is mentioned by Addy Osmani, the creator of jQuery-UI-bootstrap.

jQuery-UI offers a lot of themes. You can test different themes (even third party themes as jQuery-UI-bootstrap or Wijmo) with jui_theme_switch, a plugin, I have developed, here). I guess you will agree that jQuery-UI-bootstrap is the most beautiful :-)

Actually, jQuery-UI-bootstrap is NOT ONLY a third party theme for jQuery-UI. Moreover, with jQuery-UI-bootstrap you can also use (most) of Twitter Bootstrap side by wide with jQuery-UI widgets without components breaking visually.

In the following example I use jQuery-UI-bootstrap just as a jQuery-UI theme. Twitter Bootstrap is not used. As you can see, I had problems using secondary icon (the right-side icon) on jQuery-UI buttons. The provided solution is just a workaround and probably not a permanent solution. This example uses jQuery 1.10.2 and jQuery-UI 1.10.3

The problem

Inside the following iframe there are six jquery-ui buttons using ui-lightness jquery-ui theme. All compinations are displayed (only icon, only text, primary icon, secondary icon).

Using the jquery-ui-bootstrap theme, button layout breaks when secondary icon is used.

This is the result after applying a CSS fix. The code is following.

The code

This is the CSS code applied to fix the above problems.

<style type="text/css">

	/* icon only - primary icon */
	#test1 {
		width: 3.1em;
	}
	#test1 .ui-button-text {
		padding: .4em 0 .4em 0;
	}
	#test1 span {
		display: inline-block;
	}

	/* icon only - primary + secondary icon */
	#test2 {
		width: 5.3em;
	}
	#test2 span {
		display: inline-block;
	}

	/* text + icon - primary icon */
	#test3 span {
		display: inline-block;
	}
	#test3 .ui-button-text {
		padding: .62em 1em .62em 1em;
	}

	/* text + icon - secondary icon */
	#test4 span {
		display: inline-block;
	}
	#test4 .ui-button-text {
		padding: .4em .6em .4em .6em;
	}

	/* text + icon - primary + secondary icon */
	#test5 span {
		display: inline-block;
	}
	#test5 .ui-button-text {
		padding: .4em 1em .4em 1em;
	}

	/* text only */
	#test6 span {
		display: inline-block;
	}
	#test6 .ui-button-text {
		padding: .4em 1em .4em 1em;
	}

</style>

Appendix

For your convenience, this is the HTML of each iframe, WITHOUT the CSS fix.

<html>
<head>
	<meta charset="utf-8"/>

	<link rel="stylesheet"
		  src="//normalize-css.googlecode.com/svn/trunk/normalize.css"/>


	<!-- USE ONLY ONE OF THE FOLLOWING - COMMENT APPROPRIATELY-->
	<link rel="stylesheet"
		  href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">

	<link rel="stylesheet"
		  href="http://addyosmani.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
	<!-- USE ONLY ONE OF THE ABOVE - COMMENT APPROPRIATELY-->


	<!-- APPLY THE CSS FIX HERE -->


	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<script type="text/javascript">
		$(function() {

			$("#test1").button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				},
				text: false
			});

			$("#test2").button({
				icons: {
					primary: "ui-icon-gear",
					secondary: "ui-icon-triangle-1-s"
				},
				text: false
			});

			$("#test3").button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				}
			});

			$("#test4").button({
				icons: {
					secondary: "ui-icon-triangle-1-s"
				}
			});

			$("#test5").button({
				icons: {
					primary: "ui-icon-gear",
					secondary: "ui-icon-triangle-1-s"
				}
			});

			$("#test6").button();

		});
	</script>

</head>

<body>

<button id="test1">test1</button>
<button id="test2">test2</button>
<button id="test3">test3</button>
<button id="test4">test4</button>
<button id="test5">test5</button>
<button id="test6">test6</button>

</body>
</html>
Εγγραφή!
Sign-up for our free email newsletter. Get updates when new tutorials and tips are published. You can unsubscribe anytime with a click.

Your comments are welcomed!

This site actively encourages commenting on any post. Comments are not pre-moderated, but this community does not tolerate direct or indirect attacks, name-calling or insults. Please, read terms of use and Comment Policy at privacy policy.

How to Auto Post on Facebook with PHP Dynamically Bind Params in Prepared Statements with MySQLi