Veerasundaravel's Ruby on Rails Weblog

September 16, 2010

Styling the Browse button using jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Want to see how it works? Check the demo page.

Thanks to RajaSelvam for introducing this plugin.

Reference URL: http://www.appelsiini.net/projects/filestyle

September 7, 2010

Div height issue when adding more text in it

Filed under: HTML — Tags: , , , , , , , , , — Veerasundaravel @ 3:08 pm

I created one DIV with some dynamic content where some its inner divs will float in right or left. Some this like below:

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
</div>

We can’t add fixed height for UserInfoContainer, because user information is a dynamic content. Duo to this, UserInfoContainer’s background color is not fully added to the whole DIV.

Solution:

If you cleared the floated elements, then you can fit those DIV elements into the parent container. Just you need to do some thing below.

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
<div style=”clear:both”></div>
</div>

Reference:
http://stackoverflow.com/questions/1287190/css-problem-my-div-tag-is-not-resizing-when-i-put-text-in-it

August 3, 2010

Wrap a very long url

Some time we may need to display a long url in our web-page. On that case, it will break the design as we can’t display a string in multiple lines with there is no space between.

Yes obviously, a link can’t have any space in between them. We can add <br> tag in between url, but the problem is while you are copying the URL, you still need to modify the copied content before using it in browser address bar. So I tried the following solution.

<wbr> tag

Write a helper method as follows:


#This method is used to split the longer urls into few lines.
#We added the tag <wbr> on a regular interval of a string.

def custom_word_wrap(text, max_width=10)
return nil if text.blank?
(text.length < max_width) ?
text :
text.scan(/.{1,#{max_width}}/).join(“<wbr>”)
end

In your view file:

<%= custom_word_wrap(@url_to_display, 55) %>

Outputs:

<%= @url_to_display %>

http://localhost.com/sssssssssssssssssssssoooooooooooooooooommmmmmmmmmmmmmmmmmmmmeeeeeeeeeeeeeeeeeeeeeeeeeebbbbbbbbbbbbbbbbaaaaaaaaaaaaaaaaaaaaaaaadddddddddddddddduuuuuuuuuuuuuuuurrrrrrrrrrrrrrlllllllllllllllll

<%= custom_word_wrap(@url_to_display, 55) %>

http://localhost.com/sssssssssssssssssssssooooooo
ooooooooooommmmmmmmmmmmmmmmmmmmmeeeeeeeeeee
eeeeeeeeeeeeeeebbbbbbbbbbbbbbbbaaaaaaaaaaaaaaaaaaaa
aaaadddddddddddddddduuuuuuuuuuuuuuuurrrrrrrrrrrrrrlllllllllllllllll

%d bloggers like this: