Logo

Who is talking?

Archive

The hierarchy of website user needs

almost 7 years ago | Lalita Chandel: My View

1. Accessibility: The website can be found and used by all people. 2. Stability: The website is consistent and trustworthy. 3. Usability: The website is user-friendly. 4. Reliability: The website is consistently available, without downtime. 5. Functionality: The website offers content, tools and services users value. 6. Flexibility: The website adapts to needs and wants of users.

Adding callback to an inline editable input field with jEditable plugin of jQuery

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

In my previous post I talked about adding size and stylesheets to an inline editable field with jEditable.I have this div:<div >  <div class="mouseover"> Title </div>  <div class="help_text"> (Click on the Title to edit) </div></div >I had to add some text next to this field which says "click to edit". When a user clicks on it , I wanted to add a callback function to this field, so that when I click on it title comes in input tag as inline editable and the text in next div (Clieck on the Title to edit) should go away. I found that you can use callback here just like in any ajax call.Here is what I did:$(".mouseover").editable('<custom url>', {      indicator : '<custom image path>',        onblur    : "submit",        placeholder : "click here to edit",        type      : "custom_input",         callback  : function(data, settings){          $(this).siblings(".help_text").text("(Click on the label to edit)");        }    });(posting it ... so that someone else should not spend time in figuring out :)

Adding callback to an inline editable input field with jEditable plugin of jQuery

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

In my previous post I talked about adding size and stylesheets to an inline editable field with jEditable.I have this div:<div >  <div class="mouseover"> Title </div>  <div class="help_text"> (Click on the Title to edit) </div></div >I had to add some text next to this field which says "click to edit". When a user clicks on it , I wanted to add a callback function to this field, so that when I click on it title comes in input tag as inline editable and the text in next div (Clieck on the Title to edit) should go away. I found that you can use callback here just like in any ajax call.Here is what I did:$(".mouseover").editable('<custom url>', {      indicator : '<custom image path>',        onblur    : "submit",        placeholder : "click here to edit",        type      : "custom_input",         callback  : function(data, settings){          $(this).siblings(".help_text").text("(Click on the label to edit)");        }    });(posting it ... so that someone else should not spend time in figuring out :)

Adding size to input field with jEditable plugin of jQuery

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

I am using jEditable a jQuery plug-in and is is really cool for inline editing. I stuck when I had to add size(say 50 characters) field and css  for an input field which is inline editable.Then, I extended jeditable and added my own input type with size and class attributes:In anything.js:$(document).ready(function(){    jQuery.editable.addInputType('custom_input', {    element : function(settings, original) {                    var input = $('<input size=50 class="input_inline"/>');                    if (settings.width  != 'none') { input.attr('width', settings.width);  }                    if (settings.height != 'none') { input.attr('height', settings.height); }                    /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */                    //input[0].setAttribute('autocomplete','off');                    input.attr('autocomplete','off');                    $(this).append(input);                    return(input);                }    });});$(".mouseover").editable('<custom url>', {      indicator : '<custom image path>',        onblur    : "submit",        placeholder : "click here to edit",        type      : "custom_input"    });In any.html:<div class="mouseover"></div>so all div with mouseover class will become inline editable.

Adding size to input field with jEditable plugin of jQuery

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

I am using jEditable a jQuery plug-in and is is really cool for inline editing. I stuck when I had to add size(say 50 characters) field and css  for an input field which is inline editable.Then, I extended jeditable and added my own input type with size and class attributes:In anything.js:$(document).ready(function(){    jQuery.editable.addInputType('custom_input', {    element : function(settings, original) {                    var input = $('<input size=50 class="input_inline"/>');                    if (settings.width  != 'none') { input.attr('width', settings.width);  }                    if (settings.height != 'none') { input.attr('height', settings.height); }                    /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */                    //input[0].setAttribute('autocomplete','off');                    input.attr('autocomplete','off');                    $(this).append(input);                    return(input);                }    });});$(".mouseover").editable('<custom url>', {      indicator : '<custom image path>',        onblur    : "submit",        placeholder : "click here to edit",        type      : "custom_input"    });In any.html:<div class="mouseover"></div>so all div with mouseover class will become inline editable.

How is UX profession different from a BA role, though both work to bridge the gap between IT and Buisness ?

almost 7 years ago | Lalita Chandel: My View

What does it mean to be designing "User Experience" and looking through the lens of the user ?Do BA's think differently from UX engineers ?....Like this, I had several questions in my mind related to UX and BA profession and the technique they use to tackle real time business problems. Came across this interesting interview article between Laura Brandenburg ( Independent BA consultant ) and Patrick Quattlebaum (Chief Experience Officer at Macquarium ) and yes, It did answer many of my questions. http://www.bridging-the-gap.com/what-a-ba-should-know-about-the-ux-profession-interview-with-patrick-quattlebaum/

De-coded regular expressions in oracle

almost 7 years ago | Lalita Chandel: My View

http://www.sqlsnippets.com/en/topic-12818.html

Give style to your MS Excel sheets in Ruby

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

I recently got a requirement to generate MS Excel workbook with different worksheets in Ruby on Rails. Also, I had to give style to the column headers, set background color for table of content and make columns justified.I came across http://rubyonwindows.blogspot.com and spreadsheet links which are very helpful if you want to try anything with MS Excel in Ruby.I installed spreadsheet gem (sudo gem install spreadsheet), but giving styles did not seem very straightforwardSo, I thought of giving it a shot. Let's first try to create a workbook with three worksheets.workbook = Spreadsheet::Workbook.newworksheet_for_books = workbook.create_worksheet(:name => "Books")worksheet_for_stationaries = workbook.create_worksheet(:name => "Stationary")worksheet_for_laptops = workbook.create_worksheet(:name => "Laptops")Now, set headers in all worksheets:for worksheet in workbook.worksheets  row = 0  (0..2).each do |column|    worksheet[row, column] = "Name_#{column}"  endendIn the above code snippet, you might have noted that:Iterating over worksheet is very simple, just like array.Setting value to a cell is very simple, just worksheet[row, column] = valueNow let's make the column headers bold and justified:format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendNow let's try to add background color 'yellow' to these headers:format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendIt didn't work! why? no it's not because we have added :pattern_fg_color , you might be thinking :pattern_bg_color is for background, but this is wrong, this is what I found in the references."Use :pattern_fg_color to set background of a cell"Anyways, even this option didn't work for me. I couldn't understand why. But I found a work around(reference) and here is the enhanced version:Create color_format class and put it in a libraryclass ColorFormat < Spreadsheet::Format   def initialize(opts)     super opts   endendAnd our code will look like:require "color_format"format_header = ColorFormat.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow, :pattern => 1)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendAnd that's it!

Give style to your MS Excel sheets in Ruby

almost 7 years ago | Gourav Tiwari: easy_software = Agile.find(ruby_on_rails)

I recently got a requirement to generate MS Excel workbook with different worksheets in Ruby on Rails. Also, I had to give style to the column headers, set background color for table of content and make columns justified.I came across http://rubyonwindows.blogspot.com and spreadsheet links which are very helpful if you want to try anything with MS Excel in Ruby.I installed spreadsheet gem (sudo gem install spreadsheet), but giving styles did not seem very straightforwardSo, I thought of giving it a shot. Let's first try to create a workbook with three worksheets.workbook = Spreadsheet::Workbook.newworksheet_for_books = workbook.create_worksheet(:name => "Books")worksheet_for_stationaries = workbook.create_worksheet(:name => "Stationary")worksheet_for_laptops = workbook.create_worksheet(:name => "Laptops")Now, set headers in all worksheets:for worksheet in workbook.worksheets  row = 0  (0..2).each do |column|    worksheet[row, column] = "Name_#{column}"  endendIn the above code snippet, you might have noted that:Iterating over worksheet is very simple, just like array.Setting value to a cell is very simple, just worksheet[row, column] = valueNow let's make the column headers bold and justified:format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendNow let's try to add background color 'yellow' to these headers:format_header = Spreadsheet::Format.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendIt didn't work! why? no it's not because we have added :pattern_fg_color , you might be thinking :pattern_bg_color is for background, but this is wrong, this is what I found in the references."Use :pattern_fg_color to set background of a cell"Anyways, even this option didn't work for me. I couldn't understand why. But I found a work around(reference) and here is the enhanced version:Create color_format class and put it in a libraryclass ColorFormat < Spreadsheet::Format   def initialize(opts)     super opts   endendAnd our code will look like:require "color_format"format_header = ColorFormat.new(:weight => :bold, :align => :justify, :pattern_fg_color => :yellow, :pattern => 1)for worksheet in workbook.worksheets  (0..4).each do |column|    worksheet.row(0).set_format(column, format_header)  endendAnd that's it!