• 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

html

iPad textarea not selectable

April 20, 2015 by Webhead

Problem

The textarea on iPad could not be selected and could not have anything entered.

Solution

The textarea in iPad only responds to the ‘touchstart’ event and not the ‘click’ event, but regular input accepts the ‘click’ apparently.  I some javascript where it would catch the ‘touchstart’ event and trigger a ‘click’ event to make things a little faster on iPads.  This prevented the textarea from being selected and edited.

Another possible solution was I didn’t have the cols and rows attribute in the textarea html tag.  Adding these attributes before the class or id attributes solved it for some people.

http://stackoverflow.com/questions/3909843/why-is-my-text-area-disabled-on-ipad

Filed Under: Coding Tagged With: html, iPad, javascript

Javascript defaultValue

March 25, 2014 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.

Filed Under: Coding Tagged With: html, javascript

Careful with supporting all versions of IE 8

March 22, 2014 by Webhead

Problem

Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites.  However, like different versions of Chrome and Firefox, IE8 also has different versions.  There are about 6 different versions of IE8 in the wild.  2 of which I have run into personally.  1 version, on Windows 7 uses the IE8 standards document to show websites while another version runs on Windows XP to show IE7 standards document.  Until 2008, IE8 used to default to render using IE7!  What the hell?  Anyway, the real problem is IE7 does not support a lot of CSS that we use today since, you know, it’s over 10 years old.

Solutions

A good starting point is to use the IE-edge meta tag within the head:

<meta http-equiv="x-ua-compatible" content="IE=Edge"/> 

Another good starting point is to use the modernizr.js script.

IE8 using IE7 does not support box-sizing.  Using modernizr and some handy dandy javascript, we can adjust the dimensions of elements.

Modernizr.addTest("boxsizing", function() {
return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
jQuery(document).ready(function($) {
if( $('html').hasClass('no-boxsizing') ) {
$('.no-boxsizing, .no-boxsizing *').each(function(){
var fullW = $(this).outerWidth(),
actualW = $(this).width(),
wDiff = fullW - actualW,
newW = actualW - wDiff;

$(this).css('width',newW);

var fullH = $(this).outerHeight(),
actualH = $(this).height(),
hDiff = fullH - actualH,
newH = actualH - hDiff;

$(this).css('height',newH);

});
}
});

IE8 using IE7 has no table-cell

One solution is to use

*float:left;

Or, as one stackoverflow person found, use !ie7.. sorry, forgot to save the link.  but anything with !ie7 will only apply to ie7 and below.  (the ie7 part can actually be any non-valid text like !ieisold)

float:left !ie7;

To vertically align images, try this:  http://stackoverflow.com/questions/10998614/ie7-vertically-align-middle-not-working

To test your work out on multiple versions of IE without you having to actually have Windows installed:

http://www.browserstack.com/

Filed Under: Coding Tagged With: css, html, IE crap

Z-Index, iFrames, and IE

May 5, 2013 by Webhead

Problem

I’m using the Apprise jQuery plugin to show a fancy alert box on a webpage.  The problem is I also have the embedded iFrame code from YouTube on the page.  When the fancy alert box shows in Internet Explorer, it shows behind the video.  It works in all other browsers.

 

Solution

The solution is to add the wmode=transparent or wmode=opaque parameter to the youtube url.  Have the iframe point to something like the following:

https://youtube.com/watch?v=xyz%3Fwmode%3Dtransparent

 

Source: http://stackoverflow.com/questions/5281002/z-index-and-iframes

Filed Under: Coding Tagged With: google, html, IE crap

Space Under Image Link

March 20, 2013 by Webhead

Problem

I had the following code like so:

<div class=”someborder”><a href=”#”><img src=”someimage.png”></a></div><div>some text</div>

The class “someborder” basically made a border around the image.  The problem was that there would be some space under the image and then the border would show.  I took off all padding and margins on the image and divs and the space still would not go away.

Solution

Simple as vertical-align:text-bottom.  I’m guessing this works because I have some text in the next div.  Not sure why the text in another div would affect the image, but ok, it works.

img {
vertical-align: text-bottom;
}

 

source: http://csscreator.com/node/110

Filed Under: Coding Tagged With: css, html

Favicon png or ico?

October 18, 2012 by Webhead

I found some great info, where I always do, on stackoverflow.  Basically it all modern browsers request a ico file so its best to have it in case you don’t have a <link> tag.  The best thing was the ico generator url on Dynamic Drive which does transparency.  Just great stuff.  Scroll down to the answer with the most votes, not the accepted one.

http://tools.dynamicdrive.com/favicon/

source: http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos
keywords: favicon png

Filed Under: Tools Tagged With: html

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • 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