Sticky Div, Area that remains at top on scroll of page

If you want your site header or  menu or other section(div) to remain at top of page when user scrolls a page. You can try with following jquery code.

It will not workin in IE. So first flag need check if browser is IE or not.

if (!IsIE) {
jQuery(document).ready(function() {
jQuery(window).scroll(SomeScrollResponder);
});
function SomeScrollResponder() {
var tmpScroll = $(window).scrollTop();

//when page scrolls 100 px then following  code will run
if (parseInt(tmpScroll) > 100) {
jQuery(“#divTop”).css(“position”, “absolute”);
jQuery(“#divTop”).css(“top”, (parseInt(tmpScroll) – 1) + “px”);  //-1 will hide top border
jQuery(“#divTop”).css(“width”, (parseInt($(document).width()) – 60) + “px”);

}
else {
jQuery(“#divTop”).css(“position”, “relative”);
jQuery(“#divTop”).css(“top”, “0px”);
}
}
}

In above example “divTop” is a div that will display at top, overlapping on page.

 

Advertisements

Retrieving cross-domain data by using jquery’s getJSON

Recently I found one limitation with jquery.ajax, problem was that when we want to retrieve data from other domain, Not from your current website.

Browser’s same-origin policy prevents requesting data from other domain.So jQuery.get, jQuery.post, jQuery.ajax does not work for it.

 One way to fetch data is by using jQuery’s getJSON method as follow:

var url = “http://yourdomain.com/sample-page.aspx?callback=?”;

jQuery(document).ready(

    function() {

        jQuery.getJSON(url, function (data) { alert(data.price); });      

});

 Here we have loaded JSON data located on another domain with JSONP callback, which can be done using the following syntax: url?callback=?.

jQuery automatically replaces the ? with a generated function name to call.

 

At Server side, data must be return in json format like:

{‘name’:’abc’,’price’:’44’}

 

 And additionally, you have to enclose your data inside function,

 For ex: dummyfunction({‘name’:’abc’,’price’:’44’});

 

Here ‘dummyfunction’ will be dynamic on each call to your page, and it will be passed to your dynamic page

Note callback=” in URL variable,

So if your are using asp.net then something like following will be there

Response.Write( Request.QueryString[“callback”] + “({‘name’:’abc’,’price’:’44’});”);

 

And with PHP, page response should be something as below,

echo $_GET[‘callback’].'({‘name’:’abc’,’price’:’44’});’;

json parsing in javascript with jquery

Following is simple example, that uses jquery.ajax function to request json data from any url.

and once data is received,
$.each
is use for looping through all logical record in json data.

jQuery.ajax(
            {
                type: 'POST',
                url: 'http://demourl?tmp=' + Math.random(),
                dataType: 'json',
                data: 'keyword=demo&query=demoquery',
                success: function(jd) {

                    var strResult = '';

                    $.each(jd.posts, function(i, obj) {

                    var strLoop ="";

                    strLoop = strLoop +"<div class='resultrecord'>";
                    strLoop = strLoop + obj.firstname + ' ' + obj.lastname;
                    strLoop = strLoop +"</div>";

                    strResult = strResult + strLoop;
                    });

                    jQuery("#d1").html(strResult);
                }
            }
        );

multiple jquery.ajax request on same page and server variable for tracking status of long running process

Once i was stuck with a process(long running for loop) at server side in asp.net, hence i thought to change code in such a way that some how i got intimation about how much work that process has done.

I have decided to make two pages,
one page when called starts a long running process,
And, Second page i call frequently from java script(with jQuery.ajax()), and that page gives me status (% of work done) of process start by first page.

Following is two JavaScript functions,

That uses JQuery’s Ajax request,

First function is intended to update page with some kind of intimation to user (like 30% work has been done).

function getFrequentUpdate() {

jQuery.ajax({
url: “getFrequentUpdate.aspx?” + “tmp=” + Math.random() * 1000,
async: true,
type: ‘GET’,
cache: false,
success: function(msg) {
jQuery(“#divMsg”).html(” Current Progress is: ” + msg);

var runtimeProgress = (parseInt(msg) * 100) / parseInt(jQuery(“#hdTotalObject”).val());
runtimeProgress = Math.ceil(parseFloat(runtimeProgress));
runtimeProgress = parseFloat(runtimeProgress) * 10;

jQuery(“#divProgress”).css(‘width’, runtimeProgress + ‘px’);
}
});

}

Second function calls a page that starts a long running process.


function startLongRunningProcess() {
getFrequentUpdate();
myintval = setInterval('getFrequentUpdate()', myDelay);

jQuery.ajax({
url: “someProcess.aspx?” + “tmp=” + Math.random() * 1000,
async: true,
type: ‘GET’,
cache: false,
success: function(msg) {

window.clearInterval(myintval);
jQuery(“#lblStartBackup”).html(“Process has been completed successfully.“);

}
});

}

Main challenging task is to update page with % of work long running process has done.

Here, I have first tried with using session variable, but later I came to know that somehow, when, I tried to run multiple pages together, and if they access SESSION variable, one of process was stopped, until second one has finished.

To overcome that issue, I have used a class in “App_Code” folder with STATIC VARIABLE that can be used application wide:

static public int MyStatusVariable = 0;

In my case, my long running process was updating above server variable and first Ajax function was fetching it frequently, with interval specified with in

myintval = setInterval(' getFrequentUpdate ()', 2000);

With above logic i achieved a interface as follow.

 

Other Popular posts:

Display Image in html as Binary Data with Base64 encoding

https://siddharthboraniait.wordpress.com/2011/08/16/display-imagein-html-as-binary-data-with-base64-encoding

Introduction to android,first step towards

https://siddharthboraniait.wordpress.com/2011/07/18/know-andriod-introduction-to-andriod

 

 

Hover style or css with jQuery for changing background color of element in website

Following code will clearly show you idea to change background color of a button/link when use hovers mouse on it.


jQuery(".mybuttonblue").hover(
function() {
jQuery(this).css("background-color", "#565656");
}
);
jQuery(".mybuttonblue").mouseout(
function() {
jQuery(this).css("background-color", "#838383");
}
);

Above method is useful when your css class definition does not contain background color facility, and still you want it.