Assigning a value to CSS

I'm not quite sure what you are trying to do:

There were a couple of errors.  The changed the oredr of the border attributes, and it is z-index, not x-index.  So this is correct and valid:

<style type="text/css">#box1 {position: absolute; top: 123px; left: 55px; width: 125px; border: 1px solid #000000; background-color: #6666ff; visibility:hidden; z-index:1;></style>

Normally you would put that in the head of the page, but the browser will allow it anywhere in the page.

If you could explain a little more of what you are trying to do; I'll try to help.

Cd&

I am trying to get a PL/SQL value into a pop-up box. When I put the parameter in the <div> tag for somereason it does not pass it. I get the pop-box to work so I figured if there was someway i could assign a value in the CSS that I may get the results I want.

HTH

gabulish

I'm still not sure what you are trying to do, but pretty sure you can't do it.

Why not?

Anything is possible!

can you share you code with us so we can understand better what it is you are trying to do?

All I want to try is to assign the value (l_descrip_rec.description) in the style type. I know you can put it in the <div> tag but for some reaon it it not working in my code. I dont know is there any other possible to style a box and get text in it.


 htp.print('<style type="text/css">#box1 {position: absolute; top: 123px; left: 55px; width: 125px; border: 1px solid #000000; background-color: #6666ff; visibility:hidden; z-index:1;"></style>');
 
htp.print('<script language="JavaScript">function show_it(){document.all.box1.style.visibility = "visible";}</script>');
 htp.print('<script language="JavaScript">function hide_it(){document.all.box1.style.visibility = "hidden";}</script>');
 htp.print('<div id=box1 ></div>');

     htp.tableData('<a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc='
                   ||l_userData_rec.numbersc||'"onMouseOver="show_it(box1);" onMouseOut="hide_it()">'
                  ||l_userData_rec.numbersc||'</a>');

>>>Anything is possible!

Would you please tell me how to make the world rotate in the other direction.

If this is just a continuation of trying to get something  generated from that tool you are using, I think I will step out.  I have already wasted enough of my time on your undevalued questions, and even with looking at all three of the questions, I still have no idea of what you are doing and you seem reluctant give the information needed except in disconnected fragments.  A tooltip is a simple thing.  If the tool youar are using can't do it then get a new tool or live with the limitations of the one you have selected.

Cd&

COBOLdinosaur this has nothing to do with a tooltip. It has to do with a a value being generated in a CSS pop-up box. If you'd rather not "waste your time" then don't. PL/SQL isn't a tool. Its probably the most high-end query language existing today. If you havent noticed its somewhat difficult to embed a bunch of code within it. The results I am getting from it so far have been unreal and I was hoping to add more features to make it even better. With or without you I will get it. If you don't want to help you don't have to.  

The problem is not the tool.  It is your failure to assist us in understanding what you want.  After having seen what you are attemping in the code, I posted code in the other Q.  Something that you would have had a week ago if you understood how to use the site.

Undervalued Qs with vague requirements, and uncooperative users are not a priority. If the code I posted solves it then enjoy because it is the last time I offer any assistance in the future. If you think you have not got your twenty points worth post a complaint in Community Support.  I'm sure the admins will be happy to explain just how far your approach and your attitude will get you.

Cd&

I didnt ask for an indepth explanation to this question. I told you I would give you more points if you would assist me in solving my problem. I apolgize for causing you such a problem. thank you for your help.

i still don't have a clue what you are trying to do, sorry.

Neither do I.  And an easy question gets a point value of 50 (https://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp#2).

With that said, I am guessing you are after something like content before or after attributes (http://www.blooberry.com/indexdot/css/properties/generate/content.htm).  Which I am sure will not work with PL/SQL.

To help with your confusion look at the user two open Qs in JS.  That will help fill in the gaps, and help explain my comments.  The one that is now 50 points started out at 20.

Cd&

also the Oracle Q:
https://www.experts-exchange.com/jsp/memberProfile.jsp?mbr=gabulish#1

they all seem to fit together is some weird weird way....

why have you not just asked ONE question with ALL the info??

All that, and in the end it is a simple tooltip. :^(

Cd&

don't have a clue either, but a simple answer to this simple question:

<style type="text/css">
#box1 {position:absolute;top:123px;left:55px;width:125px; border:1px solid #000000;background-color:#6666ff; visibility:hidden; z-index:1;>
div[id=box1]:before {content:"PL/SQL";}
</style>

<div id=box1>your text here</div>

ahoffmann I tried putting the div[id=box] in the style sheet but it didn't work. Take a look at a javascript I am working with in another question https://www.experts-exchange.com/jsp/qManageQuestion.jsp?qid=20326850. For some reason the javascript does not work quite right either. Hope this may clear things up a little.

didn't see any valuable (pure) javascript in the refered question, just code snippets which are PHP, ASP or whatever (nobody said what it is).
Also, I gave an CSS suggestion (see the TA you have asked).
I reject JavaScript for obvious reason, sorry can't help with JavaScript.

> .. it didn't work.
What did not work (CSS, JavaScrit, rendering)?
Where did it not work (which browser)?

> Hope this may clear things up a little.
No, not at all. It's the opposite: makes things more sketchy (as some other experts still mentioned, if I understand all the comments right).

Please post exactly the code you use, and which does not work for you. Use the code you see in the browser, not what is stored on server-side. Just the HTML/CSS code in question, not more not less. Couldn't be that difficult;-)

<HTML>
<HEAD>
<TITLE>Change Requests Scheduled between 6-24-2002 and 9-24-2002.</TITLE>
</HEAD>
<BODY BGCOLOR="white"onMousemove="reset()">
<H2><center>Change Requests Scheduled between 6-24-2002 and 9-24-2002.</center></H2>
Your search has returned <font color="blue">335</font> results:
<TABLE  border=1 width=100%>
<TR>
<TH>CR #</TH>
<TH>Coordinator</TH>
<TH>Status</TH>
<TH>Planned Start Date & Time</TH>
<TH>Assets</TH>
<TH>Outage</TH>
<BR>
</TR>
<style type="text/css">#box1 {position: absolute; top: 123px; width: 125px; left: 55px;  border: 1px solid #000000; background-color: #6666ff; visibility:hidden; z-index:1;"></style>
<script language="JavaScript">function reset(){obj=document.all.box1;obj.style.top=event.y+10;obj.style.left=event.x+10;}</script>
<script language="JavaScript">function show_it(){obj=document.all.box1;obj.style.visibility="visible";}</script>
<script language="JavaScript">function hide_it(){document.all.box1.style.visibility = "hidden";}</script>
<div id=box1 ></div>
<TR>
<TD><a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc=13514"onMouseOver="show_it(box1);" onMouseOut="hide_it()">13514</a></TD>

I hope this may help.

The reason I need a to assign a value to the box is because when I try to assign a parameter to the <div id> tag it does not hold the value or pass it to the screen.

I don't think you understand what a div tag is....it's simply a container tag.

right but if I put text into the the div tag it would print it out. So if there is a parameter which already holds a value being passed into a div tag why wouldn't it return the value much like it would the text?

Okay put the body tag back to:

<BODY BGCOLOR="white">

Then the scripting should generate:

<style type="text/css">#box1 {position: absolute; top: 123px; width: 125px; left: 55px; border: 1px solid #000000; background-color: #6666ff; visibility:hidden; z-index:1;"></style>
<script language="JavaScript">function show_it(){obj=document.all.box1;obj.style.top=event.y+10+document.body.scrollTop;obj.style.left=event.x+10;obj.style.visibility='visible'}</script>
<script language="JavaScript">function hide_it(){document.all.box1.style.visibility = "hidden";}</script>

And the link looks like this:

<TD><a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc=13514"onMouseOver="show_it(box1);" onMouseOut="hide_it()">13514</a></TD>

The problem we had was that when the page was scrolled it changed the relationship between the mouse pointer and the window.  I fixed it by using the position of the scroll bar as an offset so that the relationship is restored.

Cd&

Unfortunately no luck. I am getting these errors.

1)'document.all.box.style'is null or not an object

2)'box1' is undefined

HTH

Just so all the experts in this one don't get evem more confused.  My last post was intedned for the other part of this question here:

https://www.experts-exchange.com/questions/20326850/Pop-up-box-Please-Help.html

That's solved, so now we are working on the second part here, which is to get the div populated.

Cd&

>>So if there is a parameter which already holds a value being passed into a div tag why wouldn't it return the value much like it would the text?


div tags don't accept parameters....  i'm still not sure what you are trying to do here.

you can perhaps use the innerHTML property to change the text within the div....

I think you are on the right track Bruno.  If the div is not coming across populated and has to be populated on the client, it has to be put into the innerHTML, or possibly the innerText.

First, let's get a handle on the data to go in there.

gabulish,

1. Is the source of that text string being pulled off of the database as part of the query?

2. Is the text different for each row of the table?

3. How big is the text string?

I'm think that the population will need to happen as part of the mouseover event, but the data will have to be passed across in an accessible container, like a JavaScript array, or as an XML data island.

Cd&

Ok this is what I am tryng to do. We already have the Javascript pop-up box when a user rolls over a distinct ID. Now I need to get the unique description which corresponds with that unique ID. So when a user rolls over a unique ID the pop-up box will display the description. As of now I have the JavaScript functions being called in a loop for every table row. Could a parameter be passed into the javascript somehow? And what is the innerHTML property?

HTH

1. Is the source of that text string being pulled off of the database as part of the query?
YES, then it is being stored in a cursor which is the parameter(description) i am trying to display

2. Is the text different for each row of the table?
the text is the same font, size, and stuff like if thats what you mean

3. How big is the text string?
The text string varies in size for each description. They range in size from very long to Null.

let me know if you need clarifying on #2

innerHtml is the property which contains the contents of an element as a string.

Example:

Given this div:

<div id="box1"> this is a string </div>

The experession x=document.all.box1.innerHTML;

Would set x to "this is a string"

The content of the div can be changed with:

document.all.box1.innerHTML="hello world";


The problem is that the content of the div is a single string, not a parameter.

That means that as the code is generated on the server side the string for each row must either go to a unique div or be stored in some other structure so the client can populate during the event.

Unique divs would mean a tremendous amount of script generation... not a good way to do it for a large table.  An array makes senses, but trying the entries to the individual rows will take some thinking to do it right.  Be back shortly with a stab at it.  There are more ways to do it wrong then there are ways to do it right, let me sort through it.

Cd&

<STYLE> ... </STYLE>  is allowed in <HEAD> .. </HEAD> only.
If it appears in any other element it depends on the browser what happens.

>>>If it appears in any other element it depends on the browser what happens.

True, but the code is already IE specific, and the code generation is being done with PL/SQL queries.  As with any generated code, the tools make the rules.

Cd&

I {dw}on't know much about IE, and haven't ssen a reference to it by the questioner in this long thread.
Anyway, it would be worth to check if the style definition inside the HEAD would give different results.

All references to the dom are using document.all which is IE, though I think Opera supports part of it.

Cd&

I know Ahoffmann is going to love this solution. ;^)

Let's bend the definition of the a tag and invent a new property called themsg:

If the links are generated this way:

<TD><a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc=13514"onMouseOver="show_it(this.themsg);" onMouseOut="hide_it()" themsg="the description for this link">13514</a></TD>

Then we just change the showit script like this:

<script language="JavaScript">function show_it(xxx){obj=document.all.box1;obj.innerHTML=xxx;obj.style.top=event.y+10+document.body.scrollTop;obj.style.left=event.x+10;obj.style.visibility='visible'}</script>

Then all the server side generator has to do is insert the description in the themsg property as it is generating the link.

The string then gets passed to the function and is inserted into box1 before it is displayed.

Cd&

lovely, it's going to become real HTML/CSS syntax ;-)

Well, there is great news and other news. Every unique number displays a different but they are not all the correct values. Another concern is that when I put this new code in it drove the length of the box to a bigger size. I am very impressed so far just need to clear these 2 issues up. Thanks again.

gabulish

Ignore the above comment. Well, there is great news and other news. Every unique number displays a description within a pop-up box but the values being displayed are not all the correct values. Another concern is that when I put this new code in it drove the length of the table field to a bigger size. I am very impressed so far just need to clear these 2 issues up. Thanks again.

If the values are wrong the problem has to be on the server side.  The display values are tied directly to the link, so any wrong values have to be because of the query.  You mention some could be null, for those you still need to generate themsg property using a alue of " ".

When you say the length of the table field is bigger do you mean the cells with the link are wider?

Cd&

Yea the cells with the link are alot wider. They only have a 5-digit # in them and both the height and width have increased.

How could I generate a value of null for the descriptions that have a null value.

You don't want it to be null on the client. It needs to be an empty string
themsg="" will do that.  Then to prevent th box from displaying when the string is empty we can change the script this way:
<script language="JavaScript">function show_it(xxx){obj=if (xxx=="")  return;document.all.box1;obj.innerHTML=xxx;obj.style.top=event.y+10+document.body.scrollTop;obj.style.left=event.x+10;obj.style.visibility='visible'}</script>
As for the size thing, I have it set up on my cmputer and I do not get any size change.  It sounds like the script is putting something extra in the cells.  The fact that the height is changing suggests that there are line breaks in there, and maybe tabs.
Let me see what is being generated.

Cd&

I'm getting an error with that script. I'll look into the size thing and see what I can dig up.

Oops,  some day I have to learn to type:
<script language="JavaScript">function show_it(xxx){if (xxx=="")  return;obj.document.all.box1;obj.innerHTML=xxx;obj.style.top=event.y+10+document.body.scrollTop;obj.style.left=event.x+10;obj.style.visibility='visible'}</script>

Cd&

I'm still getting an error saying that 'obj' is undefined.

In too much of a hurry. I put a . where it should have been an =

<script language="JavaScript">function show_it(xxx){if (xxx=="")  return;obj=document.all.box1;obj.innerHTML=xxx;obj.style.top=event.y+10+document.body.scrollTop;obj.style.left=event.x+10;obj.style.visibility='visible'}</script>

Cd&

NICE! CAn you thin kof any reason why this code may be driving the height and width this cell. Before it wasn't a problem until this script started working.

as this seems to be IE specific anyways, try putting this tag into your table..


<table style="table-layout: fixed;">

brunobear that fixed the hieght problem but the cell length is still too long

I do not see any change in size on my computer.  The only difference is I have it all cded diectly in the page and you are generating it.  I need to see the generated code or the script, because the browser does not ahve a problem with the code.  Something else is gettign put in there by the script.

Bruno, That might help, but if there is extra stuff going into the cells we will have to put style="overflow:hidden" on the td tags as well.  A last resort if we can't get whatever is in there out.

Cd&

I see what it did it actually made all of the cells the same size. If there is a way to

Heres what I have in the table:
 
htp.tableOpen('style="table-layout: fixed;" border=1 width=100% ');
 htp.tableRowOpen;  
 htp.tableHeader('CR #');
 htp.tableHeader('Off');
 htp.tableHeader('Status');
 htp.tableHeader('Planned ');
 htp.tableHeader('Work);
 htp.tableHeader('Major');
 htp.nl;
 htp.tableRowClose;

I don't know the syntax of the scripting language, but can you do something like:

htp.tableHeader('style="width:80px;" CR#');

Cd&

Unfortunately it did not make a difference. Any other suggestions? Whats with the overflow:hidden; I tried it butit didn't do anything. Hey, is there anyway to split points?

gabulish

Okay if it wants to be stubborn, maybe we have to go to the stylesheet to control it:

<style type="text/css">#box1 {position: absolute; top: 123px; width: 125px; left: 55px; border: 1px solid #000000; background-color: #6666ff; visibility:hidden; z-index:1;} th.rigid, td.rigid{width:80px;overflow:hidden;}></style>

Now for the header in the first column generate it as:

<th class="rigid">

And do the td in the first column as:

<td class="rigid">

The browser should not be able to ignore the styling delivered that way

Cd&

Splits...  A moderator will need to help you do that.  Just post a request in community support and a mod will respond.

Cd&

The <td class="rigid"> has to go in this mess of code:

     htp.tableData('<a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc='
                 ||l_userData_rec.numbersc||'"onMouseOver="show_it(this.themsg);"themsg="'||l_descrip_rec.description||'" onMouseOut="hide_it()">'
                 ||l_userData_rec.numbersc||'</a>');

and should the <th class="rigid">
be included like in this piece of code  

htp.tableOpen('th class="rigid" border=1 width=100%');

or

 htp.tableHeader('CR #', 'th class="rigid"');

Again, I don't know the syntax of that scripting, so:

Right now the header for the first comlumn is being genrated as:<TH>CR #</TH>
it needs to be generated as:<TH class="rigid">CR #</TH>

The link cell is being generated as:
<TD><a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc=13514"onMouseOver="show_it(this.themsg);" onMouseOut="hide_it()" themsg="the description for this link">13514</a></TD>
It needs to be generated as:
<TD class="rigid"><a href="CR_DETAILED_DESCRIPTION_FOR?p_numbersc=13514"onMouseOver="show_it(this.themsg);" onMouseOut="hide_it()" themsg="the description for this link">13514</a></TD>

Cd&

Ok I'll see If I can get it. I'll get back to you in a couple.

Should I be able to rezise any header and cell with that code? Because I am getting the correct code when I view the source for the page for different header and data cell and it is not resizing it.

If it should work with that could I could drive the size of the other cells hopefully shrinking the first one.

AWESOME working with COBOLdinosaur!!

Glad we could help.  Thanks for the A. :^)

Cd&