One would think that the answer is obvious: you either have an invalid key or you’ve specified an incorrect referrer. But as with most generalized error messages, neither one is the answer. Google’s policy for their Google Maps API is that they don’t require a token or public key if you’re not using Maps for business purposes (which is only used when you exceed their daily quotas). If you don’t have your credit card details saved in the API console and you try to use a public key for your Javascript Maps call, it returns “invalid key”. Google forgot to tell us this important detail.

To fix this problem, simple remove your key from the API call. Simply using this will do:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

Yes, it’s that mind-numbingly simple to fix. As is life.

The post Google Maps API – Invalid Key Or Referrer Fix appeared first on Ideas and Pixels.

The README file states the following: Starting with skrollr 0.6.0 there’s just one thing you need to do: Include an element on your page with the id skrollr-body.

Yes, that’s it. Add id=”skrollr-body” to your body element and scrolling is back.

Thank me later… or in the comments. 🙂

The post Skrollr Can’t Scroll On Mobile Devices appeared first on Ideas and Pixels.

Load Inline Script After jQuery WP Enqueue Script in WordPress

<?php
function print_my_inline_script() {
  if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );
?>

All we are doing is surrounding the inline script with a PHP function that hooks into the wp_footer action to fire only after jQuery has been loaded, along with the DOM.

The post WP_Enqueue_Script Inline Script To Load After jQuery appeared first on Ideas and Pixels.

Although it takes a few more lines of code, you can mimic PHP.

How To Get $_GET in Javascript

var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});

You can now access the $_GET variables like so:

alert($_GET['some_variable']);

How To Get $_POST in Javascript

$_POST is handled a little differently (with the help of PHP). This cross-language fix allows you to store the PHP superglobal $_POST into a Javascript variable. You can also use this method for $_GET.

<script>
var $_POST = ;

document.write($_POST["test"]);
</script>

Happy coding!

The post How To Get $_GET and $_POST Variables In Javascript appeared first on Ideas and Pixels.

blockUI requires jQuery v1.3 or later! You are using v1.10.0.

Fortunately, the solution is very simple, but it requires some out of the box thinking. What confused us was that we didn’t actually call the blockUI script at all on any of our websites, but we were still getting the message. It instantly clicked that this was some sort of dependency issue.

How To Fix BlockUI Requires jQuery v1.3 Or Later Message

Last night jQuery rolled out an update to its jQuery “latest” link, updating it to push out jQuery version 1.10.0. The problem is that the blockUI script cannot read the trailing zeros on this version, so it reads it as 1.1, which of course is a very dated version of jQuery. To fix this, we must remove our jQuery latest script and instead replace it with either a local copy of jQuery or the following Google Library version (we’re using 1.9.1 in this instance):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

That should correct the problem! Let us know in the comments section if you have any additional solutions.

The post BlockUI Requires jQuery v1.3 Or Later! Quick Fix appeared first on Ideas and Pixels.

Counting Siblings With jQuery

Counting the number of siblings an element has with jQuery is incredibly simple.

$("#someElementId").siblings().size()

We can also use an “if” statement to check if the element has any siblings at all.

if ($("#someElementId").siblings().size() > 0) { // then it has siblings } else { // it doesn't }

.size() doesn’t just work with the siblings selector, so interchange .siblings() with any of the other selectors jQuery offers.

The post Using jQuery To Check If Element Has Siblings appeared first on Ideas and Pixels.

Every designer has come across a itemized design that called for precipitous “blocking” of elements at least once in their lives. Much like the front page of this blog, for instance. And most have found that unless you specify an exact height for each block item, the entire design will fall to shambles once you load the page — not to mention it looks terrible as the default browser engine tries to assemble them together, usually failing miserably. Luckily for us, the folks over at Desandro created a wonderfull jQuery plugin, “Masonry”.

Masonry intercepts the job of the browser to float the object, using it’s own mechanics to position elements both horizontally and vertically. Think Tetris, only for your website.

Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

To use jQuery Masonry, download the script here.

1) Place the following text inside your HEAD tag: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script> 2) Next, set all of your items that you want to be masoned to ‘float’.

3) Place the following code into your HEAD tag, adjusting the selector as you wish: $(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); });

Voila! Your items should now start blocking up until the page is full.

You can adjust the many parameters of this function by referencing the Masonry Reference.

The post The Best New Old Thing: jQuery Masonry Plugin appeared first on Ideas and Pixels.