Databases
StackOverflow2013
Postsdbo
PORaphaelJS HTML5 Library : creating a button with text and glow on mouseover
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORaphaelJS HTML5 Library : creating a button with text and glow on mouseover
    primarykey
    data
    text
    <p>I am trying to create a button with text inside using the Raphael JavaScript library. I would like to have a glow around the button on mouseover. I achieved this by using the set on rectangle and text and applying the glow on the set. I tried two approaches binding the mouseover and mouseout methods to the resulting button set. In the first case the glow stays if the cursor reaches the text, in the second one the glow disappears. Here is the code :</p> <pre><code> // canvas var paper = Raphael(0, 0, "100%", "100%"); // background of the first button var bBox1 = paper.rect(100, 100, 120, 50, 10).attr({ fill: 'darkorange', stroke: '#3b4449', 'stroke-width': 2 }); // text of the first button var text1 = paper.text(bBox1.attrs.x + bBox1.attrs.width / 2, bBox1.attrs.y + bBox1.attrs.height / 2, 'Click to expand').attr({ "font-family": "Helvetica", "font-size": 16 }); // set of rectangle + text = button var button1 = paper.set().attr({ cursor: 'pointer' }); button1.push(bBox1); button1.push(text1); button1.mouseover(function (event) { this.oGlow = bBox1.glow({ opacity: 0.85, color: 'gray', width: 15 }); }).mouseout(function (event) { this.oGlow.remove(); }); // ********** now the second button ********** // background of the second button var bBox2 = paper.rect(100, 200, 120, 50, 10).attr({ fill: 'lightblue', stroke: '#3b4449', 'stroke-width': 2 }); // text of the first button var text2 = paper.text(bBox2.attrs.x + bBox2.attrs.width / 2, bBox2.attrs.y + bBox2.attrs.height / 2, 'Click to expand').attr({ "font-family": "Helvetica", "font-size": 16 }); // set of rectangle + text = button var button2 = paper.set().attr({ cursor: 'pointer' }); button2.push(bBox2); button2.push(text2); // function for the mousover event for buttons var buttonMouseoverHandler = function (event) { this.oGlow = this.glow({ opacity: 0.85, color: 'gray', width: 15 }); } // function for the mouseout event var buttonMouseoutHandler = function (event) { this.oGlow.remove(); } button2.mouseover(buttonMouseoverHandler); button2.mouseout(buttonMouseoutHandler); </code></pre> <p>Here is a working jsfiddle example : <a href="http://jsfiddle.net/fkNhT/" rel="nofollow">http://jsfiddle.net/fkNhT/</a></p> <p>I absolutely do not understand the difference in the behavior, can anyone please give me a hint?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin
    1. USkarlitos
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORaphaelJS HTML5 Library : creating a button with text and glow on mouseover
      1. UShappytime harry
      1. VTFavorite
    2. VO
      singulars
      1. PORaphaelJS HTML5 Library : creating a button with text and glow on mouseover
      1. USFranky Yang
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload