Tag: css

父div中垂直居中的div – 相对位置

如果两者都是位置，那么在父div中垂直居中div的正确方法是什么？ 我的HTML text CSS article { position: relative; margin: 0; padding: 0; } .text-cell { position: relative; padding: 0; margin: 0; } 想要以文章为中心的“文本单元格”。 （’row’是Bootstrap 3框架）

增加Jquery的第n个子选择器

参考那个 我需要遍历第n个子选择器，就是这样 var i =1; var tmp = $(this).find(‘td:nth-child(i+1)’); // Wondering How this behavior can be achieved i++; 我所拥有的是在网格中动态生成列的行/行，我想循环遍历每个网格单元并使用标题（即其ID）存储每个网格单元的值。 我想知道我是否可以在nth-child中增加选择器。所以每次迭代它都会捕获下一个gridcell值。 因此，我可以将其值和Id推送到arrays以供进一步使用。 任何forms的帮助都将是值得赞赏的。 问候

为owlcarousel制作的旋转木马创建拼贴画

我正在使用一个名为owlcarousel的插件来创建一个旋转木马。 旋转木马和拼贴画已经制作完成。 该作品已在Google Chrome，Safari，Opera和Firefox上进行了测试。 除了Firefox之外，所有这些都可以正常工作。 当旋转木马工作正常时，显示如下： 在Firefox上，它看起来是这样的： 现在，这是关于轮播（HTML）的代码的一部分： (function($){ $(‘.carousel-featured-sellers’).owlCarousel({ items: 3, loop:true, margin:15, nav:true, navText: [“”,””], dots: true, responsive:{ 0:{ items:1 }, 430:{ items:2 }, 800:{ items:3 }, 1400:{ items:4 }, 1800:{ items:6 }, 2400:{ items:7 }, 3000:{ items:9 } } }) })(jQuery); 关于样式（CSS）的部分： .featured-sellers-collage .div1{ width: 100%; } .featured-sellers-collage .div1 p { margin-bottom: […]

视差滚动在1张图像上工作但在其他图像上没有

我正在努力为我的2张背景图像提供视差效果，它正在处理第一张图片但不在第二张图片上…代码如下 jquery： $(document).ready(function() { $(‘section[data-type=”background”]’).each(function() { var $bgobj = $(this); // assigning the object $(window).scroll(function() { // scroll the background at var speed // the yPos is a negative value because we’re scrolling it UP! var yPos = -($window.scrollTop() / $bgobj.data(‘speed’)); // Put together our final background position var coords = ‘50% ‘+ yPos + […]

使用jsPlumb时div的数量增加

我在HTML页面中创建了三个div元素，这三个div元素中的每一个都包含一个文本框，即其中的输入元素。 一个div成为源，而另外两个成为目标。 HTML页面有一个按钮名称切换。 源div和一个目标div之间的初始连接是在拖放的帮助下创建的。 单击切换时，它将删除源和目标之间的连接，并将在源和另一个目标之间创建新连接。 现在，在此方案中使用Google Chrome开发人员工具执行分析时，每个切换的div元素数量会继续增加2。 jsplumb_demo var connection12 = undefined, connection13 = undefined; jsPlumb.ready(function() { var exampleGreyEndpointOptions = { endpoint:”Rectangle”, paintStyle:{ width:10, height:10, fillStyle:’#666′ }, isSource:true, connectorStyle : { strokeStyle:”#666″ }, isTarget:true, container:$(‘#container’), connector : “Straight”, deleteEndpointsOnDetach: true }; jsPlumb.makeSource($(‘div.source’), exampleGreyEndpointOptions); jsPlumb.makeTarget($(‘div.target’),exampleGreyEndpointOptions); jsPlumb.makeTarget($(‘div.target1’),exampleGreyEndpointOptions); init = function(connection){ }; connectionDelete = function(){ if(connection12 !== undefined){ […]

jQuery：如何通过将高度添加到元素顶部来设置更高的高度？

我有一个简单的问题，但我不知道如何解决它。 基本上我有一些隐藏的内容，一旦扩展，需要99px的高度。 折叠时，持有它的section#newsletter #newletter将高度设置为65px。 现场示例： http ： //dev.supply.net.nz/asap-finance-static/ 点击a#signup_form ， section#newsletter将使用以下jQuery扩展为99px： $(‘#newsletter_form’).hide(); // hide the initial form fields $(‘#form_signup’).click(function(event) { event.preventDefault(); // stop click // animate $(‘section#newsletter’).animate({height: 99}, 400, function() { $(‘#newsletter_form’).show(300); }) }); 所有这一切都很有效，除了这个元素位于粘性页脚中，因此它的初始高度用于定位它。 动画此元素的高度会导致浏览器上的滚动条，因为添加的34px会添加到元素的底部，所以我的问题是： 如何将这些34px添​​加到元素的顶部，以便高度向上扩展到身体而不是向下？ 感谢您的阅读，我期待着您的帮助和建议。 Jannis

通过jquery获取rgba背景颜色

我有一个background-color:rgba(1,0,0,0)的元素background-color:rgba(1,0,0,0) ，我需要通过jquery来获取这个值来做某事。 我尝试了$(‘.overlay’).css(“backgroundColor”)但它返回transparent 。 有没有办法通过jquery获取元素的rgba背景颜色？ 顺便说一句，这是我的代码： HTML： CSS： .overlay { background-color:rgba(1,0,0,0) } jquery： $(‘.overlay’).css(“backgroundColor”);

Javascript固定位置导航根据窗口高度/滚动量间歇性地工作

我在导航栏上方有一个标题图像，标题图像由两个图像组成，前景中的一个位于左下角，然后滚动显示背景，直到它从屏幕顶部通过一段距离，然后它溢出到导航中，最后用它向上滚动，直到导航修复到顶部。 小提琴 更改输出窗口的高度以查看我在下面描述的问题。 $(function () { var nav_offset_top = $(‘#nav’).offset().top; var nav = function () { var scroll_top = $(window).scrollTop(); var width = $(window).width(); if (scroll_top < 195) { $('#fg-img').css({ 'position': 'absolute', 'top': 0 }); $('#nav').css({ 'position': 'relative' }); } else if (scroll_top < 265) { $('#fg-img').css({ 'position': 'fixed', 'top': -195}); $('#nav').css({ 'position': 'relative' }); […]

CSS Only Ellipse（即“…”）折叠和扩展

当用户点击椭圆时，我想要显示一些文本。 以下示例显示了使用jquery时我想到的干净实现。 此示例显示了CSS解决方案的扩展和折叠 $(‘.collapse’).click( function(){ if( $(this).attr(‘dataStatus’) != “visible” ) {$(this) .html(‘{ ‘ + $(this).attr(‘dataText’) + ‘ }’) .attr(‘dataStatus’,’visible’) } else {$(this) .html(‘. . .’) .attr(‘dataStatus’,’hidden’) } }); .collapse { color: black; text-decoration: none; } Tom . . . runs. 我想在不使用任何javascript的情况下实现相同的结果。 （最终，我正在尝试找到一种方法来在Outlook处理的局内电子邮件中重新创建此function，但即使它无法在Outlook中运行，我也会对简单的纯CSS答案感到满意）。 我的第一直觉是使用“已访问”标记，以及“之后”和“之前”内容内容标记。 我发现这种方法有一些过时的支持 ，但最终隐私问题导致“访问”受到严重限制。 任何人都可以想到另一种可以达到预期效果的基于CSS / HTML的实现吗？ 也许涉及列表或表单元素的东西 。 考虑到我的最终目标是让它在Outlook中运行，越简单就越好。

在下拉列表中旋转自定义图像作为箭头

我按照在线教程帮助我用我自己的图像替换浏览器的默认下拉选择箭头。 这很好，你可以在这里看到这个例子。 .headerDropdown { border-radius: 6px; border: 2px solid #d4d4d4; height: 34px; } .headerDropdown select { height: 34px; line-height: 34px; padding-left: 10px; padding-right: 5px; margin-right: 20px; font-size: 16px; border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /*Removes default style Firefox*/ background: url(“http://sofzh.miximages.com/javascript/caret-black-small-up-icon.png”) right no-repeat; width: 100%; background-position: 98% […]