Code

Rating: 6
Comments: 1

Start Up an App using Ruby on Rails

Just a quick Ruby on Rails code/reminder that gets your app started. Feel free to type in your Rails command prompt rails, which is used to display the full options for the rails command.

I will be adding new snippets of Ruby on Rails coding once I'm near finished with my knowledge of Ruby (I want to make these posts right for everyone! Being Ruby is a difficult language to learn…). I figured this would help certain users like myself start up an app quickly.

Eventually I will be adding a tutorial on how to build a Rails app from the ground up. Stay tuned in the future for that one!

The Rails snippet/command to get you started:

That's it!

If you have trouble running bundle install while the app is compiling on a Windows OS feel free to comment below and I'll help you solve your issue.

Disclaimer: This tutorial is assuming you have beginner knowledge of Ruby on Rails.

License Info: Free to use

Rating: 11
Comments: 0

CSS3 Loading Animations

View the Live Demo

Here are 8 full CSS3 Loading Animations that you can use in place of .gif and .svg animations (SVG's SMIL animations will be removed soon according to Google and other browsers).

I usually try to design/code stuff that's unique, so every animation uses only 1 div element per animation. Each div also uses the ::before and ::after pseudo class selectors in order to accomplish the more difficult animations.

The HTML:

<div class="loader_content loader_1">
</div>
<div class="loader_content loader_2">
</div>
<div class="loader_content loader_3">
</div>
<div class="loader_content loader_4">
</div>
<div class="loader_content loader_5">
</div>
<div class="loader_content loader_6">
</div>
<div class="loader_content loader_7">
</div>
<div class="loader_content loader_8">
</div>

The CSS:

Any questions and/or comments that would help you add elements like these to your project(s), feel free to ask in the comment section below.

License Info: Creative Commons Attribution 4.0 International License

Rating: 7
Comments: 0

Hide Image Errors via CSS/HTML (Broken Image Handling)

hich.png

Here is a fix for hiding image errors (Broken Images) using just a little bit of CSS (granted you are using DocType XHTML 1.0 Transitional or greater in your source code). This is the way to hide the error WITHOUT the use of Javascript!

As you may have noticed on each IconDeposit Member Profile, we do not hide the image error using Javascript, we use CSS to hide the image error. Using the DocType XHTML 1.0 Transitional or greater and a little bit of CSS you will be able to pull this off. This is the easy way to do this for people who aren't too tech savy with Javascript.

Next just add the "alt" attribute to your img html like so:

<img src="#" href="#" alt="foo-bar" />

And finally here is the CSS code that does the trick (snippet from demo version):

  • Keep in mind, you will need to add the "alt" attribute to your image. This would be the only thing besides the DocType as far as HTML goes that you would need to change/add.

As far as I know, this is the only CSS image error handling trick out there that works without Javascript.

License Info: Creative Commons Attribution 3.0

Rating: 12
Comments: 3

How to Universally Show the Featured Image in the Buddypress Activity Excerpt

I came across this problem while I was coding one of my Buddypress installs. One of my installs is completely custom PHP code and I had a situation where the featured image would not show up in the activity stream associated with a blog post.

This Literally took me a year to find/mess with and code the official thing. This code will 100% get the featured image in the specific post id to show up in the associated Buddypress Activity Stream Item's excerpt/content.

Place the Following code in your functions.php file and this will work universally:

Just like my freebie posts, you are required to link back to this site any time you use this code.

update: since the latest Buddypress 1.7 update this code will not work unless you manually edit it.

License Info: Creative Commons Attribution 3.0

Rating: 14
Comments: 2

Icon Deposit CSS3 UI Kit (Source Code)

Icon-deposit-ui-kit.jpg

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the long awaited Icon Deposit CSS3 UI Kit. This includes everything from GUI switches and buttons, to radio buttons and checkboxes. I also included the Photoshop PSD file for those who want to edit the design or make the images bigger.

Keep in mind that this preview image is only for google chrome, so if you would like to see it in other browsers, you will need to manually edit the CSS file.

Here is the CSS:

Here is the HTML:

<!DOCTYPE html>
<html style="margin: 0 !important;">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Icon Deposit CSS3 UI Kit - Designed by Matt Gentile - icondeposit.com</title>
    <link rel="stylesheet"  href="jquery.mobile-1.0.1.min.css" />
    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body style="margin: 0 !important;">
    <div data-role="page" style="margin: 0 auto; display: block; height: 336px !important; width: 482px; position: relative; background: transparent url(bg.jpg) 0 0 no-repeat; overflow: hidden; padding: 54px; outline: none !important; margin-top: 7%; min-height: 336px !important;">
    <div data-role="content">
        <div class="content-primary">
        <form action="#" method="get">
        <div id="search">
          <input type="search" class="searchbox" placeholder="Search..." style="outline: none;">
          <a href="#" id="search-button">Search</a>
        </div>
        <div data-role="fieldcontain" style="width: 112px; height: auto;  margin; 25px 0 0 13px !important;position: relative;margin: 0 0 10px 0;top: 0;display: block;overflow: hidden;left: -348px;">
          <div class="checkboxes">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
            <input type="checkbox" class="checkbox">
          </div>
          <div class="radios">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
            <input type="radio" class="radio">
          </div>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On">On</option>
            </select>
        </div>
        <div data-role="fieldcontain" style="width: 105px; overflow-y: visible; margin-top: 9px;">
            <select name="slider" id="flip-b" data-role="slider">
                <option class="no" value="Off">Off</option>
                <option class="yes" value="On" selected="selected">On</option>
            </select>
        </div>
        </form>
        <div id="buttons">
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
          <div id="circ">
            <a class="circ-btn normal" href="#">Button</a>
            <span class="circ-btn-sh"></span>
          </div>
        </div>
        <div id="ntpd">
          <div class="ntpd-head">
          <h1 class="title">My Chores</h1>
          <a href="#" class="add">Add</a>
          <a href="#" class="delete">Delete</a>
          </div>
          <div id="tasks">
          <ul>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          <li>
          <a href="#" class="complete">Have a beer</a>
          </li>
          <li>
          <a href="#" class="incomplete">Eat something</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the house</a>
          </li>
          <li>
          <a href="#" class="complete">Take out the trash</a>
          </li>
          <li>
          <a href="#" class="incomplete">Do the dishes</a>
          </li>
          <li>
          <a href="#" class="complete">Feed the dog</a>
          </li>
          <li>
          <a href="#" class="complete">Mow the lawn</a>
          </li>
          <li>
          <a href="#" class="incomplete">Clean the pool</a>
          </li>
          </ul>
          </div>
        </div>
        <span class="ntpd-sh"></span>
        <div class="gd-view">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh"></span>
        <div class="gd-view" style="margin-left: 352px;">
          <a href="#" class="gd-a">
            <span class="shdw"></span>
            <img src="grid-view-img.jpg" width="80" height="80" class="grid-image">
          </a>
        </div>
        <span class="gd-sh" style="margin-left: 380px;"></span>
    </div><!--/content-primary -->
</div><!-- /content -->    
</div><!-- /page -->
</body>
</html>

License Info: Creative Commons Attribution 3.0

Rating: 14
Comments: 3

CSS3 UI Kit (Source Code)

css3_ui_kit_preview.png

Here is my first "CSS3 UI Kit". It's all CSS coding! This is just the Source Code preview for it.

- Preview the UI Kit Here

- Download the fully coded UI KIt Here

Here is the CSS:


Here is the HTML:
<!DOCTYPE html>
<!-- A Design by Matt Gentile - © Icondeposit.com -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3 UI Kit</title>
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
      $(function() {
          $( "#slider" ).slider({
              range: "min",
              value: 5,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider2" ).slider({
              range: "min",
              value: 46,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider2" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider3" ).slider({
              range: "min",
              value: 5,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider3" ).slider( "value" ) );
      });
      $(function() {
          $( "#slider4" ).slider({
              range: "min",
              value: 46,
              min: 1,
              max: 50,
              slide: function( event, ui ) {
                  $( "#amount" ).val( "%" + ui.value );
              }
          });
            $( "#amount" ).val( "%" + $( "#slider4" ).slider( "value" ) );
      });
    </script>
  </head>
  <body>
    <div id="search-box">
      <form id="search-form" action="#">
        <input type="text" id="search-input" name="search_text" placeholder="Search..." maxlength="140">
        <input id="search-button" type="submit" name="search_button" value="&Alpha;&Omega;" />
      </form>
    </div>
    <div id="file-upload">
      <form id="file-form">
        <input id="file-button" type="file" name="upload" />
      </form>
    </div>
    <div id="r-b">
      <button id="rectangular-button">Button</button>
    </div>
  <div id="c-b">
      <button id="circular-button">Button</button>
    </div>
    <div id="dropdown">
      <select name="select" id="dropdown-select">
        <option class="dropdown-option">-- Please select --</option>
        <option value="google" class="dropdown-option">Google</option>
        <option value="facebook" class="dropdown-option">Facebook</option>
        <option value="twitter" class="dropdown-option">Twitter</option>
      </select>
    </div>
    <div id="pagination">
      <table id="pagination-table">
        <tbody id="pagination-body">
          <tr id="pagination-text">
            <td id="pagination-numbers">
              <a href="#" class="pagination-number previous">Previous</a>
              <a href="#" class="pagination-number">1</a>
              <a href="#" class="pagination-number current" title="You are here">2</a>
              <a href="#" class="pagination-number">3</a>
              <a href="#" class="pagination-number">4</a>
              <a href="#" class="pagination-number dots">...</a>
              <a href="#" class="pagination-number">10</a>
              <a href="#" class="pagination-number">11</a>
              <a href="#" class="pagination-number next">Next</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="radio">
      <label>
        <input type="radio" class="radio-button">
      </label>
      <label>
        <input type="radio" class="radio-button">
      </label>
      <label>
        <input type="radio" class="radio-button" checked>
      </label>
    </div>
    <div id="checkboxes">
      <label>
        <input type="checkbox" class="checkbox tick">
      </label>
      <label>
        <input type="checkbox" class="checkbox tick" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox cross" value="yes" checked>
      </label>
      <label>
        <input type="checkbox" class="checkbox add" value="yes" checked>
      </label>
    </div>
    <div id="slider-block">
      <div id="slider"></div>
      <div id="slider2"></div>
      <div id="slider3"></div>
      <div id="slider4"></div>
    </div>
    <div id="media-buttons">
      <button class="media-button previous"></button>
      <button class="media-button pause"></button>
      <button class="media-button play"></button>
      <button class="media-button stop"></button>
      <button class="media-button next"></button>
    </div>
    <div id="circle-buttons">
      <button class="circle-button previous"></button>
      <button class="circle-button next"></button>
      <button class="circle-button add"></button>
      <button class="circle-button tick"></button>
      <button class="circle-button cross"></button>
    </div>
    <div id="square-buttons">
      <button class="square-button previous"></button>
      <button class="square-button next"></button>
      <button class="square-button add"></button>
      <button class="square-button tick"></button>
      <button class="square-button cross"></button>
    </div>
    <div id="docs">
      <a id="download" href="http://www.icondeposit.com/design:58">Download It</a>
      <a id="documentation" href="http://www.icondeposit.com/code:3">View Source</a>
    </div>
  </body>
</html>

It works beautifully in Chrome and Safari, just expect some problems in IE, FF, and Opera.

License Info: Creative Commons Attribution 3.0

page 1 of 3123next »
Copyright © 2011-2015 Icon Deposit - All rights Reserved