Wednesday, March 19, 2014

Keith Count down with server time

Keith jQuery Count down time working with server time with Ajax


Javascript  code

<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

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


 

Tuesday, March 11, 2014

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>

Tuesday, January 7, 2014

World's simplest background parallax effect

How to apply the World's simplest background parallax effect to you web site background image for the scroll function.

$(window).scroll(function() {
var x = $(this).scrollTop();
$('#slide5').css('background-position', '100% ' + parseInt(-x / 3.5) + 'px' + ', 0% ' + parseInt(-x / 5) + 'px');
});