WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Mouse hover previews usually only show title and image. Instead, I want the entire wordpress post to show. The code that calls the preview is this:

 adTitle = jQuery(this).find('img').attr('alt');
           jQuery('body').append("<div id='preview'><a href='"+ this.href +"' class='colorbox-thumb'><img src='"+ this.href +"' alt='' /></a><p>"+ adTitle +"</p></div>");                

I want to insert a wordpress post instead.

I have tried to insert the php code after append("<div..." but it destroys the whole page. Does anyone know how to insert the wordpress post that relates to the thumbnail into this javascript so that the post shows with overflow-y: auto scrollbar into the hover preview?

I'm not sure if this website caters to beginners, but I really only know how to cut and paste.

The single ad listing code (single-ad_listing.php) is below. I'm wondering how to do what you have described above to insert it.

    <?php get_header(); ?>

<script type='text/javascript'>
// <![CDATA[
/* setup the form validation */
jQuery(document).ready(function ($) {
        errorClass: 'invalid'
// ]]>

<?php // if($_GET['reportpost'] == $post->ID) { app_report_post($post->ID); $reported = true;} ?>

<div class="content">

    <div class="content_botbg">

        <div class="content_res">

            <div id="breadcrumb">

                <?php if ( function_exists('cp_breadcrumb') ) cp_breadcrumb(); ?>


            <!-- <div style="width: 105px; height:16px; text-align: right; float: left; font-size:11px; margin-top:-10px; padding:0 10px 5px 5px;"> -->
                <?php // if($reported) : ?>
                    <!-- <span id="reportedPost"><?php _e('Post Was Reported', 'appthemes'); ?></span> -->
                <?php // else : ?>
                    <!--    <a id="reportPost" href="?reportpost=<?php echo $post->ID; ?>"><?php _e('Report This Post','appthemes') ?></a> -->
                <?php // endif; ?>
            <!-- </div> -->

            <div class="clr"></div>

            <div class="content_left">

                <?php appthemes_before_loop(); ?>

                <?php if ( have_posts() ) : ?>

                    <?php while ( have_posts() ) : the_post() ?>

                        <?php appthemes_before_post(); ?>

                        <?php appthemes_stats_update( $post->ID ); //records the page hit ?>

                        <div class="shadowblock_out">

                            <div class="shadowblock">

                                <?php appthemes_before_post_title(); ?>

                                <h1 class="single-ad"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

                                <div class="clr"></div>

                                <?php appthemes_after_post_title(); ?>

                                <div class="pad5 dotted"></div>

                                <div class="bigright"<?php if(get_option($GLOBALS['app_abbr'].'_ad_images') == 'no') echo 'style="float:none;"'; ?>>


                                        // grab the category id for the functions below
                                        $cat_id = appthemes_get_custom_taxonomy( $post->ID, APP_TAX_CAT, 'term_id' );

                                        // check to see if ad is legacy or not
                                        if ( get_post_meta( $post->ID, 'expires', true ) ) {  ?>

                                            <li><span><?php _e('Location:', 'appthemes') ?></span> <?php echo get_post_meta( $post->ID, 'location', true ); ?></li>
                                            <li><span><?php _e('Phone:', 'appthemes') ?></span> <?php echo get_post_meta( $post->ID, 'phone', true ); ?></li>

                                            <?php if ( get_post_meta( $post->ID, 'cp_adURL', true ) ) ?>
                                                <li><span><?php _e('URL:','appthemes'); ?></span> <?php echo appthemes_make_clickable( get_post_meta( $post->ID, 'cp_adURL', true ) ); ?></li>

                                            <li><span><?php _e('Listed:', 'appthemes') ?></span> <?php the_time( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ) ?></li>
                                            <li><span><?php _e('Expires:', 'appthemes') ?></span> <?php echo cp_timeleft( strtotime( get_post_meta( $post->ID, 'expires', true ) ) ); ?></li>

                                        } else {

                                            if ( get_post_meta($post->ID, 'cp_ad_sold', true) == 'yes' ) : ?>
                                            <li id="cp_sold"><span><?php _e('This item has been sold', 'appthemes'); ?></span></li>
                                            <?php endif; ?>
                                            // 3.0+ display the custom fields instead (but not text areas)
                                            cp_get_ad_details( $post->ID, $cat_id );

                                        } // end legacy check


                                </div><!-- /bigright -->

                                <?php if ( get_option( 'cp_ad_images' ) == 'yes' ) : ?>

                                    <div class="bigleft">

                                        <div id="main-pic">

                                            <?php cp_get_image_url(); ?>

                                            <div class="clr"></div>


                                        <div id="thumbs-pic">

                                            <?php cp_get_image_url_single( $post->ID, 'thumbnail', $post->post_title, -1 ); ?>

                                            <div class="clr"></div>


                                    </div><!-- /bigleft -->

                                <?php endif; ?>

                                <div class="clr"></div>

                                <?php appthemes_before_post_content(); ?>

                                <div class="single-main">

                                    // 3.0+ display text areas in content area before content.
                                    cp_get_ad_details( $post->ID, $cat_id, 'content' );

                                    <h3 class="description-area"><?php _e( 'Description', 'appthemes' ); ?></h3>

                                    <?php the_content(); ?>


                                <?php appthemes_after_post_content(); ?>

                            </div><!-- /shadowblock -->

                        </div><!-- /shadowblock_out -->

                        <?php appthemes_after_post(); ?>

                    <?php endwhile; ?>

                        <?php appthemes_after_endwhile(); ?>

                    <?php else: ?>

                        <?php appthemes_loop_else(); ?>

                    <?php endif; ?>

                    <div class="clr"></div>

                    <?php appthemes_after_loop(); ?>

                    <?php wp_reset_query(); ?>

                    <div class="clr"></div>

                    <?php comments_template( '/comments-ad_listing.php' ); ?>

            </div><!-- /content_left -->

            <?php get_sidebar( 'ad' ); ?>

            <div class="clr"></div>

        </div><!-- /content_res -->

    </div><!-- /content_botbg -->

</div><!-- /content -->

<?php get_footer(); ?>
share|improve this question

migrated from stackoverflow.com Sep 27 '12 at 23:47

This question came from our site for professional and enthusiast programmers.

I would separate your PHP and Javascript.

Run the loop as you normally would, but instead of showing it on the page wrap it in a div with a display:none;

Make sure to give each post an id that you can identify against and then on whatever you're hovering over could have a rel, with the same id. then your jquery hover would be more like...

    theIDIneed = jQuery(this).attr('rel');
    jQuery("#"+theIDIneed).show(); // this is the simple example, you might want to use clone
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.