- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
在我之前的问题中,CSS Hardware Accelerated Width ,我提到我正在创建一个 Phonegap 应用程序,其中包含一项功能,允许您通过移动中间分隔线来更改两列布局的大小。
我正在让它工作,但我遇到了一些 CSS 定位问题。这些问题通常相差一个像素,但我确信这只是我的数学结果。基本上,两列布局通常设置为每一边都是均匀的。然后,如果您移动 slider ,它将更改列的 left
和 right
值以增加或减少它们的宽度。调整大小图标位于这两列之间,并随着它们的宽度变化而移动。
然而,问题是当您旋转设备时,中间分隔线会改变其位置几个像素。要重现该问题,您可以:
或者:
在每种情况下,中间分隔线都会偏离几个像素,导致它无法与分隔线正确对齐。
运行其中大部分的 JS 如下所示:
$(window).on('orientationchange', function (e) {
var page = $("#columnContainer").width();
var totalWidth = $("#leftColumn").width() + $("#rightColumn").width() + 2;
var left = $("#leftColumn").width();
var test = page - ((parseInt($("#leftColumn").css("right")) * page) / 100);
$("#columnResizeIcon").css({
"-webkit-transform": "translate3d(" + (left) + "px, 0, 0)",
"left": "auto",
});
if (totalWidth > page) {
$("#leftColumn").css("margin-right", "2px");
} else if (totalWidth < page) {
$("#leftColumn").css("margin-right", "1px");
}
if ($("#leftColumn").width() < 100) {
$("#leftColumn").css({
"right": 100 - ((100 / page) * 100) + "%",
"margin-right": "1px"
});
$("#rightColumn").css({
"left": (100 / page) * 100 + "%",
});
$("#columnResizeIcon").css({
"-webkit-transform": "translate3d(100px, 0, 0)",
});
}
if ($("#rightColumn").width() < 100) {
$("#leftColumn").css({
"right": (100 / page) * 100 + "%",
"margin-right": "1px"
});
$("#rightColumn").css({
"left": 100 - ((100 / page) * 100) + "%",
});
$("#columnResizeIcon").css({
"-webkit-transform": "translate3d(" + (page - 100) + "px, 0, 0)",
});
}
});
$("div").on("touchmove", "#columnResizeIcon", function (e) {
e.preventDefault();
var page = $("#columnContainer").width();
var left = e.originalEvent.touches[0].pageX;
var right = page - left;
if (left > 100 && left < page - 100) {
$("#leftColumn").css({
"right": ((right) / page) * 100 + "%",
"margin-right": "1px",
});
$("#rightColumn").css({
"left": ((left) / page) * 100 + "%",
"margin-left": "1px",
});
$("#columnResizeIcon").css({
"-webkit-transform": "translate3d(" + left + "px" + ", 0, 0)",
"left": "auto",
});
} else {}
});
CSS:
body{
background-color:#000;
}
#columnContainer{
position: absolute;
bottom:0;
top:0;
right:0;
left:0;
background-color:#000;
}
#leftColumn{
position: absolute;
top:0;
left:0;
right:50%;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-right: 1px;
}
#rightColumn{
position: absolute;
top:0;
left:50%;
right:0;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-left: 1px;
}
.header{
position: absolute;
left:0;
right:0;
height:33px;
z-index: 5;
background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 17px;
font-family: Helvetica;
font-weight: bold;
letter-spacing: .2px;
text-align: center;
padding-top:9px;
color:#71787F;
text-shadow: 0 1px 0 #E3E5E9;
word-break: break-all;
}
.content{
position: absolute;
left:0;
right: 0;
top:42px;
bottom: 0;
}
#leftColumn .content{
background-color:#F5F5F5;
}
#rightColumn .content{
background-color:#fff;
}
#columnResize{
position: absolute;
width:2px;
top:0;
bottom: 0;
left:50%;
margin-left:-1px;
background-color:#000;
z-index: 2;
display: none;
}
#columnResizeIcon{
position: absolute;
z-index: 3;
width:10px;
height:30px;
top:50%;
bottom:50%;
margin-top:-15px;
left:50%;
margin-left:-7px;
border-left:2px solid #000;
border-right:2px solid #000;
}
#leftColumn,
#rightColumn {
-webkit-transform: translate3d(0,0,0);
}
HTML:
<div id="columnContainer">
<div id="columnResizeIcon"></div>
<div id="leftColumn">
<div class="header">Left Header</div>
<div class="content"></div>
</div>
<div id="rightColumn">
<div class="header">Right Header</div>
<div class="content"></div>
</div>
</div>
我会发布一个 fiddle ,但代码需要从 iOS 模拟器或实际的 iOS 设备上运行,而 jsFiddle 不能很好地与 Apple 配合使用。
最佳答案
我会说问题出在边缘。我会摆脱他们(听我说完!)。
#leftColumn, #rightColumn, #columnResize{
position: absolute;
top: 0px;
bottom: 0px;
etc...
}
#leftColumn{
left: 0%;
width: 50%;
}
#rightColumn{
left: 50%;
width:50%;
}
#columnResize{
left: 50%;
width: 2px;
z-index:2;
}
这是一个廉价的技巧,但由于您的调整大小栏只有 2 像素宽,所以它的左侧位置可能与右侧列相同。用户无法判断它实际上应该在左侧 1px。例如根据两列的内容,您可能需要在右列内的任何内容的左侧留出边距。
关于javascript - 单像素 CSS 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15674399/
单向链表 单向链表比顺序结构的线性表最大的好处就是不用保证存放的位置,它只需要用指针去指向下一个元素就能搞定。 单链表图解 图画的比较粗糙,简单的讲解一下: 上面四个长方形,每个长方
使用TCP,我正在设计一些类似于next的程序。 客户端在许多线程中的接收正在等待一台服务器的发送消息。但是,这是有条件的。 recv正在等待特定的发送消息。 例如 客户 thread 1: recv
我正在编写正则表达式来验证电子邮件。唯一让我困惑的是: 顶级域名可以使用单个字符吗?(例如:lockevn.c) 背景:我知道顶级域名可以是 2 个字符到任意字符(.uk、.us 到 .canon、.
是否可以在单个定义中定义同一 Controller 的多个路由? 例如: 我想要一个单一的定义 /, /about, /privacy-policy 使用类似的东西 _home: pat
我正在使用 objective-c开发针对 11.4 iOS 的单 View 应用程序,以及 Xcode版本是 9.4.1。 创建后有Main.storyboard和LaunchScreen.stor
我一直在尝试在 shell 程序中实现管道结构,如果我执行简单的命令(例如“hello | rev”),它就可以工作 但是当我尝试执行“head -c 1000000/dev/urandom | wc
此表包含主机和接口(interface)列UNIQUE 组合* 编辑:这个表也有一个自动递增的唯一 ID,抱歉我应该在之前提到这个 ** | host.... | interface..... |
我想将具有固定补丁大小的“std filter”应用于单 channel 图像。 也就是说,我希望 out[i,j] 等于 img[i,j] 附近的像素值的标准值。 对于那些熟悉 Matlab 的人,
假设我想进行网络调用并使用 rx.Single,因为我希望只有一个值。 我如何应用replay().autoConnect() 这样的东西,这样当我从多个来源订阅时网络调用就不会发生多次?我应该使用
我将图像从 rgb 转换为 YUV。现在我想单独找到亮度 channel 的平均值。你能告诉我如何实现这一目标吗?此外,有没有办法确定图像由多少个 channel 组成? 最佳答案 你可以这样做: #
在比较Go和Scala的语句结束检测时,我发现Scala的规则更丰富,即: A line ending is treated as a semicolon unless one of the foll
在IEEE 1800-2005或更高版本中,&和&&二进制运算符有什么区别?它们相等吗? 我注意到,当a和b的类型为bit时,这些coverpoint定义的行为相同: cp: coverpoint a
我正在使用Flutter的provider软件包。我要实现的是为一个 View 或页面提供一个简单的提供程序。因此,我在小部件中尝试了以下操作: Widget build(BuildContext c
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在尝试从转义字符字符串中删除单引号和双引号。它对单引号 ' 或双自动 " 不起作用。 请问有人可以帮忙吗? var mysting = escapedStr.replace(/^%22/g, '
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
我正在使用 ANT+ 协议(protocol),将智能手机与 ANT+ USB 加密狗连接,该加密狗通过 SimulANT+ 连接到 PC。 SimulANT+ 正在模拟一个心率传感器,它将数据发送到
有人可以解释/理解单/多线程模式下计算结果的不同吗? 这是一个大约的例子。圆周率的计算: #include #include #include const int itera(100000000
我编写了一个粗略的阴影映射实现,它使用 6 个不同的 View 矩阵渲染场景 6 次以创建立方体贴图。 作为优化,我正在尝试使用几何着色器升级到单 channel 方法,但很难从我的着色器获得任何输出
尝试使用 Single-Spa 构建一些东西并面临添加到应用程序 AngularJS 的问题。 Angular2 和 ReactJs 工作完美,但如果添加 AngularJS 并尝试为此应用程序使用
我是一名优秀的程序员,十分优秀!