0

I have a JSP which creates a CSS style file. In that JSP I am using a deviceWidth parameter which I get from a request being sent by the index page that is calling that JSP. I am also using a media query to catch an orientation change in the device.

The problem is, that once an orientation change has been made - I need to update the deviceWidth parameter, and that I don't know how to do.

I can't seem to be using a 'script' tag inside the 'style' block, and recalling the page by window.location.href... with the new parameter value does not work either.

to clarify: this is how my JSP looks like:

<% 
  double deviceWidth = new Double(request.getParameter("width"));
%>

<style>
   .class1{
      BLA BLA BLA <%=deviceWidth%>px;
   }

   .class2{
      BLA BLA BLA <%=deviceWidth%>px;
   } 

   .class3{
      BLA BLA BLA <%=deviceWidth%>px;
   }

   @media only screen  and (orientation: portrait){
      .class1{
         FOO FOO <%=deviceWidth%>px;
      }

      .class2{
         FOO FOO <%=deviceWidth%>px;
      }

   }
</style>

only with MANY more class on each section, and the deviceWidth inside the media query should be a different one then the deviceWidth outside of the media query. Any way i could just update it once and not individually for each element?

4

2 に答える 2

1

2 つの CSS クラスを作成するだけです。

.width1 {
 width: 300px;
}

.width2 {
 width: 500px;
}

次に、要素の css クラスを javascript (removeClass / addClass) で変更します。

于 2013-11-04T09:20:15.597 に答える
0

ウィンドウのサイズ変更イベントを検出し、新しいウィンドウ幅を取得して、それに応じて css を更新できます。

$(window).resize(function() {
    var value = $(window).width();
    $('.myClass').css('width', value + 'px');
});

ウィンドウ幅の値を計算する必要があるかもしれませんが、うまくいけば、これで正しい道に進むことができます。

于 2013-11-04T09:28:31.667 に答える