Add jTip
This commit is contained in:
@@ -14,6 +14,7 @@
|
|||||||
<?=script_tag('https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');?>
|
<?=script_tag('https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');?>
|
||||||
<?=script_tag('assets/js/scattport.js');?>
|
<?=script_tag('assets/js/scattport.js');?>
|
||||||
<?=script_tag('assets/js/tablednd.jquery.js');?>
|
<?=script_tag('assets/js/tablednd.jquery.js');?>
|
||||||
|
<?=script_tag('assets/js/jtip.js');?>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var SITE_URL = '<?=site_url()?>';
|
var SITE_URL = '<?=site_url()?>';
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
BIN
assets/images/ajax-loader.gif
Normal file
BIN
assets/images/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
assets/images/arrow-left.gif
Normal file
BIN
assets/images/arrow-left.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
BIN
assets/images/arrow-right.gif
Normal file
BIN
assets/images/arrow-right.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
158
assets/js/jtip.js
Normal file
158
assets/js/jtip.js
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
/*
|
||||||
|
* JTip
|
||||||
|
* By Cody Lindley (http://www.codylindley.com)
|
||||||
|
* Under an Attribution, Share Alike License
|
||||||
|
* JTip is built on top of the very light weight jquery library.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* On page load (as soon as it's ready) call JT_init
|
||||||
|
*/
|
||||||
|
$(document).ready(JT_init);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes JTip.
|
||||||
|
*/
|
||||||
|
function JT_init() {
|
||||||
|
$('a.jTip').hover(function() {
|
||||||
|
JT_show(this.href, this.id, this.name);
|
||||||
|
}, function() {
|
||||||
|
$('#JT').remove();
|
||||||
|
}).click(function() {
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shows a tooltip.
|
||||||
|
*
|
||||||
|
* @param url
|
||||||
|
* @param linkId
|
||||||
|
* @param title
|
||||||
|
*/
|
||||||
|
function JT_show(url, linkId, title) {
|
||||||
|
if (title == false) title = ' ';
|
||||||
|
|
||||||
|
var de = document.documentElement;
|
||||||
|
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
||||||
|
var hasArea = w - getAbsoluteLeft(linkId);
|
||||||
|
|
||||||
|
var clickElementY = getAbsoluteTop(linkId) - 3; // set y position
|
||||||
|
var clickElementX = 0;
|
||||||
|
|
||||||
|
var queryString = url.replace(/^[^\?]+\??/,'');
|
||||||
|
var params = parseQuery(queryString);
|
||||||
|
|
||||||
|
if (params['width'] === undefined) {
|
||||||
|
params['width'] = 250;
|
||||||
|
}
|
||||||
|
if (params['link'] !== undefined) {
|
||||||
|
$('#' + linkId).bind('click', function() {
|
||||||
|
window.location = params['link'];
|
||||||
|
});
|
||||||
|
$('#' + linkId).css('cursor','pointer');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasArea > (params['width'] * 1) + 75) {
|
||||||
|
$('body').append('<div id="JT" style="width: ' + params['width'] * 1 + 'px;"><div id="JT_arrow_left"></div><div id="JT_close_left">' + title + '</div><div id="JT_copy"><div class="JT_loader"><div></div></div>'); // right side
|
||||||
|
var arrowOffset = getElementWidth(linkId) + 11;
|
||||||
|
clickElementX = getAbsoluteLeft(linkId) + arrowOffset; // set x position
|
||||||
|
} else {
|
||||||
|
$('body').append('<div id="JT" style="width: ' + params['width'] * 1 + 'px;"><div id="JT_arrow_right" style="left: ' + ((params['width'] * 1) + 1) + 'px;"></div><div id="JT_close_right">' + title + '</div><div id="JT_copy"><div class="JT_loader"><div></div></div>'); // left side
|
||||||
|
clickElementX = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#JT').css({ left: clickElementX + 'px', top: clickElementY + 'px' });
|
||||||
|
$('#JT').show();
|
||||||
|
$('#JT_copy').load(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the width of the tooltip.
|
||||||
|
*
|
||||||
|
* @param objectId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function getElementWidth(objectId) {
|
||||||
|
x = document.getElementById(objectId);
|
||||||
|
return x.offsetWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* No description yet.
|
||||||
|
*
|
||||||
|
* @param objectId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function getAbsoluteLeft(objectId) {
|
||||||
|
// get an object left position from the upper left viewport corner
|
||||||
|
o = document.getElementById(objectId);
|
||||||
|
// get left position from the parent object
|
||||||
|
oLeft = o.offsetLeft;
|
||||||
|
// parse the parent hierarchy up to the document element
|
||||||
|
while (o.offsetParent != null) {
|
||||||
|
oParent = o.offsetParent; // get parent object reference
|
||||||
|
oLeft += oParent.offsetLeft; // add parent left position
|
||||||
|
o = oParent;
|
||||||
|
}
|
||||||
|
return oLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* No description yet.
|
||||||
|
*
|
||||||
|
* @param objectId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function getAbsoluteTop(objectId) {
|
||||||
|
// get an object top position from the upper left viewport corner
|
||||||
|
o = document.getElementById(objectId);
|
||||||
|
// get top position from the parent object
|
||||||
|
oTop = o.offsetTop;
|
||||||
|
// parse the parent hierarchy up to the document element
|
||||||
|
while (o.offsetParent != null) {
|
||||||
|
oParent = o.offsetParent; // get parent object reference
|
||||||
|
oTop += oParent.offsetTop; // add parent top position
|
||||||
|
o = oParent;
|
||||||
|
}
|
||||||
|
return oTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* No description yet.
|
||||||
|
*
|
||||||
|
* @param query
|
||||||
|
*/
|
||||||
|
function parseQuery(query) {
|
||||||
|
var params = new Object();
|
||||||
|
if (!query) {
|
||||||
|
return params; // return empty object
|
||||||
|
}
|
||||||
|
var pairs = query.split(/[;&]/);
|
||||||
|
|
||||||
|
for (var i = 0; i < pairs.length; i++) {
|
||||||
|
var keyValue = pairs[i].split('=');
|
||||||
|
if (!keyValue || keyValue.length != 2) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var key = unescape(keyValue[0]);
|
||||||
|
var val = unescape(keyValue[1]);
|
||||||
|
|
||||||
|
val = val.replace(/\+/g, ' ');
|
||||||
|
params[key] = val;
|
||||||
|
}
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* No description yet.
|
||||||
|
*
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function blockEvents(event) {
|
||||||
|
if (event.target) {
|
||||||
|
event.preventDefault();
|
||||||
|
} else {
|
||||||
|
event.returnValue = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user