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)
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");
});
Sébastien | French WordpressDesigner comments:
is it ok ?
tomaso1980 comments:
I'm testing it right now
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');
}
});
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.
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?