-2
  1  if (document.getElementById) {
  2  document.write(
  3  '<style type="text/css" media="screen">
  4  #element1, .element2 {display:none;}
  5  </style>'
  6  );
  7  }

I get "Uncaught SyntaxError: Unexpected token ILLEGAL" on line 3. This is probably soo easy for you guys, but I just started with JS and like always - it's a whole new language.

I could use 2 kinds of advice if they are different..

  1. How to use this code in file.php between < script > tags?
  2. How to use this code from seperate file.js file?

I know how to link .js, don't worry about that.

For the record, this is intended to be in < head > and to hide some html elements before they are fully loaded if Im not mistaken. Experts, feel free to confirm this or give me a better solution if there is any, thank you!

AWA
  • 436
  • 4
  • 16

2 Answers2

1

In JavaScript, strings cannot be broken up into multiple lines. The new line character is not a valid string character. You will have to close the string on each line and add the string concatenation operator after each line that is continued on the next line (or before each line that is a continuation of the previous line, like so:

if (document.getElementById)
{
    document.write(
        '<style type="text/css" media="screen">' +
        '#element1, .element2 {display:none;}'
        + '</style>');
}

This will get rid of the error, but it will not achieve the desired effect of hiding elements. document.write automatically calls document.open() if an HTML document has already been opened (which it has, if the script is executing.) document.open will wipe out the contents of the page, including the script that contains that code. You will be left with a blank page.

As @Chris says, you can include script tags in the output of a php script simply by writing the script outside of the php parsing context. i.e.

?>
<head>
<!-- other stuff -->
<script type="text/javascript">// type="text/javascript" is only needed for browser versions that do not support HTML5
// place code here
</script>
<!-- other stuff -->
</head>
<?php

On the other hand, if you wish to include a separate, external JavaScript file, replace that script tag in the code snippet above with

<script src="[absolute or relative path to script]" type="text/javascript">
</script>

Note that script tags are not self-closing, so even though this script tag has no contents, you cannot use the self closing tag syntax, as in <script ... />

As for the problem of how to handle the flickering problem, this Stack Overflow post may be helpful:

Page Transitioning - Ways to Avoid the "flicker"

Community
  • 1
  • 1
Daniel Arant
  • 483
  • 1
  • 4
  • 16
  • Thank you! Suggested link has all I've wanted. Im going to forget what I was planning to do. At least I learned about strings. If you also know anything about PHP, maybe you could have a look at: http://stackoverflow.com/questions/31988009/orderby-by-multiple-values It got barely any attention and is forgotten now.. – AWA Aug 15 '15 at 01:28
  • I would hate to actually post an answer to your other question because I know next to nothing about WordPress. Have you looked at this piece of documentation yet? [WP_Query](https://codex.wordpress.org/Class_Reference/WP_Query) – Daniel Arant Aug 15 '15 at 02:18
  • Yes, I've looked it all. Im good enough to work with WP_Query or my theme's solution separately but the problem is that Im not skilled enough to bind them somehow aka add multiple orderby feature to current solution without messing it up. Still, thank you for investigating it. I guess I have to ask again in couple of days, it's not easy to get over 20 views in this site and less views = smaller probability for solution. :P – AWA Aug 15 '15 at 02:24
-1

I'm not an expert on php, but this site says this is your basic syntax for embedded php. http://php.net/manual/en/language.basic-syntax.phpmode.php

<p>This is going to be ignored by PHP and displayed by the browser.</p>
<?php echo 'While this is going to be parsed.'; ?>
<p>This will also be ignored by PHP and displayed by the browser.</p>

Also, it looks like you probably need to escape a few things for that tag.

'<style type=\"text/css\" media=\"screen\">
#element1, .element2 {display:none;}
</style>'
Chris
  • 126
  • 1
  • 11