小编use*_*286的帖子
使用jQuery获取完整的URL,包括问号后的参数？
我正在尝试使用jQuery来获取页面的当前完整URL.页面的URL如下所示:
http://myurl.com/ebook?page=43
如果我使用window.location.pathname它只返回之前的一切？所以我会得到
如何获取整个网址？
推荐指数
解决办法
查看次数
如何将Bootstrap列作为奇数列中心？
我正在使用Bootstrap创建一个图像滑块,并且有一个我似乎无法解决的问题.
在此滑块的每个实例下,我将有3列缩略图(每行4个).但是,有些滑块不会有4个缩略图,有些会有1个,2个或3个.在这些情况下,我想将缩略图水平居中,同时保持相同的15px排水沟,如果有4个.
现在当只有2个缩略图时,这很容易,因为我只需在缩略图集之前和之后添加一个空的3列div.当只有一个缩略图时,我可以删除float并使用margin:0 auto;中心,但是当有3个缩略图时我无法弄清楚要做什么.
任何人都可以告诉我,实现这一目标的最佳方法是什么？我认为能够设置半列是很好的,所以我可以在缩略图之前和之后放置一个空的1.5列div.这可行吗？
以下是3缩略图版本的示例代码:
<div id="container">
<div class="row">
<!-- Full Size Image -->
<div class="col-sm-12">
<img src="http://placehold.it/960x300" />
</div>
<!-- Slider Thumbnails -->
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
</div>
</div>
我已经设置了一个Bootply来展示我如何解决1个缩略图和2个缩略图版本:
Bootply
推荐指数
解决办法
查看次数
如何防止滚动正文内容但允许在移动设备上滚动导航？
我正在尝试为我的页面创建一个"画布外导航".当导航打开时,我希望身体内容不可滚动,但我仍然希望能够在导航菜单中滚动,如果它超出可见区域.
当菜单打开时,我还希望正文内容保持在相同的位置(我找到了一个解决方案,position:fixed当菜单打开时让我添加到正文中,但这会导致页面滚动回到顶部).
$(function() {
$('.menu-toggle').click(function() {
$('body').toggleClass('menu-open');
});
});body.menu-open {
overflow:hidden; /* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size:40px;
cursor:pointer;
}
nav {
background:#fff;
width:100%;
position:absolute;
left:-100%;
}
.menu-open nav {
left:0;
}
nav ul {
margin:0;
padding:0;
list-style-type:none;
}
nav ul li {
padding:20px 0 20px 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link …推荐指数
解决办法
查看次数
动态地将CSS应用于单个字符？
我正在使用JavaScript/jQuery填充页面上的日期字段.我想将CSS样式添加到生成日期的每个单独字符,并想知道是否可能以及如何进行此操作.基本上,我希望最终结果如下所示:
这是我生成日期的代码:
HTML:
<div class="date"></div>
JavaScript的:
var monthNames = [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
var dNow = new Date();
var date = (monthNames[dNow.getMonth()]) + ' '
+ ('0' + dNow.getDate()).slice(-2) + ' '
+ dNow.getFullYear();
$('.date').text(date);
这是一个JSFiddle.
推荐指数
解决办法
查看次数
Google Maps API自动填充搜索,无需从下拉列表中进行选择
我正在使用Google Maps API和自动填充搜索功能.目前,您必须开始键入位置(城市,州,邮政等),然后从地图的下拉列表中选择一个结果,以便在该位置居中.但是,我想制作这个傻瓜证明并进行设置,以便如果有人只是键入一个城市或只是一个州并点击"输入"而不选择自动填充结果,它仍然可以工作.例如,如果有人键入"纽约"并点击"输入"而未在下拉列表中选择结果,则它仍将以纽约为中心.
我假设这是通过从自动完成下拉列表中获取第一个结果来完成的,如果没有手动选择一个.
我已经为表单的提交添加了一个事件监听器,但不确定如何将第一个结果传递给"place"变量.
这是我的代码:
function searchBar(map) {
var input = document.getElementById('search-input');
var searchform = document.getElementById('search-form');
var place;
var options = {componentRestrictions: {country: 'us'}};
var autocomplete = new google.maps.places.Autocomplete(input, options);
//Add listener to detect autocomplete selection
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
map.setCenter(center);
map.setZoom(5);
});
//Add listener to search
searchform.addEventListener('submit', function() {
center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
map.setCenter(center);
map.setZoom(5);
});
//Reset the inpout box on click
input.addEventListener('click', function(){
input.value = "";
});
};
这是一个用于实验的 …
推荐指数
解决办法
查看次数
html/body上的高度100%不适用于iPhone
我创建了一个使用Foundation的响应式网站,其页脚绝对位于页面底部.在我的桌面浏览器上,它看起来应该是这样,但在我的iPhone上,页脚重叠了一些内容,而不是一直在页面底部.
我有我的html,身体CSS设置为:
html, body {
height:100%;
margin:0;
padding:0;
}
但是当我使用Safari开发人员工具检查手机上的页面时,当我将鼠标悬停在html或body标签上时,它并没有一直延伸到页面底部,这导致我的页脚重叠内容.
有谁知道是什么原因引起的？
谢谢!
推荐指数
解决办法
查看次数
可以使用 Math.min 从数组中获取第二小的数字吗？
我正在使用Math.min从数字数组中获取最小的数字。但是，我还需要获得第二小的数字。想知道是否有一种方法可以使用Math.min它来做到这一点，否则正在寻找获得此数字的最佳方法。
这是我所拥有的：
var arr = [15, 37, 9, 21, 55];
var min = Math.min.apply(null, arr.filter(Boolean));
var secondMin; // Get second smallest number from array here
console.log('Smallest number: ' + min);
console.log('Second smallest number: ' + secondMin);推荐指数
解决办法
查看次数
CSS Grid在特定元素上的行/列间隙？
我使用CSS Grid在下面创建了网格，我想知道是否有可能仅在网格内的特定元素之间存在间隙，而不是对所有网格元素都应用通用间隙。这是我现在所拥有的：
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 100px [col] 100px [col] 100px;
grid-template-rows: [row] auto [row] auto [row] ;
background-color: #fff;
color: #444;
}
.box {
background-color:#444;
color:#fff;
padding:20px;
font-size:150%;
}
.a {
grid-column: col / span 2;
grid-row: row 1 / 3;
}
.b {
grid-column: col 3 / span 1;
grid-row: row ;
}
.c {
grid-column: col 3 / span 1;
grid-row: row 2 ;
}
.d {
grid-column: …推荐指数
解决办法
查看次数
使用2个稍微旋转的SVG作为导航背景？
我正在为我的网站创建导航菜单,我想要做的是让背景是2个矩形SVG的组合,每个SVG略微旋转离轴并重叠.边缘将延伸超出屏幕的边缘,从而无法看到它们.SVG应在所有断点处保持相同的高度(120px),并且导航应在容器内垂直居中(即使由于旋转它将显示在偏离中心).当我调整浏览器窗口大小时,我当前的尝试使SVG高度缩小,另外我在对齐时遇到了一些问题.有没有更好的方法来实现这一目标？
.hero-bg {
height:20vh;
min-height:200px;
max-height:350px;
width:100%;
background:url('http://placehold.it/1920x1080');
background-size:cover;
}
.navigation {
position:relative;
height:120px;
overflow:hidden;
}
.nav-bg-1 {
fill:red;
}
.nav-bg-2 {
fill:black;
}
.navigation svg {
position:absolute;
top:-10px;
width:110%;
left:-5%;
}
.navigation ul {
list-style-type:none;
padding:0;
margin:0;
position:absolute;
top:50%;
transform:translateY(-50%);
}
.navigation ul > li {
display:inline-block;
}
.navigation ul > li > a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="hero">
<div class="hero-bg"></div>
<div class="navigation">
<svg viewBox="0 0 2027.79 155.34">
<rect class="nav-bg-1" x="953.89" y="-935.33" width="120" height="2026" transform="translate(918.54 …推荐指数
解决办法
查看次数
React-geocode - 使用引用受限 API 从 lat/lng 获取地址？
我正在尝试使用react-geocode从用户的经纬度坐标中获取地址，但不幸的是我收到错误API keys with referrer restrictions cannot be used with this API.是否可以使用react-geocode允许引荐来源网址限制的不同API？否则我该如何执行此操作，因为我无法删除 API 密钥的引用限制。有没有办法使用我已经用来显示地图的 Google 地图 API 来反转地理编码纬度/经度坐标？
import Geocode from "react-geocode";
Geocode.setApiKey("AIzaSyDsb7F-VyBJn7r4LilYH_lRHBpPfgyUga8");
Geocode.enableDebug();
Geocode.fromLatLng("48.8583701", "2.2922926").then(
response => {
const address = response.results[0].formatted_address;
console.log(address);
},
error => {
console.error(error);
}
);
代码沙盒
推荐指数
解决办法
查看次数