PHP/Javscript Oddly not working

smogsy · 16 Oct 2015 at 17:01

So im editing a forum theme to work slighty differently.

Added

PHP:

$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';

Then put into the global variables as inside a Function.

PHP:

if ($screenWidth > 900)
		{
			echo '

							<li class="avatar">

								<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">

									', $message['member']['avatar']['image'], '

								</a>

							</li>';
			
		}
		else
		{
			//echo'';
			//print 'Hello'.$screenWidth;
			

			
		}

Now it not working

What results am i getting?

if ($screenWidth > 900)
gives me no avaters but result of 2560
if ($screenWidth < 900)
gives me avaters but result of 2560..

if i print $screenwidth inside the function it gives me the correct value.
2560

So 2560 is greater than 900 so should show avaters.

I tried it around the other way
so 2560 < 900 & it displays afters

kitkat9933 · 16 Oct 2015 at 17:06

PHP:

<?php
if ($screenWidth > 900) 
        { 
            echo	'<li class="avatar">
						<a href="'.$scripturl.'?action=profile;u='.$message['member']['id']. '">'.$message['member']['avatar']['image'].'</a> 
					</li>'; 
             
        } 
        else 
        { 
            //echo''; 
            //print 'Hello'.$screenWidth; 
             

             
        }

smogsy · 16 Oct 2015 at 17:09

thanks for quick response which , ?

cheers!

kitkat9933 · 16 Oct 2015 at 17:12

smogsy said:
thanks for quick response which , ?

cheers!

all of them. I've pasted the code above, the only issue I can see is that you're using ',' to concatanate rather than '.' your strings together.

smogsy · 16 Oct 2015 at 17:37

seem smf does not like it

arse error: syntax error, unexpected end of file in .../Themes/Reseller/Display.template.php on line 890
881: ]
882: });';
883: }
884: }
885:
886: echo '
887: // ]]></script>';
888: }
889:
890: ?>
891:
892:

i edited line 400 lol

kaku · 17 Oct 2015 at 21:20

From what you've written, I'm pretty sure it doesn't work in the way you're expecting it to. You can't evaluate arbitrary JS inside PHP code, because the PHP code is evaluated first and then sent to the client. Once it's sent to the client, THEN the JS snippet is evaluated in the browser and it returns the screen width - PHP doesn't see this part.

Regardless, blindly trusting values from a client and using them verbatim in your server-side code is a very bad idea, since a malicious user could use it to exploit your service.

Since it's purely a display thing you're looking for (if screen width <=900px, hide avatars) this would be far better served using CSS media query:

Code:

/* when read by a "screen" class object, and the browser window is less than or equal to 900px wide */
@media screen and (max-width: 900px) {
    li.avatar { display: none; }
}

powerless · 17 Oct 2015 at 21:32

Edit: I'm a slow typer :-(

What you are trying to do will not work as PHP is server side and Javascript is client side.

$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';

With the above you are only assigning the variable $screenWidth with the value of <script>...</script>. It will not return the width as that can only be done client side.

if ($screenWidth > 900) {

$screenWidth is not an integer as you've assigned $screenWidth to be a string (the bits in between and including <script>...</script>) , but as previously stated it will not return a width as that is done client side.

So why are you seeing 2560? That's because the ELSE part of your IF statement is firing. When you uncomment it, it's actually printing the Javascript ($screenWidth). The JS is being parsed and you are seeing a value on screen; this bit is working as it should but on the client side.

You need to change your approach and use CSS with a @media rule to show and hide the <li> tag depending upon the screen width.

See: http://www.w3schools.com/css/css3_mediaqueries.asp

PHP:

Output your PHP as you would like, but give your <li> an additional class. 'avatar' could be used in a few places so other things might happen if we just target the 'avatar' class.

HTML:

Code:

<li class="avatar OCUK">
 <a>...</a>
</li>

CSS:

Code:

@media (max-width: 900px) {
    li.OCUK {
        display: none;
    }
}

When the width is <= 900 your <li> (and <a>) will not display. If the width is > 900 then they will show.

Example: https://jsfiddle.net/yrs67aoa/ (Maximise your browser and then resize and you'll see what happens. I changed the width to 400 as it's easier to see on smaller screens.)

p.s...

smogsy said:
seem smf does not like it

arse error: syntax error, unexpected end of file in

i edited line 400 lol

unexpected end of file are usually because you have a missing end curly brace.