I am trying to have the active page number highlighted, but having no success in getting to work. Can anyone help please.
this is the CSS for the pagination
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .5s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
This the pagination code :
<div class="pagination">
<?php
$get = $_GET;
$current_page = isset($get['page'])?$get['page'] : 1;
for($i=1;$i<=$tpages;$i++) {
$get['page'] = $i; // set the page parameter
$qs = http_build_query($get,'','&');
if($i==$current_page) {
echo "current_page $current_page <br />";
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
}else{
$pagLink .= "<a href='despatchdata_results.php?$qs'>$i</a>";
}
?>
</div>
This
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
is malformed.
Your active style applies to the a element (a inherits the active class, as you can see in the CSS definition of the style a.active)
Try this:
$pagLink .= "<a class='active' href='despatchdata_results.php?$qs'>$i</a>";
and let me know if it solves it
Try putting the class name inside of the a tag, for example;
<a class=“classname”>Link text</a>
Your CSS does not match your generated HTML, also your HTML is not valid:
.pagination .active a {
background-color: dodgerblue;
color: white;
}
.pagination div:not(.active) a:hover {background-color: #ddd;}
and update your generated HTML with:
$pagLink .= "<div class='active'><a href='despatchdata_results.php?$qs'>$i</a></div>";
Related
I have set up an accordion to present terms and conditions on a website which works until I attempt to pull a page from elsewhere on the server.
My coding so far is as follows:
CSS:
/* Accordion controls & Styles */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
Accordion:
<button class="accordion">Standard Terms</button>
<div class="panel">
<p>
<?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?>
</p>
</div>
and JavaScript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Standard terms page to render:
<?php include(SHARED_PATH . '/public_header.php'); ?>
<ol>
<h3><li>What we provide</li></h3>
</ol>
<?php include(SHARED_PATH . '/public_footer.php');?>
Everything works as it should until I put the <?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?> in if I remove it and place outside of accordion it renders fine and displays the content.
Only inside accordion does it stop everything in its tracks.
It doesn't render the rest of the page, and no errors are thrown.
Any Ideas?
Sorry found the answer, realised my mistake after posting the standard terms page. header and footer have already been called by previous page.
I'm looking at building a dynamic navigation something that looks similar to that in w3schools (I don't have enough points to be able to embed images yet so stuck with links only for now):
These will be based off the following PHP table:
enter image description here
Where parent_id and child_id are 0 I want those pages to be the main navigation selections, so in this case I'm looking to have DMX, VMAX, VMAX3, VMAX AF and PowerMax to show on the navigation bar.
After that the idea is to list the models of each product, however this is only to appear when the user is hovering over one of the main selections, the parent_id is to equal the id of the page.
Finally when you hover over the result of the parent_id you will get the child_id, this will be decided by the child_id equaling the parent_id.
The functions I'm calling in my code is:
function loop_array($array = array(), $parent_id = 0){
if(!empty($array[$parent_id])){
echo '<ul>';
foreach($array[$parent_id] as $items){
echo '<li>';
?>
<?php echo $items["title"] ?>
<?php loop_array($array, $items['id']);echo '<br><br><br><br>';
}
echo '</ul>';
}
}
function display_menus(){
$con = mysqli_connect("localhost", "root", "", "solvedesktop");
$query = $con->query("SELECT * FROM pages WHERE published = 1");
$array = array();
if(mysqli_num_rows($query)){
while($rows = mysqli_fetch_array($query)){
$array[$rows['parent_id']][] = $rows;
}
loop_array($array);
}
}
The code I'm using on the home page is:
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
<?php display_menus(); ?>
</div>
<div>
<?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
CKEDITOR.replace( 'body' );
</script>
The CSS I currently have is:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
So basically I can't get further than the below image when trying to build the navigation bar:
enter image description here
I can get the main sections such as DMX, VMAX, VMAX3, VMAX AF and PowerMax to populate correctly. However it's not showing in one horizontal line and the parent_ids show only appear if the user hovers over the main section.
Any help would be gratefully appreciated :)
Here the problem is with CSS just add some max-width to menu items.
by this solved or not let me know.
I am currently putting together a website, i have included a dynamic navigation bar developed purely in PHP with my basic ability.
However, using Chrome Dev Tool, i managed to obtain the style i wanted (on current page highlight the page name in white on navigation) , when including the style into my css file, the webpage would not show the style.
<?php
function outputHeader ($title){
echo '<!DOCTYPE html>';
echo '<html>';
echo '<head>';
echo '<title>' . $title . '</title>';
echo '<link rel="stylesheet" type="text/css" href="style.css">';
echo '</head>';
echo '<body>';
}
//Output Navigation
echo '<div id="banner">';
echo '<div id="nav">';
echo '<ul>';
function generateNav($pagename){
$page = array('index.php?' => 'Home', 'playerranking.php?' => 'Player Ranking', 'community.php?' => 'Community', 'register.php?' => 'Register','login.php' => 'Login',
);
foreach ($page as $link => $label){
if ($pagename == $label){
echo '<li><a class="current" href="' . $link . '">' . $label . '</li></a>';
}
else {
echo '<li>' . $label . '</li>';
}
}
echo '</ul>';
echo '</div>';
echo '</div>';
} >?
The css below
body {
background: #000;
margin: 0px;
}
#banner {
height: 109px;
width: 1295px;
background: #1d1d33;
margin-right: auto;
margin-left: auto;
}
#nav {
margin-right: 10%;
}
#nav ul {
overflow: visible;
text-decoration: none;
float: right;
}
#nav li {
display: inline;
font-family: Calibri, sans-serif;
font-size: 15px;
margin-top: 8%;
float: left;
padding-right: 30px;
list-style-type: none;
overflow: visible;
}
a#current {
color: #white;
}
#nav a {
text-decoration: none;
color: #8f8fa7;
}
From what i could see there was no two styles which were over-riding.
Help will be much appreciated
Thank you !
change
a#current {
color: #white;
}
to
#nav a.current {
color: white;
}
explanation:
# is the selector for id attributes, but you want to select the class "current". Class names are selected by .. Also, when using named colour values, don't prefix them with # - you only need the hash for hexadecimal rgb values.
In addition to all that, you have to add #nav in front of the rule so that it is more specific than the general rule #nav a. (You should also read up on CSS specificity in general)
I am trying to get my horizontal navigation bar to stick to the top of my screen. The problem is that if I set top to 0, the menu sticks to the top but the initial menu item gets overshadowed when you hover over it. When you take top out, the hover effect resumes to normal but the menu is no longer set to the top edge. What I have tried is messing with position as well as the hover options.
.nav ul {
list-style: block;
background-color: black;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
top: 0;
text-align: center;
font-size: 110%;
}
.nav > ul > li {
text-align: center;
}
.nav li {
text-align: center;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
.nav li li {
font-size: .6em;
}
.nav li ul {
display: none;
position: absolute;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav > ul > li > a {
padding-left: 0;
}
demo: https://jsfiddle.net/dkgj8s7r/
The .nav and ul elements are already aligned to the top of the screen. The problem is the block of php-generated code in the last list item creating a height that pushes the links down to the bottom.
I'm not sure what you want to do with that code, but you may want to put it somewhere else.
If you remove the PHP list item the horizontal menu bar seems to work fine.
<li>
<?php
session_start();
if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
{
// echo "<div id='nobrk'>" . $_SESSION['username'] . " is logged in
<a href='logout.php'>Log out</a><div>";
echo "<a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a>";
echo "<ul><li><a href='logout.php'> Log out</a></li><ul>";
}
else
{
echo "<a href='login.php'> Log in</a></li>";
}
// echo $_SESSION['loginstatus'] . $_SESSION['username'];
//the alternative is to simply change the name of the index.
//the problem is if it isnt created at all, it'll still give me an error
?></li>
DEMO: https://jsfiddle.net/dkgj8s7r/1/
I am just learning web dev. I am using php in my menus. I am doing this so my users information is displayed when the user is logged in, within the menu itself. I do this with the Session super global array variables. For any of the two different kind of users that login, these variables store whether they are logged in and what their name is. This way the menu can react to adding them to the menu. My issue is that it seems that by simply using php drags my horizontal to the next level, or what I have seen people call "stepdown".
I have a jfiddle of the same sort of information running without php.
Without php, no step down:
https://jsfiddle.net/bx1jsnoL/
Stepdown looks like this on my side, which has php code echoing html code:
Here is my php on my side:
<!DOCTYPE html>
<div class="nav">
<ul>
<li>Home </li>
<li>Dates </li>
<li><a><i>Information </i></a>
<ul>
<li>About the conference</li>
<li>Conference Fee</li>
<li>Hotel Information</li>
<li>Conference Registration</li>
<li>Conference Program</li>
<li>Guidelines</li>
<li>Keynote Speakers</li>
<li>Call for Paper</li>
<li>Major Areas</li>
</ul>
</li>
<li>Comments </li>
<?php
session_start();
if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
{
echo "<li><a id='orange'><i><b>Reviewer<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a></li>";
echo "<li><a href='logout.php'> Log out</a></li><li><a href='reviewerregister.php'>Registration</a></li>
<li><a href='submission.php'>Paper</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Reviewers </i></a>
<ul>
<li><a href='login.php'> Log in</a></li>
<li><a href='reviewerregister.php'>Reviewer Registration</a></li>
<li><a href='submission.php'>Paper Submission</a></li>
</ul>
";
}
?>
</li>
<?php
session_start();
if(isset($_SESSION['adminstatus']) && $_SESSION['adminstatus']==true)
{
echo "<li><a id='orange'><i><b>Admin<b></i></a><ul>";
echo "<li><a id='orange'><i><b>" . $_SESSION['adminname'] . "<b></i></a></li>";
echo "<li><a href='logout.php'>Log out</a></li>
<li><a href='admindbmanagement.php'>Management</a></li>
</ul></li>";
}
else
{
echo "
<li><a><i>Admin </i></a>
<ul>
<li><a href='adminlogin.php'> Log in</a></li>
</ul>
";
}
?>
</ul>
</div>
Here is my css, it is included in the jfiddle but the editor here won't let me get away without any code:
table, th, td
{
border:1px solid #99d9f4;
color: white;
text-align: center;
}
form, table
{
text-align: center;
margin-left:auto;
margin-right:auto;
}
td
{
padding: 10px;
}
#orange
{
color:orange;
}
th
{
/* background-color:#99d9f4; nothing happens
color:white;*/
}
.enlarge:hover
{
transform:scale(2,2);
transform-origin:0 0;
}
#dates li
{
margin: 10px 0;
}
h1
{
/* text-decoration: underline;
*/ text-transform: capitalize;
text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000;
color: white;
}
p, h2, h3, h4, h5, h6
{
color:white;
}
* {
font-family: Georgia, serif, Arial;
}
/* this addresses all text
*/
input[type="submit"]
{
background:green;
color: white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="file"]
{
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
input[type="reset"]
{
background:red;
color:white;
height: 1.01 em;
width: 1.01 em;
font-size: 110%;
}
body
{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
margin: 0;
text-align: center;
}
input
{
color: black;
}
textarea
{
color: black;
}
/* line-height 0 gives some odd text */
.nav ul {
list-style: block;
background-color: black;
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
font-size: 110%;
}
.nav > ul > li {
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/*submenus */
.nav li li {
font-size: .6em;
}
.nav li ul {
display: none;
position: absolute;
width: inherit;
}
ul.menu li
{
display:inline;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav > ul > li > a {
padding-left: 0;
}
/* 650px screens */
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
line-height: 50px;
font-size: 1.0em;
display: inline-block;
}
It looks like that because your PHP isn't being interpreted as PHP; it's being interpreted as (broken) HTML. Running PHP code (and avoiding having it rendered as HTML) requires a server running PHP, the software.
jsFiddle doesn't run PHP code, so you can't test PHP on there. You can only test HTML, CSS, and JavaScript.
EDIT: based on your edits to the question and your comments below, the problem is that you are calling session_start() twice. The resulting error is triggering output that is breaking your layout.