Grid using CSS

CSS

<style type="text/css">
/* GRID */
.column { float: left; }
.grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { width: 100%; }

.grid2col .column { width: 49%; }
.grid2col .grid2col .column { width: 47.8%; }
.grid3col .grid2col .column { width: 46%; }
.grid4col .grid2col .column { width: 45%; }

.grid2cola .column.first { width: 66%; }
.grid2cola .column.last { width: 32%; }

.grid2colb .column.first { width: 74.9%; }
.grid2colb .column.last { width: 23%; }

.grid2colc .column.first { width: 32%; }
.grid2colc .column.last { width: 66%; }

.grid2cold .column.first { width: 23%; }
.grid2cold .column.last { width: 74.9%; }

.grid2cole .column.first { width: 79%; }
.grid2cole .column.last { width: 19%; }

.grid2colf .column.first { width: 19%; }
.grid2colf .column.last { width: 79%; }

.grid3col .column { width: 32%; margin-left: 2%; }
.grid2col .grid3col .column { width: 31%; }

.grid3cola .column { width: 58%; margin-left: 2%; }
.grid3cola .column.first,
.grid3cola .column.last { width: 19%; }

.grid4col .column { width: 23%; margin-left: 3%; }

.grid5col .column { width: 18.4%; margin-left: 2%; }

.grid6col .column { width: 15%; margin-left: 2%; }

.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }

p.last, ul.last, ol.last, li.last { _width: auto !important; _float: none !important; }

#container:after, #content:after, .grid2col:after, .grid2cola:after, .grid2colb:after, .grid2colc:after, .grid2cold:after, .grid2cole:after, .grid2colf:after, .grid3col:after, .grid3cola:after, .grid4col:after, .grid5col:after, .grid6col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#container, #content, .grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { zoom: 1; }
</style>

Usage

<div>
<div>
</div>

<div>
</div>

</div>

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}"} %>

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