Permalink
Browse files

Image tooltips move to fit page.

  • Loading branch information...
1 parent 29fdf7e commit 3843d8b5f6d84f59a02e7873a3da8025fc45953e @danielnaab committed Feb 28, 2012
Showing with 199 additions and 36 deletions.
  1. +72 −0 exercises/static/css/base.css
  2. +124 −0 exercises/static/js/jtip.js
  3. +3 −36 exercises/templates/exercises/menu.html
View
72 exercises/static/css/base.css
@@ -173,3 +173,75 @@ html[xmlns] #nav {
#exercise-preview>#topic {
}
+
+#JT_arrow_left{
+ background-repeat: no-repeat;
+ background-position: left top;
+ position: absolute;
+ z-index:101;
+ left:-12px;
+ height:23px;
+ width:10px;
+ top:-3px;
+}
+
+#JT_arrow_right{
+ background-repeat: no-repeat;
+ background-position: left top;
+ position: absolute;
+ z-index:101;
+ height:23px;
+ width:11px;
+ top:-2px;
+}
+
+#JT {
+ position: absolute;
+ z-index:100;
+ border: 2px solid #CCCCCC;
+ background-color: #fff;
+ min-width: 150px;
+ min-height: 150px;
+}
+
+#JT_copy{
+ padding:10px 10px 10px 10px;
+ color:#333333;
+}
+
+.JT_loader{
+ background-repeat: no-repeat;
+ background-position: center center;
+ width:100%;
+ height:12px;
+}
+
+#JT_close_left{
+ background-color: #CCCCCC;
+ text-align: left;
+ padding-left: 8px;
+ padding-bottom: 5px;
+ padding-top: 2px;
+ font-weight:bold;
+}
+
+#JT_close_right{
+ background-color: #CCCCCC;
+ text-align: left;
+ padding-left: 8px;
+ padding-bottom: 5px;
+ padding-top: 2px;
+ font-weight:bold;
+}
+
+#JT_copy p{
+margin:3px 0;
+}
+
+#JT_copy img{
+ padding: 1px;
+}
+
+/*.jTip{
+ cursor:help;
+}*/
View
124 exercises/static/js/jtip.js
@@ -0,0 +1,124 @@
+/*
+ * JTip
+ * Originally 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 its ready) call JT_init
+$(document).ready(JT_init);
+
+function JT_init(){
+ $("a.jTip")
+ .hover(function(){JT_show(this.href,this.id,this.name)},function(){$('#JT').remove()})
+ .click(function(){return false});
+}
+
+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 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;
+ var 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
+ var clickElementx = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position
+ }
+
+ $('#JT').css({left: clickElementx+"px", top: clickElementy+"px"});
+ $('#JT').show();
+ $('#JT_copy').html('<img src="' + url + '" onload="resizeImage(this)" />');
+}
+
+function resizeImage(img) {
+ $('#JT').width(img.width + 20)
+ .height(img.height + 50);
+
+ var overlapHeight = $('#JT').height() + $('#JT').offset().top;
+ var windowHeight = viewport().height;
+ if (overlapHeight > windowHeight - 50) {
+ $('#JT').css({
+ top: windowHeight - $('#JT').height() - 50,
+ position: 'absolute'
+ });
+ }
+}
+
+function getElementWidth(objectId) {
+ x = document.getElementById(objectId);
+ return x.offsetWidth;
+}
+
+function getAbsoluteLeft(objectId) {
+ // Get an object left position from the upper left viewport corner
+ o = document.getElementById(objectId)
+ oLeft = o.offsetLeft // Get left position from the parent object
+ while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element
+ oParent = o.offsetParent // Get parent object reference
+ oLeft += oParent.offsetLeft // Add parent left position
+ o = oParent
+ }
+ return oLeft
+}
+
+function getAbsoluteTop(objectId) {
+ // Get an object top position from the upper left viewport corner
+ o = document.getElementById(objectId)
+ oTop = o.offsetTop // Get top position from the parent object
+ while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element
+ oParent = o.offsetParent // Get parent object reference
+ oTop += oParent.offsetTop // Add parent top position
+ o = oParent
+ }
+ return oTop
+}
+
+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 KeyVal = Pairs[i].split('=');
+ if ( ! KeyVal || KeyVal.length != 2 ) continue;
+ var key = unescape( KeyVal[0] );
+ var val = unescape( KeyVal[1] );
+ val = val.replace(/\+/g, ' ');
+ Params[key] = val;
+ }
+ return Params;
+}
+
+function blockEvents(evt) {
+ if(evt.target){
+ evt.preventDefault();
+ }else{
+ evt.returnValue = false;
+ }
+}
+
+function viewport()
+{
+ var e = window, a = 'inner';
+ if (!('innerWidth' in window))
+ {
+ a = 'client';
+ e = document.documentElement || document.body;
+ }
+ return {
+ width : e[ a+'Width' ],
+ height : e[ a+'Height' ]
+ }
+}
View
39 exercises/templates/exercises/menu.html
@@ -6,8 +6,9 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khan Academy Exercises</title>
<script
- src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
+ src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"
type="text/javascript"></script>
+ <script src="{{STATIC_URL}}js/jtip.js" type="text/javascript"></script>
<link href="{{STATIC_URL}}css/base.css" rel="stylesheet" type="text/css" />
</head>
<body>
@@ -16,9 +17,8 @@
<li>
{% if node.url %}
{% if node.live %}
- <a href="#" onclick="previewExercise('{{node.display_name}}', '{{node.url}}', '{{STATIC_URL}}images/exercise-screenshots/{{node.filename}}');">
+ <a id="{{node.khan_id}}" name="{{node.display_name}}" class="jTip" href="{{STATIC_URL}}images/exercise-screenshots/{{node.filename}}" onclick="previewExercise('{{node.display_name}}', '{{node.url}}', '{{node.filename}}">
{{node.display_name}}
- <img src="" alt="{{STATIC_URL}}images/exercise-screenshots/{{node.filename}}" class="preview" style="display: none" />
</a>
{% endif %}
{% else %}
@@ -32,40 +32,7 @@
</li>
{% endrecursetree %}
</ul>
- <div id="exercise-preview">
- <h1>Math Topic: <a id="topic" target="_blank">select a topic from the menu</a></h1>
- <h4 style="display: none;">Example question:</h4>
- <a id="preview-image" href="" target="_blank"><img /></a>
- </div>
<script>
- $(document).ready(function() {
- xOffset = 100;
- yOffset = 30;
-
- $("li>a").hover(function(e) {
- this.title = "";
- var c = (this.t != "") ? "<br/>" + this.t : "";
- var imgSrc = $(this).find('.preview').attr('alt');
- if (imgSrc) {
- $("body").append("<div id='preview'><img src='"+ imgSrc +"' alt='Sample Exercise' /></div>");
- $("#preview")
- .css("top",(e.pageY + yOffset) + "px")
- .css("left",(e.pageX - xOffset) + "px")
- .fadeIn("fast");
- }
- },
- function() {
- this.title = this.t;
- $("#preview").remove();
- });
- $("li>a").mousemove(function(e) {
- var top = e.pageY + yOffset;
- var left = e.pageX - xOffset;
- $("#preview")
- .css("top", top + "px")
- .css("left", left + "px");
- });
- });
function previewExercise(display_name, url, img_src) {
$('#topic').html(display_name).attr('href', url);
$('#preview-image').attr('href', url);

0 comments on commit 3843d8b

Please sign in to comment.