小编R4t*_*ake的帖子

我正在开发一个带有同位素网格的wordpress主题,并且在帖子上悬停应该在浏览器底部的固定位置显示其标题.我有这个简化的结构:

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

通过jQuery,悬停在<article>应该显示其子元素h2.subtitled.<article>相对位置,但通过同位素脚本获得绝对位置.在h2.subtitled被定位固定:

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

由于某种原因,h2.subtitle元素定位固定与父<article>元素相关,因此每个元素的底部<article>.如果我设置了它的<h2>外部<article>,它被定位为与浏览器相关的固定,但它们需要在<article>元素内部,因为无限滚动附加新<article>元素,它们也应该包含<h2>标题.

有谁知道,如何使这个位置固定并与浏览器窗口相关？

谢谢!

我刚刚切换到Rails 6（6.0.0.rc1），它默认将Webpacker gem用于Javascript资产以及Rails-UJS。我想在某些模块中使用Rails UJS，以便通过以下功能提交表单：

const form = document.querySelector("form")
Rails.fire(form, "submit")

在安装了Webpacker的以前的Rails版本中，该Rails引用似乎在我的模块中“全局”可用，但是现在我在调用Rails.fire… 时得到此引用

ReferenceError: Rails is not defined

我怎样才能让Rails从@rails/ujs提供给特定的或我所有的模块？

在我的设置下面...

app / javascript / controllers / form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  // ...
  submit() {
    const form = this.element
    Rails.fire(form, "submit")
  }
  // ...
}

app / javascript / controllers.js

// Load all the controllers within this directory and all subdirectories. 
// Controller files …

我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐.因此,我称之为Isotope就像这样,Chrome(本地)的一切正常:

$(function(){
    var $container = $('#container');
    $container.isotope({
        itemSelector : '.itemwrap',
        layoutMode: 'horizontal',
        horizontal: {
            verticalAlignment: 0.5
        }
    });
});

由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesLoaded修复:http://isotope.metafizzy.co/appendix.html

我实现了这样的修复:

$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.itemwrap',
            layoutMode: 'horizontal',
            horizontal: {
                verticalAlignment: 0.5
            }
        });
    });
});

使用此图像加载,同位素不再加载.删除imagesLoaded,Isotope再次启动(但是混乱的布局).有谁知道,错误在哪里？

谢谢!

我有一个<ul>带有两个不同计数器的列表:

ul.numbered {
    counter-reset: alphaCounter, numberCounter;
}

ul.numbered li.numbered,
ul.numbered li.lettered {
    padding-left: 1.8em;
}

ul.numbered li.numbered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: numberCounter;
    content: counter(numberCounter, decimal) ". "; 
}

ul.numbered li.lettered:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: alphaCounter;
    content: counter(alphaCounter, upper-alpha) ". "; 
}

此列表li.lettered使用A.,B.等正确计算-items.但li.numbered-items始终以"1"开头.如果我将计数器复位的顺序切换为counter-reset: numberCounter, alphaCounter;,则数字正确计数,字母始终以"A"开头.

从我读到的内容来看,我正确地设置了列表,但是很好,显然没有.对此有何帮助？