使用RTL时强制全宽问题

时间:2016-01-29 18:26:12

标签: javascript html css

我使用高级网格插件并设置方向:“rtl”在css文件中我尝试使用此代码获取强制全宽

<?php if($force_full_width == 1) { ?>
<script type="text/javascript">
     function force_full_width_<?php echo $advanced_id; ?>() {
          var p = $(".standard-body .full-width .advanced-grid-<?php echo $advanced_id; ?>");
          if(p.size() > 0) {
               p.width($('body').width());
               p.css("left", "0px");
               var position = p.offset();
               p.css("left", "-" + position.left + "px");
               p.find(".container").css("padding-left", position.left);
               p.find(".container").css("padding-right", position.left);
          }

          var s = $(".standard-body .fixed .advanced-grid-<?php echo $advanced_id; ?>");
          if(s.size() > 0) {
               s.width($('.standard-body .fixed .pattern').width());
               s.css("left", "0px");
               var position = s.offset();
               var position2 = $('.standard-body .fixed .pattern').offset();
               var position3 = position.left-position2.left;
               s.css("left", "-" + position3 + "px");
               s.find(".container").css("padding-left", position3);
               s.find(".container").css("padding-right", position3);
          }

          var b = $(".standard-body .fixed2 .advanced-grid-<?php echo $advanced_id; ?>");
          if(b.size() > 0) {
               b.width($('body').width());
               b.css("left", "0px");
               var position = b.offset();
               b.css("left", "-" + position.left + "px");
               b.find(".container").css("padding-left", position.left);
               b.find(".container").css("padding-right", position.left);
          }

          var c = $(".fixed-body .advanced-grid-<?php echo $advanced_id; ?>");
          if(c.size() > 0) {
               c.width($('.fixed-body .main-fixed').width());
               c.css("left", "0px");
               var position = c.offset();
               var position2 = $('.fixed-body .main-fixed').offset();
               var position3 = position.left-position2.left;
               c.css("left", "-" + position3 + "px");
               c.find(".container").css("padding-left", position3);
               c.find(".container").css("padding-right", position3);
          }
     }

     force_full_width_<?php echo $advanced_id; ?>();

     $(window).resize(function() {
          force_full_width_<?php echo $advanced_id; ?>();
     });
</script>
<?php } ?>

在ltr中它的工作很像这个图像

http://i.stack.imgur.com/l9rTi.jpg

但是在rtl语言中获得像这个图像的空白空间

http://i.imgur.com/ny2hvt5.jpg

如何通过rtl方向使这项工作变得更好

2 个答案:

答案 0 :(得分:0)

由于没有提供HTML,因此无法确定实际问题是什么,所以我们根本无法知道Javascript的哪个部分正在处理屏幕捕获的哪个部分。

但是,对于正确方向的一些提示,似乎使用Javascript进行此类样式会使问题过于复杂。这个问题应该能够主要用CSS来解决,Javascript只是显示/隐藏语言变化所需的div。只需使用100%宽度的容器,然后将元素放在容器内就可以解决问题。

答案 1 :(得分:0)

提供的文件是滑块的javascript。但是您需要一个HTML代码才能将滑块插入HTML页面。

然后,您可以从HTML代码本身将宽度更改为100%。

如果您可以提供HTML代码,则可以解决相关问题。