HTML-UI-CSS « Intelligrape Groovy & Grails Blogs

Archive for the ‘ HTML-UI-CSS ’ Category

Creating select tag with optgroup in Grails

Posted by Vishal Sahu on August 10th, 2010

Hi,
In one of my projects i needed to create a select-input tag with OPTGROUP options.
I searched a lot about it and found that g:select tag do not support OPTGROUP

So to solve this problem, i created a simple optgroup tag using Html and grails taglib.

I created a Map for the values to be used in the select tag and pass it to the test.gsp page from the controller.
Say Map dataMap=["Car":["Car A","Car B","Car C"],”Truck”:["Truck A","Truck B"]]

I put the tag in test.gsp where i want to display the select dropdown

 
         <test:optGroup name = "data" dataMap="${dataMap}" />

In my TestTaglib.groovy, i defined the tag as

 
class TestTagLib {
    static namespace = 'test'
 
    def optGroup = {attrs ->
        Map dataMap = attrs['dataMap']
        out << g.render(template: 'layouts/optSelect', model: [dataMap:dataMap])
    }
}

I created a template “_optSelect.gsp” under the layouts folder

 
<select name="mainList">
    <optgroup label="--"><option value="">(Select One)</option></optgroup>
    <g:each in="${dataMap}" var="data">
        <optgroup label="${data.key}">
            <g:each in="${data.value}" var="value">
                <option value="${value}">${value}</option>
            </g:each>
        </optgroup>
    </g:each>
</select>

This generated the required SELECT dropdown with OPTGROUP and solved the problem.

Hope it helps.

Regards:-

Vishal Sahu
vishal@intelligrape.com

  • Share/Bookmark

Creating Paged Media with Different Paged Modes Using CSS3

Posted by Vivek Krishna on July 30th, 2010

In one of our projects, we had to create PDF documents from HTML. The iText renderer was an excellent solution to do that. However, the tricky part was that the cover page had to be of portrait orientation and the rest of the document, of landscape orientation. After doing a fair share of searching on the web, I came across the Documentation for CSS3 Paged Media.

This could be achieved by creating an @page rule with a page name and then, using the page name in the element, which was going to enclose the body, for which we needed a particular style.

For example, since I needed the landscape mode on the inner pages, I had to create a @page rule in the CSS file as

@page content{
           size: A4 landscape;
}

And a css selector,(say a div, which was going to enclose such pages)

div .content{
          page: content;
}

If the HTML was something like,

<content in portrait mode>
<div class=”content”>
My contents here
</div>
<content in portrait mode>

“My contents here” would appear in a landscaped page.

Hope this helps

Vivek
vivek[at]IntelliGrape.com

http://in.linkedin.com/in/svivekkrishna

  • Share/Bookmark
Posted in HTML-UI-CSS, Java tools

Finding User’s Session Locale in GSP

Posted by Abhishek Tejpaul on July 14th, 2010

There are situations where you might want to know the Locale of the user as set in the session in your GSP so that you can show text in a particular language/manner. Here the Spring framework’s SessionLocaleResolver can come to the rescue. In one of our recent Grails projects, we did the following in one of our GSPs to display the content accordingly.

Please note that our use-case was like that in which we have fields for different languages in our domain classes. For example:

class MyDomain {
String greetingEnglish
String greetingFrench
}

And now you have to conditionally display the object’s fields based on the user’s locale. If this were a static text, then the Grails in-built i18n support in the form of message bundles would be the ideal solution. But this is a different scenario.

So let’s start by writing the following in your GSP :

<g:set var="lang" value="${session.'org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE'}"/>

The above statement returns the ISO Language Code from the session object which is a map. In Grails, the map values can be retrieved by the ‘.’ operator too by passing the keys. These codes are the lower-case, two-letter codes as defined by ISO-639. For example: ‘en’ for English, ‘fr’ for French and so on.

Once you know the locale, you can show the conditional content on your page. It could be something like this:

<g:if test="${lang.startsWith('en')}">
<h1> ${myDomainobject.greetingEnglish} </h1>
</g:if>
<g:elseif test="${lang.startsWith('fr')}">
<h1> ${myDomainobject.greetingFrench}</h1>
</g:elseif>
<g:else>
<h1> Default Greeting </h1>
</g:else>

Hope this will help !!!

- Abhishek Tejpaul

[Intelligrape Software Pvt. Ltd.]

  • Share/Bookmark
Posted in Grails, HTML-UI-CSS

Rounded corner and CSS3 Gradient with border

Posted by umar on July 2nd, 2010

First download these files:
http://code.jquery.com/jquery-1.4.2.min.js
http://codelab.jomvideo.com/javascript/curvycorners-2.1-BETA/curvycorners.src.js

You can round corner DIV, LI tags and others
You add a class where you want round corner

Add this CSS:

.cornerBox ul li.corner{zoom:1;border:0;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1f858f',EndColorstr='#329ba6');background:-webkit-gradient(linear, left top, left bottom, from(#1f858f), to(#329ba6));background:-moz-linear-gradient(top, #1f858f, #329ba6);background:#1f858f;}
.cornerBox ul div.outer {background:#fff;padding:0;margin-top:15px;}

Add this jQuery code:

 $(function(){
		 $('.corner').wrap('
 
');
		$('.corner').corner("round 3px").parent().css('padding', '1px').corner("round 3px")
		    });

Hope this helps !!

Umar Pahat
umar@intelligrape.com

http://www.intelligrape.com

  • Share/Bookmark

jQuery Alert Message without using traditional javascript alert-box.

Posted by Salil on June 14th, 2010

This post might help you if you want to display alert messages without using tradition javascript (irritating) alert.
To achieve this you need jQuery for your frontend UI.

Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically.

function displayAlertMessage(message) {
var timeOut = 5
jQuery('#messageBox').text(message).fadeIn()
jQuery('#messageBox').css("display", "block")
setTimeout(function() {
jQuery('#messageBox').fadeOut()
jQuery('#messageBox').css("display", "none")
}, timeOut * 1000);
}

messageBox is id of your div tag where you want to display the Alert Message.
timeOut is number of seconds you want to hold message on screen.
That’s it. So simple and quite comfortable from a user’s perspective Isn’t it? :-)

Cheers!!
Salil Kalia



  • Share/Bookmark

Accessing remote fonts on Client’s system by @font-face

Posted by umar on June 7th, 2010

@font-face allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts.

We Use it

I.We choose  font and  we have right now. First of all  font format generate four another format as like(ttf, eot,otf,svg,woff)

and upload server where we access.

II. Create in css This Syntex

@font-face {
font-family: 'PalatinoRegular';
 src: url('palatino-webfont.eot');
 src: local('Palatino'), local('Palatino'),
url('palatino-webfont.woff') format('woff'),
url('palatino-webfont.ttf') format('truetype'),
 url('palatino-webfont.svg#webfontoXFrZcNP') format('svg');
font-weight: normal;
font-style: normal;
}

III. We acces in html page as class or Id and define body tag font-family

Values

<a-remote-font-name>

Specifies a font name that will be used as font face value for font properties.

<source>

URL for the remote font file location, or the name of a font on the user’s computer in the form local("Font Name").

<weight>

A Font-weight value.

You can specify a font on the user’s local computer by name using the local() syntax. If that font isn’t found, other sources will be tried until one is found.
Note:
When not avaible font local machine . This time  @font- face download fonts in browser temporary download font and display text

Supported font formats

  • Internet Explorer (all versions): EOT
  • Safari (3.2+): TTF / OTF
  • iPhone (3.1) SVG
  • Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)
  • Firefox (3.5+): TTF/OTF (.WOFF added 3.6)
  • Opera (10+) TTF/OTF

Browser compatibility

Browser Lowest version Support of
Internet Explorer 4.0 Embedded OpenType fonts only
Firefox (Gecko) 3.5 (1.9.1) TrueType and OpenType fonts only
3.6 (1.9.2) Web Open Font Format (WOFF)
Opera 10.0 TrueType and OpenType fonts only
Safari (WebKit) 3.1 (525) TrueType and OpenType fonts only

## Umar Pahat##
umar@intelligrape.com
www.IntelliGrape.com

  • Share/Bookmark
Posted in HTML-UI-CSS

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
Posted in HTML-UI-CSS