<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>Main Menu</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
/***********************************************
* Sticky Tooltip script- (c) Dynamic Drive DHTML code library (
www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at
http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
var stickytooltip={
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status message
//***** NO NEED TO EDIT BEYOND HERE
isdocked: false,
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.fadeIn(this.fadeinspeed)
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
if (!this.isdocked){
$tooltip.stop(false, true).hide()
$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
}
},
docktooltip:function($, $tooltip, e){
this.isdocked=true
$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
},
init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(parent.document.body)
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
stickytooltip.showbox($, $tooltip, e)
})
$targets.bind('mouseleave', function(e){
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousemove', function(e){
if (!stickytooltip.isdocked){
stickytooltip.positiontooltip($, $tooltip, e)
}
})
$tooltip.bind("mouseenter", function(){
stickytooltip.hidebox($, $tooltip)
})
$tooltip.bind("click", function(e){
e.stopPropagation()
})
$(this).bind("click", function(e){
if (e.button==0){
stickytooltip.isdocked=false
stickytooltip.hidebox($, $tooltip)
}
})
$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})
$(this).bind('keypress', function(e){
var keyunicode=e.charCode || e.keyCode
if (keyunicode==115){ //if "s" key was pressed
stickytooltip.docktooltip($, $tooltip, e)
}
})
}) //end dom ready
}
}
//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")
</script>
</head>
<body style="font-family: verdana; font-size: 12px">
<p>Some page contents here...</p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" alt=""></p>
<div id="mystickytooltip" >
<div style="padding:5px">
<div id="sticky1" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" style="position: relative; width: 300px" alt=""><br>
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>
<div id="sticky2" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" style="position: relative; width: 300px" alt=""><br>BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>
<div id="sticky3" class="atip" style="position: absolute; left: 50%; margin-left: -200px; top: 200px; width: 300px; font-family: comic sans ms; background: white; padding: 5px">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" style="position: relative; width: 300px" alt="">
</div>
</div>
</div>
</body>
</html>
Opening Popup tip from an iframe on top of main page
Reply With Quote
Bookmarks