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

Tagged with: , ,

Fill out the SAQ-EP if you are a normal self hosted ecommerce site that outsources their payment to a 3rd party.  Self Assessment Questionnaire (SAQ).

http://www.pci-initiative.org/content/saq-ep-partially-outsourced-e-commerce-merchants

https://www.pcicomplianceguide.org/saq-a-vs-a-ep-what-e-commerce-merchants-service-providers-need-to-know-now/

Worth noting that others may interpret this differently:

http://stackoverflow.com/questions/21484714/is-pci-saq-a-sufficient-for-an-ecommerce-website-with-a-custom-payment-page

https://pcissc.secure.force.com/faq/articles/Frequently_Asked_Question/Why-is-SAQ-A-EP-used-for-Direct-Post-while-SAQ-A-is-used-for-iFrame-or-URL-redirect

Just fyi (shameless affiliate link coming up), WPEngine host is PCI Compliant “as long as no payment card data is stored, hosted, or otherwise processed by WP Engine…”

Tagged with:

I was having trouble figuring out what input type brings up what keyboard on the iPhone and iPad.  Turns out the number type doesn’t bring up the numeric pad.  Only “tel” does.

This is a great article on what input type brings up what keyboard:

https://about.zoosk.com/ko/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

When your input is surrounded by a form tag, the keyboard will show a blue “Go” button.  Otherwise it will show a regular return button.

http://stackoverflow.com/questions/22986347/go-vs-return-button-in-ios-keyboard-for-html-input-forms

Tagged with: , , , ,

After updating to OSX 10.10.1 my mid 2010 macbook became very slow.  Looking at my System Logs I found the following messages repeated over and over and still continuing:

11/20/14 8:10:53.608 AM Solar Service[518]: End of data
11/20/14 8:10:53.608 AM Solar Service[518]: Event = 2 device index = 2
11/20/14 8:10:53.626 AM Solar Service[518]: Input data callback for device 0x68cc0
11/20/14 8:10:53.626 AM Solar Service[518]: End of data
11/20/14 8:10:53.626 AM Solar Service[518]: Event = 2 device index = 2
11/20/14 8:10:53.627 AM Solar Service[518]: Input data callback for device 0x68cc0
11/20/14 8:10:53.627 AM Solar Service[518]: End of data

Logitech’s Solar Service app was printing a lot of messages.  Not sure if this was causing the slowness, but it definitely isn’t good.  There is no fix for this, just need to ignore the log messages.  Here is how to do it:

http://forums.logitech.com/t5/Keyboards-and-Keyboard-Mice/Solar-Service-writing-thousands-of-log-entries-on-Mac-OS-X-for/td-p/690182/page/2

Problem

When scaling the FireFox and having a background image size set to 100%, the bottom of the image sometimes shows a line on the bottom showing the background behind it.

Solution

Firefox seems to have a problem with background-size: 100%.  instead use background-size: 99.99%;

 

http://stackoverflow.com/questions/18423884/flickering-line-under-background-image-in-firefox-on-resize

Tagged with: ,

All done in css, no images.  Float the background past the normal page width based on percentage.  one on the left, one on the right.

 

http://stackoverflow.com/questions/8893312/css-bi-color-flexible-horizontal-background-band

Tagged with:

Problem

I disabled trackbacks in the general WordPress settings, used the Simple Trackback Disabler plugin (because i’m too lazy to do it in mysql) and I still got trackbacks.

 

Solution

The Simple Trackback Disabler apparently doesn’t disable trackbacks for attachments as of this writing.  Next time, don’t be lazy, just do the sql query:

update wp_posts
set ping_status = 'closed'
WHERE `ping_status` = 'open'

 

Problem

In iOS devices sometimes safari can display an annoying line above and below div elements.  Like so:

Unwanted div lines

 

Solution

The solution is quite hacky and hopefully this is a bug in Safari and it gets fixed soon.  The solution is to put a negative 1px margin on the sides you see the lines.  So if you see the lines above a certain div, set the top margin to -1px.

Thanks to this blog for the solution.

 

Tagged with: , ,

Problem

How do you apply a style to only the first element with a certain class?

.just-this-one {

background:blue;

}

<div class="top">

<div class="not-this-one">not this one</div>
<div class="just-this-one">just this one</div>
<div class="just-this-one">but not really</div>

</div>

:first-child does not do this, that just selects the very first child no matter what the class is.

:first-of-type doesn’t even do this.  but you would think it does, but “type” here implies the HTML element type like “div”, “p”, etc.

 

Solution

Use the tilde “~” to “undo” styles on elements where the class previously appeared.  So first apply the style you want to all .just-this-one elements.  Then apply “undo” that style for all subsequent elements.

.just-this-one {

background:blue;

}

.just-this-one ~ .just-this-one {

background:none;

}

This genius solution found on stack overflow (not the accepted answer):

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class

 

Additional note:  If you have a pseudo selector like :before, use something like the code below to write content before all li elements except the first one.

.menu li:before {
content: '';
}

.menu li ~ li:before {
content: "\002F\0020\002F";
color: #aaaaaa;
}

 

 

Tagged with:

One way to easily vertically center a div is to set it to be absolute, set the width, height and then the top, bottom, left and right all equal to 0.  Something like this:

.vertically-centered-box {

  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100px;
  height:100px;
  margin:auto;

}

From: http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

Tagged with:
Top