Archive for the ‘ HTML-UI-CSS ’ Category

Sprite Up !!! Automate your process of creating sprites.

Posted by manoj on June 23rd, 2011

Hi all,

In the past few days, I was given a push to find a suitable method that allowed us to automate the much needed but painstaking of creating sprites for webpages to improve their performance.The problem was that going through the process of spriting images was a tedious process for a person not used to Photoshop tools and meticulous image adjustments in the corresponding Css.
After spending some time with Mr Google, I stumbled upon an application that allowed us to automate the process, leaving the task of spriting images and adjusting the corresponding css upto the application.

Lets take a look at it. I’m sure that even if you give it 1 shot, you are bound to appreciate the ease of spriting your images to give it another go.

First things first, get SMARTSPRITES : - http://csssprites.org/.

Once you’ve got that done, all you’ve got to do is put in place holders to indicate that a particular image is to be included in the spriting process.
To do that indicate where you would like the sprite to be placed with something like this at the top of your css …

 /** sprite: myspriteVertical; sprite-image: url('../images/myspriteVertical.png'); sprite-layout: vertical */

sprite: myspriteVertical - This is the reference for the final image to be used in the css

sprite-image: url(‘../images/myspriteVertical.png’) -This specifies the path of the final image.

sprite-layout: vertical - It specifies the layout of images in your sprite. It can be vertical, horizontal or repeating.

Next go to the place in the css where you have an image. For example, my Css had something like

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px; background:url("../images/header-top.png") no-repeat 0 0;}

Now for this to application to recognize candidate images the background image property needs a separate line of it’s own. Although the refactor doesn’t take time, it becomes easier if you start off with separate lines the next time you create a css.

So I split it into something like

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");
background-repeat: no-repeat;
background-position:0 0; }

Note that this image specifies a positioning of top,left. We need to provide that for our image position in the final sprite.

Now simply add placeholders as shown below.

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");/** sprite-ref: myspriteVertical; sprite-alignment: left */
background-repeat: no-repeat;}

sprite-ref: myspriteVertical – This is the reference to the final sprite where it will be included as one of the images.

sprite-alignment: left – This specifies that the image is to be aligned on the left in the final sprite. This corresponds to the background-position attribute. Other than left, it can be top, bottom or right.

Now that we have provided an alignment in the placeholder, we need to delete the ’background-position’ attribute in the original implementation, so that it doesn’t override the new changes.

Now here we need to take care that images that are positioned to align on the left or right have to be arranged on a vertical layout.

Images aligned top or bottom are to be horizontally aligned.

This arrangement needs to be taken care of otherwise you might have images popping out in the webpage at unwanted places.

Now repeat the procedure or putting placeholders for all the images you want to be sprited. Make sure to keep left/right positioned images in a vertical layout and top/bottom images in a horizontal layout

Once that’s done, we simply need to issue a command to generate to sprite and adjust the css properties to accommodate the new image. It will contain the css you have modified as an argument.

  ./smartsprites.sh ~/Desktop/Demo/web-app/css/demo.css

It will create a new file with the same name appended with a default extension value. The original files in the CSS will remain unchanged. To switch your design to CSS sprites, link these CSS files instead of the original ones in your HTML.
A plethora of options has been provided on the home page along with helpful documentation. Go through them if you encounter any problems.

Thats it .!!!! Check out your sprites

Notes :

1) Make sure to check the output of the sprite command. You should watch out for Warn and Error messages. It might show why your output isn’t coming out as it should.

2) Try to keep separate sprites for horizontally aligned , vertically aligned and repeating images. Combining them will more often than not result in error-prone images.

3) Repeating images can be tricky. I had to redo a sprite since my image wasn’t repeating properly. Give it more than 1 shot and you’ll definitely get it right.

Hope this helps!!

Manoj Mohan

manoj(at)intelligrape(dot)com

Tags: css, HTML-UI-CSS, image spriting, sprite

Posted in HTML-UI-CSS

No Comments »

Placeholder in html5

Posted by umar on May 15th, 2011

HTML5 has made the page designing an easy task. Placeholder is input field improvement in html5. Things that we were doing in past using combination of HTML and client side scripting language can be done in HTML5 using an attribute. One of the example is placeholder attribute used with input type text which automatically puts the placeholder attribute value in the text field if it is empty. This placeholder text is cleared automatically on focus and on focus out either the entered text or the placeholder value (if nothing was entered) is displayed.

html form

<form>
<code>
  <input name="fieldname" placeholder="Enter any keyword">
  <input type="submit" value="Search">
</code>
</form>

Support browser

IE	Firefox	Safari	Chrome	Opera
.	3.7+	4.0+	4.0+	11.0+

Tags: HTML5, placeholder

Posted in HTML-UI-CSS, Javascript/Ajax/JQuery

1 Comment »

Change Input Type auto focus

Posted by umar on March 15th, 2011

This is little bit but it is very useful. This is input type equalto text when when cursor come in input then change type equalto password.

Embed in html

<input type="text" onblur="javascript:if(this.value==''){this.value='password',this.type='text'} else {this.type='password'}" onfocus="javascript:if(this.value=='password'){this.value=''} {this.type='password'}" value="password" tabindex="1" size="30" id="txtEmail" name="txtEmail">

This is Demo

Support browser

IE	Firefox	Safari	Chrome	Opera
6.0+	3.5+	3.0+	3.0+	10.5+

Posted in HTML-UI-CSS, Javascript/Ajax/JQuery

No Comments »

Editable Label Tag and introduction to Effects Tag Lib

Posted by Kushal Likhi on February 19th, 2011

Lately i had some spare time, hence decided to utilise it for developing some cool GUI elements.

What is effects tag lib??

It is just a new tag lib which is intended to contain some cool grails tags for GUI manipulations.
new tags will be added to it on timely basis, this is the first post regarding this tag lib.

Editable Lable

this is the first tag in this tag lib. It is a cool GUI label which can be edited realtime.

Features:
1) Post-able as a form element.
2) easy value manipulation and extraction.
3) Tool Tip support.
4) Validate-able using, just assign class as you assign to any text field for validation.
5) style-able using css
6) Default value and blank handling
7) easy to use.

Details about the tag
tag usage:-

<etl:editableLable />

you can treat this tag as an input text field, it gives you similar behaviour

attributes:
1) name: for form support, the value is posted with the form with param.
2) class: class to be applied, for styling and validation.
3) id: id given to the input feild
4) value: value to be displayed on the lable
5) default: the value to be displayed in case user enters blank in the edit mode
6) size: the size of the input feild
7) tooltip: text to be displayed in tool tip. if nothing specified default tooltip text will be displayed. i.e. “click to edit”
8] tooltipclass: class assigned for styling the tooltip as per the page needs
NOTE: All attributes are not required.

DEMO:-

here is the demo to the tag:

Next Addition

# Image scroller filmstrip tag
# vertical image slider tag
# Editable paragraph tag
# safe string tag
# Drawable rounded border without images tag
# auto sizing-resizing tag
# relative positioning
# image slider normal
# picker tab(3X3) tag
# tool tip provider tag
# progress bar tag
# slider tag
# modal window
# modless window
# progress bar
# more/less box
# pie graph
# bar graph
keep looking………

Download:

Link coming soon!! within few days.. waiting for some more tags to be completed.

Regards
Kushal Likhi
www.intelligrape.com

Tags: form, input, lable, tag, tag lib

Posted in Grails, HTML-UI-CSS, Javascript/Ajax/JQuery

1 Comment »

Audio html5

Posted by umar on January 16th, 2011

Audio tag is a html 5 element. You can play audio file on web page without any third party plug-in. This will work only on html5 compliant browser.

Flash player is widely used to play audio and video files on web. There are some third party plug-ins likes Flash Player, QuickTime, Real Player etc available for this. The main disadvantage of Third party plug-ins is that we need to download client side browser.

Audio tag is embeded in HTML:

<audio src="audio.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

Use Attribute in audio tag

Attribute	Value	Description
autoplay	autoplay	The start playing audio.
controls	controls	Controls is display as a play button.
loop	loop	The audio will start over again, whenis finished.
preload	auto metadata none	Audio should be loaded when the page loads.
src	url	Defines the URL of the audio to play

Support browser

Browser

FireFox 3.6+

Safari 5+

Chrome 6

Opera 10.5+

IE 9(beta)

Umar Pahat
Umar [at] intelligrape [dot] comAudio tag is a html 5 element. You can play audio file on web page without any third party plug-in. This we work only on html5 compliant browser support.

Tags: Audio, HTML5

Posted in HTML-UI-CSS

No Comments »

JQuery script to put focus on first field of any page

Posted by Vishal Sahu on January 13th, 2011

Hi,

In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors.

I searched a lot and with the help of my colleague we came out with a simple JQuery script to put focus on the first input field on any page whenever the page loads.

The script i used is:-


   if (jQuery('.errors').size() > 0) {
       jQuery('input.errors:first').focus();
       jQuery('.errors input:visible:first').focus();
     }
   else {
      jQuery('input:text:visible:first').focus();
    }

I put it in the layout and it works for every gsp which has that layout.

It worked for me.
Hope it Helps.

Vishal Sahu
vishal@intelligrape.com
www.intelligrape.com

Tags: jquery, jQuery focus, jQuery Script

Posted in Grails, HTML-UI-CSS, Javascript/Ajax/JQuery

5 Comments »

Local Storage (html5)

Posted by umar on December 14th, 2010

HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but cookies do not store larger quantities of data. Cookies are limited in size, and your browser sends request to the web server every time a new request is initiated (which takes extra time and bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded.

Detection browser technique -

     function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}

If your browser supports HTML5 storage, there will be a localStorage property on the global window object. If your browser doesn’t support HTML5 storage, the localStorage property will be undefined. Add this modernizr.js file and use this function:

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {

  // maybe try Gears or another third-party solution
}

Note that JavaScript is case-sensitive. The Modernizr attribute is called localstorage (all lowercase), but the DOM property is called window.localStorage

Umar !
umar@intelligrape.com

Tags: Local Storage

Posted in HTML-UI-CSS

No Comments »

clearfix css hack

Posted by umar on November 13th, 2010

The clearfix hack, or “easy-clearing” hack, is a useful method of clearing float(left, right) effort. The clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.

When the container not wrapping floated divs within it.clearfix hack (which includes the guillotine bug for IE etc). It fixes the problem.

Definition and Usage
This code define in css


/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Tips and Notes
Add class in html code


Class=”clearfix”

I happens most often (or is most noticeable) when you’ve got a design that wants to go flush to the bottom of the browser. However, for some damn reason, it just won’t go flush — it is that pesky five or so pixels that just won’t budge. Playing with the padding and margins don’t help — what could it be? Check the containing element and see if you’ve applied the clearfix css hack to it … because if you did, our money is that is your problem.

There are many variations of clearfix floating around the web.The clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, This clearfix method triggers has Layout with some proprietary CSS. Thus Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Support browser

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
6.0+	3.5+	3.0+	3.0+	10.5+	1.0+	2.0+

Tags: clearfix, css, HTML-UI-CSS

Posted in HTML-UI-CSS

No Comments »

canvas

Posted by umar on September 7th, 2010

The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.

Any content between the <canvas></canvas> tags is “fallback content”- meaning, it will be displayed only if the canvas cannot be displayed.

As a script:

function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0, 0, 150, 75);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (40, 30, 125, 75);

        ctx.fillStyle = "rgb(0,0,150)";
        ctx.strokeRect (20, 20, 50, 100);
      }
    }

and this is html

<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.

Here's an image of what it's supposed to look like .
</canvas>

Attributes
width: {Specifies the canvas width in pixels. The default value is 300.Possible values:[Non-negative integer] (for example, 300)}
Height: {Specifies the canvas height in pixels. The default value is 150.Possible values:[Non-negative integer] (for example, 150)}

Tags: canvas, css, HTML-UI-CSS, HTML5, UI

Posted in HTML-UI-CSS

No Comments »

Add Page number using Page Property of CSS

Posted by Uday Pratap Singh on August 20th, 2010

In my recent project we need to generate the pdf document from HTML page. We are using iText renderer for doing this. The client had the requirement that each page bottom right need to have number on it. All these things need to be replicated on every page. So for doing this we need to know more about the CSS3 page properties . I found the solution in this documentation http://www.w3.org/TR/css3-page/ and http://www.w3.org/TR/CSS21/generate.html#counters
For doing this I did something like

@page {
        margin-top: 149px;
        margin-left: 2px;
        margin-bottom: 40px;
        margin-right: 2px;
        size: landscape;
        counter-increment: page;
 
     @bottom-right {
padding-right:20px;
        content: "Page " counter(page);
      }
 
    }

Its just so simple we added and incremental page counter in the page property which can be reset as well. As my counter was incrementing after each page so I defined counter-interment at page level, although depending on the cases you can increment the counter before or after occurrence of any element like.

.incrementClass:before {
   counter-increment: page;
}

in above example counter will be incremented before the incrementClass appears on the page.

Hope it helps

## Uday Pratap Singh ##
uday@intelligrape.com

http://www.IntelliGrape.com/
http://in.linkedin.com/in/meudaypratap

Tags: css page number, css page property, CSS3, Paged Media

Posted in Grails, HTML-UI-CSS

No Comments »

Archive for the ‘ HTML-UI-CSS ’ Category

Sprite Up !!! Automate your process of creating sprites.

Placeholder in html5

Change Input Type auto focus

Editable Label Tag and introduction to Effects Tag Lib

What is effects tag lib??

Editable Lable

<etl:editableLable />

DEMO:-

Next Addition

Download:

Audio html5

JQuery script to put focus on first field of any page

Local Storage (html5)

clearfix css hack

canvas

Add Page number using Page Property of CSS

Similar Posts

Archives

Archive for the ‘ HTML-UI-CSS ’ Category

What is effects tag lib??

Editable Lable

<etl:editableLable />

DEMO:-

Next Addition

Download:

Similar Posts

Tag Cloud

Archives