/ Gists

Gists

On gists

Easy Modal by JacklMoore

•
jQuery jQuery-plugins

Easy Modal.html #

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>jQuery Modal Demo</title>
		<style>
			* {
				margin:0; 
				padding:0;
			}

			#overlay {
				position:fixed; 
				top:0;
				left:0;
				width:100%;
				height:100%;
				background:#000;
				opacity:0.5;
				filter:alpha(opacity=50);
			}

			#modal {
				position:absolute;
				background:url(tint20.png) 0 0 repeat;
				background:rgba(0,0,0,0.2);
				border-radius:14px;
				padding:8px;
			}

			#content {
				border-radius:8px;
				background:#fff;
				padding:20px;
			}

			#close {
				position:absolute;
				background:url(close.png) 0 0 no-repeat;
				width:24px;
				height:27px;
				display:block;
				text-indent:-9999px;
				top:-7px;
				right:-7px;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script>
			var modal = (function(){
				var 
				method = {},
				$overlay,
				$modal,
				$content,
				$close;

				// Center the modal in the viewport
				method.center = function () {
					var top, left;

					top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
					left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

					$modal.css({
						top:top + $(window).scrollTop(), 
						left:left + $(window).scrollLeft()
					});
				};

				// Open the modal
				method.open = function (settings) {
					$content.empty().append(settings.content);

					$modal.css({
						width: settings.width || 'auto', 
						height: settings.height || 'auto'
					});

					method.center();
					$(window).bind('resize.modal', method.center);
					$modal.show();
					$overlay.show();
				};

				// Close the modal
				method.close = function () {
					$modal.hide();
					$overlay.hide();
					$content.empty();
					$(window).unbind('resize.modal');
				};

				// Generate the HTML and add it to the document
				$overlay = $('<div id="overlay"></div>');
				$modal = $('<div id="modal"></div>');
				$content = $('<div id="content"></div>');
				$close = $('<a id="close" href="#">close</a>');

				$modal.hide();
				$overlay.hide();
				$modal.append($content, $close);

				$(document).ready(function(){
					$('body').append($overlay, $modal);						
				});

				$close.click(function(e){
					e.preventDefault();
					method.close();
				});

				return method;
			}());

			// Wait until the DOM has loaded before querying the document
			$(document).ready(function(){

				$.get('ajax.html', function(data){
					modal.open({content: data});
				});

				$('a#howdy').click(function(e){
					modal.open({content: "Hows it going?"});
					e.preventDefault();
				});
			});
		</script>
	</head>
	<body>
		<a id='howdy' href='#'>Howdy</a>
	</body>
</html>
On gists

Delete from table with alias

•
MySql

Delete from table with alias.sql #

DELETE `cl`
FROM `ContentLink` `cl`
WHERE `cl`.`lorder` = 34;
On gists

czech sorting

•
PHP

czech sorting.php #

<?php

setlocale(LC_ALL, 'cs_CZ.UTF-8');
header("content-type: text/html; charset=UTF-8");

$arr = explode(",", "č, d, b, a, š, ř, o, x, z, ž, á, s, m");

uasort($arr, "strcoll");
echo "<pre>" . print_r($arr, 1) . "</pre>";
On gists

Simple rem mixin

•
SCSS

Rem mixin.scss #

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}
On gists

Sticky navigation using jquery (sticky after viewport is overhead...)

•
jQuery

Sticky navigation #

$(document).ready(function () {
                var aboveHeight = $('#topContainer').outerHeight();
                $(window).scroll(function () {
                    if ($(window).scrollTop() > aboveHeight) {
                        $('#menu').addClass('fixed').css('top', '0').next()
                            .css('padding-top', '50px');
                    } else {
                        $('#menu').removeClass('fixed').next()
                            .css('padding-top', '0');
                    }
                });
            });
On gists

Convert tables to InnoDB

•
MySql

convert-to-innodb #

SET @DATABASE_NAME = 'test';

SELECT  CONCAT('ALTER TABLE ', table_name, ' ENGINE=InnoDB;') AS sql_statements
FROM    information_schema.tables AS tb
WHERE   table_schema = @DATABASE_NAME
AND     `ENGINE` = 'MyISAM'
AND     `TABLE_TYPE` = 'BASE TABLE'
ORDER BY table_name DESC;
On gists

Komplení regexp na username

•
PHP

User RegExp #

$userRegExp = "#^[_A-Za-z0-9áäéëěíóöôúůüýčďňŕřšťžĺľÁÄÉËĚÍÓÖÔÚŮÜÝČĎŇŔŘŠŤŽĹĽ ]{3,40}\$#";
On gists

jquery - multiple on

•
jQuery

jquery multiple on #

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();
On gists

Complete ajax

•
jQuery

Complete ajax #

var jqxhr = $.ajax({
    url: url,
    type: "GET", // default is GET but you can use other verbs based on your needs.
    cache: true, // default is true, but false for dataType 'script' and 'jsonp', so set it on need basis.
    data: {}, // add your request parameters in the data object.
    dataType: "json", // specify the dataType for future reference
    jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
    statusCode: { // if you want to handle specific error codes, use the status code mapping settings.
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
On gists

Ajax - with done || fail

•
jQuery

ajax-done-fail #

$.ajax({ ... }).then(successHandler, failureHandler);
 
// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);