Solved

Need this div tag

Posted on 2006-07-06
5
154 Views
Last Modified: 2010-04-06
http://www.microsoft.com/windowsmobile/communities/smartphone/default.mspx

on top you have quick links.

I want a similar ability to show list of all of my products when some one takes mouse over or clicks.

0
Comment
Question by:tgatif
5 Comments
 
LVL 1

Expert Comment

by:sushestvo
ID: 17060978
0
 

Author Comment

by:tgatif
ID: 17066306
sumthing else
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 17066352
0
 

Author Comment

by:tgatif
ID: 17171810
still not this. something exact similar to what ms has.
0
 
LVL 2

Accepted Solution

by:
ThijsS earned 400 total points
ID: 17397870
<html>

<head>
      <script>
      
      function findPos(obj)
      {
            var curleft = curtop = 0;
            if (obj.offsetParent)
            {
                  curleft = obj.offsetLeft
                  curtop = obj.offsetTop
                  while (obj = obj.offsetParent)
                  {
                        curleft += obj.offsetLeft
                        curtop += obj.offsetTop
                  }
            }
            
            return [curleft,curtop];
      }
      
      function HideDiv(e)
      {
            var TheDivToBeRemoved = document.getElementById("RemoveMe");
            TheDivToBeRemoved.parentElement.removeChild(TheDivToBeRemoved);
      }
      
      function ShowDiv()
      {
            if(document.getElementById("RemoveMe")==null)
            {
                  var TheDiv = document.createElement("DIV");
                  var TheLink = document.getElementById("TheLink");
                  document.body.appendChild(TheDiv);
                  TheDiv.innerHTML = "<p>Anything You want!</p>"
                  TheDiv.id = "RemoveMe";
                  TheDiv.style.border = "2px solid gray";
                  TheDiv.style.background = "white";
                  TheDiv.style.position = "absolute";
                  TheDiv.style.left = findPos(TheLink)[0] + "px";
                  TheDiv.style.top = findPos(TheLink)[1] + "px";
                  TheDiv.style.height = "100px";
                  TheDiv.style.width = "200px";
                  TheDiv.onmouseleave = HideDiv;
            }
      }
      
      </script>

</head>

<body>

<a id="TheLink" onMouseOver="ShowDiv();" href="somewhere">Quick Links</a>

</body>

</html>

The popup-div is fully custumizable in the "ShowDiv" function.
To get a nice layout within the DIV, you might want to use a table.

example:
TheDiv.innerHTML = "<table><tr><td>Product 1</td><td>Product 2</td></tr><tr><td>Product 3</td><td>Product 4</td></tr></table>";
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

743 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

11 Experts available now in Live!

Get 1:1 Help Now