Tag: css

传递另一个div时显示/隐藏DIV: 如果他通过了另一个DIV，我想要一个hidden div节目。例如，如果div.passedMe底部显示在html下面！遇到窗口顶部， div.showHide将显示，当scroll up和div.passedMe顶部！遇到div.showHide会隐藏的窗口顶部。 HTML If you passed this div another div will show/hide this div will show/hide 到目前为止这是我所拥有的，但这只有在A页面上传递某个PIXEL时才有效 $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 100) { $(‘.showHide’).fadeIn(); } else { $(‘.showHide’).fadeOut(); } }); 这是小提琴

如何使用jQuery异步加载CSS？: 我想使用jQuery异步加载文档的CSS。我发现了这个示例，但这似乎在IE中不起作用： $(function(){ $(”, { rel: ‘stylesheet’, type: ‘text/css’, href: ‘/inc/body/jquery/css/start/jquery-ui-1.8.10.custom.css’ }).appendTo(‘head’); $.getScript(“/inc/body/jquery/js/jquery-ui-1.8.10.custom.min.js”, function(){ }); }); 基本上我想在所有其他数据，图像，样式等加载到页面后加载jQuery UI 。 $.getScript适用于JS文件。唯一的问题是IE中的CSS。你知道更好的解决方案吗？

Javascript设置CSS：样式之后: 你能用Javascript设置：使用CSS的样式吗？所以我们说： $(“#foo li:after”).css(“left”,”100px”);

jQuery中的简单模态div？: 我已经尝试了几乎所有我可以在网上找到的jQuery Modal插件，但它们对于我需要的东西来说都很笨重。我不需要所有花哨的function，我希望能够打开一个div并让页面的背景像下面的照片一样透明灰色，让我的div在它上面，这就是我需要做的全部所以我想写一些jQuery来做这个，而不是使用一个庞大的插件。有没有人有任何可以执行此任务的小代码？透明背景是图像还是CSS？

如何使div宽度可拖动？: 我有一个div嵌套在另一个div中，用于显示设置控制台。嵌套div有一个固定位于父级内部，如下所示：我想为子div的左边框添加一个可拖动的句柄，以便可以在宽度上调整子div的大小。我是否需要添加另一个非常窄的div，左边框位于此处，以便可以拖动它并重新计算位置以动态调整子divs width属性的大小？如果可能的话，我宁愿坚持使用vanilla JQuery，而不是依赖于JQuery UI。

使用javascript或jQuery生成CSS媒体查询: 是否可以使用Javascript或jQuery动态创建完整的媒体查询规则？我使用了大量的媒体查询来使用内联CSS，导入和链接文件来定位通用视口和特定设备/屏幕： @media screen and (min-width:400px) { … } @import url(foo.css) (min-width:400px); 我可以使用jQuery添加/删除类： $(“foobar”).click(function(){ $(“h1,h2,h3”).addClass(“blue”); $(“div”).addClass(“important”); $(‘#snafu’).removeClass(‘highlight’); }); 我还看一下document.stylesheets和看似古老且特定于浏览器的内容： document.styleSheets[0].insertRule(“p{font-size: 20px;}”, 0) 但我找不到任何以编程方式生成的引用： @media screen and (min-width:400px) 直接或以任何forms从javascript。

使用flexbox的谷歌浏览器视口锚定扩展方向: Google Chrome中存在一个问题，即当元素放置在Flexbox容器内时，元素在相对于视口的不同方向上展开/折叠，其中相邻的 flex项目具有space-between center对齐内容。这在Firefox，IE11，Edge或Safari中不是问题，因为元素总是向下扩展。我很好奇： Chrome的行为是否符合某些规范？如果是这样，哪一个？如果没有，那么为什么在Chrome中完成？（恕我直言，点击触发器随机消失，这是一个可怕的用户体验。）某些人可以修改或禁用Chrome的行为吗？例如。通过CSS或元标记？更新1：如果可能的话，我已经向铬虫追踪者提交了问题＃739860，寻求Chromium开发者的见解/解释。以下是插入的两个示例。可以在此笔中找到描述该问题的完整测试套件： https ：//codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle，以便展开/折叠动画是动画的并且可见眼。详细信息标记也会出现相同的行为，但目前还没有跨浏览器支持，并且展开/折叠过于繁琐。例1：Chrome在合理的Flexbox之间的空间展开/折叠行为 $(‘button’).click(function() { $(this).next().slideToggle(); }) body { margin: 30px; font-family: sans-serif; } aside, aside div, summary, main, button, details p, button + p { background: rgba(0,0,0,.09); border: none; padding: 20px; margin: 0; } .flexcontainer { display: […]

CSS和JQuery：图像名称中的空格中断url（）的代码: 我有一个页面，当在鼠标hover在缩略图上时，它应该显示更大的图像版本。我有一个带有ID的’div’，JQuery代码如下： $(document).ready(function(){ $(‘img’).hover(function() { var src = $(“#im” + this.id).attr(“src”); $(‘#viewlarge’).css(‘backgroundImage’,’url(‘ + src +’)’); return false; }); }); 我使用的图像是由Ruby脚本生成的，该脚本“生成”具有相似但不同id的图像。但是，有时会上传内部有“空格”的照片。我的开发人员工具告诉我背景图像设置不正确，但图像路径是正确的，浏览器在查找图像时没有问题。我的问题是，我可以以某种方式消毒url’src’，所以空格不会有问题吗？我知道做这个服务器端，但我想知道如何使用JQuery / JS这样做。谢谢！

如何在Bootstrap3 Carousel上通过转换将滑动动画更改为淡入/淡出: 我试图改变bootstrap 3轮播的滑动效果淡入/淡出。我按照这里给出的说明进行了Twitter Bootstrap Carousel插件在幻灯片转换时淡入淡出下面是css代码（在链接中说） .carousel .item { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; } .carousel .active.left { left:0; opacity:0; z-index:2; } .carousel .next { left:0; opacity:1; z-index:1; } 我的示例链接是在这个图的最后，我正在制作但问题是前一个按钮不能正常工作，可能解决方案是完美的bootstrap2，我使用bootstrap3，任何人都可以帮助我吗？预先感谢您的帮助。我是新来的，非常抱歉我的英语不好，如果我问了一个愚蠢的问题！ https://dl.dropboxusercontent.com/u/35758776/xenxbd/contrastic/index.html#parallux-wrapper-04

CSS3：转换属性在chrome中无法正常工作: 我正在努力实现以下的东西..它在Firefox中工作得很好，但同样的CSS 在chrome中工作有点像下面所示我认为-webkit-transform-origin: 50% 100%; 在chrome或其工作中不起作用但不如预期的那样演示Jsfiddle #flyDiv { width:720px; height:420px; transform-origin: 50% 100%; perspective: 300; transform: perspective(300px) rotateX(15deg); -webkit-transform: perspective(300px) rotateX(15deg); }