Nice look button – FrontPageBox

Button Code

Save the below code to _button.html.erb

<div>
<a href="<%= url %>" style="text-decoration:none;">
    <div>            
        <div style="width: 50px;">
            <img src="/images/<%= icon %>" alt=""/>
        </div>
        <div>
            <h2 style="font-size:18px;width:100px;margin-bottom:0px;"><%= lng title %></h2>
            <p style="margin-top:0px;">
                <%= lng description %>
            </p>
        </div>
    </div>
</a>
</div>

CSS

.frontpagebox {
    background-image: url(/images/bg-offer.png);
    height: 100px;
    width: 250px!important;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    margin-bottom: 10px;
}

.frontpagebox:hover {
    background-image: url(/images/bg-offer-n.png);
    height: 100px;
    width: 250px;
    border: 1px solid #bfbfbf;
    border-radius: 10px;
}

.frontpagebox p {
    width: 120px;
}

.frontpagebox img {
    width: 100px;
    height: 100px;
    padding-left: 5px;
}

.frontpagebox h2 {
    line-height: 20px;
    position: relative;
    left: 80px;
    top: 10px;
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.frontpagebox p {
    position: relative;
    left: 80px;
    top: 20px;
    font-size: 11px !important;
    text-decoration: none !important;
    color: #333;
}

Usage

<%= render :partial => 'pages/partials/button', :locals => 
                {    :title => category.name, 
                    :description => category.description,
                    :url => "/categories/#{category.to_param}",
                    :icon => "#{fileNameOnly}"} %>

Advertisements

Close button or image for SimpleModal popup

Button/Image to be added within SimpleModal code

<a href="#" style="position:absolute;top:-10px;right:-10px;"><img src="/images/x.png"></a>

Javascript Code to close the SimpleModal dialog

<script type='text/javascript'>
$('.simplemodal-close').click(function(){parent.$.modal.close();});
</script>

Using Non-standard Web Font

<style type="text/css">
            @font-face {
            font-family: "font1";
            src: url("/fonts/myriad.ttf") format("truetype"); /* font similar to apple.com */
        }

        body{
            font-family: font1;

        }
 </style>

Upload file in PHP and return the URL of the file

function upload_file($field){
    global $root;

    $url = "/files/" . $_FILES[$field]['name'];
    $target = $_SERVER['DOCUMENT_ROOT'] . $root. "/files/";
    $target = $target . basename( $_FILES[$field]['name']) ;
    $ok=1;
    //This is our size condition
    if ($uploaded_size > 350000)
    {
        echo "Your file is too large.<br>";
        $ok=0;
    }
    //This is our limit file type condition
    if ($uploaded_type =="text/php")
    {
        echo "No PHP files<br>";
        $ok=0;
    }
    //Here we check that $ok was not set to 0 by an error
    if ($ok==0)
    {
        Echo "Sorry your file was not uploaded";
    }
    //If everything is ok we try to upload it
    else
    {
        //echo "<p>". $target ."</p>";
        //echo "<p>". $_FILES[$field]['tmp_name']. "</p>" ;
        if(move_uploaded_file($_FILES[$field]['tmp_name'], $target))
        {
            //echo "The file ". basename( $_FILES[$field]['tmp_name']). " has been uploaded";
        }
        else
        {
            //echo "Sorry, there was a problem uploading the ". basename( $_FILES[$field]['tmp_name']). " file.";
        }
    }

    return $url;
}

ReCAPTCHA on Rails

First off, you need to register at recaptcha.net. Then you need to add your domain and get two keys (one public, one private). I created two sites once registered, one for my development environment (localhost), and one for production.

Second, there is a Rails plugin. It’s on GitHub. So install it like this:

ruby script/plugin install git://github.com/ambethia/recaptcha.git

OR use the attached file, extract it into vendor/plugins

Third, take those public and private reCAPTCHA keys and place those suckers in your environment.rb or appropriate environment file. Here’s what I added to the bottom of my development.rb, replacing the ‘MY_PUBLIC_KEY’ and ‘MY_PRIVATE_KEY’ with the keys from recaptcha.net (but keep the single quotes):

ENV['RECAPTCHA_PUBLIC_KEY'] = 'MY_PUBLIC_KEY'
ENV['RECAPTCHA_PRIVATE_KEY'] = 'MY_PRIVATE_KEY'

Fourth, find the place in your views where you want the reCAPTCHA box to appear. The plugin defines a special view helper named recaptcha_tags. Here’s a basic example:

In view use:

<% form_for(@question) do |f| %>
Question: <%= f.text_field :question %>
Human Test: <%= recaptcha_tags %>
<%= f.submit "Ask Question" %>
<% end %>

In controller add:

def create
@question = Question.new(params[:question])
if verify_recaptcha() and @question.save
redirect_to :action => 'show', :permalink => @question.permalink
else
render :action => 'new'
end
end

OR for user registration, user:

if verify_recaptcha(:model => @user, :message => "Oh! It's error with reCAPTCHA!") && @user.save
...
    else
      ...
    end   

Download

SimpleModal Popup

CSS

<script src="/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript' src='/javascripts/jquery.simplemodal.js'></script>
<style type="text/css">
.rounded { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; }

.shadow { -webkit-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; box-shadow: rgba(0,0,0,0.35) 0 1px 3px; }
img.shadow { padding: 5px; background: #fff; margin-bottom: 2px; *border: 1px solid #e2e2e2; _position: relative; }

.block{
padding:10px;margin-bottom:10px;
width: 440px;
}

.block p{
    font-size:16px;
}

.block h2{
font-size: 26px!important;
padding-top:10px;
line-height: 30px;

}

.block img{
    margin-top:10px;
}
</style>

Code Block

This is a template file to be called in order to create a popup window. It displays a small box with short content, and when clicking more button, content is displayed in the pop up windows. So, save this file as _blockpop.html.erb

<div style="height:<%= height %>px;">
<h2><%= lng title %></h2>
                <div>
                <div style="width:120px;">
                <img src="/images/<%= img %>" width="120px"/>
                </div>
                <div style="width:320px;">
                <p>
                    <%= short_content %>
                </p>
                    <div id='x'  style="height:30px;">
                    <a id="<%= title %>" href="" style="font-size:10px;float:right;">More...</a>

                    </div>
                </div>
                </div>

</div>                

<div id="z">
<div id="y_<%= title %>">
        <h2 style="font-size:26px;margin-bottom:5px"><%= lng title %></h2>
        <div>
            <div style="width:120px;">
            <img src="/images/<%= img %>" width="100px"/>
            </div>
            <div style="width:450px;">
                <p>
                    <%= content %>
                </p>

            </div>
        </div>
        <!-- preload the images -->
<div style='display:none'>
    <img src='/images/x.png' alt='' />
</div>
</div>
</div>

<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/javascripts/jquery.simplemodal.js'></script>
<script type='text/javascript'>
    jQuery(function ($) {

    // Load dialog on click
    $('#x <%= "#""#{title}" %>').click(function (e) {
        $('#y_<%= "#{title}" %>').modal();
        return false;
    });

});
</script>

Usage

<%= render :partial => 'layouts/blockpop', :locals => {
                :title => "",
                :img => '',
                :short_content => "",
                :content => "",
                :height =>
                } %>

Download

Linear Interpolation function in ruby

def interpolate(x0, y0, x1, y1, x2)
        y2 = 0
        y2 = y0.to_f + ((y1-y0).to_f*(x2-x0).to_f/(x1-x0).to_f)
        log ("y2 = #{y2}")
        y2 = y2.ceil
        return y2
    end

x0 y0
x2 y2
x1 y1