小编Ale*_*lex的帖子

向下滚动时标题固定的 shacking

我正在尝试fixed标题部分。我能够做到这一点,但是在is-sticky使用 JS添加新类时它会颤抖。top:0;向下滚动时从动画开始。出于这个原因,当摇晃并从顶部开始时,它看起来很奇怪。我希望它可以顺利固定在顶部,不会影响访客的眼睛。就像这个网站http://www.lazada.com.my/
这是我的演示

$(window).load(function(){
  $(window).scroll(function(){
    if($(window).scrollTop()>0){
      if( ! ($('#scroller').hasClass('is-sticky'))) {
        $('#scroller')
        .addClass('is-sticky')
        .css('top',9)
        .animate({
          'top': 84
        },'1000');
      }



    } else {
      if($('#scroller').hasClass('is-sticky')) {
        $('#scroller')
        .removeClass('is-sticky')
        .css('top',9)
        .animate({
          'top':84
        },1000);

      }
    }
  });
});
Run Code Online (Sandbox Code Playgroud)
body{
    height:1000px;
    margin:0;
    padding:0;
    position:relative;
}
#scroller {
    position: absolute;
    left: 0;
    top: 84px;
    width: 100%;
    z-index: 30;
    background:#CCC;
    height:20px;
}
#scroller.is-sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 9px;
    margin-top: -31px;
    height: 53px;
    z-index: 701;
    background: …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery

5
推荐指数
1
解决办法
5442
查看次数

@include在SASS中做什么?

我是SASS和编程语言的新手。

.row 
{
  @include make-row;
}
Run Code Online (Sandbox Code Playgroud)

在上面@include,等于@import在sass中起作用吗?您能否解释的功能@include

css sass

5
推荐指数
2
解决办法
2234
查看次数

Bootstrap 药片中的 JQuery LightSlider

我使用 jQuery lightSlider 作为图像滑块。我想在引导药丸内放置滑块(每个药丸一个滑块)。尽管如此,我发现了以下情况: 在第一个药丸中,滑块正常。在第二个药丸中,不显示滑块内容(调整窗口大小会显示滑块内容!)。我不知道如何解决这个问题。任何帮助将不胜感激。

我的(简化的)html:

<div>
    <ul class="nav nav-pills">
        <li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>

        </li>
        <li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>

        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="col-md-12 tab-pane fade in active" id="s1">
        <ul id="slider-1">
            <li>
                <p>one</p>
            </li>
            <li>
                <p>two</p>
            </li>
            <li>
                <p>tree</p>
            </li>
        </ul>
    </div>
    <div class="col-md-12 tab-pane fade active" id="s2">
        <ul id="slider-2">
            <li>
                <p>uno</p>
            </li>
            <li>
                <p>dos</p>
            </li>
            <li>
                <p>tres</p>
            </li>
        </ul>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JavaScript:

function initSlider(sliderId) {
  $('#'+sliderId).lightSlider({
    item:2,
    loop:false,
    slideMove:1
  });
}

initSlider('slider-1'); …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

5
推荐指数
1
解决办法
2354
查看次数

在悬停时填充元素与倾斜的背景

我正在尝试创建一个CSS按钮悬停效果.但我没有设法用倾斜的形状填充元素.

如何计划悬停效果:

在悬停时填充倾斜形状的按钮

屏幕截图1:它实际上看起来如何.

屏幕截图2:我希望悬停效果看起来像倾斜的一面.

.button_sliding_bg {
  color: #31302B;
  background: #FFF;
  padding: 12px 17px;
  margin: 25px;
  font-family: 'OpenSansBold', sans-serif;
  border: 3px solid #31302B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #31302B;
  -webkit-transition: all ease 0.8s;
  -moz-transition: all ease 0.8s;
  transition: all ease 0.8s;
}
.button_sliding_bg:hover {
  box-shadow: inset 200px 0 0 0 #31302B;
  color: #FFF;
}
Run Code Online (Sandbox Code Playgroud)
<button class="button_sliding_bg">Buttontext</button>
Run Code Online (Sandbox Code Playgroud)

css hover css3 css-transitions css-shapes

5
推荐指数
2
解决办法
2053
查看次数

CSS DIV在底部内联

我有3个部门投入inlinebottom.我不知道怎么做...任何人都可以帮助我?

预期产量: 在此输入图像描述

我试过的代码:

.feature-description
{
  margin-top: 20px;
  padding-left:10%;
  padding-right:10%;
}
.start-up-phase
{
  background-color: #a82327;
  color: #fff;
  padding: 13px 22px  100px;
  text-align: justify;
  width:86%;
  margin-left:auto;
  margin-right:auto;
  min-height:350px;
}
.growth-phase
{
  background-color: #196b8c;
  color: #fff;
  padding: 13px 22px  110px;
  text-align: justify;
  width:86%;
  margin-left:auto;
  margin-right:auto;
  min-height:450px;
}
.expansion-phase
{
  background-color: #53752f;
  color: #fff;
  padding: 13px 22px 200px;
  text-align: justify;
  width:86%;
  margin-left:auto;
  margin-right:auto;
}
.phase-title
{
  border-bottom: 1px solid #fff;
  padding-bottom:10px;
}
.phase-content
{
  padding-top:5px;
}
Run Code Online (Sandbox Code Playgroud)
<!-- Latest compiled and …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

5
推荐指数
1
解决办法
875
查看次数

在多个 div 或类似于选项卡之间切换

我正在处理一个自定义选项卡,它具有动画底部边框,可以从一个选项卡滑到另一个选项卡

示例:http : //codepen.io/anon/pen/NxNZLv

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">ONE</a></li><!--
 --><li class="two"><a href="#">TWO</a></li><!--
 --><li class="three"><a href="#">THREE</a></li><!--
 --><li class="four"><a href="#">FOUR</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c"><p>This is ONE</p></div> 
  <div class="tab2-c"><p>This is TWO</p></div> 
  <div class="tab3-c"><p>This is THREE</p></div> 
  <div class="tab4-c"><p>This is FOUR</p></div> 

<div>
Run Code Online (Sandbox Code Playgroud)

我希望根据单击的选项卡显示相关项目。我试图让它工作,但出现错误。

事件试图将其转换为无法正常工作的引导程序选项卡。它打破了我在标签上想要的动画

基于 Boostrap 的示例:http ://codepen.io/anon/pen/KVzjJo

我已经更新了小提琴并为每个选项卡编写了脚本。而不是我想要单个脚本来管理它。

http://codepen.io/anon/pen/NxNZLv

我们可以改进吗?

html javascript css jquery twitter-bootstrap

5
推荐指数
1
解决办法
2918
查看次数

Laravel错误:方法Illuminate\View\View :: __ toString()不得抛出异常

我正在使用larval 4.2,我在wrapper.php我的视图文件中收到以下错误:

   <?php echo View::make('layouts/blocks/header')->with('sidebar', $sidebar)->with('active', $active); ?>
   <?php echo $content; ?>
   <?php echo View::make('layouts/blocks/footer'); ?>
Run Code Online (Sandbox Code Playgroud)

错误:

   Error : Method Illuminate\View\View::__toString() must not throw an exception
Run Code Online (Sandbox Code Playgroud)

你知道什么导致了这个吗?

php laravel

4
推荐指数
1
解决办法
6679
查看次数

布局周围的边框

我想在 VerticalLayout 周围画一个边框(轮廓)。我不希望我的所有 VerticalLayout 组件都有边框,只有其中一个。这是 Eclipse 中的 Vaadin 7 项目。

border vaadin7

4
推荐指数
1
解决办法
4143
查看次数

stdClass对象和数组键值

我有数组的以下对象,并试图获取电子邮件的价值.如何才能做到这一点?

stdClass Object (
    [status] => stdClass Object ( 
        [info] => Unsubscribe List [code] => 200 
    ) 
    [data] => Array ( 
        [o1958147@rtrtr.com] => stdClass Object ( 
            [date] => 2013-01-28 08:09:19 
            [origin] => 
        ) 
        [phil.houston@granherne.com] => stdClass Object ( 
            [date] => 2013-01-28 08:35:59 
            [origin] => 
        ) 
    )    
) 
Run Code Online (Sandbox Code Playgroud)

目前我可以使用以下foreach访问日期值.

foreach ($fnret->data as $msg)
{
    echo $msg->date;      // shows 2013-01-28 08:35:59
}
Run Code Online (Sandbox Code Playgroud)

php arrays object stdclass

3
推荐指数
1
解决办法
8540
查看次数

过渡:翻译和z-index

似乎CSS transition: translate()与之冲突,z-index我无法为自己的积木创建折叠效果。

的HTML

<div class="card">
  <div class="arrow-box">
    <span>Destinations</span>
  </div>
  <div class="choice" style="z-index: 1">
    <div class="choice-header">New York</div>
    <div class="choice-content" style="background: red"></div>
  </div>
  <div class="choice" style="z-index: 2">
    <div class="choice-header">Boston</div>
    <div class="choice-content" style="background: #801566"></div>
  </div>
  <div class="choice" style="z-index: 3">
    <div class="choice-header">Seattle</div>
    <div class="choice-content" style="background: green"></div>
  </div>
  <div class="choice" style="z-index: 4">
    <div class="choice-header">Washington</div>
    <div class="choice-content" style="background: #1e3180"></div>
  </div>
  <div class="choice" style="z-index: 5">
    <div class="choice-header">San Francisco</div>
    <div class="choice-content" style="background: #e5f400"></div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

的CSS

.choice {
  transition: .6s;
  margin-bottom: -264px;
  z-index: 0; …
Run Code Online (Sandbox Code Playgroud)

html javascript css css3 css-transitions

3
推荐指数
1
解决办法
761
查看次数