|
|
Line 31: |
Line 31: |
| | | |
| }); | | }); |
− |
| |
− |
| |
− |
| |
− | $('elements').onScreen({
| |
− | container: window,
| |
− | direction: 'vertical',
| |
− | doIn: function() {
| |
− | // Do something to the matched elements as they come in
| |
− | },
| |
− | doOut: function() {
| |
− | // Do something to the matched elements as they get off scren
| |
− | },
| |
− | tolerance: 0,
| |
− | throttle: 50,
| |
− | toggleClass: 'onScreen',
| |
− | lazyAttr: null,
| |
− | lazyPlaceholder: 'someImage.jpg',
| |
− | debug: false
| |
− | });
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | function lazyLoad() {
| |
− | /*
| |
− | To use the lazy loader, you must initialize onScreen and tell it
| |
− | which HTML attribute to look for.
| |
− | onScreen will then replace the SRC value with the one from lazyAttr.
| |
− | */
| |
− | $('div.postAttachment img').onScreen({
| |
− | lazyAttr: 'data-lazy'
| |
− | });
| |
− | }
| |
− |
| |
− | function animatePosts() {
| |
− | /*
| |
− | In this example I used onScreen to animate the posts as
| |
− | they become visible. I set the tolerance to 50 so the posts
| |
− | start animating once they're 50px inside the viewport.
| |
− | */
| |
− | $('article.post').onScreen({
| |
− | doIn: function() {
| |
− | $(this).animate({
| |
− | top: 0,
| |
− | opacity: 1
| |
− | },500);
| |
− | },
| |
− | tolerance: 50
| |
− | });
| |
− | }
| |
− |
| |
− | $(function(){
| |
− |
| |
− | animatePosts()
| |
− | lazyLoad();
| |
− |
| |
− | });
| |
Revision as of 18:10, 30 May 2014
$("#mw-content-text h3").each(function(){
$(this).wrap("<div class=example></div>");
var ex_div=$(this).closest("DIV");
//ex_div.css("border","1px solid red");
//console.log(ex_div);
while(ex_div.next().length && !ex_div.next().prop("tagName").match(/h3|h2|div/i)){
nextobj=ex_div.next();
//console.log(nextobj.prop("tagName"));
ex_div.append(nextobj);
}
});
$("div.example").each(function(){
var video=$("iframe,object",this);
if(video.length){
//console.log(video.eq(0),video.eq(0).prop("clientWidth"));
if(video.eq(0).prop("clientWidth")<=300){
video.insertAfter($("h3",this));
$(this).css("width",300).css("float","left").css("margin","0 30px 0 0");
//console.log($(this).next().prop("className"));
if($(this).next().prop("className")!="example") $(this).after("<br clear=both>");
}else {
$(this).before("<br clear=both>");
}
}
});