Sunday, January 9, 2011

HTML : javascript Inner Html - aletnative in Jquery

I keep looking for alternative in  jQuery.

//document.getElementById("lblPath").innerHTML = liname; 



jQuery('#lblPath').text(liname);

Tuesday, January 4, 2011

JQuery - Jqplot pie chart.- missing data label for slice

I have been working on the Jqplot for a while and looking storng to make the most , but i got stuck at point where supplying data i was missing data lables for slice . well the smalles share was almost zero well there is mechanism in Jqplot to round off but we not playing with that.

Solution is simple : dataLabelThreshold:.5 or min to your requirment it does solved my problem.

soon i will be adding how to use this jQplot

Monday, January 3, 2011

removing err [ jQuery error not defined ]


Today I solved an error that my programmer was getting Jquery not defined.

there are 2 possibilities
1. files not included in proper sequence
2. Files(js) not included. 

With me. 
Problem was that for test we started using a different master page. And when we started to work we did forget and thought that was the original master page with  all the scripts and js  file included.
But how we approached the problem did the trouble shooting and recreated the all the steps.
Found one more problem that order of calling files was not proper after fixing that one , we found that we missing the core Js file. And hence this problem was resolve. Good part was coming to know and realizing the importance to follow procedure to include files and which is neglected when we copy and paste.

Tuesday, December 28, 2010

Tool tip over Ajax Modal popup - jquery

Today i wrote two function to show n hide a tool tip as this is on Ajax modal popup


function ShowNoAccessTooltip(e)
{
  
   jQuery("#ctl00_AbcPlaceHolder_tdBook").mousemove(function(e){
   jQuery('#toolTip').css('cursor', 'pointer');
   jQuery('#toolTip').css('display', 'block');
   jQuery('#toolTip').css('position', 'fixed');
   jQuery('#toolTip').css('left',e.pageX);
   jQuery('#toolTip').css('top',e.pageY);
   jQuery('#toolTip').css('z-index','10000');
   jQuery('#toolTip').css('background-color','#ffffff');
   jQuery('#toolTip').css('border','1px solid #000000');
   jQuery('#toolTip').css('margin-left','15px');
  
   });
  
 
   
}

function HideNoAccessTooltip(){
 jQuery("#ctl00_AbcPlaceHolder_tdBook").mouseout(function(e){
 jQuery('#toolTip').css('display', 'none');
});

}


-------------------
<div id="toolTip" style="display:none;  z-index:2500;">No Access...</div>

suppose on you have anchor tag ;
<a onmouseover='HideNoAccessTooltip ' onmouseout='ShowNoAccessTooltip' >HELLO WORLD</a>
this works fine.. its just good example

Thursday, December 23, 2010

ajax - modal popup reposition wihout using property RepositionMode- using JQuery

It took me 2 days to look for the best option for the dealing with the problems, related to the ajax modal popup which was dynamic i could not fix the height of the popup as it would fail to deal with the dynamic content inside the iframe which was being displayed inside the modal popup, we have one property Repositionmode which has four option like.


RepostionMode: RepositionMode allows to repostion the modalpopup when the web page is resized or scrolled. You can select the following values to adjust this property:
  1. RepositionOnWindowResize
  2. RepositionOnWindowResizeAndScroll
  3. RepositionOnWindowScroll
  4. None

    I tried to put the scroll bar a jerk to get my reposition but failed when there was no scroll bar,
    but  I had smart solution for this, Using jQuery , after the data gets filled in the Iframe , just hide and again dispaly the popup, this resolved my problem, its best solution.

Tuesday, December 21, 2010

View port - keeping elemnets inside a view port

From days i faced issue to keeps  divs inside the visible region, but finally i was able to figure out how to do it.
its very simple.

Let me tell you some thing about the view ports now using JQuery :
View port is : region visible on your browser window , how to get it.
 
$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
 
how to get detects wether a element has just crossed the top most position of the browser
: find  scrollHeight  and substract with the page Height ie 
$(window).height();
code goes below
var scrollHeight = jQuery(window).scrollTop();
// to display the how much you scroll down
   var pos = jQuery("#"+id).show().position();
// find out he position of the element like here we have div
   var pageHeight = jQuery(window).height();
// the page size in height
   var DefaultDivpositon = pageHeight - pos.top ;
// get the location of the div on view port
   var scrollDivpositon = pageHeight - scrollHeight
// this is the top of page-  works as tag. 
 
var diff = scrollDivpositon -DefaultDivpositon;
// this is required for the div is having a height of 50 px ..
 
so it becomes div start way before, the top position of the mouse pointer,
so we need to consider that height 
 
jQuery("#"+id).css("margin-top","-40px");
 
if (diff <=40){ 
                  alert("Invisible");
jQuery("#"+id).css("margin-top",diff-10);
                  //alert("visible");
                  }
                     
var divHt = pos.top+48; 
// added 48 to the top position to counter the additional height
//   of the div from the top
 
 
if( divHt > pageHeight + scrollHeight){
    jQuery("#"+id).css("margin-top","-75px");
// increase the view port added the scrollHeight
   // alert(jQuery("#"+id).css("margin-bottom"));
   // -40 px was the initial top margin again we played with the 
//last code and just made minimal changes to get things done
    }
 
 
The above codes check that if a particular div is hidden on scrolling
if so its just add top marging and pushes it in visible region
but what if we scroll down and face similar situation:
 
if( divTotalHt > pageHeight + scrollHeight){
// increase the view port added the scrollHeight
         jQuery("#"+obj).css("margin-top","-45px");
// -40 px was the initial top margin again we played with the 
last code and just made minimal changes to get things done
    }                            


If popup is too large for the view port just fix it :
             jQuery("#"+obj).css("top",scrollHeight+10);


It worked fine for me.

Saturday, December 18, 2010

Getting mouse pointer

 Cut/Copy n Paste

1. please download the latest file :  http://code.jquery.com/jquery-1.4.4.js, save this file as jquery-1.4.4.js

2. Copy the code below and run the html

--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript" >
// find thelocation of mouse and give to div and diplay
jQuery(document).ready(function(){
    jQuery(document).mousemove(function(e){
       jQuery('#status').html(e.pageX +', '+ e.pageY);
   });
})
</script>

</head>

<body>



<h2 id="status">
0, 0
</h2>


</body>
</html>