javascript - Raphael Js toggle content when click -


my english trash, want try.

that version modified me, these vectors colorful buttons are. i'm trying display text when click each of buttons.but when click other buttons, texts overlap, shown in picture:

http://i.stack.imgur.com/s39dx.png

this code handles event:

$('.get').find('.arc').each(function(i){         var t = $(this),              color = t.find('.color').val(),             value = t.find('.percent').val(),             text = t.find('.text').text();              conteudo = t.find('.conteudo').text();             alet = ( 11.25 * );              /*title.rotate(20.25 * i);*/          rad = arco_espaco;           var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width,});         var zm = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width, opacity: 0}).tofront();/*mask*/          var title = r.text(220, 0, defaulttext).attr({             font: '20px arial',             fill: '#fff'             }).tofront();             title.rotate(11.25*(i+0.40),-1,5);          var texto = r.text(300, 10,  conteudo).attr({             font: '20px arial',             fill: '#fff',             "text-anchor":"start",             opacity: 0             }).tofront();            var group = r.set();         group.push(z);         group.push(title);         ativo = 1;            zm.mouseover(function(){             group.animate({ 'stroke-width': arco_ganho, opacity: .75 }, 1000, 'elastic');             if(raphael.type != 'vml') //solves ie problem             title.stop().animate({ opacity: 1 }, speed, '>', function(){                 title.attr({ text: text + '\n'}).animate({ opacity: 1 }, 50, '<');                 title.tofront();                 zm.tofront();              });              document.body.style.cursor = "pointer";           zm.mouseout(function(){         zm.tofront();             group.stop().animate({ 'stroke-width': arco_width, opacity: 1 }, speed*4, 'elastic');             title.stop().animate({ opacity: 0 }, speed, '>', function(){                 title.attr({ text: defaulttext }).animate({ opacity: 0 }, speed, '<');                 title.attr({ text: text + '\n'  }).animate({ opacity: 0, align: left }, speed, '<');              });              document.body.style.cursor = "auto";          });          zm.click(function () {         $("#diagram").css("background-color",color);         texto.attr({opacity: 1});         tempp = texto;          });           })          zm.tofront();     });

the text come html file:

<div class="get">         <div class="arc">             <span class="text">secretaria</span>             <input type="hidden" class="percent" value="100" />             <input type="hidden" class="color" value="#f6c201" />             <span class="conteudo">teeeeexxxxxxtt >>>secretaria<<<</span>         </div>          <div class="arc">             <span class="text">financeiro</span>             <input type="hidden" class="percent" value="100" />             <input type="hidden" class="color" value="#97be0d" />             <span class="conteudo">teee-------xtt >>>financeiro<<<</span>          </div> </div>

see on jsbin http://jsbin.com/unojov/2/edit


Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more