[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Creating Javascript popup windows with AJAX content

Posted on 2007-10-11
5
Medium Priority
?
3,678 Views
Last Modified: 2013-11-19
I am looking for some background information on how i can implement javascript popups on my site. I want the popups to be like extra menus in the header of my website. An example of what i want to achieve can be found here:
http://tinyurl.com/2pxwxm
Each popup window will be a fixed size and i'm not concerned with any fancy animations or crazy fades, i just want each popup to appear when the relevant button is clicked. How can I go about this, I have searched around and i found plenty of code that provides a modal popup in the center of the page like lightbox and thickbox, however i don't want the popup to take over the whole page just to popup over the header image as shown in the example.

I want the content for each page to be pulled though ajax from another page. I know how to create the AJAX code and put content into a DIV on my page but whats the best way to make it pop over my existing content/header?
0
Comment
Question by:alex_wareing
  • 3
  • 2
5 Comments
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20057717
Please excuse this extreme sloppyness.  You can find the image for the speech bubble here: http://www.irlazy.com/images2/bubble2.gif

Instead of passig the text to the function, you can pass something else, call and ajax request, and update the bubble with the return values.  Text can't be to long tough, unless you make your bubble bigger.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>test</title>
<script>
      function showTip(e, text)
      {
            e = (e == null) ? window.event : e;
            document.getElementById('text').innerHTML = text;
            document.getElementById('tooltip').style.left = e.clientX  - 20 + 'px';
            document.getElementById('tooltip').style.top = e.clientY + 5 + 'px';
            document.getElementById('tooltip').style.display='block';
            target = (e.target) ? e.target : e.srcElement;
            target.onmouseout = function() {document.getElementById('tooltip').style.display='none'};
      }
</script>
</head>

<body style="background-color:yellow">


<div id="tooltip" style="position:absolute; display:none;width:300px;">
      <div style="background: url(bubble2.gif) no-repeat top;padding:50px 8px 0px;text-align:center"><div id="text" style="padding-left:10px;padding-right:10px;"></div></div>
      <div style="background: url(bubble2.gif) no-repeat bottom;padding:20px 8px 0px;text-align:center;">&nbsp;</div>
</div>
<a href="#" onmouseover="showTip(event, 'This is a whole bunch of text in link one.  Zoo da aa dooee doe<br/>test')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 2')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 3')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 4')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 5')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 6')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 7')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 8')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 9')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 10')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 11')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 12')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 13')">Click here</a>
<br/>
<a href="#" onmouseover="showTip(event, 'Link 14')">Click here</a>
<br/>
</body>
</html>
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20057760
I forgot to say, you can use any image you want instead of a speech bubble, but you'll have to adjust the css to accomodate the new image.

 <div style="background: url(bubble2.gif) no-repeat top;padding:50px 8px 0px;text-align:center"><div id="text" style="padding-left:10px;padding-right:10px;"></div></div>
      <div style="background: url(bubble2.gif) no-repeat bottom;padding:20px 8px 0px;text-align:center;">&nbsp;</div>

The padding on the images here will have to be adjusted for your new image if it's bigger/smaller.
0
 

Author Comment

by:alex_wareing
ID: 20057938
Thanks for all your help so far. However I'm not looking for a tooltip fuction, the popups need to be in a static location rather than following the mouse around. The locations would be relative to the button rather than the mouse. Also I only want the popup to appear when the button has been clicked, and for it to dissapear when another button is clicked, or a close button is clicked.
0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 2000 total points
ID: 20058129
Although my example used a tooltip, the functionality is still exactly the same.  Consider the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>test</title>
      <style>
            body
            {
                  padding: 0px;
                  margin: 0px;
            }
      </style>
<script>
      function showTip(e, text)
      {
            e = (e == null) ? window.event : e;
            target = (e.target) ? e.target : e.srcElement;
            document.getElementById('text').innerHTML = text;
            document.getElementById('tooltip').style.left = target.offsetLeft + 10 + 'px';
            document.getElementById('tooltip').style.top = target.offsetTop + 20 + 'px';
            document.getElementById('tooltip').style.display='block';
            //target.onmouseout = function() {document.getElementById('tooltip').style.display='none'};
      }
</script>
</head>

<body style="background-color:yellow">


<div id="tooltip" style="position:absolute; display:none;width:300px;">
      <div style="background: url(bubble2.gif) no-repeat top;padding:50px 8px 0px;text-align:center"><div id="text" style="padding-left:10px;padding-right:10px;"></div></div>
      <div style="background: url(bubble2.gif) no-repeat bottom;padding:20px 8px 0px;text-align:center;">&nbsp;</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Click me!" onclick="showTip(event, 'Whatever')" />
<br/>
</body>
</html>

Location is relative to the calling button.  You could easily add document.getElementById('tooltip').style.display='none' at the beginning of the function to hide any current popups.

Basically the building blocks are all there.  They just need to be adapted to suit your needs.
0
 

Author Comment

by:alex_wareing
ID: 20058582
Great that looks like the right directions, I should be able to investigate and customize it to my need, thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

867 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