小编Alv*_*aro的帖子

使div(高度)占据父级剩余高度

http://jsfiddle.net/S8g4E/

我有一个div有两个孩子的容器.第一个孩子有一个给定的高度.如何在div不给出特定高度的情况下让第二个孩子占据容器的"自由空间" ?

在示例中,粉红色div也应占据白色空间.


与此问题类似:如何让div占据剩余高度?

但我不想绝对给予立场.

html css height parent

97
推荐指数
4
解决办法
12万
查看次数

使用jQuery更改CSS类属性

有没有办法使用jQuery更改CSS类的属性,而不是元素属性?

这是一个实际的例子:

我和班上有一个div red

.red {background: red;}
Run Code Online (Sandbox Code Playgroud)

我想更改类red背景属性,而不是red分配了类背景的元素.

如果我用jQuery .css()方法做到这一点:

$('.red').css('background','green');
Run Code Online (Sandbox Code Playgroud)

它会影响现在有类的元素red.到这里一切都很好.但是如果我进行Ajax调用,并在red类中插入更多div ,那些将没有绿色背景,它们将具有初始red背景.

我可以再次调用jQuery .css()方法.但我想知道是否有办法改变班级本身.请考虑这只是一个基本的例子.

css ajax jquery properties class

63
推荐指数
4
解决办法
17万
查看次数

<img rel="nofollow noreferrer" /> vs background-image(css)的性能

我正在构建一个使用滚动插件的网站,该插件基本上可以动画滚动.我非常担心性能,好像我在网站中插入一些图像,滚动/动画时看起来很不稳定.

我可以用图像检测到的主要问题是回流/重绘问题,当图像没有正确的尺寸因此被缩放(我必须处理这个,我知道最佳实践).

记住这个说法(图像将被缩放).什么应该更好,图像元素或div与那些图像作为性能的背景?

我在我的Chrome浏览器内存工具中制作了这个jsFiddles,显示背景图像选项使用更少的内存.

<img />:http://jsfiddle.net/ek6Xn/

<img src="..." />
Run Code Online (Sandbox Code Playgroud)

background-image:http://jsfiddle.net/ek6Xn/1/

<div></div>
Run Code Online (Sandbox Code Playgroud)
div {
    background:url(...);
    background-size:100% 100%;
}
Run Code Online (Sandbox Code Playgroud)

参考文献:

  1. img标签元素与具有背景图像的div之间的性能差异?
  2. 何时使用IMG与CSS背景图像?
  3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
  4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

css performance repaint

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

使用favicon跟踪用户对网站的访问

我在这个回答中读到了"网站如何在清除浏览器cookie之后跟踪用户",可以通过网站favicon跟踪用户:

Favicons是第三种可能性 - 大多数浏览器在页面加载之前请求,因此如果满足该请求,则客户端显然是重复访问者.

如果这实际上是可能的,那么它可以是检查用户之前是否访问过该网站的好方法,不需要为该porpouse使用cookie.

我不确定这是否可以用PHP或Javascript(jQuery)完成.怎么能实现这一目标?

编辑:

我解释的是,如果用户需要Favicon,他就会打电话.如果他没有打那个电话,那就意味着他已经有了这个电子邮件,所以他去了.因此,无需在用户计算机中存储任何文件(例如cookie)或将其IP保留在服务器中.它是否正确?

php cookies favicon jquery visited

19
推荐指数
3
解决办法
3645
查看次数

Jquery Lazyload回调

我目前正在使用Jquery Lazy Load,我想知道是否有一种方法可以在我的容器中的所有图像结束加载时进行回调(当懒惰加载完成了他所有的魔法时).

这样做的原因是我也在使用jScrollPane插件,我想调用jScrollPane reinitialize函数.

谢谢'

jquery lazy-loading callback jquery-plugins jscrollpane

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

移动设备和桌面设备有什么区别?

使用Chrome浏览器DevTools我想在" 仿真设备"选项卡中添加自定义设备.您可以选择多个选项,例如宽度和高度.并选择:

  • 移动
  • 手机(无触摸)
  • 桌面
  • 桌面(触摸)

所以Mobile和Desktop之间的区别似乎不是触摸事件.


屏幕尺寸为1000*1000px的移动设备(无触摸)

和一个1000*1000px屏幕尺寸的桌面设备

相同?

或移动设备1000*1000px屏幕尺寸的设备

和一个1000*1000px屏幕尺寸的设备桌面(触摸)

相同?


所以我的问题是:

从技术角度来看,桌面和移动有什么区别?

从概念上解释(我对这个特别感兴趣)和DevTools中的区别.


编辑赏金:

在回答了其他问题并了解谷歌,亚马逊以及其他一些大公司如何区分他们展示网页的方式之后,我才开始怀疑.它不是屏幕大小,而是设备类型(如果我是正确的).所以我想知道除了"移动设备可以移动"之外,在桌面设备和移动设备之间识别的技术方面是什么.

mobile desktop device conceptual google-chrome-devtools

11
推荐指数
3
解决办法
2331
查看次数

CSS中心的过渡宽度和高度

我有位置元素:绝对; 我想在某些情况下过渡.但是,宽度和高度过渡的原点似乎取决于上/下左/右值.

有没有办法对此有更多的控制权?

我特意想从div的中心过渡.

是否有任何解决方案不依赖于转换上/下左/右值?


编辑:

我想保持宽度和高度过渡.

感谢您的答案,但在这种情况下使用Transform scale不是解决方案.Transform属性中的百分比是指元素边框的大小,而不是容器.例如,参见这个JSFiddle,悬停在两个元素上的最终结果是如何不同的.


的jsfiddle

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}
Run Code Online (Sandbox Code Playgroud)
<div></div>
<span></span>
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transitions

10
推荐指数
3
解决办法
1万
查看次数

基于github存储库的本地存储库创建本地git存储库并保持更新

我有一些基本的git知识,但我不知道如何实现这一目标.

我试图克隆(?)github WordPress启动主题下划线.我们的想法是创建一个基本框架,基于对存储库(一些修改).然后以该框架为基础创建其他主题.

所以看起来应该是这样的:

  1. 复制github将存储库强调到本地

  2. 从下划线创建一个本地存储库my_framework,始终修改这些文件的某些部分(例如名称)并添加一些其他文件

  3. 创建新的本地资源库my_theme1,my_theme2基于my_framework

目标是在更改和修改框架和主题的同时,使用任何下划线更新更新所有内容.一旦来自github的内容被拉出,它应该保留(或通知)任何更新,但我不需要我在本地做出任何改变回到路径中.

我不确定要遵循哪条路径,并感谢任何帮助或指针.

git wordpress github

10
推荐指数
2
解决办法
690
查看次数

Lazy Load中的多个容器

我正在尝试将Lazy Load插件应用于多个容器.我发现了类似的问题:MULTIPLE水平容器上的延迟加载.

这是我的尝试:http://jsfiddle.net/BAFMC/

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});?
Run Code Online (Sandbox Code Playgroud)

但是我遇到了与上述问题相同的问题,即Lazy加载仅适用于最后一个容器(.p_outer_content)(这是小提琴中的第三个容器).

有谁知道如何解决这个或有其他建议?提前致谢'

编辑:

好的,我每次滚动其中一个容器时都尝试重新应用lazyload函数:

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});

$(".p_outer_content").scroll(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });

});?
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/BAFMC/4/

哪个有效,但我不知道它是否是解决问题的好方法.然而有人提出了更好的解决方案吗?谢谢'

jquery containers lazy-loading image jquery-plugins

6
推荐指数
1
解决办法
4136
查看次数

jQuery地址:验证用户是按前进按钮而不是后退按钮

编辑3:这个jsFiddle适用于插件,我几乎拥有它.

编辑2:我做了一个小提琴.我无法让插件在那里工作,但也许它更容易分析.


在我正在构建的网页中,通过Ajax加载文章(帖子)和新页面.在加载新的Ajax内容的同时,地址栏会发生变化(使用jQuery Address插件).

所以正常的导航会像这样:

       //page2/page3/article7/page3/page4

请注意,在此导航中,没有按下任何浏览器按钮,退出文章7时,网站返回到其先前的URL,在这种情况下是page3.

当用户按下后退或前进按钮时,插件不会检测到.我设法找出了一种方法来了解用户何时按下后退或前进按钮:

每次添加新内容并更改地址时,我都会将新地址存储在一个数组中.如果用户按下后退或前进按钮,我会这样分析:

if(new_url == penultimate_value_in_array)=>按下后退按钮(从数组中删除最后一个值)
else =>按下前进按钮(向数组添加新值)

这适用于这种导航:

       //page2/page3/page4

在我的情况下,它适用于后退按钮.但是,如果用户从/ article7按下Forward到/ page3,该函数会将其读作Back.这是一个了解我的意思的例子:


用户在/ page4并按Back - > new_page =/page3等于penultimate_page_in_array(/ page3)=> BACK

       //page2/page3/article7/page3/page4

用户在/ page3并按Back - > new_page =/article7等于penultimate_page_in_array(/ article7)=> BACK

       //page2/page3/article7/page3

user在/ article7中并按Back - > new_page =/page3等于penultimate_page_in_array(/ page3)=> BACK

       //page2/page3/article7

用户在/ page3中按Back - > new_page =/page2等于penultimate_page_in_array(/ page2)=>返回

       //page2/page3

user在/ page2中并按下Forward - > new_page =/page3,它不等于penultimate_page_in_array(/)=> FORWARD

       / /第2页

user在/ page3中并按下Forward - > new_page …

ajax jquery browser-history jquery-address

6
推荐指数
1
解决办法
403
查看次数