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
Being trained In Java and working as UI developer it has given me a better understanding of the client side.I am currently working on asp.net and jQuery along AJAX too. so its rich grounds and i will have always to share some thing, so at some stage you stick with same issue and if my reading help well i met my objective.. because there are thousands who have written and help me to walk out form though hours..
Tuesday, December 28, 2010
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:
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:
- RepositionOnWindowResize
- RepositionOnWindowResizeAndScroll
- RepositionOnWindowScroll
- 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.
If popup is too large for the view port just fix it :
jQuery("#"+obj).css("top",scrollHeight+10);
It worked fine for me.
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>
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>
Subscribe to:
Posts (Atom)