小编egr*_*103的帖子

使流体DIV居中,具有最大宽度和绝对定位

在有人向我投票之前要求另一个中心问题.请在评判前阅读我的情况!

我熟悉最常用的中心技术,但这是我的情况.我有一个DIV,必须在其父级内垂直和水平居中,但它也必须是流体,不超过890px的宽度.

最大宽度实现了我想要的流体性,但因为绝对定位元素需要宽度而不是最大宽度我的垂直/水平定心中断.目前我不得不牺牲流体中心(或反之亦然),但我需要两者.

我希望始终将内容保存在我的中心DIV中,我当前的代码不会这样做,它会在窗口缩小时隐藏内容http://jsfiddle.net/cCQ2w/

任何人都可以提出一个可能适合我的解决方案吗?

html css css-position fluid centering

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

改进HTML5视频和jQuery代码以提高效率

我的网页上有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不是特别熟练,但必须有更好,更有效的方法吗?

javascript css video jquery

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

滚动功能不会产生平滑过渡

我有一个固定的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)

html javascript css jquery

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

单击链接时切换文本

我有以下代码将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时,我希望链接的文本更改为"更多关于我们".

jquery onclick toggle slidetoggle

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

当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)

css jquery addclass viewport

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

Google地图自定义信息框

我正在尝试按照此示例合并自定义信息框,但我的代码不起作用.有人可以看一看,看看我哪里出错了吗?

我已经评论了示例代码的开始/结束位置以及我试图调用它的位置.

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)

javascript css jquery google-maps google-maps-api-3

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

使用PHP和新的Twitter API

由于新的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)

html php twitter

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

预期)参数列表后

这让我疯狂,我的谷歌搜索指向语音标记问题,但我无法理解下面的代码是怎么回事,尤其是在单引号和双引号之间交替,但仍然没有乐趣:

$( ".block-nav .c-4" ).hover(
    setTimeout(function(){
        $(".block-nav .c-4 .white-overlay").css("display", "none");
    },300);
);
Run Code Online (Sandbox Code Playgroud)

任何指针赞赏......

javascript jquery

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

自动播放/暂停 Youtube iframe

我目前有这个代码:http : //jsfiddle.net/D5EMp/25/

此代码淡入/淡出一个嵌入了 YouTube 的 div。目前,当您单击观看节目卷时,它不会自动播放。我希望它在单击“观看放映卷”按钮时自动播放。

此外,如果视频正在播放并且您单击“X 隐藏”按钮,则包装器会隐藏视频,但视频会继续播放。我想在按下“X 隐藏”按钮时暂停视频。

如何编辑我现有的代码以获得我想要的功能?

youtube jquery youtube-api autoplay

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

将添加/删除类隔离到单击的项目

目前我有一个手风琴菜单,每次.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元素的类.我需要它仅针对所点击的项目.我该怎么做呢?

javascript jquery addclass removeclass toggleclass

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

找到一个字符并插入换行符

我如何使用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)

html javascript css jquery

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

jquery用于if语句,就像CSS媒体查询一样

我有这个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 if-statement browser-width media-queries

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