在有人向我投票之前要求另一个中心问题.请在评判前阅读我的情况!
我熟悉最常用的中心技术,但这是我的情况.我有一个DIV,必须在其父级内垂直和水平居中,但它也必须是流体,不超过890px的宽度.
最大宽度实现了我想要的流体性,但因为绝对定位元素需要宽度而不是最大宽度我的垂直/水平定心中断.目前我不得不牺牲流体中心(或反之亦然),但我需要两者.
我希望始终将内容保存在我的中心DIV中,我当前的代码不会这样做,它会在窗口缩小时隐藏内容http://jsfiddle.net/cCQ2w/
任何人都可以提出一个可能适合我的解决方案吗?
我的网页上有5个视频.只有当您将鼠标悬停在视频上时才会开始播放.我的代码如下:
$(".service:nth-child(1) a").hover(function(){
$('.service:nth-child(1) a video#bgvid').get(0).play();
},function(){
$('.service:nth-child(1) a video#bgvid').get(0).pause();
});
Run Code Online (Sandbox Code Playgroud)
我曾经使用过,:nth-child因为如果我将鼠标悬停在视频4上,它会播放视频1,所以我必须具体.这意味着我必须为每个视频重复上述代码,但相应地更改:nth-child数字.我对JS不是特别熟练,但必须有更好,更有效的方法吗?
我有一个固定的DIV #scroll-up,它是浏览器窗口的100%高度.我有另一个DIV #next-prev坐在它下面.一旦#next-prev进入视野,我希望#scroll-upDIV开始向上滚动.我的代码打击了这一点,但是只要#next-prev在视野中就会#scroll-up毫无理由地跳起来.效果应该是无缝的.
我该如何防止跳跃?
我在这里设置了jsFiddle问题的演示:http://jsfiddle.net/sya0jr6p/1/
JS
使用jQuery Visible插件检测#next-prev何时在视图中.
$(window).scroll(function() {
if ($('#next-prev').visible(true)) {
console.log ( '#next-prev visible' );
// Initiate scroll up of '#scroll-up' when '#next-prev' is in the viewport
var $tagline = $('#scroll-up');
var windowScroll;
// Function
function slidingTitle() {
//Get scroll position of window
windowScroll = $(this).scrollTop();
$tagline.css({
'top' : -(windowScroll/3)+"px"
});
}
// Initiate
slidingTitle();
} else {
console.log ( '#next-prev not …Run Code Online (Sandbox Code Playgroud) 我有以下代码将div(被调用#extra)切换到视图中:
$('#more').click(function() {
$('#extra').slideToggle('fast');
return false;
});
Run Code Online (Sandbox Code Playgroud)
我的点击功能是这个链接:
<a href="#" id="more">More about us</a>
Run Code Online (Sandbox Code Playgroud)
当#extradiv显示时,如何将"关于我们的更多信息"文本更改为"更少关于我们" ?当点击相同的链接隐藏div时,我希望链接的文本更改为"更多关于我们".
当用户滚动时,我想在一个元素中添加一个类,比如DIV,还可以在img,h1等上添加一个类.
如何计算我的元素是否在视口中?
在伪:如果#swing已进入视口添加类'animated bounceOutLeft'(使用CSS3播放动画).动画完成后,删除类'动画bounceOutLeft'.
我只是不知道从哪里开始,除了我知道添加我想要的类的代码:
$('#star').addClass('animated bounceOutLeft');
Run Code Online (Sandbox Code Playgroud)
进展编辑
感谢@Bibhas我正在尝试实现这个OnScreen 插件,我认为我已经完成了因为Dev工具说类名是,但这些类名是css3过渡,它们只是没有播放,可能是什么问题?
$(function() {
setInterval(function() {
$("#star") // get all <h2>s
.filter(":onScreen") // get only <h2>s on screen
.addClass('animated bounceOutLeft');
}, 1000) // repeat every second
})
Run Code Online (Sandbox Code Playgroud) 我正在尝试按照此示例合并自定义信息框,但我的代码不起作用.有人可以看一看,看看我哪里出错了吗?
我已经评论了示例代码的开始/结束位置以及我试图调用它的位置.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.204872,0.120163),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
// List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>'],
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = …Run Code Online (Sandbox Code Playgroud) 由于新的Twitter API,我使用PHP在我的网页上使用PHP显示1条最新推文.
目前我已经让它工作,所以推文只是作为一个简单的文本字符串输出.我的问题是如何控制输出的HTML?如果在推文中声明了主题标签或网址,我希望能够将链接显示为链接.我该怎么做呢?
到目前为止,这是我的代码,在我的页面中输出字符串作为推文:
function get_tweet() {
require 'tmhOAuth.php';
require 'tmhUtilities.php';
$tmhOAuth = new tmhOAuth(array(
'consumer_key' => 'secret',
'consumer_secret' => 'secret',
'user_token' => 'secret',
'user_secret' => 'secret',
'curl_ssl_verifypeer' => false
));
$code = $tmhOAuth->request('GET', $tmhOAuth->url('1.1/statuses/user_timeline'), array(
'screen_name' => 'evanrichards',
'count' => '1'));
$response = $tmhOAuth->response['response'];
$tweets = json_decode($response, true);
echo($tweets[0]['text']);
}
Run Code Online (Sandbox Code Playgroud) 这让我疯狂,我的谷歌搜索指向语音标记问题,但我无法理解下面的代码是怎么回事,尤其是在单引号和双引号之间交替,但仍然没有乐趣:
$( ".block-nav .c-4" ).hover(
setTimeout(function(){
$(".block-nav .c-4 .white-overlay").css("display", "none");
},300);
);
Run Code Online (Sandbox Code Playgroud)
任何指针赞赏......
我目前有这个代码:http : //jsfiddle.net/D5EMp/25/
此代码淡入/淡出一个嵌入了 YouTube 的 div。目前,当您单击观看节目卷时,它不会自动播放。我希望它在单击“观看放映卷”按钮时自动播放。
此外,如果视频正在播放并且您单击“X 隐藏”按钮,则包装器会隐藏视频,但视频会继续播放。我想在按下“X 隐藏”按钮时暂停视频。
如何编辑我现有的代码以获得我想要的功能?
目前我有一个手风琴菜单,每次.responsive-accordion-head点击我告诉它切换类如下:
$('.responsive-accordion-head').click(function () {
if ( $( '.responsive-accordion-head i' ).hasClass( "plus-2" ) ) {
$('.responsive-accordion-head i').removeClass("plus-2");
$('.responsive-accordion-head i').addClass("minus-2");
} else {
$('.responsive-accordion-head i').removeClass("minus-2");
$('.responsive-accordion-head i').addClass("plus-2");
}
});
Run Code Online (Sandbox Code Playgroud)
我遇到的问题是上面的代码更改了所有.responsive-accordion-head元素的类.我需要它仅针对所点击的项目.我该怎么做呢?
我如何使用jQuery查找特定字符并插入换行符?
我需要找到的字符是连字符 - 它始终位于电子商务网站的产品标题中,并采用以下格式:
这是一个标题 - 这是颜色
如何找到每个产品标题的短划线,并在单独的一行中插入换行符以显示颜色名称?
我正在使用的确切HTML标记如下:
<a href="#" class="product c-3">
<div class="product-thumb">
<!-- Other code is in here / Removed for brevity -->
<div class="product-title">
This is a title - This is the colour
</div>
</div>
</a>
Run Code Online (Sandbox Code Playgroud) 我有这个jquery代码很好用:
$(document).scroll(function(){
if ($(this).scrollTop()>175){
// animate fixed div to small size:
$('header').stop().animate({ height: 90 },100);
} else {
// animate fixed div to original size
$('header').stop().animate({ height: 175 },100);
}
});
Run Code Online (Sandbox Code Playgroud)
我需要以上所有浏览器/设备随时出现并阅读,但我还需要调整较小标题的高度(当前为90px - 在行下方//将固定div设置为小尺寸:)仅适用于浏览器宽度介于641px和959px之间.对于那些浏览器宽度,我需要标题的高度为120px,否则使用上面的代码.
有点像媒体查询,我希望它在浏览器调整大小时自动更新.
我该怎么做?
jquery ×10
css ×6
javascript ×6
html ×4
addclass ×2
autoplay ×1
centering ×1
css-position ×1
fluid ×1
google-maps ×1
if-statement ×1
onclick ×1
php ×1
removeclass ×1
slidetoggle ×1
toggle ×1
toggleclass ×1
twitter ×1
video ×1
viewport ×1
youtube ×1
youtube-api ×1