小编Emp*_*ger的帖子

动态文本的最大宽度

所以,假设我有这个标记;

<div>
  <span>Text one</span>
  <span class="sticky">ABC</span>
</div>
<div>
  <span>Some other text</span>
  <span class="sticky">DEF</span>
</div>
<div>
  <span>Lorem dolor sit amet lorem ipsum dolor</span>
  <span class="sticky">GHI</span>
</div>
Run Code Online (Sandbox Code Playgroud)

哪个 - 随附CSS - 产生如下图所示的结果.

但是,当第一个文本span长于分配的宽度时,会出现问题div.通常情况下,正常的文本包装; 第二行span被撞到第二行的末尾.

但是,我希望这个元素只是一行.现在,当然要做到这一点,你做;

white-space: nowrap;
overflow: hidden;
Run Code Online (Sandbox Code Playgroud)

但接下来发生的事情是第二个span消失为遗忘,因为它被第一个文本的长度所驱逐span.

我想要实现的是下面第三个例子中的图片.当第一个内容span是太长显示,text-overflow: ellipsis;将削减以点-点-点的字符串,而第二个span会推到最右侧边缘(padding在的div允许).

从本质上讲,第一个的伪max-widthspan将等于它的宽度div,不包括它padding的宽度span.sticky,并且可以减去任何宽度(因为它的内容可能会变化,所以宽度没有设置).

我不知道max-width在接近这样的事情时是否真的是要走的路,但是我可以用来最好地描述我想要的行为.

是否有非JS方法来实现这一目标?

例

css width css3

8
推荐指数
1
解决办法
2万
查看次数

通过对象键将数组项移到前面

所以我有一个对象数组;

[
    {
        "foo": 2,
        "bar": "test"
    },
    {
        "foo": 19,
        "bar": "value"
    },
    {
        "foo": 7,
        "bar": "temp"
    }
]
Run Code Online (Sandbox Code Playgroud)

我需要将具有特定值的对象移动foo到数组的开头.值始终在对象中,但不保证对象将在数组中.

所以在运行之后moveToFront(19);,我有以下内容:

[
    {
        "foo": 19,
        "bar": "value"
    },
    {
        "foo": 2,
        "bar": "test"
    },
    {
        "foo": 7,
        "bar": "temp"
    }
]
Run Code Online (Sandbox Code Playgroud)

我该怎么做呢?

javascript arrays

8
推荐指数
2
解决办法
7973
查看次数

在DIV上拖放文本

我的网站上有一个div,当它被点击时,它会显示搜索框(使用jQuery完成).

但是,我希望这个div能够接受拖拽的文字.在我的用例中,用户从站点的任何位置选择常规文本,然后拖放它以将其复制粘贴到搜索框中.

如果搜索框始终可见,他可以简单地将其放入文本框中,由浏览器/操作系统本机处理.但是,有没有办法用这个div模拟同样的东西?用户将他的文本放到div上,它会触发click事件以显示文本框并将删除的文本粘贴到框中.

我的网站使用Modernizr + jQuery + jQuery UI和HTML5/CSS3.IE6兼容性不是问题.

先感谢您!

javascript jquery drag-and-drop

7
推荐指数
1
解决办法
8111
查看次数

图像映射和HTML5

这个问题比技术问题更具哲学性.

当Web开发人员被称为网站管理员并且我选择的工具是FrontPage,然后转移到Evrsoft 1st Page 2000时,我已经将自己培训成为Web开发人员.

这是我最后一次使用HTML图像映射.

现在它是HTML5,AJAX,矢量画布,CSS 3D,jQuery,本地存储,触摸屏Safari,你的名字.图像地图已经逐渐消失,甚至谷歌都没有提出太多相关结果; 2004年强制性的W3C学校入学和一些论坛帖子.

显然,使用图像地图创建网站导航或类似的琐碎是一个坏主意,当今它肯定是不可原谅的.

但是现在我有一个任务是在带有背景图像的div上创建一个多边形可点击区域.

我在图像映射中没有这个问题,因为它看起来像是为这样的用例设计的,虽然我没有完成任何测试,但我无法想象任何浏览器都会丢弃对一个工作得很漂亮的元素的支持多年.但我不禁想到今天必须有更好的方法来做到这一点.

我的网站创建理念是为IE5.5开发,然后为Chrome边缘设计.这意味着即使是最古老的浏览器,该站点首先需要在基本级别上工作,然后开始添加JS和CSS以使其更美观,更实用,更快速,更简单,更友好和更好.

因此,虽然我知道我可以在Raphaël中做一个画布并添加各种时髦的悬停效果和事物,但我认为制作简单的功能不应该需要一个89 kb(或X kb)的JS库.或者甚至是JS.

我不知道CSS3是否具有定义多边形区域的能力,但是虽然认识到CSS3引入的巨大可能性,但我更喜欢将那里定义的任何内容保持为非必要的天赋,这些天赋会优雅地降级.

因此,在今天的webdev世界中,最流行的浏览器方式是定义多边形点击区域(最好是以jQuery .hover(),或者至少是CSS可以获取的方式:hover),这种方式不依赖于可用的JavaScript或CSS属性在少数浏览器?图像映射真的是唯一的方法吗?什么是移动设备?

html5 image imagemap polygon

7
推荐指数
1
解决办法
4221
查看次数

为Kindle开发网站

我最近接受了为亚马逊Kindle中的实验性网络浏览器设计和开发我的网站的特殊移动版本的想法.不是 Kindle Fire,而是电子墨水.

但是,我没有在网上找到关于这个主题的任何真实资源.我承认,Kindle浏览器的市场份额必须非常糟糕,以至于大多数网站管理员都不应该想到担心它.即使这样,我的网站也是以电子书为中心的,所以我觉得Kindle友好的设计对于这个案例是有意义的.

所以我问你,在你看来,制作适合Kindle的网站有哪些考虑因素?

我应该设计的屏幕分辨率和DPI是什么?如何通过JS/CSS媒体查询检测Kindle(但不是Kindle Fire)?

他们使用什么浏览器引擎?它的HTML5和CSS3功能是什么?AJAX?JavaScript超时?jQuery动画?是否有PC的仿真器/等效器我可以测试它?

只有拥有一台Kindle键盘,在屏幕属性和技术能力方面,不同的Kindles迭代(同样不是Kindle Fire)之间有什么区别?我应该考虑支持其他电子纸阅读器(如Nook,Sony Reader和你有什么)?他们甚至有网络浏览器吗?

在创建用于在电子墨水屏幕上显示的网站时,是否还应考虑其他任何技术,设计或哲学问题?

css mobile html5 kindle media-queries

6
推荐指数
0
解决办法
711
查看次数

确保string是有效的CSS ID名称

我有一堆数据库记录(没有auto_increment ID或其他任何类似的东西)呈现为列表,而且我需要用独特的方法来区分它们id.

我可以在循环中添加一个运行计数器并完成它,但不幸的是,这个ID需要在整个站点中交叉引用,但是列表是有序或过滤的.

因此,我有一个想法将记录标题包含在内id(使用前缀,因此它不会与布局元素冲突).

我怎么能id以一种万无一失的方式将字符串转换为名称,以便它永远不会包含会破坏HTML或不能作为有效CSS选择器工作的字符?

例如;

Title ==> prefix_title
TPS Report 2010 ==> prefix_tps_report_2010
Mike's "Proposal" ==> prefix_mikes_proposal
#53: Míguèl ==> prefix_53_miguel
Run Code Online (Sandbox Code Playgroud)

标题总是多种多样,足以避免冲突,并且永远不会包含任何非西方字符.

谢谢!

css php

5
推荐指数
2
解决办法
3990
查看次数

MySQL修复了两个表中的自动增量空白

我有两张桌子;

id_image   foo    bar
1          3      5
2          8      1
3          17     88
7          14     23
8          12     9


id_image   bar    foo
1          2      3
1          5      6
2          18     11
2          10     12
3          8      21
3          17     81
7          29     50
7          1      14
8          10     26
8          27     34
Run Code Online (Sandbox Code Playgroud)

id_image第一张表中的自动增量存在差距.在第二个表中,id_image引用id_image第一个表中的每个ID,其中有两个ID.

注意:这个表是理论上的.我不知道其中的差距是完全,或无论是否有甚多的差距.我所知道的是第一个值是1,最后一个值高于总行数.

现在,我想解决这个问题.

在你说差距无关紧要之前,如果他们这样做,这是糟糕的数据库设计,让我告诉你; 我同意你的看法.

但是,我正在处理的是一个(绝望的后端倒退)第三方开源系统,我需要将大量现有数据导入到多个表中,这些数据没有交叉引用的ID.我可以确保相同的数据在整个系统的每个表中获得匹配ID的唯一方法是按顺序输入它,这意味着我不能有间隙.

所以我现在需要做的是;

  1. 修复id_image第一个表中列的间隙,以便最后一个值与行计数匹配.
  2. 编辑id_image第二个表中的列,使其值对应于相同的行对应于间隙修复之前.

我该如何开始这样做?我知道这可能超出了MySQL查询语言的功能,因此PHP答案也是可以接受的.谢谢!:)

php mysql database auto-increment

5
推荐指数
1
解决办法
996
查看次数

选择小于数组中变量的最大数字

我有一个JavaScript数组和一个像这样的变量;

var a = [0, 1200, 3260, 9430, 13220],
    b = 4500;
Run Code Online (Sandbox Code Playgroud)

选择数组中仍然小于或等于变量的最大值的最明智的方法是什么?

在这个例子中,我需要选择3260.

我可以这样做;

$.each(a, function(i){
    if(a[i] <= b && a[i+1] > b){
        var c = a[i];
        return false;
    }
});
Run Code Online (Sandbox Code Playgroud)

但我认为如果选定的数组值是最后一个,则可能无效.更不用说,对我来说,看起来很多代码都很简单.

是否有更聪明/更简洁的方式来实现我追求的目标?

(是的,我知道我不应该使用jQuery循环但是在输入示例时我很懒)

javascript arrays

5
推荐指数
1
解决办法
2244
查看次数

溢出选择突出显示

选择的逻辑是什么突出显示超出父元素的溢出?

在附带的截图中,顶部的是我目前所拥有的,最下面的是我想要实现的Photoshop模型.

对我而言,选择突出显示几乎是随机的; 我无法找到任何明确的资源来解释什么使选择突出显示在哪些方面表现.

想要保持选择突出显示合理时,我应该在CSS和DOM方面记住什么?

选择溢出示例

css highlighting selection

5
推荐指数
1
解决办法
362
查看次数

jQuery选择器:连续排在第一位

所以我有一份像这样的兄弟姐妹名单;

  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
<div class="a"></div>
<div class="c"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
Run Code Online (Sandbox Code Playgroud)

(注:b的是没有了的孩子a的,他们是所有兄弟缩进是重点.)

在jQuery中,我需要选择每个b,放弃条纹中的前n个元素.没有特定类型/类别的元素可以打破条纹,条纹中没有任何可靠的元素b,或者b它们之间的非元素.

如果我使用选择器添加一个类selected,并假设n = 2,那么我的DOM就会如此;

  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>
<div class="a"></div>
  <div class="b"></div>
  <div …
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-selectors

5
推荐指数
1
解决办法
339
查看次数