I want a simpler way to assign icons to my jquery ui buttons

by ·2 Comments

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 },
 text: false
 }).next().button({
 icons: {
 primary: "ui-icon-locked"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 },
 text: false
 });
 });
 </script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</body>
</html>

jquerysample

It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied


<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 $(".button").button({
 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });
 }
 }
 });
});

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.

textbutton

I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

.ui-icon.ui-icon-xlsx
{
 background: transparent url('images/xlsx.png') no-repeat;
}

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>

xlsxbbbb

Incoming search terms:

  • ASP NET jquery ui button
  • assign ui
  • button(option icons
  • button(option icons not working
  • jquery icons
  • jquery mobile icon from custom css
  • jquery ui button text after custom icon

How to set two background images for an HTML page ?

by ·1 Comment

The other day I was wondering how could I set two background images for an HTML page and I came with one solution.
I don’t know if it’s the best way to do that but it worked as I wanted.

To explain the solution, here is the complete steps I made

First I had an HTML page without any background:

Beach_withoutBackground

Then I added some CSS to set a background image :

bg

body
{
   background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

The result was good :
Beach_OneBackground
But I wanted to add a second background image on the right bottom :
logobeachrahier_medium
So I moved my background declaration for the head part of the html file

html
{
 background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

and I added an other background declaration for the body part

body
{
 background:url("img/logobeachrahier_medium.png") no-repeat fixed right bottom ;
}

The background declared for the body is applied over the html one:

Beach_TwoBackground
I think it’s Pretty good now.

Incoming search terms:

  • html background gifs
  • how to set img in html
  • background gif img
  • background html repeat
  • background page html
  • two background images cover html
  • background-bg
  • bg background gif
  • bg gif
  • how to add multiple background in htmlpage

CSS Mixer

by ·0 Comment

CSSmixer128 Css mixer is a tool I’ve developped in C# winforms, .NET framework 3.5

You can use it to improve you ASP.NET Themes or your CSS files for all your web projects.

If you have many css files linked to a page, you can group them in a single file with CSS Mixer.

You can also minify CSS files to save the bandwith.

Â

To use it, open a folder containing CSS files,

cssmixer_screenshot

choose an action (simple combine, or combine and minify) then click Save as …

cssmixer_screenshot2

Download the last version of CSS Mixer on codeplex.

I hope you’ll find it usefull. please give me feedback on it

How to build a “visible on hover” action menu with CSS?

by ·1 Comment

In my previous post I explain a way to build a “visible on hover” menu using jQuery.

Now, I’ll explain you how to do that without javascript, using only CSS.

First, built the web page and a CSS file


<html>
 <head>
 <title>Sam Beauvois | CSS on hover menu</title>
 <link href="demo.css" type="text/css" rel="stylesheet" />
 </head>

 <body>
 <h2>Visible on hover with CSS demo.<h2>
 <h3>Please put you mouse hover the following texts</h3>

 <div>
 Demo 1
 <div>
 <a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
 </div>
 </div>

</body>

20100207_visibleOnHover_CSS_1Then add a class to the container and content divs

</pre>
<div class="hidden_action_container">
Demo 1
<div class="hidden_action">
<a href="#">action 1</a> | <a href="#">action 2</a> | <a href="#">action 3</a>
</div>
</div>
<pre>

And define the classes in the CSS file :


.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

note the class declaration :

.hidden_action_container:hover .hidden_action

20100207_visibleOnHover_CSS_2
Now it’s functionnal,

Add a style to make it nicer :

.hidden_action_container
{
 padding : 15px 15px 15px 15px;
 background-color: #DDDDDD;
 border-style:solid;
 border-color:#EEEEEE;
 height:50px;
}

.hidden_action_container .hidden_action a
{
 color:#999999;
 font-size: 20px;
 font-weight:bolder;
}

.hidden_action_container .hidden_action
{
 display: none;
}
.hidden_action_container:hover .hidden_action
{
 display:inline;
}

20100207_visibleOnHover_CSS_3You can see the online demo here : http://www.sambeauvois.be/Demos/CSS/VisibleOnHover/demo.html

Incoming search terms:

  • hover action css
  • Content Title Visible image hover css
  • HOvER　ACTION
  • html text mouseover image
  • visible div link hover