PHP页面没有使用visibility：none或display：none隐藏DIV

Question

A PHP page I am working on can be loaded in several states, in the default state I need one DIV layer to be visible and another one to not be visible - and vice versa. The script has javascript backup to do the same things, BUT I need the css to work for persons viewing the page with javascript disabled.

The code for the first DIV works fine:

<pre><</pre>div name="MoreDiv" ID="MoreDiv" style="position: absolute;top: 10px; left: 15px;  width: 95%; font-size:1.3em; 
<?php
if(isset($_GET['page']))
{
$ipi = getenv("REMOTE_ADDR");
$u = getenv ("HTTP_REFERER");
$httpagenti = getenv ("HTTP_USER_AGENT");

$page = $_GET['page'];
switch($page)
{
case 404:
{echo '';
break;}

default:
{ ?>

<?php }

break;}
} 
else { //
?>visibility:none; display:none;<?php }
?>">

... So you'd think that for the other DIV, that needs to be hidden when the ?page variable is set in the URL, putting the "visibility:none; display:none;" attributes inside the default for the php output would work - a bit like this:

div name="PhotoText" ID="PhotoText" style="position: absolute;top: 15px; left: 15px; width: 400px; font-size:1.3em; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding:10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; <?php
if(isset($_GET['page']))
{$page = $_GET['page'];
switch($page)
{
case "test":
{?>
visibility:none; display:none;

<?php
break;}

default:
{ ?>
visibility:none; display:none;

<?php }

break;}
}   

else { //
?><?php }
?>">

And yet for some strange and really bizarre reason the DIV STILL SHOWS!... and it stays visible until the page has fully loaded and the javascript within the "body onload" tag kicks in to hide it. I cannot use the PHP to keep the DIV layer blank for the default URL variable, as there are javascript links which require it to be there in order to load content.... so I need a non-JS way of hiding this layer, but in such a way that JS can be used to make it visible again!!

Answer 1

There's really several ways of accomplishing this. First of all, never, ever, interpolate an if and a switch type of logic within an attribute's value as you have it in your question. Recipe, meet disaster.

On the visibility vs display question, this QA actually depicts it pretty well:

http://webdesign.about.com/od/css/f/blfaqhidden.htm

More or less, visibility still maintains it's "space" in the flow of the document, whereas display affects it's flow (including removing it entirely). Easy to mix up, totally different concepts.

Here's a demo, and the source markup and CSS.

<div id="wrapper">
    <div id="novisibility" class="test">
        <p>Visiblity<br>Will you see me?<br>Will I still be "there"?</p>
    </div>
    <div id="nodisplay" class="test">
        <p>Block<br>Will you see me?<br>Will I disappear?</p>
    </div>
    <p id="buttons">
        <button type="button" id="visibility">Toggle Visibility</button>
        <button type="button" id="display">Toggle Display</button>
    </p>
</div>

#wrapper.hide #nodisplay {
    display: none;
}
#wrapper.invisible #novisibility {
    visibility: hidden;
}

The Javascript is toggling the .hide and .novisibility classes on the #wrapper.

I would suggest a template pattern, where you separate the logic from the markup/display layer. For instance:

page.php

<?php

// ... other stuff

if (isset($_GET['page'])) {
    $page = $_GET['page'];

    switch($page) {
        case "test":
           $cls = " NoDisplay";
        break;
        default:
           $cls = " Highlight";
        break;
    }
}

// ... other stuff

?>

Where you hae this defined in your CSS (not in a style attribute if you can help it):

/assets/css/site.css

.PhototextContent.NoDisplay {
    display: none;
}
.PhototextContent.Highlight {
    background: yellow;
    display: block;
}

docPagePhotoInline.tpl

<!-- Other photo stuff, I presume. -->
<div id="PhotoText" class="PhotoTextContent<?php echo $cls; ?>">Your content</div>

I also wonder if you're reusing that id value; you should (can) only have one unique id per page. If you need something to cover several elements, use class names to group elements by class. Also note, name in divs are still valid I think, but rarely used by anyone. Use id to uniquely identify an element.

So which do you think is easier to read? I don't think it's hard to see what I'm up to here, but it takes a double look with what you've got, followed by some head-scratching. Your code should be expressive of intent; code that feels well-tended and that feels right when you look at it isn't always great code, but inelegant, whiplash formatting is often an indicator the code could be problematic. Think of it like a garden; a well tended and organized garden is much more appealing than one that's, well, not.

So I'd implement at least a basic templating approach. There's several decent tutorials out there, like this one. I'd like to try out Mustache for PHP soon, but there's others like Smarty, Flexy, Twig, and Dwoo. Keep in mind PHP itself may be used as a templating system, and most template system compile the templates into PHP or bytecode. You just need to be careful to separate the logic from the view or display layer.

You should pair them with an approach, though, so I'd suggest a framework using the MVC pattern. There's a lot out there, like CodeIgniter, TinyMVC, Kohana, Cake, etc. This looks reasonable:

http://phpsavant.com/

Try not to hang out there on your own too much, though.