DLART.Tumblr

[dlart-blog]

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

This cheat sheet is an interactive reference for the Liquid templating language that will help you build ecommerce templates on Shopify.

[dlart-blog]

WordPress Nofollow external links only, the_content and the_excerpt - Snippet category: functions.php, page, posts

[dlart-blog]

Menu "Hamburger" Icon Animations

Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least....

[dlart-blog]

[dlart-blog]

Update Woocommerce cart price with code - The Code Poetry

Update Woocommerce cart price with code, Override Woocommerce cart price

[dlart-blog]

[dlart-blog]

Leave only digits in input

function autocorrect(input) { return input.replace(/[^\d]/g, ''); }

$('input').on('keyup change', function() {      //autocorrect      $(this).val( autocorrect( $.trim($(this).val()) ) ); });

[dlart-blog]

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Animation. Filling the circle

[dlart-blog]

[dlart-blog]

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Animate counting

$('#num').animate({ num: 90 - 3/* - начало */ }, {    duration: 5000,    step: function (num){        this.innerHTML = (num + 3).toFixed(2) + '%'    } });

[dlart-blog]

Animation for blocks. Spining cubes alike

<?php /* "Services" Section */ if ($services_section_two['show_this_section']==true): ?> <section class="TWLA-services-section-2">    <div class="container TWLA-full-width">        <div class="row no-gutters">            <div class="TWLA-services col-lg-8 col-md-12 col-sm-12 col-xs-12 matchHeight">                <?php if (!empty($services_section_two['services'])){ ?>                    <?php foreach ($services_section_two['services'] as $unit){ ?>                    <div class="TWLA-unit col-lg-3 col-md-3 col-sm-3 col-xs-12">                        <div class="TWLA-cube">                            <div class="TWLA-unit-wrap-default">                                <img src="<?= get_post_thumbnail_url($unit->ID, 'medium'); ?>" alt="" />                                <h4><?= $unit->post_title; ?></h4>                                <span class="TWLA-gradient"></span>                            </div>                            <div class="TWLA-unit-wrap-hover">                                <div><?= $unit->post_content; ?></div>                                <span class="TWLA-gradient"></span>                            </div>                        </div>                    </div>                    <?php } ?>                <?php } ?>            </div>            <div class="TWLA-wrap col-lg-4 col-md-12 col-sm-12 col-xs-12 visible-lg-block matchHeight">                <?php if ($services_section_two['title']!=''){ ?><h2 class="TWLA-title"><?= $services_section_two['title']; ?></h2><?php } ?>                <?php if ($services_section_two['content']!=''){ ?><div class="TWLA-content"><?= $services_section_two['content']; ?></div><?php } ?>            </div>        </div>    </div> </section> <?php endif; ?>

<style>

.TWLA-services-section-2 { background: #122f56; }    .TWLA-services-section-2 .container { padding: 0; }    .TWLA-services-section-2 .TWLA-services { position: relative; }    .TWLA-services-section-2 .TWLA-unit {        background: #000000;        border-color: #000000;        border-style: solid;        border-width: 3px 3px 0 0;        height: 50%;        min-height: 475px;        padding: 0;        position: relative;        text-align: center;    }    .TWLA-services-section-2 .TWLA-unit:nth-child(1),    .TWLA-services-section-2 .TWLA-unit:nth-child(2),    .TWLA-services-section-2 .TWLA-unit:nth-child(3),    .TWLA-services-section-2 .TWLA-unit:nth-child(4) { border-top: none; }        .TWLA-services-section-2 .TWLA-unit .TWLA-cube {            backface-visibility: hidden;            height: 100%;            margin: 0 auto;            min-height: 250px;            position: relative;            width: 100%;        }    .TWLA-services-section-2 .TWLA-gradient {        display: block;        height: 100%;        left: 0;        position: absolute;        top: 0;        width: 100%;    }    .TWLA-services-section-2 .TWLA-unit-wrap-default {        background: #234e7b;        background: -moz-linear-gradient(top,  #234e7b 0%, #122f56 100%);        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#234e7b), color-stop(100%,#122f56));        background: -webkit-linear-gradient(top,  #234e7b 0%,#122f56 100%);        background: -o-linear-gradient(top,  #234e7b 0%,#122f56 100%);        background: -ms-linear-gradient(top,  #234e7b 0%,#122f56 100%);        background: linear-gradient(to bottom,  #234e7b 0%,#122f56 100%);        backface-visibility: hidden;        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#234e7b', endColorstr='#122f56',GradientType=0 );        height: 100% !important;        left: 0;        padding: 160px 15px 15px;        position: absolute;        top: 0;        -webkit-transform-origin: 100% 50% 0px;           -moz-transform-origin: 100% 50% 0px;            -ms-transform-origin: 100% 50% 0px;             -o-transform-origin: 100% 50% 0px;                transform-origin: 100% 50% 0px;        -webkit-transform: translateX(0%) rotateY(0deg);           -moz-transform: translateX(0%) rotateY(0deg);            -ms-transform: translateX(0%) rotateY(0deg);             -o-transform: translateX(0%) rotateY(0deg);                transform: translateX(0%) rotateY(0deg);        width: 100% !important;    }        .TWLA-services-section-2 .TWLA-unit-wrap-default .TWLA-gradient {            background: #000000;            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);            background: -moz-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #2b2b2b));            background: -webkit-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -o-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -ms-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: linear-gradient(to right, #000000 0%, #2b2b2b 100%);                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#2b2b2b', GradientType=1);            opacity: 0;                transition: all 0.6s;            }    .TWLA-services-section-2 .TWLA-unit-wrap-hover {        background: #183a5c;        background: -moz-linear-gradient(top,  #183a5c 0%, #061525 100%);        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183a5c), color-stop(100%,#061525));        background: -webkit-linear-gradient(top,  #183a5c 0%,#061525 100%);        background: -o-linear-gradient(top,  #183a5c 0%,#061525 100%);        background: -ms-linear-gradient(top,  #183a5c 0%,#061525 100%);        background: linear-gradient(to bottom,  #183a5c 0%,#061525 100%);        backface-visibility: hidden;        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#183a5c', endColorstr='#061525',GradientType=0 );        height: 100% !important;        left: 0;        /* Separate padding for smooth animation. Don't minify */        padding-bottom: 15px !important;        padding-left: 15px !important;        padding-right: 15px !important;        padding-top: 160px;        position: absolute;        top: 0;        -webkit-transform: translateX(100%) rotateY(90deg);           -moz-transform: translateX(100%) rotateY(90deg);            -ms-transform: translateX(100%) rotateY(90deg);             -o-transform: translateX(100%) rotateY(90deg);                transform: translateX(100%) rotateY(90deg);        -webkit-transform-origin: 0% 50% 0px;           -moz-transform-origin: 0% 50% 0px;            -ms-transform-origin: 0% 50% 0px;             -o-transform-origin: 0% 50% 0px;                transform-origin: 0% 50% 0px;        width: 100% !important;    }        .TWLA-services-section-2 .TWLA-unit-wrap-hover .TWLA-gradient {            background: #000000;            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);            background: -moz-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #2b2b2b));            background: -webkit-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -o-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: -ms-linear-gradient(left, #000000 0%, #2b2b2b 100%);            background: linear-gradient(to left, #000000 0%, #2b2b2b 100%);            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#2b2b2b', GradientType=1);            opacity: 1;        }        .TWLA-services-section-2 .TWLA-unit img {            margin: 0 0 30px;            max-width: 150px;        }        .TWLA-services-section-2 .TWLA-unit h4 {            color: #ffffff;            font-size: 21px;            font-weight: 600;            line-height: 1.3;            margin: 0;        }        .TWLA-services-section-2 .TWLA-unit div {            color: #ffffff;            font-size: 21px;            line-height: 1.4;        }    .TWLA-services-section-2 .TWLA-wrap { background: #e0e0e0; padding: 40px !important; }    .TWLA-services-section-2 .TWLA-title {        color: #000000;        font-size: 60px;        font-weight: 700;        line-height: 1.1;        margin: 0 0 30px;        text-transform: uppercase;    }    .TWLA-services-section-2 .TWLA-content {        color: #000000;        font-size: 22px;        line-height: 1.5;    }        .TWLA-services-section-2 .TWLA-content p { margin: 0 0 30px; }

</style>

<script>

$('.TWLA-services-section-2 .TWLA-unit').hover(function(){        cubeSlider(1,['X','Y'],$(this).find('.TWLA-unit-wrap-hover')[0],$(this).find('.TWLA-unit-wrap-default')[0],$(this).find('.TWLA-cube')[0], $.noop);

   },function(){        cubeSlider(-1,['X','Y'],$(this).find('.TWLA-unit-wrap-default')[0],$(this).find('.TWLA-unit-wrap-hover')[0],$(this).find('.TWLA-cube')[0],function(){            ianIt($(this).find('.TWLA-unit-wrap-default')[0],{'transform':''});        });    });

var animBaseTime=700;

function cubeSlider(_dir,orientation,next,now,cont,cb){

   var OriginNow, OriginNext, dir, deg_dir    perspective=1000;

   if(orientation[0]=='X'){        dir=_dir;        deg_dir=_dir;        OriginNow  = (dir==1) ? '100% 50%' : '0% 50%';        OriginNext = (dir==1) ? '0% 50%'   : '100% 50%';    } else if (orientation[0]=='Y'){        dir=_dir;        deg_dir=(-1)*_dir;        OriginNow  = (dir==1) ? '50% 100%'   : '50% 0%';        OriginNext = (dir==1) ? '50% 0%' : '50% 100%';    }

   ianIt(next,{'transform':'translate'+orientation[0]+'('+dir*100+'%) rotate'+orientation[1]+'('+deg_dir*90+'deg)','transform-origin':OriginNext});    ianIt(now,{'transform-origin':OriginNow});    ianIt(cont,{'perspective':perspective+'px','transform-style': 'preserve-3d','z-index':500});

   setTimeout(function(){        anIt(cont,{'transform':'scale(0.9)'},animBaseTime/5,0,ease.Out,function(){            anIt(cont,{'transform':'scale(1)'},animBaseTime-animBaseTime/5,0,ease.Out,function(){            });        });

       anIt(next,{'transform':'translate'+orientation[0]+'(0%) rotate'+orientation[1]+'(0deg)'},animBaseTime,0,ease.Out,function(){        });

       $(now).find('.TWLA-gradient').css({'visibility':'visible'});        anIt($(now).find('.TWLA-gradient')[0],{'opacity':1},animBaseTime,0,ease.Out);        anIt($(next).find('.TWLA-gradient')[0],{'opacity':0},animBaseTime,0,ease.Out,function(){            $(next).find('.TWLA-gradient').css({'visibility':'hidden'});        });

       anIt(now,{'transform':'translate'+orientation[0]+'('+(-1*dir*100)+'%) rotate'+orientation[1]+'('+(-1*deg_dir*90)+'deg)'},animBaseTime,0,ease.Out,function(){            cb();            ianIt(cont,{'perspective':perspective+'px','transform-style': 'preserve-3d','z-index':1000});        });    },0); }

</script>

Add pre_load.js and modernizr.js. Delete jQuery.noConflict(); from jQuery library.

[dlart-blog]

Filling a shape with CSS3

<div class="TWLA-heart">    <div class="TWLA-heart-mask"></div>    <div class="TWLA-heart-filler"><span style="height: <?php echo $campaign_pledges/$campaign_goal*100; ?>%;"></span></div>                   </div>

CSS:

.campaignContainer .TWLA-heart {    float: right;    height: 74px;    margin: 10px;    position: relative;    width: 88px; } .campaignContainer .TWLA-heart-mask {    background: url(assets/img/heart-empty.png) 50% 50% no-repeat transparent;    height: 100%;    position: absolute;    width: 100%;    z-index: 100; } .campaignContainer .TWLA-heart-filler {    height: calc(100% - 16px);    margin: 8px;    position: relative; }    .campaignContainer .TWLA-heart-filler span {        background: #ed1b2e;        bottom: 0;        display: block;        position: absolute;        width: 100%;        z-index: 1;    }

[dlart-blog]

[dlart-blog]

How to use Media Queries in JavaScript

If you thought responsive design was reserved for CSS layouts only, you'll be pleased to hear media queries can also be used in JavaScript.

var mq = window.matchMedia( "(min-width: 500px)" );

[dlart-blog]

add_filter('wp_list_categories', 'add_span_cat_count'); function add_span_cat_count($links) { $links = str_replace('</a> (', '</a> <span>(', $links); $links = str_replace(')', ')</span>', $links); return $links; }

[dlart-blog]

Cross browser CSS3 transition

-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;

[dlart-blog]

Скрипт, чтобы остановить проигрывание ролика YouTube

Вариант с объектом:

<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/<?php echo $childVideoId; ?>?hl=ru_RU&version=3&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/<?php echo $childVideoId; ?>?hl=ru_RU&version=3&rel=0&autoplay=1" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>