Ask your WordPress questions! Pay money and get answers fast! (more info)

Change class at a certain resolution WordPress

  • SOLVED

I have this code:

$message = apply_filters( 'fundify_share_message', sprintf( __( 'Check out %s on %s! %s', 'fun' ), $post->post_title, get_bloginfo( 'name' ), get_permalink() ) );
?>

<div class="entry-share">
<?php _e( 'Share', 'fundify' ); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'blog' ); ?>
<a href="http://www.facebook.com/sharer.php?s=100
&p[url]=<?php echo urlencode( get_permalink() ); ?>
&p[images][0]=<?php echo urlencode( $image[0]); ?>
&p[title]=<?php echo urlencode( $post->post_title ); ?>
&p[summary]=<?php echo urlencode( $message ); ?>" class="share-facebook"><button class='zocial facebook'>Facebook</button></a>

<a href="<?php echo esc_url( sprintf( 'http://twitter.com/home?status=%s', urlencode( $message ) ) ); ?>" target="_blank" class="share-twitter"><button class='zocial twitter'>Twitter</button></a>

<a href="share-widget" class="share-widget fancybox"><button class='zocial secondary'>Il tuo sito/blog</button></a></a>

<div id="share-widget" class="fundify-modal">
<?php get_template_part( 'modal', 'campaign-widget' ); ?>
</div>
</div>

And I need to turn zocial facebook to zocial facebook icon under a certain resolution.

Answers (4)

2014-02-11

Sébastien | French WordpressDesigner answers:

if you want add the class "icon" for the resoltion > 874px for example, add this script

jQuery(document).ready(function($) {
var windowsize = $(window).innerWidth();
console.log(windowsize);
if (windowsize > 874) $(".zocial").addClass("icon");
else $(".zocial").removeClass("icon");
});


tomaso1980 comments:

Thanks, where I need to add it?


Sébastien | French WordpressDesigner comments:

add this code in a file changeclass.js in bookabook/js
and replace
function override_fundify_js() {
wp_dequeue_script( 'fundify-scripts' );
wp_enqueue_script( 'child_theme_fundify-scripts', get_stylesheet_directory_uri() . '/js/fundify.js', array( 'magnific', 'jquery-masonry' ), 20130522, true );

}

add_action( 'wp_enqueue_scripts', 'override_fundify_js', 11 );


by

function override_fundify_js() {
wp_dequeue_script( 'fundify-scripts' );
wp_enqueue_script( 'child_theme_fundify-scripts', get_stylesheet_directory_uri() . '/js/fundify.js', array( 'magnific', 'jquery-masonry' ), 20130522, true );
wp_enqueue_script( 'changeclass', get_stylesheet_directory_uri() . '/js/changeclass.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'override_fundify_js', 11 );


tomaso1980 comments:

So, I need to put this code in changeclass.js?


Sébastien | French WordpressDesigner comments:

yes the content of the file changeclass.js is :
jQuery(document).ready(function($) {

var windowsize = $(window).innerWidth();

console.log(windowsize);

if (windowsize > 874) $(".zocial").addClass("icon");

else $(".zocial").removeClass("icon");

});



tomaso1980 comments:

I'm testing it right now

2014-02-11

Francisco Javier Carazo Gil answers:

Tomaso you can add it in footer.php in the <html> part.


Francisco Javier Carazo Gil comments:

If you want to make your code compatible with resize in use do it:


$( window ).resize(function() {
var width = jQuery(window).width();
if(width < 480)
{
jQuery('.share-facebook button').addClass('icon');
}
else
{
jQuery('.share-facebook button').removeClass('icon');
}
});

2014-02-11

Hariprasad Vijayan answers:

Hello,

Add following code in your js file

jQuery(document).ready(function(){
var width = jQuery(window).width();
if(width < 480)
{
jQuery('.share-facebook button').addClass('icon');
}
else
{
jQuery('.share-facebook button').removeClass('icon');
}
});

It is for 480px resolution. you can change it.

2014-02-12

Nathan Parikh answers:

Why not simply have the icon class in the code and just simply add CSS rules for the icon class in a media query?