Tutorial 22: Useful CSS Snippets

Font-family for body

body {
     font-family:"Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Helvetica,Arial,sans-serif;
};

For any article :

.content {

    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

}

.title {

    font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;

}

.code {

    font: 0.8em/1.6 Monaco, Mono-Space, monospace;

}




For Zebra tables

table tr:nth-child(even) {

    background: rgba(0,0,0,0.1);

}

Some Link Styling

a {

    text-decoration: none;

    color: #08C;

    transition: all 0.3s ease-out;

    position: relative;

    padding: .5em;

    margin: -.5em;

}

a:hover { color: #0AF; }

For image replacement

.ir {

    text-indent: 100%;

    white-space: nowrap;

    overflow: hidden;

}

instead of position: absolute; left: -9999px;

For pre

pre {

    white-space: pre-wrap;       /* Chrome & Safari */

    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */

    white-space: -pre-wrap;      /* Opera 4-6 */

    white-space: -o-pre-wrap;    /* Opera 7 */

    word-wrap: break-word;       /* Internet Explorer 5.5+ */

}




Jquery Snippets

1. Get Number in ids

<div id="sites">

    <a id="site_1" href="http://siteA.com">siteA</a>

    <a id="site_2" href="http://siteB.com">siteB</a>

    <a id="site_3" href="http://siteB.com">siteC</a>

    ...

</div>

$("#sites a").click(function(){

    var $this     = $(this);

    var nmb     = $this.attr('id').match(/site_(\d+)/)[1];

    ...

});




2. hide all children div except a specific one

$('#target div:not(#exclude)').hide();

//or

$('#target').children().filter(':not(#exclude)').hide();

3. Searching a string in jQuery

var foundin = $('*:contains("some string bla bla")');

4. Select all elements except the ones with a given class

$('* :not(.someclass)')

5. Add a row to a table

$('#myTable tr:last').after(' ... ');

6. Filtering By More Than One Attribute in JQuery

var elements = $('#someid input[type=sometype][value=somevalue]').get();

7. How to expire a cookie in x minutes

var date = new Date();

date.setTime(date.getTime() + (x * 60 * 1000));

$.cookie('example', 'foo', { expires: date });

8. Selecting the first x items with jQuery

example: first 10 anchors

$('a').slice(0,10);

//or

$('a:lt(10)');

9. Counting child elements

div id="foo">

"bar">

"baz">




"biz">

//jQuery code to count child elements

$("#foo > div").length

10. center a element in windows

jQuery.fn.center = function () {

    this.css("position","absolute");

    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");

    return this;

}

//Use the above function as:

$(element).center();

11. Select all checkboxes

$(document).ready(function(){

    $("#checkboxall").change(function(){

        var checked_status = this.checked;

        $("input[name=checkall]").attr("checked", checked_status);

    });

});

12. Passing parameters to a function called with setTimeout

timeout = setTimeout(function(){myFunction(param)},time);

13. Run a function 5 times with intervals of 20 seconds

var count = 0;

function myFunction() {

    count++;

    if(count > 5) clearInterval(timeout);

    //do something

}

14. Check if an element exists

if ($("#elementid").length) {

    //it does!

}

15. Cancel an ajax request

var req = $.ajax({

type:     "POST",

url:     "someurl",

data:     "id=1",

success: function(){

//something

}

});

//Cancel the Ajax Request

req.abort()

 

 

var timeout = setInterval(myFunction, 20000);

 

 

 

 

 

Resources :

http://tympanus.net/codrops/2012/10/25/kick-start-your-project-a-collection-of-handy-css-snippets/

http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ 

http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/

http://tympanus.net/codrops/2010/01/11/some-useful-javascript-jquery-snippets-part-4/

http://tympanus.net/codrops/2010/01/08/some-useful-javascript-jquery-snippets-part-3/

http://tympanus.net/codrops/2010/01/07/some-useful-javascript-jquery-snippets-part-2/

http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/ 




Blueprints:

http://tympanus.net/Blueprints/QuotesRotator/

http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

http://tympanus.net/Blueprints/HorizontalDropDownMenu/