Friday, 11 October 2019

What is difference between display:none & visibility:hidden in CSS?

In CSS display:none & visibility:hidden are mainly used for hiding the tags.


display:none tags will not appear in page at all.

There will be no space allotted in between other tags. Although you can interact with it through DOM.

rajkumar | <p style="display:none;">Style in this tag</p> | rajkumar

OUTPUT for display:none:

rajkumar |  | rajkumar


visibility:hidden tags will not visible.

There will be space allotted in between other tags.

rajkumar | <p style="visibility:hidden;">Style in this tag</p> | rajkumar

OUTPUT for visibility:hidden

rajkumar |                                  | rajkumar. 
at No comments:

Friday, 27 September 2019

Email template design with table cell

Implemented the Email templates with table cell. It will support for all the mailing communications.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body style="margin: 0; padding: 0;font-family: 'Montserrat', sans-serif;background-color: #069C90">
<table cellspacing="0" width="100%" style="padding: 20px 40px;">
    <tr align="center" bgcolor="#069C90">
        <td style="font-size: 30px;color:#fff;font-weight: bold;">
            Hello
        </td>
    </tr>
    <tr align="center" bgcolor="#069C90">
        <td style="font-size: 30px;color:#fff;font-weight: bold;font-style: italic;padding-bottom: 15px;">
            testing
        </td>
    </tr>
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr bgcolor="#f1f1f1">
                    <td style="padding: 10px;color: #6A6A6A;font-size: 20px;" align="center">
                        Thank you for choosing <b style="color: #069C90;font-size: 25px;">testing.</b>
                    </td>
                </tr>
                <tr bgcolor="#f1f1f1">
                    <td style="padding: 10px;color: #6A6A6A;font-size: 20px;" align="center">
                        Finding your new home is our responsibility.
                    </td>
                </tr>
                <tr bgcolor="#f1f1f1">
                    <td style="padding: 10px;color: #6A6A6A;font-size: 20px;" align="center">
                        We wish to full-fill your dream of buying a property at the best price.
                    </td>
                </tr>
                <tr bgcolor="#f1f1f1">
                    <td style="padding: 10px;color: #6A6A6A;font-size: 20px;" align="center">
                        Your hunt for home ends here.
                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tr style="border-bottom-left-radius: 10px">
                                        <td width="50%">
                                            <img src="img/image_1.jpg" alt="" width="100%" height="auto" style="display: block;" />
                                        </td>
                                        <td width="50%" bgcolor="#f1f1f1">

                                            <a href="#" style="color: #fff;top: 40%;border-radius: 5px;font-weight: bold;font-size: 20px;right: 23%;padding: 20px;background-color: #FF5984;text-decoration: none;">testing</a>

                                        </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td style="padding: 10px;font-weight: bold;color: #069C90;font-size: 25px;" align="center">
                        More reason to choose from test
                    </td>
                </tr>
               
                <tr bgcolor="#fff">
                    <td style="padding: 10px;font-weight: bold;color: #069C90;font-size: 25px;" align="center">
                        Refer & Earn
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="0" cellpadding="0" cellspacing="10" width="100%" bgcolor="#E0F3F2">
                            <tr>
                                <td width="50%" align="center" style="border-right: 1px solid #069C90;" bgcolor="#E0F3F2">
                                    <img src="img/image_6.png" height="auto"/>
                                </td>
                                <td width="50%" align="center">
                                    <table border="0" cellpadding="0" cellspacing="10" width="100%">
                                        <tr>
                                            <td style="color: #5B5B5B;font-weight: bold;font-size: 20px;padding: 10px;" align="center">Refer your Friend's to find a property<br>
                                                in rajutaya.blogspot.com</td>
                                        </tr>
                                        <tr style="color: #069C90;font-size: 20px;" align="center">
                                            <td>Maximum <strong style="font-size: 30px;">₹50,000</strong></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td style="padding: 10px;font-weight: normal;font-style:italic;color: #6A6A6A;font-size: 25px;" align="center">
                        Check out these homes!, which are similar to other<br>
                        listings you've viewed
                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td style="padding: 10px;" align="center">
                        <a href="#" style="text-decoration: none;display: inline-block;padding: 20px;background-color:#FF4576;border-radius: 5px;text-transform: uppercase;color: #fff;font-weight: bold;">Your Dream Home</a>
                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td style="padding: 10px;font-weight: bold;color: #6C6C6C;font-size: 30px;font-style: italic;font-weight: normal" align="center">
                        <strong style="color:#069C90;">1000+</strong> happy customer booked their
                        homes through us
                    </td>
                </tr>
                <tr bgcolor="#fff">
                    <td style="padding: 10px;" align="center">
                        <img src="/img/image_7.png" width="100%" height="auto">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table align="center" border="0" cellpadding="0" cellspacing="10" width="100%" style="font-size: 25px;" bgcolor="#069C90">
                <tr align="center" style="color: #fff;">
                    <td style="border-right: 1px solid #fff">Chennai</td>
                    <td style="border-right: 1px solid #fff">Bangalore</td>
                    <td style="border-right: 1px solid #fff">Mumbai</td>
                    <td style="border-right: 1px solid #fff">Kolkata</td>
                    <td>Hyderabad</td>
                </tr>
            </table>
        </td>

    </tr>
</table>

</body>
</html>
at No comments:

Saturday, 7 September 2019

Type of Ajax calling

Ajax calling with manual passing the data

<form id='user_info'>
    <input type='text' id='user_id' value='40'>
    <input type='text' id='project_id' value='402'>
<a href='javascript:void(0)' onclick='get_user_info()'></a>
</form>
 
<script type='text/javascript'>
function get_user_info(){
    user_id = $('#user_id').val();
    project_id = $('#project_id').val();
    $.ajax({
    url: '/create_user_information',
    data: {user_id: user_id, project_id: project_id},
    dataType: 'script',
    type: 'POST',
    success: function (data) {
    }
  });
}
</script>

Ajax calling with serialize method

<form id='user_info'>
    <input type='text' id='user_id' value='40'>
     <input type='text' id='project_id' value='402'>
<a href='javascript:void(0)' onclick='get_user_info()'></a>
</form>

<script type='text/javascript'>
function get_user_info(){
    user_id = $('#user_id').val();
    project_id = $('#project_id').val();
    $.ajax({
    url: $('#user_info').attr('action'),
    data: $('#user_info').serialize(),
    dataType: 'script',
    type: 'POST',
    success: function (data) {
    }
  });
}
</script>
at No comments:

Saturday, 31 August 2019

Infinite Scrolling with Ajax in Ruby on Rails.

In controller.rb

Add the pagination with all records in index method

def index
  @listing = Listing.paginate(:per_page=>10, :page=>params[:page])
end

In index.html.erb

Add scrolling script and partial file for appending the display data in index file.
       
 <div class='main'>
 <div id='listing_data'%>
      <%= render partial: 'list_info', locals: {listing: @listing} %>
  </div>

  <input type='hidden' id='next_page_count' value='2'>

  <div class="pagination display_none"></div>
  <div class="display_none">
      <a class="btn view_more" href="#" data-remote="true">Loading</a>
  </div>
 </div>

 <script type='text/javascript'>
var queryString = window.location.search;
var pathname = window.location.pathname;
var url = pathname + queryString;

pagination_url = queryString.length > 0 ? url+'&page=<%=@page['next_page']%>' : url+'?page=<%=@page['next_page']%>';
$('.view_more').attr("href",pagination_url);

 var count = $('#next_page_count').val();
       
 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
          //if the next page is empty stop ajax calling
            if ($('#next_page_count').val() == ""){
                 return false;
            }else{
                  loadActivity();
            }
       }
    });

   #ajax callling       
  function loadActivity() {
      $('.view_more').click();     
    }
</script> 

 In index.js.erb

Add the rendering data here.

$('#next_page_count').val('<%=@page['next-page']%>');

 var queryString = window.location.search;
var pathname = window.location.pathname;
var url = pathname + queryString;

pagination_url = queryString.length > 0 ? url+'&page=<%=@page['next_page']%>' : url+'?page=<%=@page['next_page']%>';
$('.view_more').attr("href",pagination_url);

<%if @page['current_page'].to_i == 1 && @page['total_pages'].to_i > 0 %>
 $('#listing_data').html('<%= escape_javascript(render partial: 'list_info', locals: { listing: @listing }) %>');
<%else%>
 $('#listing_data').append('<%= escape_javascript(render partial: 'list_info', locals: { listing: @listing }) %>');
<%end%> 

Whenever scrolling is happening need to call the next page with ajax calling.if params[:next_page] is null stop the ajax calling.

at No comments:

Monday, 26 August 2019

Find the missing elements and display the sorted elements in ruby?

Inputs:
a=[1,2,3,4,5,6,7,8,9,10]
b=[1,2,4,5,6,7,8,9,10]

missing_elements = []
for i in a.min..a.max
    missing_elements.push(i) unless b.include?(i)
end

missing_elements.each do |m|
    b.insert(a.index(m),0)
end
p a
p b

for i in 0..a.length-1
puts "#{a[i]}-#{b[i]}"
end

OUTPUT:
1-1
2-2
3-0
4-4
5-5
6-6
7-7
8-8
9-9
10-10
at No comments:

How to find the missing elements in an array using ruby?

Input: a= [3, 4, 5, 6, 7, 15]

min_element  = a.min
max_element = a.max
new_missing_elements = []

for i in (min_element..max_element)
   new_missing_elements.push(i) unless a.include?(i)
end

print new_missing_elements

OUTPUT:

=>[8, 9, 10, 11, 12, 13, 14]
at No comments:

Friday, 2 August 2019

Class method calling in ruby?

Class methods:
We can call the class method by using class name.

class MyClass
   def self.my_method
     puts 'i am class method'
  end
end

 
 
MyClass.my_method
output=>
i am class method
at No comments:
Subscribe to: Posts (Atom)

Interactor in Rails

What is interactor? Interactor provides a common interface for performing complex user interactions An interactor is a simple, sin...