I know there are answers out there showing how to use java script/jquery etc to achieve the titled behavior statically. The problem arises when I don't always have the exact id of the element.Since, I m dynamically making a table from the posts(posts from wordpress, but this question doesn't address any plugin or wordpress related query whatsoever, I did this little gig myself without some special pluginor help from wordpress other than posts themselves).
So now what I did is This. I made a table and called table columns using html n php while extracting data from posts.
What I want to do is, whenever I hover on view details, owner name and owner contact should change value from another string I have.
Now, my question here is I can't give unique id to each element, so I can't use the normal id based jquery and set hover actions to get my task done.I thought of using css selectors ( + , ~ , > etc) but I was unable to change content using style's content property.So if any optimal solution to this problem exists, that'd be very helpful. Thanks in advance & Regards.
My code(If needed at all) -
<?php
$string = get_post_meta( $post->ID,'property_owner_name',true);
$tring = get_post_meta( $post->ID,'property_owner_alternate_contact',true);
$fring=substr($tring, 0, -5)."XXXXXXXXXX";
$owner_name;
$owner_contact;
if((current_user_can('editor')||current_user_can('administrator')))
$owner_name = $string;
else
$owner_name ='XXXXXX'; // String to change to
if((current_user_can('editor')||current_user_can('administrator')))
$owner_contact = $fring;
else
$owner_contact =substr($fring,0,10); //String to change to
?>
<tr>
<td class="text-left"><?php echo inspiry_get_property_location( $post->ID ); ?></td>
<td class="text-left"><?php echo inspiry_get_property_status( $post->ID ); ?></td>
<td class="text-left hide2"><?php echo inspiry_get_property_types( $post->ID ); ?></td>
<td class="text-left hide1"><?php the_title(); ?></td>
<td class="text-left hide3" id="a">XXXXXX</td>
<td class="text-left hide3" id="b"> XXXXXXXXXX</td>
<td class="text-right"><a href="<?php the_permalink(); ?>" class="btn real-btn"style="background:#68cfef; color:#fff; min-width:115px;" >VIEW DETAILS</a></td>
</tr>
Update (Codes of file actually calling this template in a loop ) :
<div id="home-properties" class="property-items-container clearfix">
<?php
/* List of Properties on Homepage */
$number_of_properties = intval( get_option('theme_properties_on_home') );
if(!$number_of_properties){
$number_of_properties = 4;
}
if ( is_front_page() ) {
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
}
$home_args = array(
'post_type' => 'property',
'posts_per_page' => $number_of_properties,
'paged' => $paged
);
/* Modify home query arguments based on theme options - related filters resides in functions.php */
$home_args = apply_filters( 'real_homes_homepage_properties', $home_args );
/* Sort Properties Based on Theme Option Selection */
$sorty_by = get_option('theme_sorty_by');
if ( ! empty( $sorty_by ) ) {
if ( $sorty_by == 'low-to-high' ) {
$home_args[ 'orderby' ] = 'meta_value_num';
$home_args[ 'meta_key' ] = 'REAL_HOMES_property_price';
$home_args[ 'order' ] = 'ASC';
} elseif ( $sorty_by == 'high-to-low' ) {
$home_args[ 'orderby' ] = 'meta_value_num';
$home_args[ 'meta_key' ] = 'REAL_HOMES_property_price';
$home_args[ 'order' ] = 'DESC';
} elseif ( $sorty_by == 'random' ) {
$home_args[ 'orderby' ] = 'rand';
}
}
$home_properties_query = new WP_Query( $home_args );
/* Homepage Properties Loop */
if ( $home_properties_query->have_posts() ) :
$post_count = 0;?>
<table width=100% id="design2" class="table-fill" border=0>
<tr>
<th class="text-center">Location</th>
<th class="text-center">Status</th>
<th class="text-center hide2">Type</th>
<th class="text-center hide1">Description</th>
<th class="text-center hide3">Owner's Name</th>
<th class="text-center hide3">Owner's Number</th>
<th class="text-center"></th>
</tr>
<tbody class="table-hover">
<?php
while ( $home_properties_query->have_posts() ) :
$home_properties_query->the_post();
/* Display Property for Home Page */
get_template_part('template-parts/property-for-home');
/* To output clearfix after every 2 properties */
$post_count++;
/*echo '<div class="clearfix"></div>';*/
?>
<?php
endwhile;
echo '<tbody></table>';
else:
?>
<div class="alert-wrapper">
<h4><?php _e('No Properties Found!', 'framework') ?></h4>
</div>
<?php
endif;
?>
</div>Yup its frm a theme I bought and they dnt support customization obviously. Actually I had already tried using jquery giving the columns i need an id which changes based on $post_count like 'a1' 'a2' 'a3', 'b1' 'b2' 'b3' etc but I dont really know where I messed it up in jquery( I hacked some examples into my code from stackoverflow ), put them in the looping template and console was giving me some 'uncaughtreferenceerrors' & some other things next time(new at java n stuff)(In overall, i couldn't hack it in correctly). So, if u guyz cn come up with some stuff I could use that'd be very helpful...doesn't matter if its done by css, js or wtevr. Thanks in Advance
</div>
