• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1314
  • Last Modified:

JavaScript TinyBox

Hi,
I am trying to use a solution for a question I submited to the experts.
The solution that I received from " remorina : is TinyBox
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_25761272.html
http://www.leigeber.com/2009/05/javascript-popup-box/

But now that I am trying to use it in my code it doesn't work.
I just see the Horizontal scrollbar for 3 seconds.
See the attached code.
I put a breakpoing before the line (TINY.box.show) and with the debugger I saw that it enters the function, but I cannot understand how it should work and what goes wrong.

function onHelp()
{
 TINY.box.show('advanced.html',1,300,150,1,3);
}

Open in new window

0
VapiSoft
Asked:
VapiSoft
  • 2
1 Solution
 
hieloCommented:
>>I just see the Horizontal scrollbar for 3 seconds.

From the "manual" page:
...The TINY.box.show function takes 6 parameters:
1. the HTML content for the box or the relative path to the AJAX source,
2. a toggle (true/false or 1/0) if the content is via AJAX,
3. the width of the window (use 0 for auto),
4. the height of the window (use 0 for auto),
5. a toggle (true/false or 1/0) to animate the window, and
6. the time in seconds to wait before auto hiding the popup (optional).

So there, Item 6 is the reason for those 3 seconds.

Also, advanced.html must be in YOUR server. It does not load a page from an remote site.

Lastly, you also need the following CSS in the head of your page:
<style type="text/css">
#tinybox {position:absolute; display:none; padding:10px; background:#fff url(http://sandbox.leigeber.com/tinybox/images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}
#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}
#tinycontent {background:#fff}
</style>

0
 
VapiSoftAuthor Commented:
Thank you very much.
0
 
VapiSoftAuthor Commented:
I am trying to change the fonts in the Style.css but it does not affects the outcome. Why?
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now