Solved

Need help customizing YUI tool

Posted on 2007-11-24
2
1,133 Views
Last Modified: 2012-05-05
I really like the tool found here: http://developer.yahoo.com/yui/examples/container/panelskin1_clean.html
but there are a couple of changes I'd like to make, although, I can't figure out how to add it in there, and there doesn't seem to be any information in the forums.  

I want the window to popup *beside* the link, instead of over it, and I want the link to be aligned to the vertical middle of the tooltip.  Does anyone know (or are even familiar enough with YUI) to explain how to do this, or even if it's possible?  Thanks!
0
Comment
Question by:n00b0101
2 Comments
 
LVL 26

Accepted Solution

by:
EddieShipman earned 500 total points
ID: 20369563
Make the following change, to the example. It will align to the bottom right of the button. The only
options you have are TOP_LEFT (tl), TOP_RIGHT (tr), BOTTOM_LEFT (bl), and BOTTOM_RIGHT (br).
The context:["button1", "tl", "br"] aligns the top left (tl) of the panel to the bottom right (br) of
the button1 element.

I don't see a way to get the position of an anchor (link) to be able to set the XY coords.

Make sure you give your buttons an id like in the HTML below.

YAHOO.example.container.myPanel = new YAHOO.widget.Panel("myPanel", 

                                  { context:["button1","tl","br"], 

                                    width:"300px", 

                                    visible:false, 

                                    constraintoviewport:true, 

                                    draggable:true } );
 
 

<button id="button1" onclick="YAHOO.example.container.myPanel.show()">Show panel</button>

<button id="button2" onclick="YAHOO.example.container.myPanel.hide()">Hide panel</button>

Open in new window

0
 

Expert Comment

by:dolphin_g
ID: 22114088
Hi,

I'm trying to do a similar job in YUI but with Tooltips. Below is a snippet of my code. Any element with hoversymbol class displays a tooltip. I have failed to place the tooltip("tl","tr") by using the positioning configurationas you can see in my code.

// Symbol cells should have the class "hoversymbol".
// Needs the following libraries
//      css/container.css
//      js/yui/yahoo-dom-event.js
//      js/yui/container.js
//      js/yui/element-beta.js
var overlay;
var storedSymbolInfo = {
  ADP : {name: 'AUTOMATIC DATA PROC', price: 45.17, change: 0.86, percent: 1.87 },
  BR : {name: 'BROADRIDGE FINANCIAL', price: 22.35, change: 0.19, percent: 8.51 },
  MSFT : {name: 'MICROSOFT', price: 34.76, change: 0.04, percent: 0.12 }
}
var toolTip;
function init() {
      var symbolCells = YAHOO.util.Dom.getElementsByClassName('hoversymbol', 'TD');
      overlay = new YAHOO.widget.Overlay("myOverlay",{visible:false,width:"175px" } );
      toolTip = new YAHOO.widget.Tooltip("myToolTip", {context:[symbolCells,"tl","tr"],
                                                       visible:false,
                                                       width:"175px",
                                                       hidedelay:300,
                                                       constraintoviewport:true});       
      toolTip.align("tl","tr");
      toolTip.contextTriggerEvent.subscribe(
            function(type, args){
                  console.log("showSymbolInfo");
                  var context = args[0];
                  var cellElement = new YAHOO.util.Element(context);
                  if (displayedInfo && displayedInfo.symbolCell != cellElement) {
                        displayedInfo.symbolCell.removeClass('hoversymbol_active');
                  }
                  displayedInfo.symbolCell = cellElement;
                  context.addClass('hoversymbol_active');
                  context.align();
                  context.render();
      });
      toolTip.contextMouseOverEvent.subscribe(
            function(type,args){
                  console.log("tool tip mouseover event");
                  //this.cfg.setProperty("hidedelay",5000);
                  displaySymbolInfo(args[0]);
            }
      );
      
      toolTip.contextMouseOutEvent.subscribe(
            function(type, args){
                  console.log("tooltip mouseout event");      
            }
      );
      
      YAHOO.util.Event.addListener(toolTip, "mouseover", extendTooltipLife);
      YAHOO.util.Event.addListener(toolTip, "mouseout", hideTooltip);
      console.log("init completed");
      
}

function hideTooltip(e){
      console.log("mouseout tooltip");
      toolTip.cfg.setProperty("hidedelay",100);
}

function extendTooltipLife(e){
      console.log("mouseover tooltip");
      toolTip.cfg.setProperty("hidedelay",1000);
}

function displaySymbolInfo(theCell){
      console.log("displaySymbolInfo");

      var cellElement = new YAHOO.util.Element(theCell);
      if(displayedInfo && displayedInfo.symbolCell != cellElement){
            displayedInfo.symbolCell.removeClass('hoversymbol_active');
      }
      var symbol = cellElement.getElementsByTagName('A')[0].innerHTML;
      var companyName;
      var headerString
      var symbolInfo = storedSymbolInfo[symbol];
      if (storedSymbolInfo[symbol]) {
            headerString = '<table border="0" width="100%"><tr><td align="center">';
            headerString += symbolInfo.price + '</td><td align="center" class="positive">+';
            headerString += symbolInfo.change + '</td><td align="center" class="positive">';
            headerString += symbolInfo.percent + '%</td></tr></table>';
            companyName = "&nbsp;<b>" + symbolInfo.name + "</b><br>";
      }
      var chartNav = '<div class="chartbar"><div class="chartoption selected">1d</div><div class="chartoption">5d</div>';
      chartNav += '<div class="chartoption">3m</div><div class="chartoption">6m</div><div class="chartoption">1y</div>';
      chartNav += '<div class="chartoption">2y</div><div class="chartoption">5y</div><br clear="all"/></div>';
            
      text = headerString+companyName + "<img src='https://app.quotemedia.com/quotetools/getChart.go?webmasterId=501&chtype=LineChart&symbol="+symbol+"&chmrg=3&chscale=3m&chwid=130&chhig=130&chsym="+symbolInfo.name+"' border='0' hspace='5'><br>" + chartNav+
                      '<span class="chartlinks">&nbsp;News | Profile | Stats | Chart<br>&nbsp;Quote | Option Chain | Trade</span>';
      toolTip.symbolCell = cellElement;
      //overlay.render(document.body);
      displayedInfo = toolTip;
      toolTip.symbolCell.addClass('hoversymbol_active');
      toolTip.cfg.setProperty("text", text);
      //overlay.align();
      //overlay.show();
            
      //YAHOO.util.Event.addListener(overlay.element, "mouseover", showSymbolInfo, overlay);
      //YAHOO.util.Event.addListener(overlay.element, "mouseout", timeoutSymbolInfo, overlay);
}
/*
function showSymbolInfo(e, theOverlay) {
      console.log("showSymbolInfo");
      if (displayedInfo && displayedInfo != theOverlay) {
            displayedInfo.symbolCell.removeClass('hoversymbol_active');
      }
      displayedInfo = theOverlay;
      theOverlay.symbolCell.addClass('hoversymbol_active');
      theOverlay.align();
      theOverlay.show();
      clearTimeout(displayedInfo.pause);
}
*/

function timeoutSymbolInfo(e, theOverlay) {
      console.log("timeoutSymbolInfo");
      if (displayedInfo && displayedInfo != theOverlay) {
            displayedInfo.symbolCell.removeClass('hoversymbol_active');
      }else{
            clearTimeout(displayedInfo.pause);
            displayedInfo.pause = setTimeout(hideDetails,300);
      }
}

function hideDetails() {
      displayedInfo.hide();
      displayedInfo.symbolCell.removeClass('hoversymbol_active');
      
}
var displayedInfo;

YAHOO.util.Event.addListener(window, "load", init);

HTML code:

<div class="pagecontainer yui-skin-sam">
      <div class="pagecontents">
            <br>
            <form name="AccountActivityForm" method="link" action="accountactivity.htm">
            <table border="0" cellpadding="1" cellspacing="0">
                  <tr class="columnheadings">
                        <th align="left" id="column-symbol">
                              <span class="labeldark"><a href="" onclick="return false;">Symbol</a></span>
                        </th>
                  </tr>
                  <tr class="rowshade_odd">
                        <td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
                              <a href="#" class="Stock_US">ADP</a>
                        </td>
                  </tr>
                  <tr class="rowshade_even">
                                          <td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
                                                <a href="#" class="Stock_US">BR</a>
                                          </td>
                  </tr>
                  <tr class="rowshade_odd">
                                          <td align="left" class="hoversymbol column-symbol Stock_US" nowrap>
                                                <a href="#" class="Stock_US">MSFT</a>
                                          </td>
                  </tr>
            </table>
      </div>
</div>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error on link 14 36
Javascript and Jquery not firing 9 37
How to change pointer icon to hand icon on mouseover 2 17
how would you interpret lines 3 28
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now