使用javascript移动内容块以进行响应式设计

Question

I'm working on a highly responsive website at the moment and I hit 2 areas where certain blocks of content need to move to others areas of the site. It would not be possible to do so purely with CSS. I suppose I could relatively reposition the blocks but as the dimensions change this isn;t really possible.

The option I am thinking of is, when a media query gets triggered, to then pull a block out of the page and append it in elsewhere where I need it.

I realise this is not ideal bit what I am wanting to ask is if this is a reasonable thing to so.

I know some of you may say reorder some of the markup but that is not possible. As stated above, I know falling back to javascript is not ideal but it would suit this and I don't particularly wish to duplicate content just so I can avoid the use of javascript.

Flexbox would be perfect but support is not where I want it to be currently for me to use that.

What do people here think? Any other solutions?

Answer 1

The right way is to listen to media queries using MediaQueryList :

var mql = window.matchMedia("(max-width: 320px)");
mql.addListener(function(event) {
 if(event.matches) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

The events will trigger when the query is either met or 'unmet'.

Alternatively, you can listen to a resize event, but note your function will get triggered for every new dimension. (Assuming jQuery in the code below.)

$(window).resize(function() {
 if($(window).width() <= 320) {
  // Window width is less than or equal to 320, do something cool.
 } else {
  // Window width is more than 320, do something else.
 }
});

Like you said yourself though, using JS to make your layout responsive is generally NOT advisable. You can never assume all your users have JS enabled and all goes well.

I would rather see you solve this by restructuring your HTML and CSS. If the content layout has to change a lot, try outputting a block of content in two different places in your HTML and toggling visibility with CSS media queries (setting one to display:none; and the other to display:block; ). You should be able to solve most responsive layout issues by rethinking your website structure.

Answer 2

Others looking for a solution may be interested in the Bootstrap Toolkit JS library available here: https://github.com/maciej-gurban/responsive-bootstrap-toolkit

Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code.

The SASS module enables quick and simple styling for elements needing different property values for each screen resolution.

Then you can do things like:

(function($, document, window, viewport){
  // Listen to resize event
  $(window).bind('resize', function() {
    // Default 300ms poll delay
    viewport.changed(function() {
      // Debug
      console.log( 'Current breakpoint: '+ viewport.current() );
      // Trigger custom event
      $('body').trigger('viewportChanged', [viewport.current()]);
    }, 300)
  });

  // Register event listener
  $(document).on('viewportChanged', 'body', function(event, current) {
    console.log('Current breakpoint: '+ current);
  }

})(jQuery, document, window, ResponsiveBootstrapToolkit);

Answer 3

You could check out some of the already available responsive design HTML boilerplates like Twitter Bootstrap or Zurb Foundation . Maybe their existing configurations satisfy your need.

Answer 4

I have a similar problem on two websites and i do:

JavaScript/jQuery with the window re size event and have breakpoints in JavaScript to. I then remove the item and append/prepend it where i want it to be.

On my other website i use Twitter Bootstrap which is very responsive and looks nice.

I would personally go with Twitter Bootstrap as its a nice grid system. If your site is very complex and cant be done using Twitter Bootstrap them capturing the window re size event is the best way.

$(window).resize(function() {
  //Use $(window).width() and maybe some ifs/a switch to handle break points
  if($(window).width()<700){
    //Move it here
  }
 });

Answer 5

With CSS and JS it can be done :) You can clone the content to another section with jquery (append), then using media queries you can control what shows.

Here is what I do:

I do the appendTo:

$( $('.goto').html() ).appendTo('.mobile')

Here's an example I did:

http://jsfiddle.net/Riskbreaker/vkfWd/

This might not be what you are looking for (since its really not moving it but cloning the content )but this is the way I do it.