CODEWITHSUNDEEP
wordpresshover
Henrik Erlandsson
Henrik Erlandsson

Reputation: 3831

Hover popup plugins preferably for Wordpress

I thought I'd start a coding site, with the ease of writing of a blog, and which reads like a normal text on paper (ie., without the fluff around; that's in the template and I'll take care of that).

In the text I would like to mark single words as simply "preview links", to the following: - code snippets (pre or similar) - images - a div or frame with html and php - possibly audio and video clips, in the form of smallish embedded players.

Behavior should be that on hover, a greybox type box would show the content over the text. Even better would be that on click, it would toggle expanding/contracting a section under the line with the link, as wide as the text container, revealing the popup in-line, so to speak.

I can do this in php, but I'd like to save some codetime, and also have easy insertion of the above types of items.

So can you recommend something (a plug-in) like this for say, Wordpress or Movable Type? I'd also accept links to websites that have nice examples of the 'div visibility: hidden' style fold-in and fold-out technique.

Ease of insertion of such items is key. Preferably just Ctrl+V and mark its type.

Upvotes: 0

Views: 2212

Answers (1)

two7s_clash
two7s_clash

Reputation: 5827

I would recommend creating a short code to use in post authoring (i.e. [toggle heading="Preview Link"]Hidden Content[/toggle]. This content will be wrapped in a span with a class you determine when it appears on your site. Then just include a little jQuery to pick up that class and reveal the hidden content on click or mouseover or whatever.

Sample shortcode function for functions.php

function toggle_content( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'heading'      => '',
    ), $atts));

    $out .= '<span class="toggle"><a href="#">' .$heading. '</a></span>';
    $out .= '<div class="toggle_content" style="display: none;">';
    $out .= '<div class="toggleinside">';
    $out .= do_shortcode($content);
    $out .= '</div>';
    $out .= '</div>';

   return $out;
}
add_shortcode('toggle', 'toggle_content');
?>

jQuery might look like this (e.g. for click):

function sys_toggle() {
    jQuery(".toggle_content").hide(); 

    jQuery(".toggle").toggle(function(){
        jQuery(this).addClass("active");
        }, function () {
        jQuery(this).removeClass("active");
    });

    jQuery(".toggle").click(function(){
        jQuery(this).next(".toggle_content").slideToggle();
    });
}

jQuery(function(){
    sys_toggle();
});

Upvotes: 1

Related Questions