我正在开发一个使用bootstrap及其响应式JS + CSS的网站.
在页面的顶部,我有一个固定的导航栏,其中显示"展开菜单"按钮,以防视口太紧.这个按钮通过动画(我认为是一个CSS3)实现了它的魔力并且我很满意它,但每次动画结束时我都想做更多的事情(用jquery切换类)(打开动画和关闭)一).我正在考虑一个javascript监听器(更好的是通过jquery .on函数定义它),但我真的不知道应该听哪个事件!有任何想法吗?
更新 我喜欢通过在对象上听这个事件我想要控制几乎完成这项工作:
$("#main-navbar .nav-collapse").on("transitionend", function(event){
console.log("end of the animation");
}
Run Code Online (Sandbox Code Playgroud)
唯一的问题是它在该对象上混淆了引导动画:第一次它起作用,但是我想关闭扩展的导航栏,没有任何反应(似乎我的听众覆盖了引导程序.非常奇怪,是吧?)
我正在使用Leaftlet在网页上创建地图。
在地图的左侧是一个滑出的面板。
当面板滑出时,将调整地图大小以填充页面上的剩余空间。
当面板向左滑动时,地图会调整大小,中心点也会向左移动。
理想情况下,地图的中心点应保持在相对中心。
狡猾的ASCII表示形式:(“。”表示地图的初始中心点。)
Panel closed: [][ . ]
Panel open (current): [ ][ . ]
Panel open (desired): [ ][ . ]
Run Code Online (Sandbox Code Playgroud)
这是一个再现问题的jsFiddle。
(对于 Mapbox 和 JS 来说相当新,所以我有点不知所措)我正在开发一个页面,用户需要调整地图容器的大小。它需要能够获得调整大小的地图的准确边界和中心点(通过map.getBounds和map.getCenter)。
当我使用JS调整容器div的大小时,中心和边界没有调整。小提琴: http: //jsfiddle.net/xcow63sm/3/
平移/缩放会导致更新的中心和边界。浏览器窗口调整大小(如果将宽度或高度设置为 100%)也可以。我希望更改容器尺寸会调整中心和边界。
但是,如果您使用表单字段来调整容器 div 的高度/宽度,则中心和边界不会。我尝试过(越来越绝望):
function resize (){
var inputwidth = document.getElementsByName("mapwidth")[0].value;
var inputheight = document.getElementsByName("mapheight")[0].value;
var mapDiv = document.getElementById('map');
var mapcenter = map.getCenter();
mapDiv.style.width = inputwidth;
mapDiv.style.height = inputheight;
map.updateSize();
map.update();
map.resize();
map.invalidateSize();
document.getElementById("mapcenter").value = mapcenter;
Run Code Online (Sandbox Code Playgroud)
编辑:这似乎适用,但我无法理解它:Resizing a leaflet map on container resize