CODEWITHSUNDEEP
javascriptjqueryhtmldom
Ryan
Ryan

Reputation: 1

removing a section of markup for mobile version of a site

The Problem

I'm using a carousel, built using a combination of html and js, at the top of a website. For mobile visitors to the site I'd like that part of the markup to be omitted so the images don't have to load, say for viewports less than 800px wide. What I have done is created a script at the bottom of the page that gets the browser width using jquery, and if the width is large enough, uses .prepend() to place the entire markup for the carousel at the top of my body element. Obviously this solution is functional but doesn't look pretty, especially if the carousel markup needs changing.

The Markup for the Carousel

<div class="row">
<div class="span12 columns">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <img src="img/1.jpg">
      <div class="carousel-caption"><h4>Hello</h4></div>
    </div>
    <div class="item">
      <img src="img/2.jpg">
      <div class="carousel-caption"><h4>World</h4></div>
    </div>
  </div><!-- Carousel inner-->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">prev</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">next</a>
</div>  <!--Carousel outer-->
</div><!--span-->
</div><!--row-->

The javascript then looks like...

if (windowWidth >= 800) {
    $('.content').prepend('...all the markup for the carousel no spaces or returns...');
}

The Question

This has to be a crude solution to the problem at best, does anyone know of a good practice for this sort of thing? Is js/jquery my best option? Ideally I'd just like to bypass the carousel for the lower screen sizes, but keep everything on a single page rather than design a separate page for mobiles.

Upvotes: 0

Views: 374

Answers (5)

Charles Bandes
Charles Bandes

Reputation: 795

Is there a reason that you have to do this client-side? Putting the conditionals in server-side would save a ton of data-transfer. It would be trivial to do in something like php or jsp, etc.

Granted that you can't get browser details server-side, but you could get the user-agent, which gets you most of the way there.

So what I would do is a combination of the above suggestions -

1) Start with a server-side check. If you get a user-agent for iOS/Android/Blackberry/other random mobile platforms, bypass the carousel markup altogether.

2) Assuming that you didn't get that user-agent, then go the Modernizr route, but don't load any assets for the carousel until after $(document).ready - at that point you should know the screen size and the capabilities of the browser - that's when you can start loading assets and handling your carousel script.

Upvotes: 0

Alfred Larsson
Alfred Larsson

Reputation: 1349

The best is to insert the markup if the page is bigger than 800px.

So for instance:

@media screen and (min-width: 800px;)

# myCarousel{display: block; and all other nessecary styles}

}

Then you could add the markup as you did with jQuery if you want.

Upvotes: 0

dSquared
dSquared

Reputation: 9825

Take a look at these script; they detect mobile browsers without the need to test screen size. You could redirect to a different version without the carousel based on the results or you could also use a JS plugin called modernizr to test for touch events and load the carousel only if they exist like this:

if (Modernizr.touch){
   // Load Carousel
} else {
   // Hide Carousel or Load Alternative Content
}

I hope this helps.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

You could append the HTML for the carousel to the DOM after page load (instead of hiding/removing it) by inspecting the screen width property and running code accordingly.

You can inject it as a string from JavaScript or to keep it even more light-weight for mobile users by selectively loading it via AJAX.

Upvotes: 0

chadpeppers
chadpeppers

Reputation: 2057

You could do a media query and if the browser width is below a certain size then do a display: none on the carousel. Or something similar to below, you may have to tinker with it.

@media only screen and (max-width: 767px) {
  #myCarousel { display: none; }
}

Upvotes: 1

Related Questions