How to get this JavaScript working with get_permalink

6 Views

I am pretty new to this awesome forum, therefore not sure if this question below belongs here.

A little JavaScript, which works perfect when I drop a static url in it but I can’t figure out how to do with get_permalink()

Read More
var $el, $tempDiv, $tempButton, divHeight = 0;

$.fn.middleBoxButton = function(text, url) {

return this.hover(function(e) {

$el = $(this).css("border-color", "white");
    divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));

    $tempDiv = $("<div />", {
        "class": "overlay rounded"
    });

    $tempButton = $("<a />", {
        "text": text,
        "href": url,
        "class": "widget-button rounded",
        "css": {
            "top": (divHeight / 2) - 7 + "px"
        }
    }).appendTo($tempDiv);

    $tempDiv.appendTo($el);

}, function(e) {

    $el = $(this).css("border-color", "#999");

    $(".overlay").fadeOut("fast", function() {
        $(this).remove();
    })
});
}

$(function() {
$(".widget-one").middleBoxButton("Read More", "http:// bla bla bla");

});

Any help I would love to get.

Post Views: 6

Related posts

1 comment

  1. Probably the best way to do this is as suggested above by using wp_localize_script.

    You haven’t mentioned how you’re including the javascript – but I’m going to assume you’re doing it the WordPress way. So, something like this:

    add_action( 'wp_enqueue_scripts', 'wwm_enqueue_scripts' );

function wwm_enqueue_scripts()
{

 //see the documentation if you don't understand what's going on here. 
 wp_enqueue_script( 'some-handle', '/path/to/my-custom-js.js', $deps, $version, $in_footer' );
 //now, to define a javascript variable for the script to use
 wp_localize_script( 'some-handle', 'someUniqueName', array( 'myPermalink' => get_permalink(), ) );
}

    now, the permalink will be accessible to your javascript via someUniqueName.myPermalink so…

    $(function() {
$(".widget-one").middleBoxButton("Read More", someUniqueName.myPermalink);

});

    the key bit of this is documented at: http://codex.wordpress.org/Function_Reference/wp_localize_script

Comments are closed.