Supriya's Blog

A Cross Browser* and Standards Compliant Custom ScrollBar Script by Hesido

noreply@blogger.com (Supriya Surve) — Sat, 10 Sep 2011 09:03:00 +0000

I have tried to style the scrollbars through CSS. I used

scrollbar-base-color: #009966;
scrollbar-track-color: #009966;
scrollbar-face-color: #ffff99;
scrollbar-highlight-color: #009966;
scrollbar-3dlight-color: #009966;
scrollbar-darkshadow-color: #009966;
scrollbar-shadow-color: #009966;
scrollbar-arrow-color: #009966;

But browsers like Firefox and Safari was not able to get the this styling.
I tried to find solution for this, but was not successful until I got this site : hesido.com.
This site helps for styling scrollbar using javascript with examples and source code.

Sequencing data in rails application

noreply@blogger.com (Supriya Surve) — Sat, 10 Sep 2011 08:46:00 +0000

There are many plugins available for sequencing data. Sharing something similar which depends on the jQuery library.
Considering that there is a Single table inheritance with more that 15 different types.
There were more than 15 views of the inherited modules.
Now applying a view with required buttons in these many views may be posible but what if new types are introduced in future, styling may change, many things were there for pointing down.
Finally decided to do these all with jquery. Also consider that there 1 sequence column in the table.

Controller :

# reset_sequence action is called using the JavaScript Ajax function.
# The JS function passes client id, model type(constant) and the array of
# record id and the index to update in the constant
def reset_sequence
  model_type = params[:model_type]
  paramssequences = params[:sequences]
  clientid = params[:client_id].to_i
  paramssequences.each do |sequences|
    sequences.each do |sequence_array|
      sequence_record = sequence_array.split(",")
      id = sequence_record[0].to_i
      sequence = sequence_record[1].to_i
      object = model_type.singularize.camelize.constantize
      object.update_all({:sequence => sequence}, {:id => id, :client_id => clientid})
    end
  end
  respond_to do |format|
  format.js {
    render :update do |page|
      # need this block with out this it gives 302 error if sucess block added for ajax in javascript
      # else gives missing template error :: TODO
    end
  }
  end
end

Routes :

reset_sequence

View :

  <table id="first_sub_types">
  <tbody>
  <tr>
    <th>Sequence</th>
    <th>Name</th>
    <th>Edit</th>
  </tr>
  <% first_sub_types.each do |subtype| %>
  <tr>
    <td><%= subtype.sequence %></td>
    <td><%= subtype.name %></td>
    <td><%= link_to "Edit", edit_first_sub_type_path(subtype.id) %></td>
  </tr>
  <% end %>
  </tbody>
  </table>
  

  <script type="text/javascript">  
    fetch_data("FirstSubType", 3, "first_sub_types")
  </script>

Javascript :
Added 1 new .js file in public/javascript, we can say sequencing.js
Sequnce.js :
Very first function declared was fetch_data( modelType, clientID, divID )
this function will be called from the bottom of the view in which sequencing is required.
Just sending the modeltype for e.g ("FirstSubType", 3, "first_sub_types")

/*
* fetch_data function will get the id name of the table and convert it in to jquery object.
* This will also call build_html function by passing object created, model type(which model to be called), company id and divid separately.
*/

function fetch_data( modelType, clientID, divID ){
    var obj = jQuery(divID);
    build_html( obj, modelType, clientID, divID );
  }

we can see above we have defined a variable with the divid which we passed from the view.
also called other function build_html.

/*
* This function is only called through the fetch_data().
* build_html will first check the object's tag name by jquery function .is() and based on this checkIfobject will be assigned a value.
* This assigned value will be used for sorting <td> OR <li> OR <option>.
* After checking the html tag the objects width is changed to fit the buttons on the right side.
* At the end loopingList() is called
*/

function build_html( obj, modelType, clientID, divID ){
    var checkIfobject;    

    if(obj.is("table")){
        checkIfobject = "TaBle"
    }else if(obj.is("ul")){
        checkIfobject = "UL"
    }else if(obj.is("select")){
        checkIfobject = "SelEct"
    }    

    var trheight = jQuery(obj).children().children('tr.bg1').height()
    var tdheight = (parseInt(trheight) * (jQuery(obj).children().children('tr').length-1)) + jQuery(obj).children().children('tr:first').height()
    jQuery(obj).after("<table cellpadding="0" cellspacing="0" id="setter" style="float: left;"><tbody><tr><th align="center" style="height: "+tdheight+"px;" valign="middle"> <input id="upbutton" name="upbutton" type="button" value=" ↑ " /> <br /> <input id="downbutton" name="downbutton" type="button" value=" ↓ " /> <input disabled="disabled" id="setbutton" name="setbutton" onclick="sendRequest( \""+checkIfobject+"\", \""+modelType+"\", \""+clientID+"\", \""+divID+"\" )" style="color: grey;" type="button" value="Set" /> </th></tr> </tbody></table>")

    var setterwidth = ( 100 * parseFloat(jQuery('#setter').css('width')) / parseFloat(jQuery('#setter').parent().css('width')) );
    var tblewidth = (99.7-setterwidth)
    jQuery(obj).css({
        "width" : tblewidth+"%",
        "float" : "left"
    });
    loopingList( obj, checkIfobject );
}

this function is actually building a html besides the original table. First its shifts it to left side. as we have not defined any width to new table it will take width only what the buttons will take.
I have also checked the object whether it is table UL or select for future modification in which I will change the code which will be compatible with UL and select also.
Everying done overhere is just for styling the UI. but main function starts by calling loopingList( obj, checkIfobject );

/*
* This function will actually add the hidden field which will be used for indexing the data
* check_button() is called at the end
*/

function loopingList( obj, checkIfobject ){
    var list, mxLength;
    switch( checkIfobject ){
        case "TaBle":
            list = obj.children().children('tr');
            mxLength = list.length-1
            break;
        case "UL":
            list = obj.children('li');
            break;
        case "SelEct":
            list = obj.children('option');
            break;
    }

    list.each(function( index ) {
        var listitem = this;
        var jListitem = jQuery(listitem);        

        jListitem.attr('onClick', "updateList(this)");
        jListitem.children('td:first').append("<input class="supportField" id="hidden_"+index+"" type="hidden" value=""+index+"" />");
    });

    check_button( checkIfobject, mxLength );
}

This will add 1 hidden field to each row for updating the index/ sequence. When this file is called from view first time/ by default its index is set by this function.
But will be modified later with other function. If in database no value is set and if the user clicks on set button it will save the sequence as per the default setting.

/*
* This function handles the up and down sorting button clicks on which the actual sorting takes place.
*/

function check_button( checkIfobject, mxLength ){
    jQuery('#upbutton').click(function(){
        var jListitem = jQuery(".selected_listitem");

        if( jListitem.length > 0 ){
            jQuery("#setbutton").removeAttr("disabled");
            jQuery("#setbutton").removeAttr("style");
            var prevlistitem = jListitem.prev();
            var prevlistitemIndex = prevlistitem.children("td:first").children("input.supportField").val();
            var jListitemIndex = jListitem.children("td:first").children("input.supportField").val();

            if( jListitemIndex == 1 ){ 
            }else{
                var innerhmtl = prevlistitem.html();
                prevlistitem.remove();
                jListitem.after(""+innerhmtl+"");
                jListitem.children("td:first").children("input.supportField").val(prevlistitemIndex);
                jListitem.next().children("td:first").children("input.supportField").val(jListitemIndex);
            }
        }else{
            alert("Select Record for sorting");
        }
    });

    jQuery('#downbutton').click(function(){
        var jListitem = jQuery(".selected_listitem");

        if( jListitem.length > 0 ){
            jQuery("#setbutton").removeAttr("disabled");
            jQuery("#setbutton").removeAttr("style");
            var nextlistitem = jListitem.next();
            var nextlistitemIndex = nextlistitem.children("td:first").children("input.supportField").val();
            var jListitemIndex = jListitem.children("td:first").children("input.supportField").val();

            if( jListitemIndex == mxLength ){
            }else{
                var innerhmtl = nextlistitem.html();
                nextlistitem.remove();
                jListitem.before(""+innerhmtl+"");
                jListitem.children("td:first").children("input.supportField").val(nextlistitemIndex);
                jListitem.prev().children("td:first").children("input.supportField").val(jListitemIndex);
            }
        }else{
            alert("Select Record for Sorting");
        }
    });

}

This above function handles the sorting onclick of up and down buttons.
It also considers that at least 1 row should be selected for sorting else it will show alert for selecting record.

Finally a main roll function which sends the ajax request to controller's action reset_sequence

function sendRequest( checkIfobject, modelType, clientID, divID ){
    var jListitem = jQuery(".selected_listitem");
    if( jListitem.length > 0 ){
      var list = jQuery(divID).children().children('tr');
      var sequences = []

      list.each(function(){
        var listitem = this;
        var jListitem = jQuery(listitem);
        var indNum = list.index(listitem);        

        if( indNum > 0 ){
            var id = jListitem.children("td:first").children("input.supportFieldID").val();
            var sequence = jListitem.children("td:first").children("input.supportField").val();
            sequences.push([id,sequence]);
        }
      });    

      jQuery.ajax({
        type: 'get',
        url: '/reset_sequence',
        data:
        {
            'sequences[]' : sequences,
            "model_type" : modelType,
            "client_id" : clientID
        },
        success: function(transform){
            //window.location.reload();
            window.location.href="/manage_company_utilities/"+modelType;
        }
      });
    }else{
            alert("Select Record for Sorting");
    }
}

Woking with position:absolute in CSS

noreply@blogger.com (Supriya Surve) — Sun, 04 Sep 2011 07:46:00 +0000

position:absolute is really nice when we are positioning some div through CSS. But we need to understand how to use it properly. When we add position:absolute we also need to take care of its behaviour. Just adding this does not make any difference, then we also need to add margin or directly(top, right, bottom and left) positions.

Adding top, right, bottom or left floats the entire div and works like a layer. It may overlap on some other div. So we need to add some px or em to make it float on the right position.
For Example: {position : absolute; top:100px; z-index:2}
When we added top:100px it took right from the body top. Even if we place this div at the bottom of the layout it will still float the top after leaving 100px.
This is usually used for popups.

Now about the margin.
margin will keep the div where it is embedded in the layout. It will never make div to float anywhere.
For Example{position:absolute; margin:100px 0 0 0}
This will keep the div at its place. only it will make it leave 100px at the top of his position. nothing else.

Working together with both(margin and direct positioning)
Mostly when we need to take any div to the center, we can use position:absolute.
As in my previous post we saw how to add popup.
We used

#hiddendiv{
position:absolute;
background: #fff;
top:50%;
left:50%;
margin: -100px 0 0 -200px;
width: 400px;
height: 200px;
border: 4px solid #CB6D23}

Here we can see from top:50% and left:50%. So the div will float 50% of each side we want. Then in margin I added in negative the half of its height for top and half of its width from left. This pulls the div to top and left half-half of its height and width and make it to the center of the layout.

Creating a static site in ruby

noreply@blogger.com (Supriya Surve) — Sun, 04 Sep 2011 07:43:00 +0000

Creating a static site is now very easy in ruby, Just need to install the gem.
The article about creating the site can be found at sitepoint.com

After creating the site step by step as given in the article.
But I was not able to get the previous and next links in the show page/ main post page except the index as added in the article.

So added the following code to the _layouts/post.html

<div id="navigation">
{% if page.previous %}
<div id="previous">
<< <a href='{{ page.previous.url }}'>{{ page.previous.title }}</a>
</div>
{% endif %}

{% if page.next %}
<div id="next">
<a href='{{ page.next.url }}'>{{ page.next.title }}</a> >>
</div>
{% endif %}
</div>

And the navigation we need to add in the needs to be added with the whole url for example:

<div id="site-navigation">
<a href="http://localhost:4000/index.html"> Home Page </a> |
<a href="http://localhost:4000/archive.html"> Archive </a> |
<a href="http://localhost:4000/about.html"> About </a>
</div>

Installing Sphinx for ubuntu

noreply@blogger.com (Supriya Surve) — Wed, 24 Feb 2010 06:02:00 +0000

I installed Thinking Sphinx by following the step posted in hackido.com
This helped me alot simple and fast installation.
For mysql the thinking sphinx was running cool, but there was a problem I faced as we were not using mysql, we were using postgresql for one of our project.
So I followed the post by freelancing-god.github.com.

./configure --with-pgsql
./configure --with-pgsql=/usr/local/include/postgresql
pg_config --pkgincludedir
make
sudo make install

And then I indexed the Thinking Sphinx for project and started the same, which was successfully started.

Installing netbeans on Ubuntu

noreply@blogger.com (Supriya Surve) — Tue, 23 Feb 2010 04:40:00 +0000

Installing netbeans on Ubuntu is very easy. I installed it on Karmic(Ubuntu 9.10)
For netbeans we need to add sun-java6-jdk and the command for that is

sudo apt-get install sun-java6-jdk

Once the sun-java6-jdk is installed we then start to install netbeans and there are 2 steps for it, both are very easy.
First just with one command which is

sudo apt-get install netbeans

or even we can install that from Synaptic Package Manager. Just search for netbeans which will also find dependencies and install tha same what ever required. The problem I faced for this installation was that I didnt get the latest version of netbeans.
Second is we go to the netbeans.org download the netbeans from download page. This page gives you the list of technologies for which you need the software. Just see which ever you need. For me it was for ruby.
Once you are complete with download go to the folder where your .sh file of netbeans is downloaded and then type

chmod +x (filename).sh

Once the file is being extracted go to the Home folder. There we can find the netbeans-(version_no) for me it was netbeans-6.8. After that go in the bin folder and run

./netbeans

This will start the netbeans and will also create a desktop shortcut.

Kyle Bradshaw's JQuery Best Practices

noreply@blogger.com (Supriya Surve) — Sun, 21 Feb 2010 08:08:00 +0000

Check out this SlideShare Presentation:

Kyle Bradshaw's JQuery Best Practices

View more presentations from Hasan Tayyar BESIK.

Using Fastercsv to import data

noreply@blogger.com (Supriya Surve) — Wed, 17 Feb 2010 06:16:00 +0000

Fastercsv is best for importing data in ruby on rails application.
For this we just need to add the gem.

gem install fastercsv

For importing data first we will need to upload the .csv file to the server/ rails application. Then we can call the data very easily. For uploading the file we need to take look at the step by step tutorial explained by tutorialpoint.com
For e.g. Consider the we need to upload the marks for a specific division and exam for students.

In view

<% form_tag ({:action => 'uploadFile'}, :multipart => true) do %>
  Upload CSV for 
  <%= @division.with_standard %> : 
  <%= file_field 'upload', 'datafile' %>
  <%= hidden_field_tag "division_id", params[:division_id] %>
  <%= hidden_field_tag "exam_id", params[:exam_id] %>

  <%= submit_tag "Upload" %> 
<% end %>

Here I am sending the division_id and exam_id as parameters.

In Controller

def uploadFile
  post = Exam.upsave(params[:upload], params[:division_id], params[:exam_id])
  flash[:ok] = "data imported"
  redirect_to enter_marks_path
end

In Model

require "fastercsv"
def self.upsave(upload, divid, exam)
  @division = Division.find(divid)
  name =  upload['datafile'].original_filename
  directory = "public/data"
  path = File.join(directory, name)
  File.open(path, "wb") { |f| f.write(upload['datafile'].read) }
  # more code to be added
end

The above code is same as given in the tutorialpoint.com to upload the .csv file to the data folder in public file.
Now The problem is that different divisions can have different subjects so, in the method defined above we will need to add the following code.
We are going to declare one local variable.

num = 0
  m = []
  FasterCSV.foreach(path) do |col|
   if num == 0
   # finding the col values
    col.each do |c|
    # unless the column value is "R.No"(which is a roll no of student) find the subject using the abbreviation of that subject
      unless c == "R.No"
       subj = Subject.first(:conditions => ["abbreviation = '#{c}'"])
       if subj.present?
        m.push(subj.id)
       end
      end
    end
  else
  # other code will come here
  num += 1
end

Subjects table has name and abbreviations columns, so while creating the .csv file user needs to use "R.No" as roll no of the student and subjects in the divisions using the abbreviations.
In the above code I am adding the subject's id in the "m" array declared before.
Now in the else we will import the data

if col.size > 1
  row_count = 1
  m.each do |subjectid|
    @division.subjects.each do |subject|
    if subject.id == subjectid
    # find the student with roll no
    student = Student.first(:conditions => ("roll_no = #{row[0]} AND division_id = #{@division.id}"))
    # find the mark for student
    mark = Mark.first(:conditions => ["student_id = #{student.id} AND subject_id = #{subjectid} AND division_id = #{divid} AND exam_id = #{exam}"])
      if mark.present?
        # we added row_count as a local variable
        mark.update_attribute(:written, row[row_count])
      end
    end
  end
  row_count += 1
 end
end

74 Quality Ruby on Rails Resources and Tutorials

noreply@blogger.com (Supriya Surve) — Mon, 28 Dec 2009 13:35:00 +0000

There are so many resources and tutorials available on net for a very popular programming language ruby on rails as its open source, but many people don't know which are the best sites to follow.

Softwaredeveloper.com is providing list or we can say guide of 74 Quality Ruby on Rails Resources and Tutorials in one place.
Cool.

Installing gem ferret without nmake error

noreply@blogger.com (Supriya Surve) — Mon, 28 Dec 2009 13:33:00 +0000

Gem's like ferret, ruby-debug throws nmake errors while installing those. Like I got when I was installing ferret

$ gem install ferret
Building native extensions. This could take a while...
ERROR: Error installing ferret:
ERROR: Failed to build gem native extension.

c:/ruby/bin/ruby.exe extconf.rb
creating Makefile

nmake
'nmake' is not recognized as an internal or external command,
operable program or batch file.

Gem files will remain installed in c:/ruby/lib/ruby/gems/1.8/gems/ferret-0.11.6
for inspection.
Results logged to c:/ruby/lib/ruby/gems/1.8/gems/ferret-0.11.6/ext/gem_make.out

To avoid this go to rubyforge.com and then just download gem file which name holds "mswin32", the gem will be installed with no nmake errors.

Regular Expressions Editor

noreply@blogger.com (Supriya Surve) — Sat, 28 Nov 2009 07:13:00 +0000

Understanding regular expressions is difficult and coding that is more.
But what if we have plenty of resources available, like regexlib.com where we can find many libraries for regular expressions at one place.

There are also other testing tools like regtest AND
Rubular, which is a Ruby-based regular expression editor, a very handy tool and can be found at rubular

Rails Best Practices

noreply@blogger.com (Supriya Surve) — Fri, 20 Nov 2009 05:52:00 +0000

Rails best practices is really a good gem to understand and modify your rails project according to the rails real environment, where your project's performance increases.
Just run

gem install rails_best_practices

Then go in to the project and just run this command

rails_best_practices .

This will take some very small time and let you know what are the best practices you should take and move your code to other place to make your project run at faster speed. And once you get the list just check out this SlideShare Presentation:

Rails Best Practices

View more documents from Wen-Tien Chang.

Using marquee

noreply@blogger.com (Supriya Surve) — Wed, 19 Aug 2009 17:40:00 +0000

Code of marquee to scroll images

<ul>
<marquee behavior="alternate" direction="left" scrollamount="1" align="center" >
<li> <img src="/images/image1.png" alt="image1" /> </li>
<li> <img src="/images/image2.png" alt="image2" /> </li>
<li> <img src="/images/image3.png" alt="image3" /> </li>
<li> <img src="/images/image4.png" alt="image4" /> </li>
<li> <img src="/images/image5.png" alt="image5" /> </li>
</marquee>
</ul>

In CSS
ul li{margin:0; padding:0; display:inline; float:left;}

If we start increasing the scrollamout of the marquee the speed of the content in the marquee will rise.

Other marquee attributes can be found at blooberry.com

undefined method 'collect' after installing one click installer

noreply@blogger.com (Supriya Surve) — Wed, 12 Aug 2009 08:12:00 +0000

After Installing ruby with one click installer never forget to update the gems:

gem install rubygems-update
gem update --system

If you don't do so you will get bunch of errors at gitbash/ command prompt what ever you use

the error will be for sh.exe

rake aborted!
undefined method `collect' for #. . . . . . . .

You can see full trace by running task with --trace

After getting these message if you update the gems and the projects will start running properly and you will get something like this

Deprecation Notices:

* Bulk index update is no longer supported (the code currently remains, but not the tests)
* Gem::manage_gems was removed in 1.3.3.
* Time::today was removed in 1.3.3.

</gem::version::requirement:0x493a43c>

onchange and IE

noreply@blogger.com (Supriya Surve) — Fri, 17 Jul 2009 10:09:00 +0000

onChange event handler, not supported by Internet Explorer, which is really bad.
As I was using checkbox, which has to hide or show other div on true/ false when checkbox changes its behaviour.

After a study I found that IE waits to loose the focus from the checkbox. As soon as I click on other object or on the page to make it work.

You can see working example at krijnhoetmer.nl
In MSDN Forum they have used setTimeout Window Function. But this didn't work for me.

The only solution worked for me was replacing onChange with onClick event handler.

PNG in IE6

noreply@blogger.com (Supriya Surve) — Thu, 16 Jul 2009 13:39:00 +0000

PNG image format is so useful while making images transparent, but the question arrives that whether it supports all the browsers or not. Well latest browsers do support this format but the problem occurs when we deal with IE6.
Even though we now have IE8, still usage of IE6 is 14.9%.

You can find the latest Browser Statistics Month by Month at w3schools

For that we always use the following available IE6 Hack
In CSS

#trans-content{
background:url(section.png) repeat;
width:100%;
height:260px;
margin:0;
padding:0; }

and

* html #trans-content{background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='section.png', sizingMethod='scale');}

min-height behaviour in firefox 3.0

noreply@blogger.com (Supriya Surve) — Tue, 23 Jun 2009 08:56:00 +0000

Min-height property is very useful for designing a site. Although it was not working in IE6 but hack was available. And even if there was height specified it expands automatically after gettign more than that height.
I have Firefox 3.0.11 installed and when I checked "#wrapper{min-height:100%}" it didn't work at all. That was strange as I used this in my previous designs.
But when I replace the 100% with 400px it started working properly.

Simple Restriction while deleting a record in rails

noreply@blogger.com (Supriya Surve) — Sun, 21 Jun 2009 06:15:00 +0000

Adding validations to rails application is really simple and we also get help from rails api.
We can also delete the dependent with a record.

But what if we don't want to delete a record when we have dependent.
I got this solution from the post of Sachin.
Just took dependent and if there is no dependent only then delete this record.

Simple and quick solution. Thanks Sachin.

Javascript Page flip effect

noreply@blogger.com (Supriya Surve) — Thu, 18 Jun 2009 12:26:00 +0000

Its really cool when we watch the page flip effect in Flash.
Flash and actionscript can just do anything.
For example flashpageflip.com

They are also giving facility to download.

But what if we get not exactly but something similar in javascript.
You can get the demo as well as code at coastworx.com

Or even Javascript Pageflip by Charles Mangin at his site.

Easy Field Validation with Prototype

noreply@blogger.com (Supriya Surve) — Sun, 14 Jun 2009 08:42:00 +0000

Giving validations in rails applications is really simple and nice, but if we can display validations with cool javascript effect, the application really looks effective.

This is possible with using prototype library and adding validations.js by Andrew Tetlaw. You can find documentation and demo.

The code really works fine and with really nice effects. If any one wants to add image, can alter the code little bit and change the validation div to the span in javascript itself and add image_tag. We can also add our own validations.

Only problem occurs when using calendar_date_select plugin and error hits. calendar_date_select link stops working.
If not using calendar_date_select these validations rocks. I will definitely prefer to use these.

Setting up flash for local as well as network access

noreply@blogger.com (Supriya Surve) — Wed, 10 Jun 2009 17:32:00 +0000

Publishing the flash file gives only 2 option whether we want to access network or local but what if we want access both?

Flash files setting up for local and network access is very simple.
Just go to Flash Player Setting Manager and set the global settings.

Add the location and select the option from given radio buttons and you are done.
Now you can access not only network but also can add local files.
This will help for adding functionality like downloading files or photo gallery.

Using Prototype and jQuery together

noreply@blogger.com (Supriya Surve) — Mon, 08 Jun 2009 11:11:00 +0000

I thought that prototype and jQuery using together is like impossible.

As I was using lightbox by prototype but also need the dockmenu by jQuery.
The result: jQuery menu was working well but the prototype lightbox just disabled.

Didn't find much until this one life saving post by Benjamin Smith.

And both the scripts started working well, no errors and headaches.
If want to use jQuery with other library you can read this reference.

Gruff vertical labels

noreply@blogger.com (Supriya Surve) — Mon, 08 Jun 2009 03:29:00 +0000

As I was working on the project which has pdf reporting functionality, which also contains charts and other related data.
So need to convert those charts to printer friendly images, which was possible through gruff graphs for ruby.
But X-axis labels were so long that those can not stay on one line.
So I tried to make it vertical with help of post by mrtibs vertical labels in gruff which really helped.
But problem with that was labels should go at the bottom of the chart and not at the top.
So instead of

y_offset = @graph_bottom + LABEL_MARGIN

we used

y_offset = ((@graph_height / 2) + (@graph_top * 3) - 5 )

which worked for me a bit but not fully functional.

Simple popup with cool effects

noreply@blogger.com (Supriya Surve) — Sat, 06 Jun 2009 07:48:00 +0000

There are many ways of adding popup in the application. But the most simple and beautiful way of adding it will be with the help of prototype, scriptaculous and very little CSS.

Prototype.js is a javascript library written by Sam Stephenson. And adding scriptaculous with that will help to add amazing cool effects for displaying information more effectively.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Simple popup with cool effects </title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<style type="text/css">
body{
background:#CFDEE2;
margin:0;
font:11px verdana;}
a {
color:#fff;
font-weight:bold;
text-decoration:none}
a:hover{ text-decoration:underline}

#title{
background:#CB6D23;
margin:0;
padding:0;
height:40px;
line-height:40px;}

#close{
background:#CB6D23;
margin:0;
padding:0;
height:30px;
line-height:30px;}

#close a{ float:right;}

#close a:hover{ text-decoration:none}

#wrapper{
width:600px;
height:100%;
margin:0 auto;
background:#fff}

p{width:80%; margin:20px auto}

#hiddendiv{
position:absolute;
background: #fff;
top:50%;
left:50%;
margin: -100px 0 0 -200px;
width: 400px;
height: 200px;
border: 4px solid #CB6D23}

</style>
</head>
<body>
<div id="wrapper">

<div id="title"> <a href="#" onclick="$('hiddendiv').appear(); return false;">Show me the popup</a></div>
<div id="hiddendiv" style="display:none">
<div id="close"> <a href="#" onclick="$('hiddendiv').fade(); return false;">[X]</a> </div>
<div> You can also give some other cool effects to this popup. </div>
</div> <p>This is the most easy way of adding the popup with cool effects. </p> </div>

</body>
</html>

Other effects can be found at scriptaculous combination of effects.

And can download from here

Sending mail through ruby on rails

noreply@blogger.com (Supriya Surve) — Fri, 05 Jun 2009 06:13:00 +0000

I was working for site and needed something like this for contact form.

http://www.tutorialspoint.com/ruby-on-rails-2.1/rails-send-emails.htm
is really nice tutorial for sending mails , can be used for static sites. This helped me a lot.

But faced some problems,
I didn't get subject and message although the mail was going to the right address.
It was merging with the message and passing through the recipients only .
No other field required for that

so I made some changes in that

in (model) ContactMailer.rd

def contact(recipient, subject, message)
@subject = "message:: "+subject
@message = message
@recipients = 'your@email.com'
@sent_on = Time.now
@from = recipient

end

and in ContactController.rb

def sendmail
email = params[:email]
subject = email[:subject]
recipient = email[:recipient]
message = email[:message]
ContactMailer.deliver_contact(recipient, subject, message)
return if request.xhr?
render :text => 'Message sent successfully'
end

def index

end