Pages

Simple scrollorama alternative

Simple scrollorama alternative with Jquery and CSS 3 Animations for Biginners and everyone with add and remove classes

<script type="text/javascript">
(function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return
((compareBottom <= viewBottom) && (compareTop >= viewTop));
  };
    
})(jQuery);
$(window).scroll(function(event) {
if($("#mobidien").css("display") == "none"){
  
  $(".grid_4").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("fadeIn"); 
    } 
 else{
 el.removeClass("fadeIn"); 
 }
  });
  
  $(".rightx").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("fadeIn"); 
    } 
 else{
 el.removeClass("fadeIn"); 
 }
  });  
}});
  </script>

JQuery Back to top - Scroll to top

JQuery Back to top - Scroll to top code

<script>
$(document).ready(function(){
 // hide #back-top first
 $("#back-top").hide(); 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });
  // scroll body to 0px on click
  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });
});
</script>

Hiding a div on IE 6 , 7, 8

Hiding a Writing a style specifically for Internet explorer IE 6 ,7, 8
Add this code to header tag

    <!--[if IE 6]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->
    <!--[if IE 7]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->
    <!--[if IE 8]>
    <style>#dl-menu{display: none;}</style>
    <![endif]-->

Keith Count down with server time

Keith jQuery Count down time working with server time with Ajax


Javascript  code on html file

<script>
function serverTime() { 
    var time = null; 
    $.ajax({url: 'serverTime.php', 
        async: false, dataType: 'text', 
        success: function(text) { 
            time = new Date(text); 
        }, error: function(http, message, exc) { 
            time = new Date(); 
    }}); 
    return time; 
}
 $(document).ready(function () { 
    $('#120').countdown({
        until: new Date(2014, 03 - 1, 30),
        format: 'DHMS',
  serverSync: serverTime
    });
});
</script>
 
PHP file - this should upload to your server

<?php
$now = new DateTime(null, new DateTimeZone('Asia/Kolkata'));
echo $now->format("M j, Y H:i:s O")."\n";
?>


 

Jquery Change width and height on scroll - page elements

<!--CSS change on Scroll-->
 <script>
     $(window).scroll(function () {
  //if($(".toggleMenu").css("display") == "none"){  --> condition for mobile
            if ($(this).scrollTop() > 100) {
                $('.lgo').css({width:'90px'});
                $('.mm').css({margin:'5px 10px'});
            } else {
                $('.lgo').css({width:'140px'});
                $('.mm').css({margin:'15px 10px'});
            //}
   }        
  });
 </script>

If Else for Jquery Example

<script>
$(document).ready(function(){

 // hide #back-top first
 $("#back-top").hide();
 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });

  // scroll body to 0px on click
  $('#back-top').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });

});
</script> 

Search This Blog