Hi,
I’ve written a top level page on which I’ve a menu which toggles using JS. This works fine. However, applying the same logic to a subpage doesn’t work. Am I missing something to do with inheritance? Both pages use exactly the same CSS, and the same JS script for toggling the menu. I’ve provided a link to the code on the subpage, and the css and js.
In a nutshell:
1.At the top level, the menu is initially hidden. Activating the toggle menu button activates it, and I’m able to select a subpage. I’d thought that the menu on this subpage would initially be hidden, given the specified class in my subpage, but it isn’t, and toggling the menu does nothing.
I’m not hopeful, as there’s a lot of code here, but I’ve included all relevant parts.
Thanks.
I don’t do php but I’ve reduced the html to just the two divs which are the menu toggle and the sidebar which seem to be the elements that you are toggling.
They seem to work as they are so I’m not quite understanding what I’ve missed
(If the php was important to this demo them post the html from view source in the browser and that will show just the html that is available).
echo '<div id="content"';
You seem to have forgotten the > on this tag. The browser will probably auto-recover from this, but its a note.
This line in the menu bit is superfluous:
if (isset($_SESSION["logged_in"]) and $_SESSION['logged_in']==TRUE) {
You already do that check further up the page, and if it was false, sent a header
redirecting the user, so it would never get to this line if this were not true.
Your script tries to define elSidebar
before the code that puts the sidebar into the DOM. That wont work. (Remember, I said order matters…)
<script src="js/togglemenu.js" </script> <--tries to define elSidebar.
<?php
// menu
if (isset($_SESSION["logged_in"]) and $_SESSION['logged_in']==TRUE) {
echo '<div id="sidebar" class="hidden">'; <--div with id "sidebar" does not exist until this point.
Hmm, I see what you mean. So where can I position the definition of the script?
As it is, I put the definition at the end of the body.
Answering Paul’s poiint, using a screen reader, I’m not entirely familiar with how I can render the source correctly within SitePoint. There seem to be accessibility issues around editing and marking code etc.
Having said that, I am grateful for your input.
As a supmementary question, how come toggling the sidebar works in the top level page, but not in this one?
Anywhere after the definition of the thing(s) that it relies upon.
If your webpage is a recipe, you’re currently telling it:
1. Turn the oven on to 400.
2. Put the tin in the oven and do not open it again for 1 hour.
3. Put the batter in the tin.
4. Prepare the frosting.
Step 2 cant come before step 3; but it could come before or after step 4, as long as it comes after step 3, it doesnt really matter.
Without being able to see the two pages to make a comparison, i would only be guessing. something must be different.
Yes, I get that, but the definition of the script is right down at the bottom of the body. Maybe down to my ignorance as to how the dom is built.
Thanks for your patience…
well it’s not in the codepen you showed us.
This is why it would be better to see it in-situ…
OK, here is a cut down version of the page. I was hoping that this would work, but it doesn’t.
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="wvv_grid.css" type="text/css">
<title>
Wye Valley Volunteers - Equipment Allocation/Return
</title>
</head>
<BODY>
<div id="body">
<?php
if (isset($_SESSION["logged_in"]) and $_SESSION["logged_in"] == true) {
echo '<div id="menubtn">';
echo '<button id="Button" type="button">Toggle menu</button>';
echo '</div>';
echo '<div id="header">';
echo '<h1>' . $_SESSION["out"] . '</h1>';
echo '</div';
require "menu.php";
}
echo '<div id="footer">© 2024 Wye Valley Volunteers - V0.1</div>';
?>
</div>
<script src="js/togglemenu.js"></script>
</body>
The only include/require is the menu as shown in a previous post.
Thank you.
menu.php, i presume, contains only thus:
<?php
// menu
if (isset($_SESSION["logged_in"]) and $_SESSION['logged_in']==TRUE) {
echo '<div id="sidebar" class="hidden">';
echo '<ul>';
echo '<li><a href="index.php" target="_self">Home page</a></li>';
if ($_SESSION["u_type"]>1)
{
echo '<li><a href="unalrequests.php" target="_self">Change request status</a></li>';
}
if ($_SESSION["u_type"]>2)
{
echo '<li><a href="createrequest.php" target="_self">Create Request</a></li>';
echo '<li><a href="approveallocation.php" target="_self">Approve Driver Allocation</a></li>';
echo '<li><a href="maintusers.php" target="_self">Maintain Users</a></li>';
echo '<li><a href="allequipment.php" target="_self">Allocate/Return Equipment</a></li>';
}
if ($_SESSION["u_type"]>3)
{
echo '<li><a href="maintainplaces.php" target="_self">Maintain Places</a></li>';
echo '<li><a href="maintainequipment.php" target="_self">Maintain Equipment</a></li>';
}
echo '<li><a href="logout.php" target="_self">Log out</a></li>';
}
echo '</ul>';
echo '</div>';
?>
In which case my first response is that you’ve got the final } in the wrong place, it should come after the last two echo statements. (That’s not the solution to the problem, just an observation.)
This cut down page doesnt check if $_SESSION[“logged_in”] is true or not; so if it’s not, then menu.php wont put the menu into the DOM.
Have you checked to make sure the menu is in the DOM?
What does your Javascript console tell you?
I got it working by copying the index page, and inserting the relevant subpage code. Not happy about this, as whilst it works, I’m not entirely sure why it didn’t.
Many thanks for all your helpful suggestions.