My Monkey Do

A Log of Coding Solutions

Coding

What keyboard does an HTML input bring up?

by

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

Disabled Trackbacks, but still getting them

by

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'

 

CSS iOS div lines disappear on zoom in

by

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.

 

Pseudo Selector First Child of Class

by

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