我有这个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)
我不认为百分比边界会起作用,因为它与不同的窗口大小不一致.
有没有人对我如何做到这一点有任何建议?
我看了一下这个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,但是我不知道有关于-.-非常感谢我得到的任何帮助.
我真的很喜欢这个懒惰的加载插件,我觉得它不适用于新的浏览器.
无论如何,我可以编写自己的代码,在用户滚动之前不会将图像加载到折叠下方吗?
<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图像延迟加载插件?
我有一个通用列表
<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中创建的动态菜单,我可以使用任何建议来处理这种情况的最佳方法.
最好的塔拉
我有一个博客帖子列表,数量达到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 相对于视口顶部的位置来检查元素是否在用户视图中
如果有人能对此有所了解,我将非常感激.我不知道我哪里错了.
非常感谢
我有一个包含图像列表的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追加项目?
我只是想知道重载是否应该插件等待图片加载?如果是这样的话语法是什么?
我还计划隐藏块(可见性:隐藏),将它们随机排列,然后将它们砌成,然后将它们淡入. …
我想从每个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) 我有一个内容可编辑的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) 我需要删除文档中以"/ {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_'");不工作,有什么想法吗?
谢谢塔拉
我想调整整个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调整大小脚本......
有任何想法吗?