我正在尝试使用Bootstrap的Carousel来处理高度不同的内容.高度将根据浏览器宽度而有所不同,并且旋转木马下方有内容.我想使用CSS来设置幻灯片之间高度变化的动画.在朋友的帮助下,我几乎可以在FireFox中使用它(第一个幻灯片跳转,其余的是动画)但Chrome中的滑动动画会出现明显的错误.
任何输入都会很棒,即使你认为我应该以完全不同的方式处理高度动画,请告诉我!
这是我认为重要的JS和CSS,但整个事情都在JS Fiddle:http://jsfiddle.net/tkDCr/
JS
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('slid', function(e) {
console.log('slid',e);
});
$('#myCarousel').bind('slide', function(e) {
console.log('slide',e);
var next_h = $(e.relatedTarget).outerHeight();
console.log(next_h);
$('.carousel').css('height', next_h);
});
通过注释掉JavaScript的第12行和第13行,您可以看到错误显然是由于将变量next_h与来自'$(e.relatedTarget).outerHeight();'的数据一起分配而引起的.即使不使用该变量,它仍会破坏动画.评论11,12和13将向您展示轮播如何正常运作.
CSS
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
background: lightgoldenrodyellow;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
先感谢您.
我正在开发一个电子贺卡制造商(我知道这很糟糕,不是我的想法......).有没有办法在不使用闪存的情况下将特定dom元素的html和css转换为图像？我知道有图像魔法等,但是对齐和正确排序文本似乎相当复杂.
我最好寻找服务器端解决方案,因为从客户端发布图像可能需要一些时间.
我发现了这个:https://code.google.com/p/java-html2image/但不幸的是我只能使用php,ruby或客户端技术.
我知道这个问题:高度等于动态宽度(CSS流体布局)
但我想要更多!! 我想要一个灵活的容器,它总是具有正方形的纵横比,但最大高度和最大宽度为100%的页面(窗口元素),并且在其顶部始终垂直和水平居中.
像这样:
// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
- ####### -
- #cont-# -
- #ainer# -
- ####### -
---------------------
// container matches width of the window
// container-width = 100%; container-height = absolute-container-width
--page---
- -
- -
-#######-
-#######-
-#######-
-#######-
- -
- -
---------
是否有可能用纯css(甚至更好的跨浏览器)实现这一点？
编辑: 我知道css3 有calc(),但由于移动浏览器支持不佳,我不想使用它.
编辑2: 似乎,我没有让自己清楚.我需要包装器的高度和宽度来匹配窗口的高度或宽度,具体取决于哪个更小.方形容器不应超过窗口高度/宽度的较小值.
这就是如何用jQuery完成的:
// container/#main-wrapper has top: 50%, left: 50%, position: …我希望导航栏中的字体大小固定 - 不受浏览器字体大小变化的影响。我完全同意其余文本的流畅性，但我网站的设计是这样的，我需要导航栏文本无论如何都保持相同的大小。
这是我想做的一个例子。不知道这是怎么做到的。右上角的导航栏不受字体大小增加/减小的影响。如果有人能告诉我，我将不胜感激！:)
另外，我不想使用图像，因为我想要的下拉菜单不适用于图像映射。或者至少，我宁愿不走那条路。
我喜欢Webstorm,Phpstorm和Intellij以及其他jetbrain产品的自动完成功能.但是,如果我有这样的结构,它不起作用:
img/my-img.jpg
sass/main.scss
sass/component/_component.scss
// sass/main.scss:
@import "/component/component"
// _component.scss:
.class{
// => autocomplete doesn't work here as desired <=
// how intellij completes it
background: url(../../img/my-img.jpg)
// what i would like to have instead
background: url(../img/my-img.jpg)
}
有没有办法告诉IntellJ如何使用sass文件夹作为图像自动完成的基础并摆脱烦人的错误通知？
我想知道在angular2中设置可配置模块的最佳方法是什么.在angular1中,这通常是通过提供商完成的.随着它们的改变,你会如何将配置参数传递给可重用的ng2模块/指令/组件？
一个ng1的例子:
// configuring a (third party) module
.config(function (angularPromiseButtonsProvider) {
angularPromiseButtonsProvider.extendConfig({
spinnerTpl: '<div class="other-class"></span>',
disableBtn: false
});
});
// setting up the provider
.provider('angularPromiseButtons', function angularPromiseButtonsProvider() {
var config = {
spinnerTpl: '<span class="btn-spinner"></span>',
priority: 0,
disableBtn: true,
};
return {
extendConfig: function(newConfig) {
config = angular.extend(config, newConfig);
},
$get: function() {
return {
config: config
};
}
};
})
// using the result in the directive, etc.
.directive('promiseBtn', function(angularPromiseButtons){
var config = angularPromiseButtons.config;
})
这基本上与这个 …
在 Intellij 产品中，我非常喜欢实时模板。我想知道是否可以对文件模板使用相同的语法，例如将变量格式化为蛇形或骆驼形、定义起始光标位置等。
到目前为止我尝试过的是:
## $NAME is something like 'my_controller_c'
#set($NAME = $NAME.removeAndHump($NAME))
#set($NAME = $NAME.underscoresToCamelCase(String)
但这不起作用.第一个没有做任何事情,第二个抛出java错误.
我也尝试使用正则表达式并循环遍历字符串,但我的java知识是非常基本的.
是否可以阻止 SASS 合并通过@import?
对于开发，我想维护原始 CSS 的引用（在我已经从 SASS 编译的设置中）。