Solved

Need this div tag

Posted on 2006-07-06
5
156 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Visitor to Web site (Log showing Strange IP Address) 9 108
Microsoft Edge 9 99
Questions about this React unit test 4 60
Randomize in Owl Carousel v1.3.2 6 40
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

806 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