小编Tar*_*ine的帖子

如何将1px边框添加到宽度为百分比的div?

我有这个jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/解释了我的问题.

我希望顶部的菜单项占窗口的20%,但我也希望它们具有1px的右边框.

正如你所看到的那样,它有点明显,这是非常明显的.

----------------------------------------------
| menu 1 | menu 2 | menu 3 | menu 4 | menu 5 |
----------------------------------------------
|          row one needs to be same          |    
----------------------------------------------
Run Code Online (Sandbox Code Playgroud)

我不认为百分比边界会起作用,因为它与不同的窗口大小不一致.

有没有人对我如何做到这一点有任何建议?

css

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

垂直滚动快照jQuery

我看了一下这个jQuery:snapped scrolling - 可能吗?这个Scrollable Panel捕捉到Scroll上的元素.但他们并没有真正回答我的问题.

我有一个非常宽但与窗口高度相同的div.当用户滚动时,它很好地向左移动.但是,当用户停止滚动时,我可以将此滚动条捕捉到.因此容器在开始时位于左侧28px处,我希望它在开始时捕捉,然后每隔207px取决于用户接近哪个捕捉点.

---------------------
|-------------------|-------------------
|                   |                   |
|                   |                   |            
|-------------------|-------------------
---------------------
Run Code Online (Sandbox Code Playgroud)

在那一刻我没有使用jQuery除了容器的宽度.

var numOfPosts = jQuery(".blog-post").length;
var div5 = numOfPosts/5;
var gutters = Math.ceil(div5)*10;
var posts = Math.ceil(div5)*197;
var postListWidth = gutters + posts + 9;
var w = jQuery(window).width();
var h = jQuery(window).height();
    if(postListWidth<=w){
        jQuery(".post-list").width(w-28);
    }else{
        jQuery(".post-list").width(postListWidth);
     }
Run Code Online (Sandbox Code Playgroud)

有谁知道实现这一目标的最佳方法?我更愿意知道代码,所以如果有解决方案你能解释一下吗?我正在学习jQuery,但是我不知道有关于-.-非常感谢我得到的任何帮助.

jquery horizontal-scrolling

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

延迟加载插件以用户滚动加载图像?

我真的很喜欢这个懒惰的加载插件,我觉得它不适用于新的浏览器.

无论如何,我可以编写自己的代码,在用户滚动之前不会将图像加载到折叠下方吗?

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' />

jQuery('.lazyLoad').each(function(){
       var _elm= jQuery(this);
       _elm.attr('src',_elm.attr('_src'));

       //on DOM ready loop through each 
      //image with class=lazyLoad and add src attribute to it.
})
Run Code Online (Sandbox Code Playgroud)

如果我能得到这个,这将是很好的,很遗憾,不再支持appelsiini网站.

我找到了一个适用于所有浏览器http://hw-lin.com/的网站,它使用的是非常类似的插件脚本http://www.appelsiini.net/projects/lazyload.没有麻省理工学院的许可证,我发现很难破译.

你能推荐什么jQuery图像延迟加载插件?

jquery

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

我需要拆分每2个li并将它们附加到div

我有一个通用列表

 <ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
   <li>list item6</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

但我想做的是

<div class="list">
<ul>
    <li>list item1</li>
    <li>list item2</li>
 </ul>
</div>

<div class="list">
<ul>
    <li>list item3</li>
    <li>list item4</li>
 </ul>
</div>

<div class="list">
<ul>
    <li>list item5</li>
    <li>list item6</li>
 </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

我无法向li添加类的原因是这是在Business Catalyst中创建的动态菜单,我可以使用任何建议来处理这种情况的最佳方法.

最好的塔拉

jquery

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

懒加载博客帖子

我有一个博客帖子列表,数量达到25+,但它都在一页,所以我需要尝试构建一个懒惰的加载器.

我尝试了各种插件但没有一个正常工作

http://jsfiddle.net/tara_irvine/S9GGz/6/

http://jsfiddle.net/tara_irvine/S9GGz/9/

http://jsfiddle.net/tara_irvine/S9GGz/13/

有没有办法检查div的顶部值,如果它在视图中,则添加一个类,以便div变为可见(页面加载div被隐藏)

我看过这些帖子,但在尝试了各种解决方案后,没有一个对我有用.

如何使用jquery 相对于视口顶部的位置来检查元素是否在用户视图中

如果有人能对此有所了解,我将非常感激.我不知道我哪里错了.

非常感谢

jquery lazy-loading

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

将图像附加到内容并重新加载砌体

我有一个包含图像列表的xml文件,我希望将这些图像加载到容器中然后应用砌体.

我试图等待图片加载,http://masonry.desandro.com/demos/images.html.每次添加图片后我都会尝试重新加载 - http://masonry.desandro.com/docs/methods.html#reload

这些都不起作用.

这是我的代码,我不知道我哪里出错了.

    $('.content').masonry();
    var elements = '';


    $.ajax({
        type: "GET",
        url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file
        dataType: "xml",
        success: function(xml) {
            jQuery(xml).find('img').each(function(i) {
               var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images
               var url = jQuery(this).attr('src');
               var alt = jQuery(this).attr('alt');

            elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>';

        });

        $('.content').append(elements).shuffle().masonry('reload');
        //$(".content .image-div").shuffle();
        }
     });
Run Code Online (Sandbox Code Playgroud)

我看过这个 - jquery,在追加完成之后的砌体和 这个jQuery Masonry和Ajax追加项目?

我只是想知道重载是否应该插件等待图片加载?如果是这样的话语法是什么?

我还计划隐藏块(可见性:隐藏),将它们随机排列,然后将它们砌成,然后将它们淡入. …

jquery jquery-masonry

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

如何从班级中删除角色?

我想从每个id和ol中的每个类中删除x_.这个ol是从表单字段生成的,所以我无法访问它.

如果我将字段值保存在变量中,我该如何删除这些字符?

这是我的一些jQuery

var itemValue = $("#ItemDescription").val();
console.log(itemValue);
$("body #demo ol.sortable").html(itemValue);
Run Code Online (Sandbox Code Playgroud)

HTML内容(#itemDescription)

<li class="x_menu-item">
<div>Menu Item</div>
<ol>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item0">
    <div><a href="/_webapp_3915457/Portfolio1">Portfolio1</a></div>
    </li>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item1">
    <div><a href="/_webapp_3915468/Portfolio10">Portfolio10</a></div>
    </li>
    <li style="display: list-item;" class="x_menu-item">
    <div>Menu Item</div>
    <ol>
        <li style="display: list-item;" class="x_no-nest" id="x_menu-item3">
        <div><a href="/_webapp_3923732/Portfolio12">Portfolio12</a></div>
        </li>
    </ol>
    </li>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item2">
    <div><a href="/_webapp_3923731/Portfolio11">Portfolio11</a></div>
    </li>
</ol>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item4">
<div><a href="/_webapp_3914327/Portfolio2">Portfolio2</a></div>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item5">
<div><a href="/_webapp_3915633/Portfolio3">Portfolio3</a></div>
</li>
<li style="display: list-item;" class="x_no-nest" …
Run Code Online (Sandbox Code Playgroud)

html string jquery dom-manipulation

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

内容可编辑光标位置

我有一个内容可编辑的div,我希望点击编辑按钮,光标出现在div的开头,在它结束时出现的那一刻.

<li style="display: list-item;" class="menu-item" contenteditable="true">
<div class="">Dior<input type="checkbox" name="selected"></div>
<ol class="">
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/charlize-theron" class="" name="">Charlize-Theron</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="menu-item">
    <div class=""><a href="/portfolios/natalie-portman" class="" name="">Natalie-Portman</a>
    <input type="checkbox" name="selected"></div>
    </li>
    <li style="display: list-item;" class="">
    <div class=""><a href="/portfolios/sharon-stone-1" class="" name="">Sharon-Stone</a>
    <input type="checkbox" name="selected"></div>
    </li>
</ol>
<a href="#" class="edit" style="opacity: 1; ">Edit</a></li>
Run Code Online (Sandbox Code Playgroud)

因此,当您在分钟点击编辑时,您必须使用箭头键返回到开始编辑Dior(这是唯一真正被编辑的东西).但我试图将内容可编辑的代码添加到div只有它不起作用.

这是我的一些jQuery

$(".edit").click(function(){
            $(this).parent().children("div").focus(function(){

            });
        });

        $(".edit").hover(function(){
            $(this).css("opacity","0.5")
        }, function(){
            $(this).css("opacity","1")
        });

        $(".edit").parent().blur(function(){
            var sortableList = $(".sortable").html();
            $("#ItemDescription").val(sortableList);
        });

function storeUserScribble(id) { …
Run Code Online (Sandbox Code Playgroud)

jquery contenteditable

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

jQuery href属性以/ {tag_开头

我需要删除文档中以"/ {tag_"或"{tag_"开头的所有链接

到目前为止,我有,$("a[href^='/{tag_']").remove();但它没有工作,

我也有

   $("a").each(function() {
                var href = $(this).attr("href");
                if(href == '') { // or anything else you want to remove...
                    $(this).remove();

                }
                $("a[href^='/{tag_']").remove();
            });
Run Code Online (Sandbox Code Playgroud)

我也尝试过$(this).attr("href^='/{tag_'");不工作,有什么想法吗?

谢谢塔拉

jquery hyperlink

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

调整galleria的脚本

我想调整整个galleria div的大小,并调整使用galleria脚本动态生成的所有图像.

到目前为止我有

    $(window).resize(function() {
    var h = $(window).height();
    var galleriaHeight = h-54;
    var w = $(".content").width();
    var galleriaWidth = w-18;

    $("#galleria").height(galleriaHeight);
    $("#galleria").width(w);


    $(".galleria-stage").height(galleriaHeight);
    $(".galleria-stage").width(galleriaWidth);

    $(".galleria-images .galleria-image img").css({"max-height":"auto"});
    $(".galleria-images .galleria-image img").css({"max-width":galleriaWidth-36});

    $(".galleria-stage").height(galleriaHeight);
    $(".galleria-stage").width(galleriaWidth);

    $(".galleria-container").width(w);
    $(".galleria-container").height(galleriaHeight);

    $(".caption").width(w);
    $(".counter-nav").width(w);

    var sidebarHeight =h-54;
    var contentHeight =h-36;

    $(".sidebar1").height(sidebarHeight);
    $(".content").height(contentHeight);




});
Run Code Online (Sandbox Code Playgroud)

但是一切都在不均衡地扩展并且非常混乱.看完全屏代码后,我还补充道

this.bind(Galleria.RESCALE, function() {
 POS = this.getStageHeight() - tab.height() - 2;
 thumbs.css('top', OPEN ? POS - list.outerHeight() + 2 : POS);
 var img = this.getActiveImage();
 if (img) 
     {
     fixCaption(img);
     }
});
Run Code Online (Sandbox Code Playgroud)

但这也不起作用......

我想我想在我调整大小后重新加载页面...或者相对于彼此调整所有元素的大小,或者使用Galleria调整大小脚本......

有任何想法吗?

jquery galleria

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