• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

jquery

Chrome Zoom Shifts Layout

October 3, 2017 by Webhead

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.
});
});

Filed Under: Coding Tagged With: chrome, jquery

Escape strings for use in JavaScript

October 26, 2015 by Webhead

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

 

Filed Under: Coding Tagged With: javascript, jquery, xss

Bootstrap Tab linking

March 26, 2014 by Webhead

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/

Filed Under: Coding Tagged With: bootstrap, javascript, jquery

Google CDN

October 3, 2013 by Webhead

A lot of scripts and even styles can be retrieved from google’s cdn.  Save yourself some time, save your server some time, and save your visitors some time.

jQuery UI themes:

http://stackoverflow.com/questions/820412/downloading-jquery-css-from-googles-cdn

Scripts in WordPress:

Use the Use Google Libraries plugin.

Filed Under: Coding, Off the Shelf Tagged With: google, jquery

Fancybox not working after second click

August 29, 2013 by Webhead

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

 

 

Filed Under: Coding Tagged With: javascript, jquery

Fancybox and Datepicker Error

August 27, 2013 by Webhead

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

 

 

Filed Under: Coding Tagged With: jquery

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to Next Page »

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools