• 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

Coding

Pseudo Selector First Child of Class

June 30, 2014 by Webhead

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

 

 

Filed Under: Coding Tagged With: css

Vertically Center Anything With Dimensions

June 23, 2014 by Webhead

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

Filed Under: Coding Tagged With: css

Easy Way to Add a Class to a Menu Item in WordPress

June 20, 2014 by Webhead

Go to Appearance -> Menus.  Open up Screen Options in the top right.  Click on the CSS Classes checkbox under Show Advanced menu properties.  Now each menu item has a textbox where you can enter css classes.

Filed Under: Coding Tagged With: wordpress

Best way to detect Retina with Javascript

May 20, 2014 by Webhead

Best way according to W3C standards:

http://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript

Filed Under: Coding Tagged With: image, javascript

WordPress Heartbeat API

April 29, 2014 by Webhead

I could not find any extensive documentation on the WordPress Heartbeat API, so I am writing here to remember what I have learned through various tutorials throughout the web.

The Heartbeat API is written in Javascript.  Think of it like a javascript function that gets run every 60 seconds (depending on the interval) which sends data via POST to the server and then the server returns a response.  All of which you can easily hook into.  It was introduced in WordPress 3.6.

Quick Examples

PHP


// server received whatever parameters from when javascript triggered the "heartbeat-send" event.
function myplugin_heartbeat_received( $response, $data ) {
if ( !empty( $data['myplugin_id'] ) ) {
$response['myplugin_got_it'] = true;
}
return $response;
}
add_filter( 'heartbeat_received', 'myplugin_heartbeat_received', 10, 2 );

Javascript


jQuery(document).ready(function($) {
wp.heartbeat.interval= 15;
// set some parameters when it's time to send data to the server
$(document).on('heartbeat-send.myplugin', function(e, data){
data['myplugin_id'] = my_id;
});

// do something when your page gets a response.
$(document).on('heartbeat-tick.myplugin', function(e, data){

if ( data.hasOwnProperty( 'myplugin_got_it' ) ) {
refreshPage();
}
});

});

Heartbeat Pulse Interval

The ‘heartbeat_settings’ filter gets applied in the ‘init’ hook, priority 0 in wp_default_scripts in wp-includes/script-loader.php.  So if you do use the hook on the server-side and want to only run it on certain pages, be prepared to parse the URL because a lot of WP functions aren’t available at that time.  Alternatively you can set the interval in javascript with wp.heartbeat.interval(15) where 15 is seconds.  Note some other tutorials say to use ‘fast’, ‘standard’, ‘slow’, but that didn’t work for me for some reason.

 

Tutorials

I found these tutorials to be the most helpful.

http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started–wp-32446

http://code.tutsplus.com/tutorials/the-heartbeat-api-changing-the-pulse–wp-32462

http://code.tutsplus.com/tutorials/heartbeat-api-using-heartbeat-in-a-plugin–wp-32496

 

Filed Under: Coding Tagged With: javascript, php, wordpress

edit_users capability on multisite

April 29, 2014 by Webhead

No matter how hard you try, if you add the edit_user capability to a user on multi-site and that user is not a super-admin, the user will not have the edit_user capability.  This is hard-coded into WP_User’s map_meta_cap.  There is a filter so after it’s all done, you can search for it and take it out if you want.

Filed Under: Coding Tagged With: php, wordpress

  • « Go to Previous Page
  • Go to page 1
  • Interim pages omitted …
  • Go to page 5
  • Go to page 6
  • Go to page 7
  • Go to page 8
  • Go to page 9
  • Interim pages omitted …
  • Go to page 30
  • 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