Responsive designing with JavaScript

Question

I've finished designing a web site and now I'd love to make it responsive, I just need to make it responsive for PCs as much can't be done on mobiles using the site.

I'm just wondering how the iCloud guys do that, when you re-size the window, all the elements positioning and re-sizing by itself nicely, are they using pure CSS or mixture of both CSS and JS? iCloud

I found many tutorials but still couldn't figure out why it won't work for me.

http://unstoppablerobotninja.com/demos/resize/

my example html structure:

<div id="place">
 <div id="wrap">
   <div id="1"><img src="">this div needs to be responsive</div>
   <div id="2"><img src="">this too</div>
   <div id="3"><img src="">and this</div>
   <div id="4"><img src="">also this</div>
 </div>
</div>

current CSS styles:

#place{
    position: relative;
    width:3065px;
    height:560px;
    margin:0px;
}

#wrap,
{
    width:975px;
    height:480px;
    position: absolute;
    top:80px;
}

#1{
    width:215px;
    height:103px;
    position: absolute;
    left:0px;
    top:0px;
        background-color:#409da5;
}

#1 img,
{
    width: 100%;
    height: 100%;
}

I can use window.resize to detect window resize and then change the size of elements using jQuery.

  $(window).resize(function() {

              var nh = $("#1")width() / ratio;
              $("#1").css('height', nh + 'px');

              var nw = $("#1").height() * ratio;
              $("#1").css('width', nw + 'px');

  });

but are there any other ways to do this?

Check @mediaqueries developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries — elclanrs
– elclanrs, Commented Nov 7, 2013 at 4:19

shams · Accepted Answer · 2013-11-07 06:03:07Z

5

I will recommend you not to use jQuery for this.

Use the view-port to detect device width like the following:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

Then you can use media queries.

By writing media queries we can write device specific css for different device widths: Like for devices having width up to 480px, the media query will be like this:

 @media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

I can give you three very useful links to study:

edited Nov 7, 2013 at 6:03

answered Nov 7, 2013 at 5:57

shams

12410 bronze badges

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

3 Comments

bjb568 Over a year ago

Wait, did you just tell everyone to stop supporting zoom? That considerably degrades UX. Really annoying when I'm trying to zoom on my iPad.

shams Over a year ago

i have just given a basic idea to start the thing off pal, now one should dig in more for various cases isnt it?

bjb568 Over a year ago

No digging required - disabling zoom is terrible.

bjb568 · Accepted Answer · 2014-01-04 21:01:05Z

3

You can inject css at certain resolution with media queries.

For example:

<style>
    @media screen and (max-width: 400px) {
        /*These styles will only be applied if the user is on a phone*/
        body {
            font-size: 100%;
        }
    }
</style>

You should add transitions to make it look smoother when resizing. Oh, and don't forget the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1" />

edited Jan 4, 2014 at 21:01

answered Nov 7, 2013 at 4:22

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Comments

Stuart Kershaw · Accepted Answer · 2013-11-07 05:27:05Z

1

If you'd like to shift and animate elements to fill the available width in a way that's similar to the icloud example, then there's a JavaScript library called 'Masonry' that achieves that very result: http://masonry.desandro.com/

Keep in mind that the term 'responsive' has deeper connotations too though. You're asking about an entire process and approach to building websites that employs a number of techniques along the way. Check into CSS3 Media Queries for a rundown on one of the larger aspects at work here.

edited Nov 7, 2013 at 5:27

answered Nov 7, 2013 at 4:23

Stuart Kershaw

17.8k6 gold badges39 silver badges48 bronze badges

Comments

Sbspider · Accepted Answer · 2013-11-07 04:53:01Z

-3

You could probably make it responsive using javascript. Note though that pure javascript may be a little hard to use initially, as what you are asking for seems to be animations and such. Hence, I would suggest using a javascript library called "jQuery". You can find a tutorial on how to use it here . The reason for using jquery is that it allows you to use predefined functions for what you are asking. So, for example, dynamic resizing could be done, along with the effect that it speeds up initially, then slows down as it nears the end of the simulation, using just a few lines of jQuery, while in pure javascript may require tens, if not hundreds of lines (as a random guess). Not sure what the iCloud people use, but it would be something like this. The reason why this is great is that you can animate almost anything - color transitions, resizing, repositioning etc. You can even create draggable objects! To use it, you would need to download the library, place it in a folder in your website folder, and define a link to it in your html.

answered Nov 7, 2013 at 4:53

Sbspider

3975 silver badges14 bronze badges

2 Comments

Qantas 94 Heavy Over a year ago

This does not directly answer the question - this is basically a longer version of You should totally drop that and try jQuery.

Sbspider Over a year ago

Fine then - it can be done through javascript. (although, using javascript is like using C++ for this - it is possible and efficient, but takes a lot of time)

Collectives™ on Stack Overflow

Responsive designing with JavaScript

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related