A Log of Coding Solutions
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/
by Webhead
For some reason I have never needed to use the defautlValue property up until today. I was pleased to find javascript can access the original input value so tracking changes in a form is a bit easier. However, the defaultValue only works as expected for “text”, “file”, and “password” fields.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025
A workaround is to use type=”text” and just have a style=”display:none;” to act like a hidden field.
by Webhead
Setting up fancybox 1.3.4 with inline content doesn’t work when clicking on the link twice.
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
by Webhead
Internet Explorer 8 (I no longer even look at IE 7) seems to not be able to see the padding on an anchor tag within a ul > li > a structure. Using jQuery I have a hover event on the li, however it only works on the bottom 1px of the li.
I tried adding position:relative and zoom:1, as some have suggested but that doesn’t work. I then just tried to put a background in the anchor tag to see if IE even recognizes that the anchor tag has padding. It did recognize the padding and once the background was in the hover also worked. Turns out IE needs a background set? I found another person who had this problem and the solution was to set the background to a transparent image of 1×1 px.
by Webhead
Ran into a great article that explains the differences between return false, preventDefault and stopPropagation. Here’s a summary:
In most cases you would only want to do preventDefault. If you stopPropagation you prevent your code from being extensible.
source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
by Webhead
I found a great utility plugin to help with adding a Image picker field to a widget. Basically you install and activate this plugin and you make your own widget and utilize the image field easily.
The only problem I had was that it didn’t work in Firefox. I found a simple error on line 72 in the scripts.js file. Instead of calling events.target.href it should be e.target.href because e is the parameter passed in.
how to use: http://mondaybynoon.com/20120206/wordpress-widget-image-field/