Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

window.createPopup() + CSS Properties

Status
Not open for further replies.
RhythmAddict112

RhythmAddict112

Programmer
Jun 17, 2004
625
US
Good Afternoon,
Quick question...I'm using window.createPopup() in the following manner.

Code: 
 var oPopBody = oPopup.document.body;
 oPopBody.innerHTML = "<DIV>" + vText + "</DIV>";
 oPopBody.style.border = "solid black 1px";

My question is the following, is there a way for me to assign the DIV a CSS class upon creation? If not, does anyone have a link to that provides all the CSS properties I can set upon the DIV's creation? Thanks!


 
Sort by date Sort by votes
without knowing the functionality behind "createPopup()", why not just do this:

Code: 
 oPopBody.innerHTML = "<DIV class='myClass'>" + vText + "</DIV>";



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
What's up clFlava?
Should have mentioned, that's the first thing I tried...I couldn't get it to work...Unless there is an error in the below code...

Code: 
<html>
<head>
<title>Pop-up Link with Description</title>
<style type="text/css">
	.transparent {
		filter:alpha(opacity=90);
		background-color:green;
		display:none;
		width:170;
		height:100;
		position:absolute;
		color: white;
		border: 1 green solid;
	}
</style>
<script>
var oPopup = window.createPopup();

function openPopup(vTitle,vText)
    {
       var oPopBody = oPopup.document.body;
       oPopBody.innerHTML = "<DIV class='transparent'></div>" + vText + "</DIV>";
       oPopBody.style.backgroundColor = "#CCCCCC";
       oPopBody.style.border = "solid black 1px";
       oPopup.show(250, 120, 150, 50, document.body);
    }
</script>
</head>

<body bgcolor="#000000" text="#FFFFFF">
 

    <a href="" onMouseOver="openPopup('vTitle','vText')"   >Move the mouse over here</a><br>
</body>
</html>

 
Upvote 0 Downvote
RhythmAddict, it seems that the createPopup method creates a completely seperate beast from the rest of the markup. You are allowed to put markup in popup, but only some of it works. For instance, sticking a link to google in the popup creates what looks like a link, but does nothing when it is clicked. That said, I was able to apply some of your styles by putting them inline on the div:
Code: 
<html>
<head>
<title>Pop-up Link with Description</title>
<script>
var oPopup = window.createPopup();

function openPopup(vTitle,vText)
    {
       var oPopBody = oPopup.document.body;
       oPopBody.innerHTML = '<div [!]style="background-color:green; width:170; height:100; color:white; border:1px green solid;">[/!]' + vText + '</div>';
       oPopBody.style.backgroundColor = "#CCCCCC";
       oPopBody.style.border = "solid black 1px";
       oPopup.show(250, 120, 500, 500, document.body);
    }
</script>
</head>

<body bgcolor="#000000" text="#FFFFFF">
 

    <a href="" onMouseOver="openPopup('vTitle','vText')"   >Move the mouse over here</a><br>
</body>
</html>

The opacity did not work. The display:none worked, but I'm not sure why you'd want it to be invisible so it was removed. Additionally, I took out the absolute positioning.

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote
worked for me - although you have a superfluous </div> tag in there...

Code: 
oPopBody.innerHTML = "<DIV class='transparent'>[red]</div>[/red]" + vText + "</DIV>";



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
ok, so now i know that createPopup is an IE function! most likely, this cannot work because your popup window is its own html document.

because of this, you would need to add the CSS to the popup's html.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
good idea. just remember to use units (pixels) in that css, and to order the border properties appropriately...

Code: 
 oPopBody.innerHTML = '<div style="background-color:green; width:170[red]px[/red]; height:100[red]px[/red]; color:white; border:1px [red]solid green[/red];">' + vText + '</div>';



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

javierdlm001
  • Locked
  • Question
Can JS &amp; CSS code located remotely run locally? 1
Replies
2
Views
241
javierdlm001
javierdlm001
GRIFFIJ
  • Locked
  • Question
Javascript and CSS 1
Replies
2
Views
154
vacunita
vacunita
1DMF
  • Locked
  • Question
jQuery .each css not working IE10?
Replies
13
Views
316
1DMF
1DMF
happyBanana
  • Locked
  • Question
EXTRACTING CSS DIMENSIONAL PROPERTIES 1
Replies
2
Views
122
vacunita
vacunita
SBonfiglio
  • Locked
  • Question
Weird behaviours of Javascript in changing CSS on value
Replies
2
Views
127
jpadie
jpadie

Part and Inventory Search

Sponsor

Back
Top