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/

Now it works, but I can't make it use the Style.css
I changed the Style.css and when I double-click in the html I see the changes.
But when I open the html via the TinyBox.show(...) it doesn't use it.
VapiSoftAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title></title>
<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>

<script type="text/javascript" src="tinybox.js"></script>
<script type="text/javascript">
window.onload=function(){
	T$('url1').onclick = function(){TINY.box.show("advanced.html",1,300,150,1);}
}
</script>

</head>
<body>
	<span id='url1'>Some text</span>
</body>
</html>

Open in new window

0
VapiSoftAuthor Commented:
I don't see where do you refer to Style.css
As I wrote, I want to use the Style.css for the HTML.
0
hieloCommented:
I included it in the <STYLE> tag:

<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>


If you already have a separate file named Style.css, then on my example, REPLACE:
<style>...</style>

with:
<link href="Style.css" type='text/css' rel='stylesheet' />

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

VapiSoftAuthor Commented:
Both methods don't work.
As I stated in the question, these method works well in a regular HTML, but not with the TinyBox.
Something in the TinyBox makes it ignore the style, although it has the Style.css file.
0
hieloCommented:
>>these method works well in a regular HTML, but not with the TinyBox.
It is not clear what you mean. The example I gave you works perfectly fine.  Post the exact code you are using OR provide a link to your page and try describing the exact problem again.
0
VapiSoftAuthor Commented:
Did you try it with TinyBox?
All you need to do is download the TinyBox from the link that I provided and use his example (with the 'Advanced.html').
0
hieloCommented:
>>Did you try it with TinyBox?
Yes. I just re-checked to be sure and what I posted on my first post works fine. On that specific example, advanced.html needs to be on the same folder as the example page. Also, advanced.html must be on the same domain as the example page. Lastly, if you are NOT using a windows server, be sure you are providing the EXACT file names as saved in your server. Non-windows servers tend to be case sensitive.
0
VapiSoftAuthor Commented:
I am using WAMP wich is a simulation of a Apache Server in my local Windows computer.
Everything works well except this. It shows the HTML in the TinyBox and does the animation.
The structure that I have is as follows:
I have the main page in /www/Voodoo/index.html
In it I have a button that activate the TinyBox -
function onHelp()
{
 TINY.box.show('TinyBox/MainHelp.html',1,0,0,1,0);
}
All the TinyBox code and examples are located in folder:  /www/Voodoo/TinyBox
   
0
Dave BaldwinFixer of ProblemsCommented:
The demo code works fine for me except that it does have to be run from a web server for the Ajax to work.  Are you trying to include 'Style.css' in MainHelp.html?
0
VapiSoftAuthor Commented:
Yes.
I have this line:  <link href="Style.css" type='text/css' rel='stylesheet' />
after the <title></title>
When you say that it works for you, did you try to change things (like font) in the Style.css ?
Because this is the thing that does not work for me.
0
Dave BaldwinFixer of ProblemsCommented:
I am using the demo code.  I just changed the body font in 'Style.css' to Times New Roman, Refreshed the page and the fonts changed to Times New Roman.  It also works for me in Wamp on another computer.  Can you post the code for 'MainHelp.html'?
0
VapiSoftAuthor Commented:
Please note that it does work when I double-click on the file in the folder, so it means that the line:
<link href="Style.css" type='text/css' rel='stylesheet' />
works OK.

<?xml version="1.0" encoding="UTF-8"?> 
<!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"> 
<head> 
<title></title> 
<link href="Style.css" type='text/css' rel='stylesheet' />
 </head>
<body>
<div id="testdiv">
<h2>
Voodoo - Rating Tree
</h2>
<div>
<p>
The following is a general explanation of what is Voodoo.<br>

<p ALIGN=Right><a href="javascript:TINY.box.hide()">close it</a></p>

</div>

</body>
</html>

Open in new window

0
Dave BaldwinFixer of ProblemsCommented:
Yes, it works fine for me when I put your MainHelp.html in place of advanced.html.  Note that 'Style.css' is also used by the index.html file so the fonts should be the same for tags that are the same.  Also, since the pop-up file is still part of the original web page, you don't need the headers anyway.  It's not popping up in a separate page but in a DIV on the current page.  You also have an extra DIV in your MainHelp.html.
0
VapiSoftAuthor Commented:
If I don't put the <link href="Style.css" type='text/css' rel='stylesheet' />
in the page, where do I put it.
My main page (that activates the TinyBox) is a PHP file that includes the style sheet

<html xmlns="http://www.w3.org/1999/xhtml">

<?php
 // init mytree objects
 include('functions.php');
 include('Voodoo.css');  //  <----- this is my main style sheet

Maybe the problem is that you cannot have two css files !!!
If so, how do I make it work?

0
Dave BaldwinFixer of ProblemsCommented:
include('Voodoo.css'); puts your CSS in your PHP code but Not in your page unless you are echoing it somewhere on your code.  Look at your HTML source in your web browser and I think you'll find out that 'Voodoo.css' isn't there anywhere.  You can have as many CSS files as you want.  But they're called Cascading Style Sheets because the Last one that applies overrides the ones that came before if they refer to the same thing.
0
VapiSoftAuthor Commented:
I don't understand what to do.
I have the Voodoo.css in the main page because I need it there.
I need another css file for all my TinyBox messages that areactivated by click on buttons in my main HTML page (for example on Help).
Where do I put the link href="Style.css" type='text/css' rel='stylesheet' />
so it will affect the message???
0
Dave BaldwinFixer of ProblemsCommented:
Somewhere in your PHP page must be something like the code below.  That's where you put Voodoo.css to use it on your page.  Including it in your PHP code does not do that.
<html> 
<head> 
<title>Voodoo</title> 
<link href="Voodoo.css" type='text/css' rel='stylesheet' />
 </head>
<body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VapiSoftAuthor Commented:
As I wrote, I only have include('Voodoo.css')
But yor comment has helped me solved the problem (partially) because I just put the content of the Style.css inside the Voodoo.css
Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.