Tuesday, March 31, 2015

animate.css example, tutorials

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="animate.min.css">
    <style>
    #yourElement {
        -vendor-animation-duration: 3s;
        -vendor-animation-delay: 2s;
        -vendor-animation-iteration-count: 1;
    }
    </style>
</head>
<body>
    <h1 id="yourElement" class="animated bounce">Example</h1>
    <button id="foo">click me</button>
    <script>
        $(document).ready(function() {
            $( "#foo" ).on( "click", function( event ) {
                alert( "This will be displayed only once." );
                $( this ).off( event );
            });
        });
    </script>
</body>
</html>



Sunday, March 29, 2015

CSS3 normalize for standard

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

CSS3 SASS MIXINS

// ---- CSS3 SASS MIXINS ----
// https://github.com/madr/css3-sass-mixins
//
//  Copyright (C) 2011 by Anders Ytterström
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
//

// ---- LEGACY IE SUPPORT USING FILTERS ----
//  Should IE filters be used or not?
//  PROS: gradients, drop shadows etc will be handled by css.
//  CONS: will harm the site performance badly,
//        especially on sites with heavy rendering and scripting.
$useIEFilters: 0;
// might be 0 or 1. disabled by default.
// ---- /LEGACY IE SUPPORT USING FILTERS ----


@mixin background-size ($value) {
  -webkit-background-size: $value;
          background-size: $value;
}

@mixin border-image ($path, $offsets, $repeats) {
     -moz-border-image: $path $offsets $repeats;
       -o-border-image: $path $offsets $repeats;
  -webkit-border-image: $path $offsets $repeats;
          border-image: $path $offsets $repeats;
}

@mixin border-radius ($values) {
     -moz-border-radius: $values;
  -webkit-border-radius: $values;
          border-radius: $values;
             -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
                  background-clip: padding-box;
}

@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters) {
     -moz-box-shadow: $x $y $offset $hex;
  -webkit-box-shadow: $x $y $offset $hex;
          box-shadow: $x $y $offset $hex;
 
  @if $ie == 1 {
    $iecolor: '#' + red($hex) + green($hex) + blue($hex);
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'));
  }
}

@mixin box-sizing($value) {
     -moz-box-sizing: $value;
  -webkit-box-sizing: $value;
          box-sizing: $value;
}

// requires sass 3.2
//@mixin keyframes {
//     @-moz-keyframes { @content; }
//      @-ms-keyframes { @content; }
//       @-o-keyframes { @content; }
//  @-webkit-keyframes { @content; }
//          @keyframes { @content; }
//}

@mixin linear-gradient($from, $to, $ie: $useIEFilters) {
  @if $ie != 1 { background-color: $to; }
 
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -ms-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: linear-gradient(top, bottom, $from, $to);

  @if $ie == 1 {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'));
  }
}

@mixin rgba-bg ($hex, $alpha, $ie: $useIEFilters) {    
  @if $ie == 1 {
    background-color: none;
    $hexopac: ie-hex-str(rgba($hex, $alpha));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}'));
  }
  @else {
    background-color: $hex;
    background-color: rgba($hex, $alpha);
  }
}

@mixin perspective($perspective) {
     -moz-perspective: $perspective;
      -ms-perspective: $perspective;
  -webkit-perspective: $perspective;
          perspective: $perspective;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

@mixin transform ($transforms) {
  -moz-transform: $transforms;
    -o-transform: $transforms;
   -ms-transform: $transforms;
-webkit-transform: $transforms;
          transform: $transforms;
}

    @mixin matrix ($a, $b, $c, $d, $e, $f) {
      -moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
        -o-transform: matrix($a, $b, $c, $d, $e, $f);
       -ms-transform: matrix($a, $b, $c, $d, $e, $f);
    -webkit-transform: matrix($a, $b, $c, $d, $e, $f);
              transform: matrix($a, $b, $c, $d, $e, $f);
    }

    @mixin rotate ($deg) {
      @include transform(rotate(#{$deg}deg));
    }

    @mixin scale ($size) {
      @include transform(scale(#{$size}));
    }

    @mixin translate ($x, $y) {
    @include transform(translate($x, $y));
    }

@mixin transition ($value) {
     -moz-transition: $value;
       -o-transition: $value;
      -ms-transition: $value;
  -webkit-transition: $value;
          transition: $value;
}

// ==== /CSS3 SASS MIXINS ====

my custom application core changes for codeigniter

my custom system changes...

in application/core/Lang.php

function load($langfile = '', $idiom = '', $return = FALSE, $add_suffix = TRUE, $alt_path = '')
{
$langfile = str_replace('.php', '', $langfile);

if ($add_suffix == TRUE)
{
$langfile = str_replace('_lang.', '', $langfile).'_lang';
}

$langfile .= '.php';

if (in_array($langfile, $this->is_loaded, TRUE))
{
return;
}

$config =& get_config();

if ($idiom == '')
{
// BOROO edited this code [start]
            //урт нэрийг богино кодоор солиж хэлний санг зохицууллаа
$deft_lang = ( ! isset($config['language'])) ? 'mn' : $config['language'];
$idiom = ($deft_lang == '') ? 'mn' : $deft_lang;
            // BOROO edited this code [end]
}

// Determine where the language file is and load it
if ($alt_path != '' && file_exists($alt_path.'language/'.$idiom.'/'.$langfile))
{
include($alt_path.'language/'.$idiom.'/'.$langfile);
}
else
{
$found = FALSE;

foreach (get_instance()->load->get_package_paths(TRUE) as $package_path)
{
if (file_exists($package_path.'language/'.$idiom.'/'.$langfile))
{
include($package_path.'language/'.$idiom.'/'.$langfile);
$found = TRUE;
break;
}
}

if ($found !== TRUE)
{
show_error('Unable to load the requested language file: language/'.$idiom.'/'.$langfile);
}
}


if ( ! isset($lang))
{
log_message('error', 'Language file contains no data: language/'.$idiom.'/'.$langfile);
return;
}

if ($return == TRUE)
{
return $lang;
}

$this->is_loaded[] = $langfile;
$this->language = array_merge($this->language, $lang);
unset($lang);

log_message('debug', 'Language file loaded: language/'.$idiom.'/'.$langfile);
return TRUE;
}

in application/core/Router.php


function _set_routing()
{
// Are query strings enabled in the config file?  Normally CI doesn't utilize query strings
// since URI segments are more search-engine friendly, but they can optionally be used.
// If this feature is enabled, we will gather the directory/class/method a little differently
$segments = array();
if ($this->config->item('enable_query_strings') === TRUE AND isset($_GET[$this->config->item('controller_trigger')]))
{
if (isset($_GET[$this->config->item('directory_trigger')]))
{
$this->set_directory(trim($this->uri->_filter_uri($_GET[$this->config->item('directory_trigger')])));
$segments[] = $this->fetch_directory();
}

if (isset($_GET[$this->config->item('controller_trigger')]))
{
$this->set_class(trim($this->uri->_filter_uri($_GET[$this->config->item('controller_trigger')])));
$segments[] = $this->fetch_class();
}

if (isset($_GET[$this->config->item('function_trigger')]))
{
$this->set_method(trim($this->uri->_filter_uri($_GET[$this->config->item('function_trigger')])));
$segments[] = $this->fetch_method();
}
}

// Load the routes.php file.
if (defined('ENVIRONMENT') AND is_file(APPPATH.'config/'.ENVIRONMENT.'/routes.php'))
{
include(APPPATH.'config/'.ENVIRONMENT.'/routes.php');
}
elseif (is_file(APPPATH.'config/routes.php'))
{
include(APPPATH.'config/routes.php');
}

$this->routes = ( ! isset($route) OR ! is_array($route)) ? array() : $route;
unset($route);

// Set the default controller so we can display it in the event
// the URI doesn't correlated to a valid controller.
$this->default_controller = ( ! isset($this->routes['default_controller']) OR $this->routes['default_controller'] == '') ? FALSE : strtolower($this->routes['default_controller']);

        // BOROO added this code [start]
        $this->dashboard_controller = (!isset($this->routes['dashboard_controller']) OR $this->routes['dashboard_controller'] == '') ? FALSE : strtolower($this->routes['dashboard_controller']);
        $this->seo_controller = (!isset($this->routes['seo_controller']) OR $this->routes['seo_controller'] == '') ? FALSE : strtolower($this->routes['seo_controller']);
        $this->supported_languages = (!isset($this->routes['supported_languages']) OR empty($this->routes['supported_languages'])) ? array() : $this->routes['supported_languages'];
        // BOROO added this code [end]

// Were there any query string segments?  If so, we'll validate them and bail out since we're done.
if (count($segments) > 0)
{
return $this->_validate_request($segments);
}

// Fetch the complete URI string
$this->uri->_fetch_uri_string();

// Is there a URI string? If not, the default controller specified in the "routes" file will be shown.
if ($this->uri->uri_string == '')
{
return $this->_set_default_controller();
}

// Do we need to remove the URL suffix?
$this->uri->_remove_url_suffix();

// Compile the segments into an array
$this->uri->_explode_segments();

// Parse any custom routing that may exist
$this->_parse_routes();

// Re-index the segment array so that it starts with 1 rather than 0
$this->uri->_reindex_segments();

}


function _set_default_controller()
{
// BOROO edited this code [start]
        //админ санд ондоо контроллер ажиллана
        $default_controller = $this->admin_mode ? $this->dashboard_controller : $this->default_controller;

        if ($default_controller === FALSE) {
            show_error("Unable to determine what should be displayed. A default route has not been specified in the routing file.");
        }
// Is the method being specified?
if (strpos($default_controller, '/') !== FALSE)
{
$x = explode('/', $default_controller);

$this->set_class($x[0]);
$this->set_method($x[1]);
$this->_set_request($x);
}
else
{
$this->set_class($default_controller);
$this->set_method('index');
$this->_set_request(array($default_controller, 'index'));
}
        // BOROO edited this code [end]

// re-index the routed segments array so it starts with 1 rather than 0
$this->uri->_reindex_segments();

log_message('debug', "No URI present. Default controller set.");

}


function _validate_request($segments)
{
        // BOROO added this code [start]
        if (!empty($this->supported_languages) && count($this->supported_languages) > 0) {

            $lang_code = strtolower($segments[0]);

            if (array_key_exists($lang_code, $this->supported_languages)) {

                $this->config->set_item('language', $lang_code);
                $this->set_language($lang_code);

                $segments = array_slice($segments, 1);
            }
        }
        // BOROO added this code [end]
       
if (count($segments) == 0)
{
return $segments;
}

// Does the requested controller exist in the root folder?
if (file_exists(APPPATH.'controllers/'.$segments[0].'.php'))
{
return $segments;
}

// Is the controller in a sub-folder?
if (is_dir(APPPATH.'controllers/'.$segments[0]))
{
            // BOROO added this code [start]
            if (!empty($this->admin_uri) && $this->admin_uri == $segments[0]) {
                $this->admin_mode = TRUE;
            } else {
                if (!empty($this->api_uri) && $this->api_uri == $segments[0]) {
                    $this->api_mode = TRUE;
                }
            }
            // BOROO added this code [end]

// Set the directory and remove it from the segment array
$this->set_directory($segments[0]);
$segments = array_slice($segments, 1);

if (count($segments) > 0)
{
// Does the requested controller exist in the sub-folder?
if ( ! file_exists(APPPATH.'controllers/'.$this->fetch_directory().$segments[0].'.php'))
{
if ( ! empty($this->routes['404_override']))
{
$x = explode('/', $this->routes['404_override']);

$this->set_directory('');
$this->set_class($x[0]);
$this->set_method(isset($x[1]) ? $x[1] : 'index');

return $x;
}
else
{
show_404($this->fetch_directory().$segments[0]);
}
}
}
else
{
                // BOROO edited this code [start]
                //админ санд ондоо контроллер ажиллана
                $default_controller = $this->admin_mode ? $this->dashboard_controller : $this->default_controller;

                // Is the method being specified in the route?
                if (strpos($default_controller, '/') !== FALSE) {
                    $x = explode('/', $default_controller);

                    $this->set_class($x[0]);
                    $this->set_method($x[1]);
                } else {
                    $this->set_class($default_controller);
                    $this->set_method('index');
                }
               
                // Does the default controller exist in the sub-folder?
                if (!file_exists(APPPATH . 'controllers/' . $this->fetch_directory() . $default_controller . '.php')) {
                    $this->directory = '';
                    return array();
                }
                // BOROO edited this code [end]

}

return $segments;
}

        // BOROO added this code [start]
        if (count($segments) > 0) {
            if (file_exists(APPPATH . 'controllers/' . $this->fetch_directory() . $segments[0] . '.php')) {
                return $segments;
            }
            if (file_exists(APPPATH . 'controllers/' . $this->fetch_directory() . $this->seo_controller . '.php')) {
                $this->set_class($this->seo_controller);
                array_unshift($segments, $this->seo_controller);
                return $segments;
            } else {
                show_404();
            }

            return $segments;
        }
        // BOROO added this code [end]

// If we've gotten this far it means that the URI does not correlate to a valid
// controller class.  We will now see if there is an override
if ( ! empty($this->routes['404_override']))
{
$x = explode('/', $this->routes['404_override']);

$this->set_class($x[0]);
$this->set_method(isset($x[1]) ? $x[1] : 'index');

return $x;
}


// Nothing else to do at this point but show a 404
show_404($segments[0]);

}

// BOROO added this code [start]
    function is_api_mode() {
        return $this->api_mode;
    }
   
    function is_admin_mode() {
        return $this->admin_mode;
    }
   
    function set_language($language) {
        $this->language = trim($language, '/') . '/';
    }
   
    function fetch_language() {
        return $this->language;
    }
   
    function get_supported_languages() {
        return $this->supported_languages;
    }
    // BOROO added this code [end]

beforeunload confirm using jquery

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="boroo">
<section>
<article>
hello, world!
</article>
</section>
</div>
<script>
jQuery(window).bind(
    "beforeunload",
    function() {
        return confirm("Do you really want to close?")
    }
)
</script>
</body>
</html>

Tuesday, March 24, 2015

how working on @media queries using modernizr , respond

in css file.

@media (min-width: 768px) and (max-width: 1024px) {
    #boroo >section> article {
        padding: 10px;
        background: red;
    }
}
@media only screen and (max-width: 768px) {
    #boroo section {
        display: block;
        padding: 10px;
        background: green;
    }
}

in html file.

<!DOCTYPE html>
<html lang="en">
    <head>
       
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link type="text/css" rel="stylesheet" href="style.css" />
    <script src="modernizr.custom.70750.js"></script>
    <!--[if lt IE 9]>
        <script src="respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="boroo">
        <section>
            <article>
                hello, world!
            </article>
        </section>
    </div>
</body>
</html>