Set a PHP variable from Javascript and read in from a <style> [duplicate]

Question

I would just like my CSS Style to read a variable from Javascript and set the CSS "top" value accordingly. Example:

$topPosition = false;
?>
<script language='JavaScript' type='text/javascript'>
    function windowsHeightPixels() {
        windowsHeight = $(window).height()
        if (windowsHeight > 750) {
           topPosition = false;
           //set the $topPosition = false;
        }
        else {
            topPosition = true;
            //set the $topPosition = true;            
        }
    }
    windowsHeightPixels();
    alert ("Height is " + windowsHeight + " Top Position is " + topPosition); 
</script>

<style>
...
#fixedbutton {
    position: fixed;
    <?php if ($topPosition === false) : ?> top: 650px;
    <?php else : ?> top: 127px;</p>
    <?php endif; ?>
    ...
}
</style>

you may take a look this link stackoverflow.com/questions/5338972/… — user1937699
– user1937699, Commented Apr 29, 2016 at 2:12

SimianAngel · Accepted Answer · 2016-04-29 04:37:54Z

1

Edit: Refactored to check the window height on page load.

Here's a slightly different approach that you may wish to consider. It doesn't require a PHP variable. Judging by the sample code you provided I'm assuming that you're using jQuery.

<script>
    function windowHeightThreshold() {
        var heightThreshold = 750;
        return $(window).height() > heightThreshold;
    }
    function checkWindowHeight() {
        var targetElement = $('#fixedbutton');
        if (windowHeightThreshold()) {
            targetElement.addClass("windowHeightThreshold");
        } else {
            targetElement.removeClass("windowHeightThreshold");
        }
    }

    $(window).on("resize", function() {
        checkWindowHeight();
    });           
    $(document).ready(function() {
        checkWindowHeight();
    });
</script>

Then, for your CSS:

<style>
    #fixedbutton {
        position: fixed;
        top: 127px;
    }
    #fixedbutton.windowHeightThreshold {
        top: 650px;
    }
</style>

edited Apr 29, 2016 at 4:37

answered Apr 29, 2016 at 2:29

SimianAngel

62910 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Brooks Over a year ago

Thank for your answer - it is very close. When zooming the page it is put in the correct positions. Zoom at> 149% moves the fixed button. When I refresh the page it is reset to the default position, Always the same position no matter the zoom level.

Peter Brooks Over a year ago

Now works well. Thank you.

Collectives™ on Stack Overflow

Set a PHP variable from Javascript and read in from a <style> [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related