Jump to content

How to reference the id of the body tag


Go to solution Solved by requinix,

Recommended Posts

I have a rudimentary grasp of php. Enough to do basic website templating and I am slowly learning the language, so I apologise if this is an exteremely stupid question.

 

In php how would one refer to the body tag id in order to assign a class to an li in the menu for example?

eg:

<nav>
<ul id="menu">
<li>
<a href="/index" class="<?php if(body id="home"){echo "active"} ?> ">Home</a>
</li>
</ul>
</nav>

Edited by GregFrey
Link to comment
https://forums.phpfreaks.com/topic/302443-how-to-reference-the-id-of-the-body-tag/
Share on other sites

Thank you for your reply Barand. I did try that and under normal circumstances it would have worked but for some reason fullpage.js strips the active class out of the menu as soon as the page scrolls. So I was hoping for a php solution which would bypass the jquery.

php only knows the information that it receives from the http(s) request. your php 'page control' logic would determine what page is being produced for any request. the navigation logic would use that value, in a php variable, to determine what to produce in the markup.

If you're taking the approach of putting an ID on the body then you can do everything with pure CSS.

<body id="home">
<ul id="menu">
	<li id="menu-home">
		<a href="/index">Home</a>
	</li>
</ul>
/* something along the lines of */
body#home #menu #menu-home a,
body#foo #menu #menu-foo a,
body#bar #menu #menu-bar a {
	whatever;
}

Thanks mac_guyver and requinix.

@requinix the problem is that the menu is being pulled via a php include, so as there are no if statements in css  i cannot specify that on <body id="home"> the "nav li.home a" be assigned a class of 'active'.

 

Jquery is the obvious answer to the problem of course, but the active class is being stripped from the nav as soon as the page scrolls, as outlined above.

 

In any case may thanks for the insights and proposals of everyone who has replied.

  • Solution

@requinix the problem is that the menu is being pulled via a php include, so as there are no if statements in css  i cannot specify that on

the "nav li.home a" be assigned a class of 'active'.
1. The PHP is irrelevant. Only the HTML it outputs matters.

2. Actually it kinda does. Those three selectors are all essentially "if"s: if this matches, or if that matches, or if the other one matches, then...

I'm still not sure if you've actually understood the PHP workflow.

 

When you're running your PHP script, you know what page you're on -- otherwise you wouldn't be able to assign an ID to the body element. So just like you assign the ID based on the page, you can generate a class attribute based on the page:

<?php

$page = ...; // However this is determined

?>
...
<body id="<?= html_escape($page) ?>">
    <ul>
        <li class="<?= ($page == 'home' ? 'active' : '') ?>">Home</li>
    </ul>
</body>

@Jacques1: Yes as I say my knowledge is very limited.

 

When you say "// However this is determined" you are saying it could a url? Or what other factors could determine it? 

Your solution looks very much like what I was originally trying to achieve. 

When you say "// However this is determined" you are saying it could a url? Or what other factors could determine it?

 

I don't know how you've organized your pages, but you should. If there's a separate script for every page, you can hard-code the $page variable. If there's a single script which receives the target page through a URL parameter, you fill $page with that parameter. Like I said, it depends on how you've organized your application -- there are countless variations.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.