My Monkey Do

A Log of Coding Solutions

jquery

Chrome Zoom Shifts Layout

by

Problem:

When zooming in or out on Chrome, the widths of elements increases very slightly and causes some elements to shift to the next line.

Solution:

The actual problem is Chrome adjusts the widths of elements by tenths.  So something like 141px will turn into 141.1px which in turn causes all your elements to be just slightly bigger and not fit on one line.

I thought the solution to this was to go through all the problem elements and re-set the size to the original size.  However, it turns out you just have to go through the elements in javascript and Chrome will re-set the widths for you.  This leads me to believe this width adjustment on zoom is a bug in Chrome.  Below is what solved my problem in jQuery:


var menuItems = $("#navigation .menu a");
$(window).resize(function() {
menuItems.each(function(i, v){
//by just going through the menu items it seems to fix the width rounding on zoom.
});
});

Escape strings for use in JavaScript

by

When using parameters from the URL, it should always be sanitized before using it in your javascript.

Using jQuery you can easily do:

var safeString = $(“<span></span>”).text(unsafeString).html();

Using plain javascript:

var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

The stackoverflow discussion can be found here:  http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery

 

Bootstrap Tab linking

by

If you use Bootstrap (v3.x) you would see that clicking on a tab does add anything to the url so if you were to refresh, you wouldn’t go back to the tab you are on.  The post below says to get rid of the e.preventDefault() in the tab api and add some code to detect the window href so you can go directly to your tab.

http://www.gsdesign.ro/blog/jquery-ui-bootstrap-tabs-remember-last-selected-tab/

Fancybox not working after second click

by

Problem

Setting up fancybox 1.3.4 with inline content doesn’t work when clicking on the link twice.

Solution

The problem I think is with the upgraded version of jQuery.  If using jQuery 1.4 like the example, it should work fine.  But if you are using jQuery 1.10+ or even 1.9 you may run into this problem.  The work-around would be to explicitly set the content like so:  The proper workaround is to save the parent of the element you want to lightbox and then on fancybox-cleanup replace the fancybox-inline-tmp element with the element you lightboxed like so:

  var popupParent = jQuery("#popup").parent();
  jQuery(document).on('fancybox-cleanup', function() {
    popupParent.find('.fancybox-inlinetmp').replaceWith(jQuery("#popup"));
  });

Update: There are other errors that occur with Fancybox and jQuery 1.9+. Stack overflow has the patch… but you still need to do this fix for the second click.
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

Update 2:  Below is a patch to fix the inline issue too.  I only tested for one instance, so use with caution.  I added a objParent… look for that and that’s all the changes made.

jquery.fancybox-1.3.4_patch_2.js

 

 

Fancybox and Datepicker Error

by

Problem

Using fancybox and datepicker I got an “a is undefined” javascript error.  I added datepicker to the fancybox by using the following code:  

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).datepicker();
 });

This caused the datepicker to show up correctly, but when selecting a date it closed the fancybox modal while leaving the greyed background.

 

Solution

I am always amazed at how often I find solutions on StackOverflow.  Even if the OP didn’t have my exact problem, the solution given solved my problem.   Because fancybox (in general all lightboxes) duplicates the DOM datepicker gets confused on which calendar modal to close.  The solution is as follows: 

$('#fancybox-wrap').on('focusin', '.datepicker', function(e) {
$(this).attr("id","datepickerNEWID");
$(this).datepicker();
 });

http://stackoverflow.com/questions/3392961/jquery-datepicker-does-not-work-inside-lightbox