Responsive WEB Design Coding Tips Part 2

I want to change the description location of an html element with the device (window) width.

In media queries (CSS3), the display can be changed according to the breakpoint by adjusting the float, position, display, etc., but the description position of the element on html cannot be changed. .

If it is difficult to handle without changing the description position of the element on the html, it may be possible to easily handle it by using javascript (jquery in this case).

For example, the display of "Information" in the left column (side) of the sample page below, but when the device (window) width is narrowed, it is written in the left column (side) in html, so the left column (side) is Of course, when it comes under the main column, "Information" will follow.

sample01 

Here, I would like to change the display position of "Information" by changing the description position (*1) of the element on the html without following the left column (side) with javascript (jQuery).

*1 The description of the element on the html is not actually rewritten, but it is changed on the browser by javascript.

Load jQuery.

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Run jQuery.

 
<script> $(function(){ //ここにコード}); </script>

Get device (window) width with jQuery.

 
$(window).width();

Process by device (window) width with jQuery. (for breakpoint 768px)

 
var _width = $(window).width(); if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理}else{ //『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理}

Change the description position of the element on html with jQuery.

This time, insertBefore(content)* of jQuery is used to insert an element before another specified element.

 
//『Information』を『main』記事の前に挿入する。 $('#box_info01').insertBefore('#box_main01 .box_article01'); //『Information』を元の位置に挿入する。 $('#box_info01').insertBefore('#h3_side01');

*In addition to insertBefore(content), jQuery provides various APIs such as insertAfter(content), before(content), after(content) and clone().

Below is a summary of the process up to this point.

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(function(){ var _width = $(window).width();//デバイス（ウィンドウ）幅を取得 if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理 //『Information』を『main』記事の前に挿入する。 $('#box_info01').insertBefore('#box_main01 .box_article01'); }else{ //『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理 //『Information』を元の位置に挿入する。 $('#box_info01').insertBefore('#h3_side01'); } }); </script>

* If the above is left as it is, even if the window size is changed, the process will not be reflected unless it is reloaded.
I need to handle when the window size changes using jQuery's bind(type, [data], fn).

Example) $(window).bind("load resize", init);

In the above example, the function "init" is executed when the window "$(window)" is loaded and resized.

To summarize, the code is as follows.

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(function(){ $(window).bind("load resize", init);//ウィンドウが『読込み』もしくは『ウィンドウサイズ変更』された時、関数『init』を実行 function init(){//下記の処理を関数『init』として定義する var _width = $(window).width();//デバイス（ウィンドウ）幅を取得 if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理 //『Information』を『main』記事の前に挿入する。 
$('#box_info01').insertBefore('#box_main01.box_article01');
 }else{
 // Processing when the device (window) width is other than 768px
 // Insert "Information" at its original position.
 $('#box_info01').insertBefore('#h3_side01');
 }
 } //init
 });
 </script>

Added the above jQuery to sample02.

sample02 

I want to add an animation effect.

In sample01, when the device (window) width becomes 320px or less, the global menu is hidden and displayed by hovering over "MENU" (#gnav), but using jQuery, animation effects (slide down, slide up).

Simulate mouse hover movement with jQuery.

 
$('#gnav').hover( function(){ 
// Processing when hovering over "MENU" (#gnav)
 },
 function(){
 // Processing when the hover is off to "MENU" (#gnav)
 }
 );

Add an animation effect to the display with jQuery.

This time, I will use jQuery's slideDown() and slideUp().

 
//表示するときにスライドダウンさせる。 $('#gnav').children('ul').slideDown(); //非表示するときにスライドアップさせる。 $('#gnav').children('ul').slideUp();

Combine the above.

 
$('#gnav').hover( function(){ //『MENU』(#gnav)にホバーしてる時の処理 //表示するときにスライドダウンさせる。 $(this).children('ul').slideDown(); }, function(){ //『MENU』(#gnav)にホバーがはずれた時の処理 //非表示するときにスライドアップさせる。 $(this).children('ul').slideUp(); } );

In addition, jQuery combines processing for each device (window) width. (for breakpoint 320px)

 
if(_width <= 320){
 // Processing when the device (window) width is less than 320px
 $('#gnav').children('ul').css({'display':'none'});//Initially hidden.
 $('#gnav').hover(
 function(){
 // Processing when hovering over "MENU" (#gnav)
 // Slide down when showing.
 $(this).children('ul').slideDown();
 },
 function(){
 // Processing when the hover is off to "MENU" (#gnav)
 //Slide up when hidden.
 $(this).children('ul').slideUp();
 }
 );
 }else{
 // Processing when the device (window) width is other than 320px
 $('#gnav').children('ul').css({'display':'block'});//Always display.
 }

sample02 

Precautions when using css and javascript (jQuery) together

Before coding in html, we check the specifications and requests from the client, and when it comes to the design, if there is no plan for each breakpoint or if it is unclear, we will always ask for confirmation.
If you carelessly code using javascript from the beginning, it is often difficult to deal with changes in specifications and designs later.
Basically, it is better to create with css and html, and use as little javascript as possible, so that browsers and various devices are less compatible.

Next time, I will introduce tools that can be used in responsive web design.