Difference between revisions of "Adapt highlighting of objects"

From JSXGraph Wiki
Jump to: navigation, search
 
(15 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
         display:none;
 
         display:none;
 
         position:absolute;  
 
         position:absolute;  
 +
        left:0px;
 
         top:0px;
 
         top:0px;
         left:0px;
+
         width:50px;
 
         background-color:#ffff88;
 
         background-color:#ffff88;
 
         padding:5px;
 
         padding:5px;
 +
        text-align:center;
 
         /* Cross-browser opacity:*/
 
         /* Cross-browser opacity:*/
 
         -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';  
 
         -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';  
Line 30: Line 32:
 
var infobox = document.getElementById('myinfobox');
 
var infobox = document.getElementById('myinfobox');
 
JXG.Line.prototype.highlight = function(){
 
JXG.Line.prototype.highlight = function(){
 +
    var pos = this.getMousePosition
 
     infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;
 
     infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 
     infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 
     infobox.style.display = 'block';
 
     infobox.style.display = 'block';
 +
    this.board.renderer.highlight(this); // highlight the line
 +
 
}
 
}
 
JXG.Line.prototype.noHighlight = function(){
 
JXG.Line.prototype.noHighlight = function(){
 
     infobox.style.display = 'none';
 
     infobox.style.display = 'none';
 +
    this.board.renderer.noHighlight(this); // dehighlight the line
 
}
 
}
  
Line 43: Line 49:
 
     infobox.innerHTML = this.board.mousePosRel.toString();
 
     infobox.innerHTML = this.board.mousePosRel.toString();
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
     infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
+
     infobox.style.top =  (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.display = 'block';
 
     infobox.style.display = 'block';
 
}
 
}
Line 60: Line 66:
 
         display:none;
 
         display:none;
 
         position:absolute;  
 
         position:absolute;  
 +
        left:0px;
 
         top:0px;
 
         top:0px;
         left:0px;
+
         width:50px;
 
         background-color:#ffff88;
 
         background-color:#ffff88;
         padding:10px;
+
         padding:5px;
 +
        text-align:center;
 
         /* Cross-browser opacity:*/
 
         /* Cross-browser opacity:*/
         -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';  
+
         -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';  
         filter: alpha(opacity=50);
+
         filter: alpha(opacity=70);
         opacity:.5;
+
         opacity:.7;
 
     "
 
     "
 
></div>  
 
></div>  
Line 85: Line 93:
 
var infobox = document.getElementById('myinfobox');
 
var infobox = document.getElementById('myinfobox');
 
JXG.Line.prototype.highlight = function(){
 
JXG.Line.prototype.highlight = function(){
     infobox.innerHTML = this.board.mousePosRel.toString();
+
     infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
 
     infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 
     infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
 
     infobox.style.display = 'block';
 
     infobox.style.display = 'block';
 +
    this.board.renderer.highlight(this); // highlight the line
 +
 
}
 
}
 
JXG.Line.prototype.noHighlight = function(){
 
JXG.Line.prototype.noHighlight = function(){
 
     infobox.style.display = 'none';
 
     infobox.style.display = 'none';
 +
    this.board.renderer.noHighlight(this); // dehighlight the line
 
}
 
}
  
Line 104: Line 115:
 
     infobox.style.display = 'none';
 
     infobox.style.display = 'none';
 
}
 
}
 +
</source>
  
</source>
+
[[Category:Austragungsstueberl]]
[[Category:Examples]]
 

Latest revision as of 16:05, 24 February 2015

The JavaScript code

Create an invisible divsion:

<div id="myinfobox" 
    style="
        z-Index:99;
        display:none;
        position:absolute; 
        left:0px;
        top:0px;
        width:50px;
        background-color:#ffff88;
        padding:5px;
        text-align:center;
        /* Cross-browser opacity:*/
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; 
        filter: alpha(opacity=70);
        opacity:.7;
    "
></div>
// A simple construction, consisting of three points , two lines, one circle.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);

var c = brd.create('circle',[p2,p3]);

// First, we overwrite the highling method for ALL lines
var infobox = document.getElementById('myinfobox');
JXG.Line.prototype.highlight = function(){
    infobox.innerHTML = this.board.mousePosRel.toString()+'<hr noshade>'+this.name;
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
    infobox.style.display = 'block';
    this.board.renderer.highlight(this); // highlight the line

}
JXG.Line.prototype.noHighlight = function(){
    infobox.style.display = 'none';
    this.board.renderer.noHighlight(this); // dehighlight the line
}

//Second, we overwrite the highlighting method just for the circle c.
c.highlight = function(){
    infobox.innerHTML = this.board.mousePosRel.toString();
    infobox.style.left = (this.board.mousePosRel[0]+0)+'px';
    infobox.style.top =  (this.board.mousePosRel[1]+0)+'px';
    infobox.style.display = 'block';
}
c.noHighlight = function(){
    infobox.style.display = 'none';
}