10 Replies - 650 Views - Last Post: 30 June 2011 - 04:07 PM

#1 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Problem with Style for Pop Up

Posted 30 June 2011 - 03:25 PM

Hey DIC,

I am having a problem with my HTML/CSS/Javascript code.

In the code below the pop up loads correctly with the text "The Pop Up", however the style doesnt affect the result at all. Please help me, Do I have a problem of some sort?

 <style type="text/css">
 h1.popup { 
 color:blue;
 font-variant:small-caps;
  }
 </style>
 
</head>
<script type="text/javascript">
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
	var conts = '<h1 class="popup">The Pop Up!</h1>';
    my_window.document.write(conts);
}
</script>

<body >
<button onclick="exitpop()"type="button">Click Me!</button>
<p>Click to open page</p>
</body>


Thank You!

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with Style for Pop Up

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:27 PM

why should the CSS of the base page be applied to the popup page? they are two different HTML "files". if you want the CSS to be applied to the popup, define it inside its HTML code.

This post has been edited by Dormilich: 30 June 2011 - 03:27 PM

Was This Post Helpful? 0
  • +
  • -

#3 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:33 PM

Hey thanks but what exactly do you mean?
I also tried this, but it does not seem to work :unsure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>

 <style type="text/css">
 #popup { 
 color:blue;
 font-variant:small-caps;
  }
 </style>
 

<script type="text/javascript">
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
	var conts = '<div id="popup">The Pop Up!</div>';
    my_window.document.write(conts);
}
</script>


<button onclick="exitpop()"type="button">Click Me!</button>
<p>Click to open page</p>
</body>
</html>


This post has been edited by Yaroslav94: 30 June 2011 - 03:34 PM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:36 PM

same problem as before, the CSS is in the wrong file. you have to declare it inside the popup’s HTML.
Was This Post Helpful? 0
  • +
  • -

#5 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:38 PM

View PostDormilich, on 30 June 2011 - 04:36 PM, said:

same problem as before, the CSS is in the wrong file. you have to declare it inside the popup’s HTML.


Hey I dont understand what you mean, can you please provide with example?
They're in the same file(i dont want to have more than 1)??
PS: if this is what you mean it doesnt work
<body>
<script type="text/javascript">

 <style type="text/css">
 #popup { 
 color:blue;
 font-variant:small-caps;
  }
 </style>
 
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
	var conts = '<div id="popup">The Pop Up!</div>';
    my_window.document.write(conts);
}
</script>


<button onclick="exitpop()"type="button">Click Me!</button>
<p>Click to open page</p>
</body> 


Thank You

This post has been edited by Yaroslav94: 30 June 2011 - 03:44 PM

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:44 PM

View PostYaroslav94, on 01 July 2011 - 12:38 AM, said:

They're in the same file(i dont want to have more than 1)??

that is the misunderstanding. a popup is a separate page* and from the HTML point-of-view not related to each other in any way.


* - otherwise document.write() wouldn’t work.

try the following HTML for the popup:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>My Window</title>
		<style type="text/css">
h1.popup { 
	color: blue;
	font-variant: small-caps;
}
		</style>
	</head>
	<body>
		<h1 class="popup">The Pop Up!</h1>
	</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#7 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:53 PM

Thank You, I now understand what you were saying... However I tried this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript">

 
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
	
	var conts = ' <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>My Window</title>
		<style type="text/css">
h1.popup { 
	color: blue;
	font-variant: small-caps;
}
		</style>
	</head>
	<body>
		<h1 class="popup">The Pop Up!</h1>
	</body>
</html>'
    my_window.document.write(conts);
}
</script>

</head>
<button onclick="exitpop()"type="button">Click Me!</button>
<p>Click to open page</p>
</body>
</html>


It does not seem to do anything at all, am I missing something?

Sorry for being so annoying, I usually try to stay away from JS..
Thank You

This post has been edited by Yaroslav94: 30 June 2011 - 03:55 PM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:55 PM

View PostYaroslav94, on 01 July 2011 - 12:53 AM, said:

It does not see to do anything at all, am I missing something?

of course. Javascript strings are not multiline.
Was This Post Helpful? 1
  • +
  • -

#9 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 03:58 PM

Oh that makes sense... :oops:

Do you see anyway to fix this? The only way i see is by writing this for the variable conts:
var conts = '<p style="color:blue; font-variant:small-caps">Blablabla</p>' 
my_window.document.write(conts); 

Thanks
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,439
  • Joined: 08-June 10

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 04:01 PM

there’s a whole lot of fixes
- write it all in one line
- escape the line breaks with a backslash (not standard)
- write each line by document.write()
- concatenate each line-wise string
Was This Post Helpful? 0
  • +
  • -

#11 Yaroslav94  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 294
  • Joined: 15-July 09

Re: Problem with Style for Pop Up

Posted 30 June 2011 - 04:07 PM

Thank You,
but I think I will just stick with my original code,the one before the whole multi-line thing. ^^
For anyone who cares its
<head>
<script type="text/javascript">

 
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
	
	var conts = '<p style="color:blue; font-variant:small-caps;"> The Pop Up! </p>'
    my_window.document.write(conts);
}
</script>

</head>
<button onclick="exitpop()"type="button">Click Me!</button>
<p>Click to open page</p>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1