小编Mik*_*son的帖子

我在我的网站主页上有一个嵌入式Vimeo视频,当网站加载时设置为自动播放.我也在使用api和froogaloop.js一些自定义控件.

我需要做的是节省视频访问导航到另一个页面时的时间,然后在他们返回主页时从这一点继续播放.

我知道我可以playProgress用来获得时间,但我不知道如何存储这个以及如何在访问者返回主页时使用它.

编辑

我现在有以下代码,并使用js-cookie来存储进度cookie.我将如何得到的值playProgress,并使用其设置为一个cookie beforeunload的window？我在javascript上不是很好,所以帮助会很棒!

JAVASCRIPT(也包括这个库https://github.com/js-cookie/js-cookie)

$(function() {
    var iframe = $('#player1')[0];
    var player1 = $f(iframe);
    var status1 = $('.status1');

// When the player is ready, add listener for playProgress
    player1.addEvent('ready', function() {
        status1.text('ready');
        player1.addEvent('playProgress', onPlayProgress);
    });

    function onPlayProgress(data, id) {
        status1.text(data.seconds + ' seconds played');
    };

    // SETTING A COOKIE
    Cookies.set('timeElapsed','something');
});

HTML

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="videoholder">
    <h3>Player 1</h3>
    <iframe id="player1" src="https://player.vimeo.com/video/142216434?api=1&player_id=player1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen …

我正在使用Bourbon Refill导航菜单,并希望对其进行修改,以便在小模式下单击链接时,菜单会向上滑动.当菜单下降时,但是当单击菜单项时,菜单会保持下降状态.由于我使用带有固定顶级菜单的滚动页面,这意味着很多内容隐藏在菜单后面.

这是Codepen上的代码:

http://codepen.io/mikehdesign/pen/LVjbPv/

我现有的代码如下:

HTML

<header class="navigation" role="banner">
<div class="navigation-wrapper">
<a href="javascript:void(0)" class="logo">
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image">
</a>
<a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">Menu</a>
<nav role="navigation">
  <ul id="js-navigation-menu" class="navigation-menu show">
    <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
    <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
  </ul>
</nav>

SCSS

.navigation {
$large-screen: em(860) !default;
$large-screen: $large-screen;

// Mobile view
.navigation-menu-button {
display: block;
float: right;
margin: 0;
padding-top: 0.5em;

@include media ($large-screen) {
  display: none;
}
}

// Nav menu
.navigation-wrapper {
@include …

我正在使用clndr.js(http://kylestetz.github.io/CLNDR/)来显示假日小屋预订的日期.这些始终使用多日活动系统显示,因为最低预订为3天.我现在需要以不同的方式设计活动的第一天和最后一天,以显示它们是转换日.理想情况下,我会通过添加一个类来做到这一点td.这是我到目前为止:

JS

$('#calendar').clndr({
          template: $('#calendar-template').html(),
          weekOffset: 1,
           daysOfTheWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
           targets: {
               nextButton: 'clndr-next',
               previousButton: 'clndr-previous'
           },
           multiDayEvents: {
               startDate: 'start',
               endDate: 'end'
           },
           events: events,
           clickEvents: {
               click: function(target) {
                   //alert(target);
               }
           }
      });

示例JSON

var events = [
  {start:'2016-05-29T00:00:00+00:00',
  end:'2016-06-01T00:00:00+00:00',
  title:'Mrs A N Human',},
  {start:'2016-08-10T00:00:00+00:00',
  end:'2016-08-17T00:00:00+00:00',
  title:'Mr A Person',}
];

HTML /下划线

 <div id="calendar">
  <script type="text/template" id="calendar-template">
   <table class="table">
    <thead>
     <tr>
      <th class='clndr-previous'>&lt;</th>
      <th colspan="5"><%= month %> <%= year …

我有一个电子邮件模板，其中除了一个元素之外的所有内容都正常工作，该元素在 Outlook 中无法正确呈现。这是代码：

<a href="https://website.com/link" style="color: #fff; display: inline-block; font-weight: bold; text-decoration: none; border-bottom: solid 2px #e30517; padding-bottom: 3px; padding-left: 3px; padding-right: 3px;">View Event</a>

其他浏览器向我显示：

Outlook 2016 和 2019 看起来像这样（注意链接上缺少的底部边框）：

是否有任何提示/技巧可以让 2px 底部边框显示在这些电子邮件客户端上？

我正在使用Owl Carousel 2 jquery插件,我试图让幻灯片中包含导航按钮.我的HTML非常简单:

<div class="owl-carousel">    
<div>
  <p>Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>

  <div class="customNavigation">
    <a class="prev">Previous</a>
    <a class="next">Next</a>
  </div>

</div>

<div>
  <p>Slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>

  <div class="customNavigation">
    <a class="prev">Previous</a>
    <a class="next">Next</a>
  </div>

</div>

<div>
  <p>Slide 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. …

我将Redactor编辑器用作Pe​​rch的一部分。我想让编辑器能够（可选）将类添加"button"到<a>他们添加的任何标签中。这可以通过现有“添加链接”模态中的附加选项进行，也可以是编辑器工具栏中的单独按钮。

有人对实现此目标的最佳方法有任何指导吗？任何指针表示赞赏。

这是我当前的配置设置：

config.plugins = [];
config.buttons = ['format','bold','italic','deleted','link','lists'];
config.formatting = ['p', 'blockquote', 'h2', 'h3', 'h4'];

我在开发期间使用以下CSS代码在我的网站上生成基线背景:

html { 
    background-image: url(http://basehold.it/i/24/777777);
}

我想将一个SASS变量传递给$base-line-heightURL,所以它的工作原理如下:

html { 
    background-image: url(http://basehold.it/i/$base-line-height/777777);
}

但是我在编译时遇到错误.有没有办法可以做到这一点？

谢谢

麦克风