// prevent background of modal from scrolling
  // DOMMouseScroll for Firefox equivalent
  $(document).on("mousewheel DOMMouseScroll", ".modal-backdrop, .modal-body", function(event) {
    event.stopPropagation();
    event.preventDefault();
  });

  // prevent background of modal from scrolling
  var keysThatScroll = new Array(33,34,35,36,37,38,39,40);
  var DEBUG_KEY_SCROLL_PREVENTION = false;
  $(document).on("keydown", function(event) {
    var key = event.which;
    if ($.inArray(key,keysThatScroll) === -1) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("no worries for this key", key);
      return true; // no worries for this key
    }

    if ($(".modal-backdrop").length === 0) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("no modification when modal is off");
      return true; // no worries for these keys
    }

    if (event.target == null || event.target.tagName == null) { // should not happen
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("event.target or event.target.tagName is null or undefined");
      return true;
    }

    if (event.target.tagName.toLowerCase() === "body") {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, on body, stopping");
      event.preventDefault();
      return false;
    }

    if (event.target.type == null) {
      if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, no type and not body, letting go");
      return true; // ok keep going
    }

    var type = event.target.type.toLowerCase();
    if (DEBUG_KEY_SCROLL_PREVENTION) console.log("keydown, type", type);
    if (type == 'input' || type == 'text' || type == 'textarea' ||type == 'select') {
      // normal keyup and keydown allowed in modals
      return true; // ok keep going
    }
    
    // stop scrolling keys in modal of further effects, for example if focus is on a button and keydown
    event.preventDefault();
    event.stopPropagation();
    return false; // in jQuery returning false does the same as preventDefault and stopPropagation
  });

Solution #2

   // extend Bootstrap modal to remove scrollbar during modal show
   var _show = $.fn.modal.Constructor.prototype.show;
   $.fn.modal.Constructor.prototype.show = function() {
      _show.apply(this, arguments);
      $("body").addClass("modal-on");
   };
   var _hide = $.fn.modal.Constructor.prototype.hide;
   $.fn.modal.Constructor.prototype.hide = function() {
      _hide.apply(this, arguments);
      $("body").removeClass("modal-on");
   };

along with CSS

html,
body {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}
body {
   overflow-y: scroll;
}

body.modal-on {
   overflow:hidden;
}

The post Mousewheel prevent body scroll on modal appeared first on Techy Things.

Should I use disabled="disabled" or only disabled ?

• For HTML, <input type="text" disabled="disabled" /> is a safe markup.
• For HTML5, <input type="text" disabled /> is valid and preferred.

How to modify the checkbox state with jQuery :

• $(".mySelector").prop("checked", true);

How to modify the disabled state with jQuery :

• $(".mySelector").prop("disabled", true);

The post Handling input disabled="disabled" and prop-checked state in HTML5 appeared first on Techy Things.

To reach almost all users now (in 2015) :

opacity:0;
filter: "alpha(opacity=0)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

The full CSS cross-browser (some might be useless now)

opacity:0;
filter: "alpha(opacity=0)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;

The post CSS filter opacity for cross-browser transparency appeared first on Techy Things.

Solution #1 - margin 0 auto

This is an often-used and widely supported method and clean. However the drawback is you have to specify the width of the item. This reduce the flexibility and can be used only in limited scenarios.

margin:0 auto;
width:80%;

Solution #2 - left -50%, left 50%

div#menu-primary .menu {
    float: right;
    left: -50%;
    position: relative;
}
div#menu-primary .menu ul {
    left: 50%;
    list-style: none outside none;
    position: relative;
}

Test:

Solution #3 - Traditional center alignment

<center>
<div align="center"></div>
</center>

This is not proper modern code, but is supported by all and the most older (ancient) browser - hence makes it the most widely supported solution.

Solution #4 - Use inline-block inside display:table div

Solution #5 - Use inline-block inside a text-align:center element

This is not supported by IE6, 7 or 8.

The post Best ways to center align div with CSS appeared first on Techy Things.

I never need to go above 10 for z-index.

The thing people don't know is that within a z-index-stacked division, the z-index count restarts at 0. This means if you are inside a z-index-5 division stacked on top of other divisions, then everything you put inside it will be based on a base 5 z-index. Then you can restart the count at 0 inside this division.

In the example above, a division with z-index 1 inside a division of z-index 7 will render above another division of z-index 5.

The post Ending the z-index madness and avoiding 9999 z-indexes appeared first on Techy Things.

This is something that is often useful when you have two embedded divisions. You set the parent width in percentage, and want the inner div to spread out automatically up the parent's size with some margin around it to create a nice border effect.

I journeyed across seas and mountains to query the Great Html Oracle Spirit and I bring back two solutions :

 The "Absolute" Solution

Use position:absolute and do not specify any width and height. However specify top:20px; left:20px; right:20px; botton:20px; !

<div id="rich-text-editor" style="position:absolute; z-index:6; top:40px; left:40px; width:80%; height:90%; background-color:gray; border-radius:20px;">
 <div style="position:absolute; top:20px; left:20px; right:20px; bottom:20px; background-color:black; border-radius:10px; ">
 </div>
</div>

 The "Border" Solution

Use a single division with fat borders of several pixels. You can even make those borders rounded using CSS ! However compared to the solution above, you could just have the outer border rounded : the inner border will be squared.

<div id="rich-text-editor" style="position:absolute; z-index:6; top:40px; left:40px; width:80%; height:90%; background-color:black; border:15px solid gray; border-radius:10px; "> stuff here </div>

The post How to grow a div to the maximum width available of parent div without exceeding it appeared first on Techy Things.