From Design pattern
Jump to: navigation, search
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>");

}
}

});