Can someone show me how to use this script, I need another page to open inside the box. I downloaded the script from http://www.leigeber.com/2009/05/javascript-popup-box/ but I don't know how to use and I really need it. Thanks
ok upload the file tinybox.js to / in the page you would like to use tinybox on in the <head>here</head> section insert the following: <script type="text/javascript" src="/tinybox.js"></script> Code (markup): then to load a page into it, you can create a function to call it: <script type="text/javascript"> do_tinybox(show){// show = true or false /* TINY.box.show(src = url,show/hide = true / false, width , height ,animate = true / false, delay how long to animate); */ TINY.box.show('yourpage.html',show,300,150,true,500); } </script> Code (markup): you can then call the function using the onclick= attribute of you html elements: <img src="showme_button.gif" onclick="open_tineybox(true);"> <img src="hideme_button.gif" onclick="open_tineybox(false);"> Code (markup): hope this helps.
In addition to what shofstetter posted, you also need to upload the Tinybox stylesheet (style.css) and the images folder. You may need to rename the stylesheet to tinybox.css if you already have style.css. Then you have to add a link to the stylesheet in the head section. <link rel="stylesheet" type="text/css" href="tidybox.css" /> Code (markup):
Thank you very much for the little tutorial shofstetter, and Cash Nebula thanks for the tip my site does come with css style sheet I wouldn't wanna overwrite it Thanks a lot people.
Okay, I just tried to follow up the little tutorial, and I couldn't get it to work let's say I have a plain page and I wanna make a link with the phrase "click here" so that when someone click there the tinybox will popup with the content in it. How do I do this?? I am no expert how so ever on this.
where do I put this code? <script type="text/javascript"> do_tinybox(show){// show = true or false /* TINY.box.show(src = url,show/hide = true / false, width , height ,animate = true / false, delay how long to animate); */ TINY.box.show('yourpage.html',show,300,150,true,500); } </script> Code (markup): And what is this code below for? How do I use it? <img src="showme_button.gif" onclick="open_tineybox(true);"> <img src="hideme_button.gif" onclick="open_tineybox(false);"> Code (markup):
Save this as a page and try it out. It's very basic but it's a start, and you can improve it once you know it works. <html> <head> <title>TinyBox Demo</title> <link rel="stylesheet" href="style.css" /> <script type="text/javascript" src="tinybox.js"></script> <link rel="stylesheet" type="text/css" href="tidybox.css" /> </head> <body> <a href="#" onclick="TINY.box.show('Hello World',0,200,200,1);">Show Box</a> </body> </html> Code (markup):
Need to make it use AJAX by changing the first number to 1 <a href="#" onclick="TINY.box.show('page.html',1,200,200,1);">Show Page</a> But I could only get it to work on a server. If I load it from a folder, all I get is the spinning loading image. I think that has something to do with AJAX, but I don't know enough to be sure.
I inserted the code you just gave me and it seemed to work for me, but for some reason the page doesn't have a scroller, you can view the page by going to the following link http://lexishost.atwebpages.com/dummy.html
I think Tinybox has been abandoned because the last update was in November 2009 and the author's last comment was in May 2009. There are many complaints about the page height problem, which is not fixed by using zero for auto height. I just found out that Hostgator's Tinybox is different to the original, so it looks like they modified it to fix that problem. It works when I use these instead of the originals. http://www.hostgator.com/shared/css/tinybox.css http://www.hostgator.com/shared/js/tinybox.js Code (markup):