HTML-UI-CSS « Intelligrape Groovy & Grails Blogs

Posts Tagged ‘ HTML-UI-CSS ’

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
  • Share/Bookmark
Tags: , , ,
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+
  • Share/Bookmark
Tags: , ,
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 image.
</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)}

  • Share/Bookmark
Tags: , , , ,
Posted in HTML-UI-CSS
No Comments »

IE 6/7 Z-index issue

Posted by Hitesh Bhatia on June 3rd, 2010

Recently I got struck in an IE issue … Z-index did not seem to work on IE 6 or 7 ..
After some surfing found a pretty easy solution .
i.e use

position:relative

with z-index ..and voila it works

_____________________
Hitesh Bhatia
hitesh@intelligrape.com
_____________________

  • Share/Bookmark
Tags: , ,
Posted in HTML-UI-CSS
No Comments »

Alfresco : Render html code written in tinymce

Posted by Amit Jain on August 18th, 2009

Hi,

We were using tinymce on alfresco labs 3 stable version. Lately, client came up with the new requirement to display video’s in the page rendered from text given in tinymce. Since coupling between alfresco and current version of tinymce was so tight, we did not include the latest version of tinymce, which might have supported video’s too.

So we decided to render html given in tinymce ourselves, after loading the domain object. The Sample code is given below :

import java.util.regex.Pattern
import java.util.regex.Matcher
String sampleText = new String('''###&lt;width&gt;369&lt;/width&gt;&lt;height&gt;174&lt;/height&gt;&lt;image&gt;/bw/images/preview.jpg&lt;/image&gt;&lt;url&gt;http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv&lt;/url&gt; ###''')

sampleText = replaceHtmlTags(sampleText)

def replaceHtmlTags(def text){
try{
   Pattern pattern = Pattern.compile('''###(.*?)###'''); // searches the string wrapped up with "###"
   Matcher matcher
   def tagStr,updatedTagStr
   matcher = pattern.matcher(text);
   int count=1
   while (matcher.find()) {
       tagStr = matcher.group()
       updatedTagStr = new String(tagStr)
       updatedTagStr = updatedTagStr.replaceAll("&lt;", "<")
       updatedTagStr = updatedTagStr.replaceAll("&gt;", ">")
       updatedTagStr = updatedTagStr.replaceAll("&quot;", "\"")
       updatedTagStr = updatedTagStr.replaceAll("&amp;", "&")
       updatedTagStr = updatedTagStr.replaceAll("###", "")
       text = text.replace(tagStr, updatedTagStr)
   }
}catch(Exception e){
    println "Exception caused " + e.message
}
   return text
}

With this code in place, html code wrapped up with “###” in tinymce, can be rendered as HTML tags rather than just a string. This gives lot of power to the user, as it can be used to show videos, slides from slideshare and anything we can display using html. for example, to play youtube video on our webpage along with other content, we just need to copy the embed or object tag from youtube to our tinymce and call replaceHtmlTags function we just saw on that text and the video would be up and running.

Hope this helped.

Cheers!
~~Amit Jain~~
amit@intelligrape.com

  • Share/Bookmark
Tags: ,
Posted in CMS
No Comments »

Restricting all URLs to end with .html in a Grails Application

Posted by Aman Aggarwal on April 3rd, 2009

While going through the grails-users mailing list, I found a question about restricting all URLs to end with ‘.html’ & returning Error 404 for the default mappings. After spending some time, I was able to build a sample CRUD application restricting URLs to end with .html.

I did the following steps for the same:

1. Create a new grails application with name ‘Urlmapping’: grails create-app Urlmapping
2. Create domain class Urltest: grails create-domain-class Urltest
3. Add a String variable ‘test’ in domain class Urltest:

class Urltest {
    String test
    static constraints = {
    }
}

4. Generate controllers & views for Urltest: grails generate-all Urltest
5. Changed the UrlMappings in UrlMappings.groovy:

class UrlMappings {
    static mappings = {
        "/$controller/$action/$id.$suffix"
        {
            constraints {
                suffix(matches: 'html')
            }
        }
        "/$controller/$action.$suffix"
        {
            constraints {
                suffix(matches: 'html')
            }
        }
        "/"(view: "/index")
        "500"(view: '/error')
    }
}

6. Removed the Entry “html: ['text/html','application/xhtml+xml'],” from map grails.mime.type in Config.groovy

7. Created initial data in BootStrap.groovy:

class BootStrap {
    def init = {
        servletContext - &amp; gt;
        Urltest urltest
        (1..5).each {
            urltest = new Urltest(test: 'Test-' + it)
            urltest.save()
        }
    }
    def destroy = {
    }
}

Run the application: grails run-app

Now, I had to use following urls for CRUD functionality:

# http://localhost:8080/mailing/urltest/index.html
# http://localhost:8080/mailing/urltest/list.html
# http://localhost:8080/mailing/urltest/create.html
# http://localhost:8080/mailing/urltest/show/1.html
# http://localhost:8080/mailing/urltest/edit/1.html

(Scaffolding generated links http://localhost:8080/mailing/urltest/index, http://localhost:8080/mailing/urltest/edit/1 & http://localhost:8080/mailing/urltest/show/1 etc. won’t work since default associated UrlMapping "/$controller/$action/$id?" has been removed from UrlMappings.groovy)

To convert the links into desired format, you needs to pass suffix=’html’ as params to g:link & g:form tags on all views & redirects in Controller.

I have attached the source code for reference.

This was my first attempt for editing default Url mappings. I am sure I will be able to find better & less tedious ways of doing the same over a period of time.

Also, I would like to mention that I found broken links generated by g:paginate tag.
A JIRA issue exists for the same.

–
~Aman Aggarwal
aman@intelligrape.com

http://www.IntelliGrape.com/

  • Share/Bookmark
Tags: , , , , ,
Posted in Grails, Groovy
1 Comment »