How can PHP access the 'style' properties of a div?

Question

So my PHP webiste generates DHTML output that looks like the following:

<div class="toggle-ctrl" onclick="toggleMenu();">
    click me to toggle menu
</div>
<div id="site-menu">
    <ul>
        <li>opt 1</li>
        <li>opt 2</li>
    </ul>
</div>
<p><a href="#">Link to Myself</a></p>

And of course, when clicked, the first div calls some JavaScript which toggles the visibility of the site-menu

function toggleMenu() {
    var navigation_pane  = document.getElementById('site-menu').style;
    if ( navigation_pane.display == 'none' )
        navigation_pane.display = 'block';
    else
        navigation_pane.display = 'none';
}

All this works fine. It's clicking on the link which is bothering me right now. Clicking it (of course) creates a new http request, and my PHP engine re-generates the page again.

The problem occurs when the visibility of the site-menu is 'none'. The PHP engine doesn't know that the menu is hidden, so it generates the same-html again, and the browser places the menu back in front of the surprised-looking user.

The question therefore, is how do I inform PHP (or how can PHP go to check) what the status of the site-menu's visibility is, before it goes to re-generate the page?

Answer 1

The question therefore, is how do I inform PHP (or how can PHP go to check) what the status of the site-menu's visibility is, before it goes to re-generate the page?

It can't. By the time the HTML is delivered to the browser, PHP is no longer in the picture. The only way you could make PHP aware of this would be to send a parameter in the URL indicating the menu is hidden, or set a cookie and have the cookie indicate visibility of the object. Then PHP can check for the presence of this value and set the visibility of the div when it renders it.

You could accomplish this in a number of ways, for example:

• Use document.cookie to set the cookie in your toggleMenu function.
• Use ajax to notify PHP in the toggleMenu function and have PHP set a cookie or session value
• Append a flag to the link indicating the visibility of the menu from the toggleMenu function.

Answer 2

There are at least two options other than sending the menu state to the PHP script.

1. Use AJAX to load just part of the page. If you don't reload the menu, you don't need to re-initialize its style. Before going down this path, examine whether AJAX is suitable. If you implement this solution, don't break browser functionality.

2. Modern browsers support a storage mechanism. Store the menu state in localStorage when it changes, and set the menu state when the page loads. To support older browsers, you can create an API that uses web storage when available and cookies when not (jQuery.Storage does this).

   Menu.js:

   /* implementation of Storage, Class and addEventListenerTo left as 
      an exercise for the reader.
   */
   var Menu = {
       init: function(id, toggleId) {
           if (! toggleId) {
               toggleId = id + '-toggle';
           }
           var toggler = document.getElementById(toggleId),
               menu = document.getElementById(id);
           menu.toggler = toggler;
           /* addEventListenerTo should call the browser-supplied event subscriber 
              method (e.g. addEventListener or attachEvent)
           */
           addEventListenerTo(toggler, 'click', 
               function(evt) {
                   Menu.toggle(id);
               });
   
           if (! Storage.exists(id+'-open')) {
               Storage.set(id+'-open', true);
           }
   
           if (Storage.get(id+'-open')) {
               Menu.open(id);
           } else {
               Menu.close(id);
           }
       },
       toggle: function(id) {
           var menu = document.getElementById(id);
           Class.toggle(menu, 'open closed');
           if (Class.has(menu, 'open')) {
               menu.toggler.firstChild.nodeValue = 'close menu';
               Storage.set(id + '-open', true);
           } else {
               menu.toggler.firstChild.nodeValue = 'open menu';
               Storage.set(id + '-open', false);
           }
       },
       setState: function (id, toAdd, toRemove) {
           var menu = document.getElementById(id);
           Class.remove(menu, toRemove);
           Class.add(menu, toAdd);
       },
       open: function(id) {
           this.setState(id, 'open', 'closed');
       },
       close: function(id) {
           this.setState(id, 'closed', 'open');
       }
   };
   

   some CSS file:

   .closed { display: none; }
   

   page:

   <div id="site-menu-toggle" class="toggle-ctrl">close menu</div>
   <div id="site-menu" class="open">
       <ul>
           <li>opt 1</li>
           <li>opt 2</li>
       </ul>
   </div>
   <p><a href="#">Link to Myself</a></p>
   
   <script type="text/javascript">
   Menu.init('site-menu');
   </script>
   

   You can play with a live version of the Menu.js approach on jsFiddle. Using jQuery, you can do away with Menu.js, resulting in a much more succinct implementation:

   <script type="text/javascript">
   $('#site-menu-toggle').click(function (evt) {
           var $menu = $('#site-menu');
           $menu.toggleClass('open close');
           $.Storage.set('site-menu-state', $menu.attr('class'));
           if ($menu.hasClass('open')) {
               $('#site-menu-toggle').text('close menu');
           } else {
               $('#site-menu-toggle').text('open menu');
           }
       });
   $(function() {
       var state = $.Storage.get('site-menu-state');
       if (! state) {
           $.Storage.set('site-menu-state', $('#site-menu').attr('class'));
       } else {
           $('#site-menu').attr('class', state);
       }
   });
   </script>
   

   There's a jFiddle for the jQuery menu state implementation that you can play with.

Since differences in the menu state don't conceptually make for different resources, it doesn't matter whether having the menu open or closed is bookmarkable or affected by history.

NB. don't use the text "click me", it's too verbose and redundant (what other action is there? Affordances should be implicit.). Instead, you can use a graphic to indicate open/close, or simply say "open menu"/"close menu".

Answer 3

In addition to drew010's suggestions: You could also create a form with a hidden input element named, let's say, 'menu_status' whose value gets set by toggleMenu(). Then when you click on your link, use javascript to POST or GET the form. Then you read the value server-side with php using either $_POST["menu_status"] or $_GET["menu_status"], depending on the form method.

UPDATE: Something like this:

<form name="session_form" action="" method="POST">
    <input type="hidden" name="menu_state" value="block">
</form>

<?php $menu_state = isset($_POST["menu_state"]) ? $_POST["menu_state"] : "block"; ?>

<div id="site-menu" style="display:<?php echo $menu_state; ?>">
<ul>
    <li>opt 1</li>
    <li>opt 2</li>
</ul>
</div>

<p><a href="#" onClick="document.forms.session_form.submit();return false;">Link to Myself</a></p>

function toggleMenu() {
    var navigation_pane  = document.getElementById('site-menu').style;
    if ( navigation_pane.display == 'none' )
        navigation_pane.display = 'block';
    else
        navigation_pane.display = 'none';
    document.forms.session_form.menu_state.value = navigation_pane.display;
}

EDIT: Using jQuery ajax could involve something like this:

<div class="toggle-ctrl">click me to toggle menu</div>

<?php $menu_state = isset($_POST["menu_state"]) ? $_POST["menu_state"] : "block"; ?>

<div id="site-menu" style="display:<?php echo $menu_state; ?>">
<ul>
    <li>opt 1</li>
    <li>opt 2</li>
</ul>
</div>

<p><a href="#" id="go">Link to Myself</a></p>

$("div.toggle-ctrl").click(function(){
    $("#site-menu").toggle();
});

$("#go").click(function(e) {
    e.preventDefault();
    var menu_state = $("#site-menu").css("display");
    $.post("", {menu_state:menu_state}, function (response) {
        $("html").html(response);
    });
});

Or without using ajax or a form, just append a parameter to the link and use $_GET instead of $_POST in your php:

$("#go").click(function(e) {
    e.preventDefault();
    var menu_state = $("#site-menu").css("display");
    document.location.href = "index.php?menu_state=" + menu_state;
});

This seems to me the simplest solution.

Answer 4

Actually, there are several types of answers to your question.

While it may sound there's no way to do what you want, there are, in fact, many ways.

Cookies

The obvious. Cookies can be accessed by javascript as well as PHP. Just modify the cookie whenever the menu is shown/hidden through javascript (there's the excellent jQuery cookie plugin).

Form input

If you are submitting a form, simply have a hidden input keep the value of the menu's visibility:

<input type="hidden" name="menu-visibility" value="0"/>

Again, you need javascript to keep this input updated.

Update relevant parts of the page

This is the hip & leet new trend. Well, actually, it's been there for some 6 years or so. Basically, don't submit anything and don't reload the page. Update the parts of the page that actually need updating, through AJAX.

Local Storage

As @outis mentioned, today browsers have something similar to cookies, except they keep it for themselves (hence locally). It's a pretty new feature, to be honest, I wouldn't trust it considering there are better ways to accomplish what you need.

Answer 5

I know it's not cool to answer your own question, but another possible solution occurred to me last night, and it only requires 1 new line of code to be written (sort of).

The first part of the solution has already been implicitly suggested by many of you. Modify the JavaScript to write to a cookie:

function toggleMenu() {
    var navigation_pane  = document.getElementById('site-menu').style;
    if ( navigation_pane.display == 'none' )
        navigation_pane.display = 'block';
    else
        navigation_pane.display = 'none';
    document.cookie = "menu_vis=" + navigation_pane.display; // +1 line of code
}

Now, what are the possibilities if your CSS file just so happens to be a PHP file in disguise? my_css.php would look something like this:

<?php
header("Content-type: text/css");
?>
#site-menu {
    display: <?php echo isset($_COOKIE['menu_vis']) ? $_COOKIE['menu_vis'] : 'block'; ?>;  /* line of code modified, but not added! */
}

Tested this morning, and it works.

I find it a neat solution, because it means that I don't have to bend my PHP or HTML design around any presentational concerns.

-- I appreciate that there are more "encompassing" solutions out there. If I was a better JavaScript developer, (or made use of jQuery or the like), I could build more complicated classes which could then be applied more generally to other HTML elements. I may come back to investigate such solutions later, but that's just not where my project is at the moment.

Thank you everyone for all your replies. I wouldn't have found this solution without bouncing these ideas off you guys.