karsten/scattport-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better jTips with CSS3

Browse Source
This commit is contained in:
Eike Foken
2011-09-28 16:35:25 +02:00
parent dae59f0047
commit 1094b1e3a6
2 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
assets/css/style.css
View File

@@ -841,36 +841,62 @@ div.progress_bar strong {
padding: 4px 8px; padding: 4px 8px;
} }
#jt_arrow_left {
background: url(../images/arrow-left.gif) left top no-repeat;
position: absolute;
z-index: 101;
left: -11px;
height: 23px;
width: 10px;
top: -3px;
}
#jt_arrow_right {
background: url(../images/arrow-right.gif) left top no-repeat;
position: absolute;
z-index: 101;
height: 23px;
width: 11px;
top: -2px;
}
#jt { #jt {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #fff; background-color: #fff;
margin-top: 5px;
font-size: 10px; font-size: 10px;
} }
#jt.jt_left {
margin-right: 10px;
}
#jt.jt_right {
margin-left: 6px;
}
#jt:before {
content: "";
position: absolute;
top: 10px;
left: -16px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: transparent #ccc;
width: 0;
display: block;
}
#jt:after {
content: "";
position: absolute;
top: 11px;
left: -14px;
border-width: 0 14px 14px 0;
border-style: solid;
border-color: transparent #fff;
width: 0;
display: block;
}
#jt.jt_left:before {
left: auto;
right: -16px;
border-width: 15px 15px 0 0;
border-color: #ccc transparent;
}
#jt.jt_left:after {
left: auto;
right: -14px;
border-width: 14px 14px 0 0;
border-color: #fff transparent;
}
#jt_copy { #jt_copy {
padding: 5px; padding: 10px;
color: #666; color: #666;
} }
@@ -880,26 +906,6 @@ div.progress_bar strong {
height: 12px; height: 12px;
} }
#jt_close_left {
background-color: #ccc;
text-align: left;
padding-left: 4px;
padding-bottom: 2px;
padding-top: 1px;
font-weight: bold;
color: #000;
}
#jt_close_right {
background-color: #ccc;
text-align: left;
padding-left: 4px;
padding-bottom: 2px;
padding-top: 1px;
font-weight: bold;
color: #000;
}
#jt_copy p { #jt_copy p {
margin: 0; margin: 0;
line-height: 12px; line-height: 12px;

8
assets/js/jtip.js
View File

@@ -37,14 +37,14 @@ function JT_show(url, linkId, title) {
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var hasArea = w - getAbsoluteLeft(linkId); var hasArea = w - getAbsoluteLeft(linkId);
var clickElementY = getAbsoluteTop(linkId) - 3; // set y position var clickElementY = getAbsoluteTop(linkId) + 2; // set y position
var clickElementX = 0; var clickElementX = 0;
var queryString = url.replace(/^[^\?]+\??/,''); var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery(queryString); var params = parseQuery(queryString);
if (params['width'] === undefined) { if (params['width'] === undefined) {
params['width'] = 250; params['width'] = 200;
} }
if (params['link'] !== undefined) { if (params['link'] !== undefined) {
$('#' + linkId).bind('click', function() { $('#' + linkId).bind('click', function() {
@@ -54,11 +54,11 @@ function JT_show(url, linkId, title) {
} }
if (hasArea > (params['width'] * 1) + 75) { 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 $('body').append('<div id="jt" class="jt_right" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // right side
var arrowOffset = getElementWidth(linkId) + 11; var arrowOffset = getElementWidth(linkId) + 11;
clickElementX = getAbsoluteLeft(linkId) + arrowOffset; // set x position clickElementX = getAbsoluteLeft(linkId) + arrowOffset; // set x position
} else { } 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 $('body').append('<div id="jt" class="jt_left" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // left side
clickElementX = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position clickElementX = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position
} }