小编Joh*_*ter的帖子

我正在使用Mapbox GL JS v0.14.2并且我通过文档搜索了高低,并且很少有人清楚这一点.

如果您使用标准的JS API,那么使用他们提供的示例"非常适合使用贴图"(https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to - 标记/); 但是使用GL api时的设置是完全不同的.该GL API有getBounds()(https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds),而是因为你没有命名图层,像标准JS API,所以我挣扎找出如何使用getBounds().

我发现这个(Mapbox GL JS API Set Bounds)但肯定不是正确的答案？

这是我的大部分设置; 排除JSON设置和其他选项.

mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5, …

我知道我不能用CSS做这个,但我想知道,如果有可能定位具有特定类的元素的每个第n次迭代,使用jQuery.所以,如果我想选择每个第四个.media元素或每三个.media项目.

例如:

<ul>
  <li class="element"></li>
  <li class="element"></li>
  <li class="element media"></li>
  <li class="element media"></li>
  <li class="element"></li>
  <li class="element media"></li>
  <li class="element"></li>
  <li class="element media"></li>
</ul>

$('.layout-option--b .media').each(function() {
    $(this).filter(function(index, element) {
        return index % 4;
    }).addClass("fourth");
});

我有一个平坦的红色.png图像,我希望通过使用CSS过滤器将其更改为特定的颜色.我认为这是最好的方法.

我正在使用SASS,通过使用它,我可以获得颜色的色调,饱和度和亮度.通过使用"红色"图像,这意味着色调的旋转度从0开始,因此通过使用hue-rotate我然后将其从0旋转到特定颜色的色调度.与饱和度和亮度相同.

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

输出为:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); 如果我检查特定颜色的HSL是什么......

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而,当应用此图像时,图像是超暗的.看起来像正确的色调,但饱和度和亮度是错误的？

对我在哪里做错的任何想法？我看了一下这个例子:如何计算所需的色调旋转以生成特定的颜色？但似乎给了我同样的问题.

https://jsfiddle.net/gosj0ur2/

我在页面上安排了元素的位置–通过CMS控制的位置，该控件为每个元素提供了宽度，顶部位置，左侧位置，z索引和“速度”。

该速度用于使用JS创建视差效果。它取“速度”，并用window.pageYOffset– 计算。如果速度小于0，则将window.pageYOffset速度除以速度；如果速度大于0 window.pageYOffset，则将速度乘以速度。在滚动时，它会调整Y平移以产生这种“视差”效果。

通常，这一切都很好，但是当您更改滚动元素的Y位置时，您会在底部留下一个“间隙”（如果滚动速度与用户滚动速度匹配，元素将位于此处）。

为了纠正这一点，我想我会获得最底部的元素，并获得其getBoundingClientRect().bottom位置并在滚动时减小容器的高度以匹配该元素的底部，因此当您向下滚动或向上滚动时，容器会收缩/展开以匹配，从而消除差距。

但是，这似乎不起作用。数学/逻辑错误或者我错过了整件事。

下面是我的代码，我建立了一个JSFiddle来帮助可视化。

https://jsfiddle.net/6up3vqjn/2/

// Runs on init and resize
function parallaxInit() {

  var $container = $('.parallax'),
    container = $container[0];

  var testArray = [],
    $testLastElement;

  $('.parallax > .group').each(function() {

    var $group = $(this),
      group = $group[0],
      groupBounds = group.getBoundingClientRect(),
      $lastElement,
      lastElementBoundsBottom = 0;

    $group.find('> div').each(function() {

      var $div = $(this),
        div = $div[0],
        initTop = $div.attr('data-top');

      if (initTop == 0) {
        $div.css('top', '0');
      } else {
        $div.css('top', $(window).width() …

以为有人可能知道那里的脚本,或者知道如何更新站点的每个部分的favicon.我正在研究的构建的每个部分都有强烈的颜色,我认为根据你所在的部分更新favicon的颜色可能是一个很好的UI触摸.这些可能是一系列图标,但会强制进行更改,而不是仅在每个部分中添加favicon链接.

我知道Gmail可以使用未读/新电子邮件更新favicon.

任何帮助/想法将不胜感激.

干杯,R

对我来说，标准设置是具有head.inc和foot.inc，然后通过AJAX调用在中间进行更新并进行一些转换。有点无聊，但是目前就是这样。我遇到的问题通常是在head.inc中的主要站点导航/菜单是上下文相关的，并且会根据正在查看的页面而改变。这可能会导致很多代码重复，因为1）我在PHP中使用PW编写了代码，因此如果直接访问该页面，它会得到反映； 2）如果通过AJAX调用访问该页面，我也必须在JS中执行相同的操作。你看到了困境。

我最近开始做的是在菜单的包含文件中构建一个PHP数组，并且也json_encode有了一个数组，该数组具有相同的代码，一个供PHP使用，一个供JS使用。类似于以下内容...

$menuArray = array();

$menuLeft = $pages->find("template=work|news, sort=sort");
$menuRight = $pages->find("template=clients|about, sort=sort");

if ($page->id !== 1) {
    $menuLeft->filter("id={$page->id}");
    $menuRight->filter("id={$page->id}");
}

foreach ($menuLeft as $item) {

    $menuArray['left'][] = array(
        'id' => $item->id,
        'name' => $item->name,
        'url' => $item->url,
        'title' => $item->title,
        'x' => '100%'
    );

    // If current page then prepend 'Close'
    if ($page->template->name == $item->name) {
        array_push($menuArray['left'], array(
            'name' => 'close',
            'url' => $pages->get(1)->url,
            'title' => 'Close',
            'x' => '100%'
        ));
    }

}

foreach ($menuRight as …

如果这与我之前的帖子发生冲突,请道歉,但我非常坚持无限滚动的整个回调功能,希望有人可以帮助我.

我正在使用Portfolio Slideshow Pro(http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/)将Wordpress与Infinite Scroll结合使用.

这就是我的无限卷轴JS的样子:

<script>
  $(function(){

    var $container = $('.rest-of-content');

    $container.infinitescroll({
      navSelector  : '.wp-paginate',    // selector for the paged navigation 
      nextSelector : '.wp-paginate li a',  // selector for the NEXT link (to page 2)
      itemSelector : '.single-fg-post',     // selector for all items you'll retrieve
      bufferPX: 20,
      loading: {
          msgText: 'Fetching more gold...',
          finishedMsg: 'We\'ve ran out of gold!',
          img: '<?php bloginfo('template_directory'); ?>/images/ajax-loader-black.gif'
        }

    });

  });
</script>

幻灯片插件是一个完整的$(窗口).load所以我把所有东西都拿到里面,然后把它变成一个函数.

$(window).load(function() { portfolioSlideshow() });

但是现在我需要在每次新的帖子加载时回调该函数,尽管infinitescroll正在工作,幻灯片上的JS不是.

有人可以帮我把我创建的函数添加到infinitescroll的回调中,这样每次加载新数据时它都会重新加载函数吗？

非常感谢提前.

-R

我正在使用一小段代码(基于' ScrollTo Posts with jQuery ',它允许您单击下一个/上一个链接,它将跳转到每个帖子的顶部.

我有我的HTML结构,所以它发布>图像>发布>图像等.

我想知道如果你点击下一个/上一个按钮是否可能,它会正常滚动到下一个帖子,但是它会悬挂/悬停在images/div之间？所以它最终完成了它的滚动,但减慢了中间的div.

这是我的jQuery代码:

$(function () {
    function a(f) {
        var b, e, c = [],
            d = $(window).scrollTop(),
            g = $('.section-slide');
        g.each(function () {
            c.push(parseInt($(this).offset()['top'], 10))
        });
        for (e = 0; e < c.length; e++) {
            if (f == 'next' && c[e] > d) {
                b = g.get(e);
                break
            }
            if (f == 'prev' && e > 0 && c[e] >= d) {
                b = g.get(e - 1);
                break
            }
        }
        if (b) { …

我正在使用下面的代码,在不同的方向上滚动两个div(),但我很想知道你是否可以限制滚动,所以每次滚动只会触发一次(而不是连续滚动并将我的函数发送到无尽的循环.

$('.page-left, .page-right').bind('mousewheel', function(event, delta) {
    var windowHeight = $(window).height();
    if (delta < 0) {
        prevProject();
    }
    if (delta > 0) {
        nextProject();
    }
});

你可以看到我在这里的位置:http://dev.rdck.co/lyonandlyon/

谢谢你,R

动画功能供参考:

var prevProject = function() { // up arrow/scroll up
    var windowHeight = $(window).height();

    $('.page-left .page-left-wrapper').css({bottom:'auto'});
    $('.page-left .page-left-wrapper').animate({top:0},800, function() {
        $('.page-left .page-left-wrapper').prepend($('.page-left .project-left:last-of-type'));
        $('.page-left .page-left-wrapper').css({top:-windowHeight});
    });
    $('.page-right .page-right-wrapper').css({top:'auto'});
    $('.page-right .page-right-wrapper').animate({bottom:+windowHeight*2},800, function() {
        $('.page-right .page-right-wrapper').append($('.page-right .project-right:first-of-type'));
        $('.page-right .page-right-wrapper').css({bottom:+windowHeight});
    });
};


var nextProject = function() { // down arrow/scroll down
    var windowHeight …

我有以下循环设置,但需要删除最后一项的逗号(它是为cycle2复制一个JSON数组)

{% for product_in_series in series.get_products %}{%spaceless%}
    {% with product_in_series.product as product %}
    {%if not forloop.first%}
            "<img src='{% version product.get_overview 'page_image' %}'>",
    {%endif%}
    {% endwith %}
{%endspaceless%}{% endfor %}

干杯,R