dpuk44

Bootstrap grid won't allow for that because it uses floats which cannot be vertically aligned. My Nebula framework allows this due to the grid using inline-blocks http://rbrtsmith.com/nebula-css/#grid-bottom-aligned.
 
As it stands it requires Sass to make proper use of, but if you need a quick CSS dump to play with http://rbrtsmith.com/nebula-css/main.css will do the trick

No, it's not achievable. You can add attributes to shortcodes but they need to be defined in the shortcodes properties.
 
https://codex.wordpress.org/Shortcode_API

You'll need to edit your functions.php (or the file where your column shortcodes are defined).
 
Here's an example of one of my simpler shortcode functions:
 
function cryst4l_box( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => '',
), $atts ) );
return '<div class="u-box '.$class.'">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'cryst4l_box');
 
You could add the highlighted parts to your function, or copy / paste it here and we'll be able to help.

Truly the Queen...Many thanks!

Hope the below helps - adapted from https://codex.wordpress.org/Function_Reference/add_meta_box
function meta_box_add() { add_meta_box( 'page-heading', 'Page Heading', 'meta_box_cb', 'page', 'side', 'low' ); } add_action( 'add_meta_boxes', 'meta_box_add' ); function meta_box_cb( $post ) { $values = get_post_custom( $post->ID ); $text = isset( $values['my_meta_box_text'] ) ? esc_attr( $values['my_meta_box_text'][0] ) : ''; ?> <p> <label for="my_meta_box_text">Page Heading</label> <input type="text" name="my_meta_box_text" id="my_meta_box_text" value="<?php echo $text; ?>" /> </p> <?php } function meta_box_save( $post ) { /* * We need to verify this came from our screen and with proper authorization, * because the save_post action can be triggered at other times. */ // Check if our nonce is set. if ( ! isset( $_POST['my_meta_box_nonce'] ) ) { return; } // Verify that the nonce is valid. if ( ! wp_verify_nonce( $_POST['my_meta_box_nonce'], 'meta_box_save' ) ) { return; } // If this is an autosave, our form has not been submitted, so we don't want to do anything. if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return; } // Check the user's permissions. if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) { if ( ! current_user_can( 'edit_page', $post->ID ) ) { return; } } else { if ( ! current_user_can( 'edit_post', $post->ID ) ) { return; } } /* OK, it's safe for us to save the data now. */ // Make sure that it is set. if ( ! isset( $_POST['my_meta_box_text'] ) ) { return; } // Sanitize user input. $my_data = sanitize_text_field( $_POST['my_meta_box_text'] ); // Update the meta field in the database. update_post_meta( $post_id, 'meta_box_cb', $my_data ); } add_action( 'save_post', 'meta_box_save' ); And here is how to retrieve the meta box value at the front end - adapted from https://codex.wordpress.org/Function_Reference/get_post_meta
$my_meta_box_value = get_post_meta( get_the_ID(), 'meta_box_cb', true ); // check if the custom field has a value if( ! empty( $my_meta_box_value ) ) { echo $my_meta_box_value; } I think you'll be better off using meta box generator - plenty of them around (https://www.google.co.uk/webhp?sourceid=chrome-instant&rlz=1C1DSGP_enGB509GB509&ion=1&espv=2&es_th=1&ie=UTF-8#q=custom%20meta%20box%20generator%20wordpress&es_th=1)
or possibly the ACE plugin?

How about returning all the the tags as an array rather than just the 9, randomize the first 9 indexes, and choose them.
 
e.g:
$args = array( 'number' => 0, 'format' => 'array', 'echo' => false ); $cloud_tags = wp_tag_cloud($args); shuffle($cloud_tags); for($i = 0; $i < 9; $i++) : // echo tags $cloud_tags[$i]; endfor; Of course, you won't be using this as a widget and will have to echo it into your template
 
I haven't tested at all, just from reference from link below, so it's possible you may have to check the output of the array, so you know how to handle it for the loop
 
http://codex.wordpress.org/Function_Reference/wp_tag_cloud

The pmpro_https_filter() function hasn't been defined. You need to check the code of the plugin, or ask the plugin author for help.

Have you tried opening the chrome dev tools? you seeing any errors in your console?
 
Also put your JS in a seperate file to your HTML and include it just before the closing body tag. The fact the script right now will execute before those elements are loaded is likely to be cause of the issue. you will also want to wrap it in a document ready function.
$(function() { // code });

Just because others are using bad habits doesn't mean you should follow suit. I barely use any (Magic numbers) and since I drastically reduced my useage there were less bugs, less anomolies, less issues of clients changing content and things breaking. I actually read the code written by guys I see as Gurus like Harry Roberts, Hugo Giraudel and they use very few magic numbers.
 
There's no excuses for not trying to avoid them, sometimes it is not possible, and in that case you should provide documentation to at least let other developers know what this mysterious number is doing.
The code I posed earlier in this thread avoids them completely. I've built lots of CSS objects that also avoid them that I reuse in many of my projects.
 
I see a tonne of developers following bad practices, should we all follow suit? No.
 
Also no 'guru' would be talking about putting all content above the fold, the fold doesn't exist, too many screensizes, his point about people not scrolling is also nonsense, not the work or thoughts of somebody who I would label as a guru.

you can nest a div inside your div and set it to display:table, height:100% width:100% then nest another div inside that and give that display: table-cell and vertical-align: bottom.
<div class="outer"> <div class="inner"> <div class="content"> Lorem ipsum </div> </div> </div> .outer { height 500px; /* whatever height you wish */ } .inner { display: table; height: 100%; width: 100%; ] .content { display: table-cell; vertical-align: bottom; }

I agree. Many CSS solutions to these kind of problems also often hurt semantics because they tend to depend on extra wrapper elements with no semantic purpose at all.
The problem is that there are very few solid guidelines on what solutions to choose. That's why people creates myths like "Always CSS over JS" and "JS should be avoided if possible".
The truth is that JS has becomed much more reliable with consitent behaviour and performance in modern browsers. But JS has a bad reputation stuck to it from the time when the browser vendors thought they would win the battle by implementing their own special DOM interpretation.
I also think that is why JS never has made its way to the established education system. Through my own educations (which was of great value in all other fields) I never recieved a single lecture about JS. All this is contributing to the idea that JavaScript is insufficient, unreliable etc.
Ironically JS is the one scripting language you can't avoid in modern front-end development. Graduates comes out of uni with a solid knowledge in databases, backend-programming, semantics and design. But they will try to avoid to write a single line of JS and when they realize that they can't avoid it they choose to depend on performance heavy plugins instead.

a quick google finds it answered by someone else on stackoverflow http://jsfiddle.net/EAUcW/

By the way for any of those who are thinking we should always try to use CSS to solve these things we should solve them in whatever way is most pragmatic, reliable and maintainable. I've seen examples of people doing really complex convoluted CSS just to avoid a few lines of JavaScript. JavaSxcript shouldn't be avoided, it's a very, very powerful tool in our arsenal. Even for animations it can match the performance of CSS, so long as we're not using jQuerys animate method.
 
The only issue with JavaScript is that it is a true programming language, and as such requires a longer time frame to learn than CSS.

By using the CSS3
transform:translateY(-50%); combined with an offset
top: 50%; you can now center your elements vertically even if they don't have a fixed height.
 
See this fiddle:
https://jsfiddle.net/Nillervision/fch2d87p/
 
If you need it to work in old browsers you have to use JS to get the window.innerHeight and the innerHeight of the element to be centered then set the top property of the element to (window.innerHeight/2) - (element.innerHeight/2)px EDIT: You would have to do this both onload and onresize
 
I'd go with the CSS3 solution

If you only have two columns in every row you could do something like this:
https://jsfiddle.net/Nillervision/53tupkq4/
It has some problems:
Parent element is required for every row No margins between columns (I fake it with white borders) Due to the nature of table cells they will not collapse automatically with fixed min-width (you will have to set a breakpoint)

That's not going to work, I've put it 2-3 times already on this thread. Explicitly defined heights will not work with dynamic content and multiple screen dimensions. Setting overflow to hidden will just hide content that overflows your defined height, so that content is then inaccessible.
 
The ONLY way to do this with CSS alone with dynamic content is with flexbox.

Hey Guru, Thanks for that. I have been frantically search for code snippets and I have found and adjusted the following script. It seems to work just wondered your thoughts on it?
 
 
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Move Makers | Website coming soon!</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="js/equal-heights.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8"> <img src="img/movemaker-logo.jpg" class="img-responsive" alt=""> </div> <div class="col-md-4 hidden-sm hidden-xs"> <img src="img/snail-logo.gif" class="img-responsive pull-right" alt=""> </div> </div> <div class="row equal"> <div class="col-sm-3 menu-area"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li class="active"><a href="about-us.html">About us</a></li> <li><a href="how-it-works.html">How it works</a></li> <li><a href="faqs.html">FAQs</a></li> <li><a href="enquire.html">Enquire</a></li> <li><a href="contact-us.html">Contact us</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="col-sm-4"> <h2>Property purchased swiftly and with certainty. Your trusted national Homebuyer with local knowledge and expertise.</h2> </div> <div class="col-sm-5 main-content"> <h3>About us</h3> <p>Movemakers is a rapidly growing property investment company - we buy and then sell on properties all over the UK, having a constantly expanding national coverage.</p> <p>Movemakers works in partnership with estate agents who carry out our valuations and enhance the service we provide by providing expertise and knowledge of local markets to ensure the right price is paid. Having such contacts within the property industry allows Movemakers to understand the subtleties of regional markets and therefore offer a bespoke and more cost and time effective service.</p> <p>We also undertake development and refurbishment projects</p> <p>The administration centre is open 7 days a week in order to deal with enquiries, purchases and sales as promptly as possible. All of the team have a broad knowledge of the property industry allowing them to help to make your Movemakers moving experience as smooth as possible.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> JS
if (document.documentElement.clientWidth > 768) { function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".equal > div")); }); }

If serving for IE10+ you can use Flexbox for equal height columns.
 
Otherwise I'd use JavaScript to generate equal heights, setting explicit heights in your CSS isn't smart, the content should dictate the height.
With your JavaScript you want to measure the height of all the columns in a row and set the height on them all to match the highest. It's good to do this row by row, because in most cases you just want rows to have equal height columns, not all columns on the entire page being the same. To determine columns matching a row you can measure their offset from the top of the document, when a group of them match then they are a row.

We recommend this website to our web hosting members;
 
https://snazzymaps.com/
 
The website includes a bunch of free Google Maps styles and a neat Editor.
 
Rich

BOOM!!!
 
Nice one DQ much appreciated

With WP you need to use has_post_thumbnail(), for example:
if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { //Something else } the_post_thumbnail is a function, so you can't use "empty" in a conditional statement the way you would do with a field, if that makes sense

In the map options object you declared above, it can have a property called .styles that can accept an array of values.
// declare mapStyles array var mapStyles= [ { stylers: [ { hue: "#00ffe6" }, { saturation: -20 } ] },{ featureType: "road", elementType: "geometry", stylers: [ { lightness: 100 }, { visibility: "simplified" } ] },{ featureType: "road", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; var mapOptions = { center: new google.maps.LatLng(52.409703, -1.974159), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, // insert the mapStyles array as a value to the styles property styles: mapStyles }; Got from this article https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

This could be a better approach actually if you don't want that element polluting your HTML

Either that^ or alternatively create the result element with js: The createElement() method creates a new dom element and you can attach the string data to it with appendChild()
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

First of all: don't use inline JavaScript such as your click handler, that should live within your calculate function.
 
Secondly once you're done put the script in a external file.
 
Finally NEVER use document.write it's gonna write over the whole page. you need to select a DOM element and put the result on that element.
 
Here's a refactored version for you.
<input type="text" id="inpt"> <input type="submit" value="Calculate" id="submit"> <div id="result"></div> (function(){ function calculate() { var input = document.getElementById("inpt").value, resultEl = document.getElementById("result"), rate = 10, result = input * rate; // check if the value is not a number if (isNaN(result)) { resultEl.innerHTML = "Please enter a number"; // exit the function return false; } // put the result inside the div. resultEl.innerHTML = result; } // store btn in a variable var btn = document.getElementById('submit'); // add click handler to btn that calls the calculate function. btn.addEventListener('click', calculate); }()); Fiddle http://jsfiddle.net/LpLa4goa/