Sungikim/modern.js

Sungikim/modern.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Clear the cache in Tools → Preferences

$("#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>");

}
}

});



$('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();
    
  });