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?
 
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
 
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.