Display different content if window size is below a certain size?

Question

I asked this question earlier but wasn't as clear as I should be. Basically I wish to change HTML content (that contains external javascript - see below) depending on windows size/screen res. The question is now changed to better reflect what I need to do. Also I would like this to be done via an external javascript file if possilbe.

I have this code that displays all vertical buttons for sharing my content however I want to display horizontal buttons if the user is using a smaller window size. It will have a different div and some of the code wil be changed i.e. "data-count="horizontal".

It would be awesome to also do this via my external JS file so it is not inline.

But that is not essential.

Thanks in advance.

Also using fluid width CSS is not an option due to my having a sidebar with ads that can't be changed in size and that the html content needs changed - not just CSS.

<div id="sharepost">
    <div class="sharer">
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="code_love" data-related="love:code">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
    <div class="sharer">
        <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script>
    </span>
    </div>
    <div class="sharer">
        <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a>
        <script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script>
    </div>
    <div class="sharer">
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script>
    </div>
    <span class="st_email" ></span>
</div>

An example of what needs to be done but this doesn't work.

   function shareStuff() {

if ($(window).width() < 1024) {
   <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>

} else {
  <div id="sharepost"><div class="sharer"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="code_love" data-related="love:code">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sharer"><a name="fb_share" type="horizontalk" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript" defer="defer"></script></span>
</div><div class="sharer"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-url="<?php the_permalink(); ?>"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js" defer="defer"></script></div><div class="sharer"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></div><span class="st_email" ></span>
</div>
} }

This may or may not be relevant to your question, but you have an unmatched closing span tag in the middle of your markup. As for your question, what have you done so far? Where have you gotten stuck? — Ender
– Ender, Commented Nov 10, 2010 at 17:48
That span is used to call a button for email sharing... My earlier question got abandoned because I wasn't clear enough so I'm bascially back to the beginning. No idea what to do. thanks — Mark
– Mark, Commented Nov 10, 2010 at 18:01

Andrea Turri · Accepted Answer · 2010-11-10 18:58:41Z

2

I suggest to do 2 different DIV:

<div id="content1"></div>
<div id="content2"></div>

now jQuery:

$('#content1').hide();
$('#content2').hide();

if(window.width() <= 600) {
    $('#content1').show();
} else {
    $('#content2').show();
}

answered Nov 10, 2010 at 18:58

Andrea Turri

6,5207 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2010-11-10 17:48:31Z

1

See: http://css-tricks.com/resolution-specific-stylesheets/

answered Nov 10, 2010 at 17:48

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Mark Over a year ago

No it's "resolution change content" not just stylesheet. Thanks though.

Chris · Accepted Answer · 2010-11-10 18:05:39Z

0

CSSgrid is a project I noticed a week or two ago. Scales from a static layout for large monitors and becomes fluid down to the smallest of mobile devices. Seems to solve all your problems!

answered Nov 10, 2010 at 18:05

Chris

12.1k13 gold badges51 silver badges72 bronze badges

1 Comment

Mark Over a year ago

Fluid is not an option. I am not looking to change css alone. I want to change HTML too. It's all in my quesiton if you read and also title says "change content if" not change css if.

Atom Vayalinkal · Accepted Answer · 2012-08-07 14:11:37Z

Use Adapt.js to switch stylesheets. like this:

var ADAPT_CONFIG = {
      path: 'http://yourpath.com/assets/',
      dynamic: true,
      range: [
        '0px    to 480px  = mobile.css',
        '481px  to 840px  = middle.css',
        '841px  to 1440px = large.css',
        '1441px           = xlarge.css'
      ]
    };

and then have multiple divs with content:

<div id="1440">
BLAH BLAH </div>
<div id="840">
BLEH
</div>

then in large.css put this:

#840{display:none;}

and in middle.css put this

#1440{display:none;}

baically just use different stylesheets to hide and display content here's a demo:http://adapt.960.gs/test_id.html

Collectives™ on Stack Overflow

Display different content if window size is below a certain size?

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related