Load specific content based on browser width using jQuery

Question

I am trying to load a Facebook embedded post with width 466 if browser width is greater than 500. If browser width is less than 500 a same Facebook post will be loaded but with width 350. Here is my code

<div class="col-lg-8 col-md-8 col-sm-12">
<script>
if($(window).width()<500)
{

//Load the post below
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

}
else
{
//Load this post 
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>

I am stuck about what to write instead of comments so that the script can load the correct version automatically.

EDIT My Updated code

<script>
$( document ).ready(function() {
if($(window).width()>500)
{
$('.fb-post').attr('data-width',466);
}
});
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>
</div>

The page still loads he post at width 350. Here is the page http://8mags.com/bored/facebook/facebookpastpost01.php

My page is responsive but the Fb- posts are not

You cannot display HTML like that. This is not a server side language where you can print HTML stuff. Try changing data-width param of .fb-post with .attr('data-width'). Leave your div in HTML where it should be. You are changing data-width only, right? — trainoasis
– trainoasis, Commented Dec 24, 2014 at 13:42
Do you want to give your div "fb-post" the widths specified..?? — Benison Sam
– Benison Sam, Commented Dec 24, 2014 at 13:43
@trainoasis can I do it using php? Benison Yes, I have to because they can't be made responsive( I read somewhere on stack overflow iteself). Gaurav How will that help to load content dynamically? — Nitish Kumar
– Nitish Kumar, Commented Dec 24, 2014 at 13:44
PHP is a server side language and is not meant to detect browser parameters. JS on the other hand is a client side language that can. — trainoasis
– trainoasis, Commented Dec 24, 2014 at 13:47

Benison Sam · Accepted Answer · 2014-12-24 13:52:10Z

You can do something like this:

<script>
    // You may or may not write the below code under the doc ready
    // Depends where and when you want the same to happen
    // For instance in the success function of any AJAX call or something like that
    $(document).ready(function () {
        $('.fb-post').attr('data-width',350);
    });
</script>
<div class="col-lg-8 col-md-8 col-sm-12">
    <div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="466">
        <div class="fb-xfbml-parse-ignore">
            <a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">
                Post
            </a>
            &nbsp;by&nbsp; 
            <a href="https://www.facebook.com/TedTheStoner">
                Ted The Stoner
            </a>.
        </div>
    </div>
</div>

Moreover if you want your page to work in responsive manner, you can control that using CSS. For that you can refer this and this. For more info, just google about "@media CSS"

trainoasis · Accepted Answer · 2014-12-24 13:51:22Z

0

Javascript doesn't work that way. You can't print HTML just by leaving it inside if sentence. If you are changing only data-width parameter of your .fb-post element, then you can just leave your HTML in an .html file where it belongs and change your parameter using JS (jQuery) like this:

$('.fb-post').attr('data-width',350); // when your width is less then 500 for instance

edited Dec 24, 2014 at 13:51

answered Dec 24, 2014 at 13:46

trainoasis

6,79912 gold badges55 silver badges84 bronze badges

3 Comments

Nitish Kumar Over a year ago

Will it cut-off the post if someone resizes the window or just reload the fb post with width attribute 350

trainoasis Over a year ago

If you want to make it responsive then you should start off with a different approach perhaps. If someone reloads a page your script will be run again, which means your if-else stuff will do what it must again.

Nitish Kumar Over a year ago

My page is responsive the embedded posts are not Facebook specifies a fixed width for them.

Joe Sager · Accepted Answer · 2014-12-24 14:46:22Z

Try this (script should be after the element you are looking for):

<div class="col-lg-8 col-md-8 col-sm-12">
<div class="fb-post" data-href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1" data-width="350"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TedTheStoner/photos/a.255068134610728.57957.255065497944325/671495962967941/?type=1">Post</a> by <a href="https://www.facebook.com/TedTheStoner">Ted The Stoner</a>.</div></div>
</div>
<script>
    $( document ).ready(function() {
        if($(window).width()>500)
        {
            $('.fb-post').attr('data-width',466);
        }
    });
</script>

Also add this to your script:

$(window).resize(function() {
    if($(window).width()>500)
    {
        $('.fb-post').attr('data-width',466);
    }
    else
    {
        $('.fb-post').attr('data-width',350);
    }
});

Collectives™ on Stack Overflow

Load specific content based on browser width using jQuery

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related