小编Dee*_*dav的帖子

谷歌地图V3设置中心到特定的标记

我正在使用Google Map V3显示从数据库中提取的标记列表,使用MYsql和PHP.MY标记在地图上使用完整地址(来自DB,包括邮政编码)设置,因为我没有Long,Lat信息所有工作正常,MY循环看起来如下

while...
Addmarker(map,'MY ADdress','Title');
end while;
Run Code Online (Sandbox Code Playgroud)

现在我想将地图设置为循环中包含的特定标记,该标记将与先前输入的邮政编码匹配.如何将地图设置为此标记的中心并打开infowindow?

google-maps google-maps-api-3

41
推荐指数
3
解决办法
10万
查看次数

如何让第n个子选择器跳过隐藏的div

我有几个随机块.每当一个块落入新行时,我都会让它看起来不同.当用户点击按钮时,我隐藏了几个块display:none,然后出现问题.该nth-child选择也算隐藏要素.

有没有办法忽略那些特定的块,所以每一行都有不同的风格?这是我类似场景的一个例子.

$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})
Run Code Online (Sandbox Code Playgroud)
.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    .board-item:nth-child(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  .board-item:nth-child(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  .board-item:nth-child(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery css-selectors

24
推荐指数
1
解决办法
2万
查看次数

在引导程序中创建固定到底部的导航栏,在切换时向上滑动内容

我在我的网站上有两个导航栏,一个在标题中,另一个在页脚中

标题部分工作正常,但我想要的是页脚应该类似于导航栏,但是,当我进入移动视图(较小的视口)时,会出现一个切换按钮(默认引导程序功能)但是当单击该切换时,它会向下滑动,内容显示在导航栏下方,尽管向上,所以,任何人都可以帮助我吗?

我不知道,如何在Fiddle中包含Bootstrap,所以直接发布我的页脚代码.它直接包括,bootstrap文件和Fontawesome文件.

获得Bootply链接:http: //bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a …
Run Code Online (Sandbox Code Playgroud)

javascript jquery navbar twitter-bootstrap twitter-bootstrap-3

13
推荐指数
1
解决办法
6万
查看次数

Slick.js如何在旋转木马中心对齐图像?

默认情况下,图像在左侧对齐.使用设置centerMode: true,图像从左侧对齐几个像素,下一个图像的边缘从右侧窥视,如图所示:

在此输入图像描述

这些是使用的设置:

for (var i in data.image_set) {
    sc.append('<div><img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"></div>');
}
sc.slick({
    dots: true,
    speed: 150,
    centerMode: true
});
Run Code Online (Sandbox Code Playgroud)

我想让滑块在中心只显示一个图像,并且可选地分别在左侧和右侧部分可见前一图像和下一图像.如何实现这一目标?

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});
Run Code Online (Sandbox Code Playgroud)
.sc img {
  height: calc(50vh - 100px);
  width: auto;
}
Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" …
Run Code Online (Sandbox Code Playgroud)

javascript css carousel slick.js

10
推荐指数
2
解决办法
3万
查看次数

没有出现聚合物象和纸的象

我有一个名为input-header的聚合物1.x元素,它看起来像这样

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="input-header">

  <template>

    <style>
      .dropdown-content {
        padding: 0px;
      }
    </style>

    <paper-toolbar>

      <paper-icon-button icon="mail"></paper-icon-button>
      <iron-icon icon="image:transform"></iron-icon>
      <div class="title">Left</div>

      <paper-menu-button horizontal-align="right" vertical-align="top">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <div class="title">Right</div>
      </paper-menu-button>
    </paper-toolbar>

  </template>

  <script>
    Polymer({

      is: 'input-header',

      properties: {

        label: {
          type: String,
          notify: true
        }

      }

    });
  </script>

</dom-module>
Run Code Online (Sandbox Code Playgroud)

我已将它包含在我的index.html中,如下所示:

<body unresolved id="app">

   <input-header label="Left"></input-header>

</body>
Run Code Online (Sandbox Code Playgroud)

但出于某种原因,纸质图标或铁图标并未显示在此处

在此输入图像描述

javascript css html5 polymer polymer-1.0

7
推荐指数
2
解决办法
5582
查看次数

在 Li Tag 内部向左和向右浮动,每个都有单独的锚点

我有一个容器,我想在左侧显示一些项目,并想在右侧放置一个购物车图标。我尝试了这个,但不起作用,这里出了什么问题?

文本和图像都有单独的链接。

小提琴

超文本标记语言

<div class="showcase">
    <ul>
        <li class="item">
            <h1><a href="#">Item 1 + Star 1
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
        <li class="item">
            <h1><a href="#">Item 2 + Star One
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

<div class="showcase">
    <ul>
        <li class="item">
            <h1><a href="#">Item 1 + Star 1
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" …
Run Code Online (Sandbox Code Playgroud)

html css html-lists

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

使用引导按钮和下拉元素自定义选择标记,如行为

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');

});
Run Code Online (Sandbox Code Playgroud)
.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li> …
Run Code Online (Sandbox Code Playgroud)

html css jquery twitter-bootstrap dropdown

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

显示不正确(可能是负边距)?

window.onload = function() {
  var target1 = document.getElementById("fruit");
  var target2 = document.getElementById("veg");
  var target3 = document.getElementById("games");
  var target4 = document.getElementById("numbers");

  var list = document.querySelectorAll("#dragsource li");
  for (i = 0; i < list.length; i++) {
    list[i].draggable = true;
    list[i].ondragstart = function(event) {
      var event = event || window.event;
      var dt = event.dataTransfer;
      dt.setData("text", event.target.id);
      dt.effectAllowed = "move";
    };
  }


  target1.ondragover = function(event) {
    var event = event || window.event;
    event.preventDefault();
  };

  target2.ondragover = function(event) {
    var event = event || window.event; …
Run Code Online (Sandbox Code Playgroud)

html javascript css jscript

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

使用mixin参数在LESS中创建类名

我正在尝试在LESS中创建一个简单的mixin,用于我将用于网站的不同颜色.

我想要的是mixin argument作为班级名称的一部分使用.

@green: #5FBEAA; // my color variable

.text-color(@color) {
    .text-{@color} {
        color: @color;
    }
}

.text-color(@green);
Run Code Online (Sandbox Code Playgroud)

我得到的输出是:

.text-#5FBEAA {
  color:#5FBEAA
}
Run Code Online (Sandbox Code Playgroud)

我想要的是:

.text-green {
  color:#5FBEAA
}
Run Code Online (Sandbox Code Playgroud)

css mixins less less-mixins

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

用对角线分割div

您如何通过对角线将 div 分成 2 部分(均包含水平文本)?

例如,请参阅其中 1 具有矩形背景图像,而 2 具有带背景颜色的文本:

在此处输入图片说明

html css

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