/ Gists

Gists

On gists

Custom grid

jQuery-plugins

SassMeister-rendered.html #

	<div class="container">
		
		<div class="a">1</div>
		<div class="b">2</div>

		<div class="c">
			
			<div>3.1</div>
			<div>3.1</div>
			<div>3.1</div>

		</div>

	</div>

On gists

Multi sass list

SCSS

multisasslistv2.scss #

$list: 

(
    theme1: (color: red, background: green, font: (family: Arial, size: 20px)),
    theme2: (color: black, background: white, font: (family: Verdana, size: 30px))

);


$oldList: 
(
    1: (red, blue),
    2: (brown, gold)
);


    @each $index, $row in $oldList
    {
        // $color: map-get($row, color) !global;
        // $background: map-get($row, background) !global;
        // $font: map-get($row, font);

        // $fontFamily: map-get($font, family);


        .theme-#{$index} 
        {
            $c1: nth($row, 1);
            $c2: nth($row, 2);
           // font-family: $fontFamily;
           color: $c1;
           background: $c2;
        }
    }

On gists

Double hr (border-top, border-bottom)

CSS trick

double-hr.css #

hr{
	background-color: transparent;
	height: 0;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-top: 1px solid rgba(0,0,0,0.9);
	margin: 0;
	clear: both;
}

On gists

Unicode font to CSS (hex 16).php

CSS

Unicode font to CSS (hex 16).php #

<?php


					function fillMyArr($from, $to)
					{
						for ($i = $from; $i <= $to; $i++)
							$arr[$i] = $i;

						return $arr;
						
					}

					function toHex($n)
					{
						$hex = strtoupper(dechex($n));
						$hex = str_pad($hex, 4, '0', STR_PAD_LEFT);
						return $hex;
					}

					$arr   = fillMyArr(33, 45) 
					       + fillMyArr(46, 57)  
					       + fillMyArr(65, 81) 
					       + fillMyArr(82, 93)
					       + fillMyArr(97, 112)
					       + fillMyArr(113, 122)
					       + fillMyArr(162, 168)
					       + fillMyArr(9724, 9724);



foreach ($arr as $n)
{
	echo $n . ' ' . '"\e' . toHex($n) . '",<br />';

}

On gists

event.js

JavaScript

example.js #

$(window).on('resizeEnd', function() {
    console.log('IMMA RESIZED 100 MILLI-FOCKING-SECONDS AGO');
});

On gists

Resize window with timeout (for responsive testing)

JavaScript

resize-timeout3.js #

 
$(window).resize( function() {
if( timer ) {
clearTimeout(timer);
}
 
var timer = setTimeout( function() {
// On Resize Code Goes Here
}, 100 );
}); 

On gists

Nette - routování - překladová tabulka

Nette

nette-routing.php #

<?php


$router[] = new Route('<presenter galerie|blog|novinky|ubytovani>/<action>[/<id>]', array(
                    'presenter' => array(
                        Route::FILTER_TABLE => array(
                            // řetězec v URL => presenter
                            'galerie' => 'Gallery',
                            'blog' => 'Blog',
                            'novinky' => 'News',
                            'ubytovani' => 'Accommodation'
                        )),
                    'action'    => 'default'
                ));
                $router[] = new Route('<presenter>/<action>[/<id>]', array(
                    'presenter' => 'Page',
                    'action'    => 'default'
                ));

On gists

Nette form - vykreslení chyb

Nette

error.latte #

  <!-- Jednoduché vykreslení chyb -->
  <div class="error-message" n:if="$form->hasErrors()">
          <div n:foreach="$form->errors as $error">{$error}</div>
  </div>
  
  
  
  {control $form errors}

On gists

Nette rendering - containers (form)

Nette-Forms

form.latte #

					{form ratingForm}
						<div class="rating-form">
						{foreach $form['container']->components as $name => $container}
							<div class="double-line">
								<div class="headline">
									{$form["container-$name-question"]->caption}	
								</div>
								<div class="inputs">
									{* <textarea placeholder="Komentář" class="common autosize" rows="1"></textarea> *}
									{input container-$name-question class => "common autosize", rows => "1"}
									<!-- <input type="text" class="common" placeholder="Komentář" /> -->
									<div class="radio-group">
										<label class="fakeradio">
							            	{input container-$name-question_checkbox_yes}

								            <span class="fakeradio">
								                <span></span>
								            </span>    
								            <span class="text">{$form["container-$name-question_checkbox_yes"]->caption}</span> 
							            </label>								
							            <label class="fakeradio">
							            	{input container-$name-question_checkbox_no}
								            <span class="fakeradio">
								                <span></span>
								            </span>    
								            <span class="text">{$form["container-$name-question_checkbox_no"]->caption}</span> 
							            </label>
						            </div>
								</div>
							</div>
							{/foreach}
							

							<div>
								<a class="cart-button arrow-right blue formSubmit" href=""><span class="inner">{_}Odeslat{/_}</span></a>
							</div>

						</div>
						{input submit class => "nod"}
					{/form}

On gists

js-object-examples.js

JavaScript-OOP jQuery-plugins

js-object-hamburger.js #

    /* Mobile version, MENU
    ---------------------------------------------------------------------------------------------------- */
    var hamburger = {

        init: function(el) {
            this.elements             = {};
            this.elements.el          =  $(el);
            this.elements.header      =  $('#header-mobile');
            this.elements.closeButton =  $('.hamburger-close');
        },

        open: function(e) {
            this.elements.header.fadeIn();
            e.preventDefault();
        },

        close: function(e) {
            this.elements.header.fadeOut();
            e.preventDefault();
        },

        getElement: function(el)
        {
            return this.elements[el];
        }
    };


    // init
    hamburger.init('.hamburger');

    // open
    hamburger.getElement('el').click(function(e){
        hamburger.open(e);
        $('#bg-overlay').show();
        
    });

    // close
    hamburger.getElement('closeButton').click(function(e){
        hamburger.close(e);
        $('#bg-overlay').hide();
    });



    $(document).click(function(e){


        var $hamburgerLink = $('a.hamburger .icon-11');
        var $mobileNav = $('.navigation--mobile');
        
        if ($hamburgerLink.is(e.target))
        {
            // nic
        }

        else if (!$mobileNav.is(e.target) 
            && $mobileNav.has(e.target).length === 0)
        {
            
            if ($('#bg-overlay').is(':visible') && $('#header-mobile').is(':visible'))
            {

                $('#bg-overlay').hide();
                hamburger.close(e);
            }
            
        }




    });