I have a problem with my selected menu in my php script.
When i am clicking on one of my menu options it wont set the li class to selected.
Im searching for hours now and still i can not find it. Thanks in forehand for the help!!
Here the PHP code :
private $selectedmenu = '';
public function set_selectedmenu($set_selectedmenu) {
$this->selectedmenu = $set_selectedmenu;
}
public function html() {
$html_menu='';
$menu = array(
'test'=>array('optie'=>'test', 'url'=>'index.php?page=test'),
'test2'=>array('optie'=>'test2', 'url'=>'index.php?page=test2'),
'test3'=>array('optie'=>'test3', 'url'=>'index.php?page=test3'),
'test4'=>array('optie'=>'test4', 'url'=>'index.php?page=test4'),
);
foreach($menu as $key => $menuoptie) {
if ($key==$this->selectedmenu) {
$class=' class="selected"';
}else{
$class='';
}
$html_menu.="<li{$class}>{$menuoptie['optie']}</li>\n";
}
return(
<<<EOT
<!DOCTYPE html>
<html>
<head>
<title>{$this->html_titel}</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet/css.css" />
</head>
<body>
<ul class="menu">
{$html_menu}
</ul>
</body>
</html>
EOT
);
}
Following the CSS :
.menu{
padding-left: 117px;
margin-top: 10px;
list-style: none;
overflow: hidden;
margin-left:40px;
}
.menu li {
padding: 0;
margin: 0;
float: left;
width: 200px;
border: 1px solid black;
}
.menu li:hover a {
background-color:#FF8055;
font-weight:bold;
}
.menu li a {
text-align:center;
background-color:#f60;
text-decoration: none;
display: block;
padding: 10px 0px 10px 10px;
text-align: left;
font-weight:bold;
color:white;
}
.menu li.selected a{
background-color: black;
text-decoration:underline;
}
Related
I have a navbar which is dynamic. I want to display the data on same page when user click on link. I am using $_REQUEST. Code is working fine but when I run the script it gives an error that 'undefined index val'... but when user click on a link it works fine. I want to remove that error.
<html>
<head>
<style>
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
margin-top: 150px;
font-family: 'Russo One', sans-serif;
}
h1 span {
color: #FF4649;
}
#container {
margin: 0 auto;
}
nav {
margin: 35px 0;
background-color: #FF4649;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #FF4649;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
width:230px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:230px;
}
nav ul ul li {
border: 1px solid white;
}
//li > a:after { content: ' ▼'; }
//li > a:only-child:after { content: ''; }
</style>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS DropDown Menu</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","links");
if(!$con){
echo "error occured";
}
$query="SELECT * FROM cat";
$result=mysqli_query($con,$query);
?>
<div id="container">
<nav>
<ul>
<?php
while($row=mysqli_fetch_array($result)){
$fn_id=$row['id'];
$sub_query="SELECT * FROM subcat WHERE catid=".$fn_id;
$sub_result=mysqli_query($con,$sub_query);
?>
<li><?php echo $row['name'];?>
<ul>
<?php
while($sub_row=mysqli_fetch_array($sub_result)){
?>
<li> <?php echo $sub_row['anme'];?></li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
</ul>
</nav>
<h1>Simple <span>CSS</span> DropDown Menu</h1>
</div>
<?php
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result)){
?>
<p><?php echo $row['Name'];?></p>
<?php
}
?>
</body>
</html>
</body>
</html>
Change
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
Into
$query='SELECT * FROM data WHERE subcat='.!empty($_REQUEST['val']) ? $_REQUEST['val'] : '');
Index function works fine, any other does not show bootstrap effects. I think I have seen all the topics about it here and i cant find any solution.
Controller:
<?php
class Certyfikat extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->view('/templates/header');
}
function index()
{
}
function nowy()
{
$this->load->view('/certyfikat/dodaj_nowy');
}
}
View header:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin 0;
padding: 0;
overflow: show;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 20px;
text-decoration: none;
}
.main {
margin-top: 50px;
background-color: #cccccc;
}
a.button {
background-color: black;
border: none;
color: white;
padding: 5px 70px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0,4s;
}
a.button:hover {
color: white;
background-color: red;
font-size: 20px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body class="main">
<ul>
<li><a class="button" href="/home">Home</a></li>
<li><a class="button" href="/certyfikat">Certyfikaty</a></li>
<li><a class="button" href="/category_create">cr</a></li>
</ul>
<?php $this->load->view('/templates/alrets'); ?>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
View dodaj_nowy:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>Welcome to my Blog!</h1>
</body>
</html>
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.
PHP code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
div.tabContent.hide { display: none; }
.tabs a {
padding:5px 10px;
background:#D8D8D8;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#f1f0ee ;
color:black ;
font-weight:bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class='tabs'>
<li><a href="#desktop" >Desktop</a></li>
<li>Laptop</li>
</ul>
<div class="tabContent" id="desktop">
</div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>
jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.
$(document).ready(function() {
var hideid = "#laptop";
var showid = "#desktop";
$(hideid).hide();
$('a[href="' + showid + '"]').addClass("active");
$('a[href="#laptop').click(function() {
$(this).addClass('active');
$('#laptop').show('slow');
$('#desktop').hide('slow');
$('a[href="#desktop"]').removeClass("active");
$("#laptop").load("laptop.html");
});
$('a[href="#desktop').click(function() {
$("#desktop").load("/test.html");
$(this).addClass('active');
$('#desktop').show('slow');
$('#laptop').hide('slow');
$('a[href="#laptop"]').removeClass("active");
$("#desktop").load("desktop.html");
});
});
What is wrong in the code?
$('a[href="#desktop').click(function () {
Quotation mark is wrong.
Looks like the issue is with this line,
$("#desktop").load("/test.html");
if test.html is in same directory, try removing the /.
I was hoping to find out how zazzle.com does their hover effect. I want to make an effect like that using pure CSS. I don't need the dropdown just the whole background of my element to change color.
CSS
/* the styles for the HTML elements */
html {
background: repeating-linear-gradient(#f3f3f3 0%,transparent 15%, transparent 90%,#000000 100% ),
url("../Images/bg.jpg") center center no-repeat;
background-size: cover;
height:135%;
}
body {
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
footer{
clear: both;
margin-top: 1em;
padding-right: 1em;
border-top: 2px solid rgb(119, 75, 77);
}
footer p {
text-align: right;
font-size: 80%;
margin: 1em 0;
}
header{
width: 100%;
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background-color: #3a3a3a;
margin: 0;
}
#headerLeft{
width:50%;
float:left;
padding:0;
margin: 0;
}
#headerRight{
width: 50%;
float:left;
text-align: right;
padding:0;
margin: 0
}
li{
display: inline;
}
nav li:hover{
background-color: #ffffff;
}
.floatRight{
}
nav li{
margin: 0;
padding-bottom: .25em;
display: inline;
}
textarea {
width: 25em;
margin-bottom: .5em;
}
table {
border-collapse: collapse;
}
td, th {
margin: 0;
padding: .15em 0;
}
br {
clear: both;
}
/* the styles for the div tags that divide the page into sections */
#content {
float: left;
width: 580px;
padding-bottom: 1.5em;
}
#left_column {
float: left;
width: 150px;
padding-left: .5em;
}
#right_column {
float: left;
width: 300px;
padding-left: 1em;
}
#wrapper{
background-color: #ffffff;
opacity: .6;
margin: 0 auto;
padding: .5em 2em;
}
/********************************************************************
* styles for the classes
********************************************************************/
.right {
text-align: right;
}
.left {
text-align: left;
}
.cart_qty {
text-align: right;
width: 3em;
}
.button_form {
margin: 0;
padding: 0;
float: left;
}
.inline {
display: inline;
margin-left: .5em;
}
/********************************************************************
* Styles for the Product Manager application
********************************************************************/
#category_table form {
margin: 0;
}
#category_table td {
margin: 0;
padding: .15em .5em 0 0;
}
#add_category_form {
margin: 0;
}
#add_category_form input {
margin-right: .5em;
}
#add_admin_user_form label {
width: 8.5em;
}
#edit_and_delete_buttons {
margin-bottom: .5em;
}
#edit_and_delete_buttons form {
display: inline;
}
#image_manager input {
margin: .25em;
}
/********************************************************************
* Styles for the Product Catalog application
********************************************************************/
#product_image_column {
width: 8em;
text-align: center;
}
/*******************************************************************/
#add_to_cart_form {
margin: .25em;
}
#add_to_cart_form input {
float: none;
}
/*******************************************************************/
#cart {
margin: 0;
padding: 1em .25em;
border-collapse: collapse;
width: 100%;
}
#cart_header th {
border-bottom: 2px solid black;
}
#cart_footer td {
border-top: 2px solid black;
font-style: bold;
}
#cart td {
padding: .25em 0;
}
/*******************************************************************/
#login_form label {
width: 5em;
padding-right: 1em;
}
#login_form input[text] {
}
#payment_form label {
width: 8em;
padding-right: 1em;
}
#payment_form input[text] {
width: 5em;
margin: 0;
padding-right: 1em;
}
#add_category label {
text-align: left;
width: 3em;
}
#add_category input {
margin-right: .25em;
}
PHP PAGE
<?php
require_once('model/database.php');
require_once('model/category_db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- the head section -->
<head>
<title>Willie's Fishing Supply</title>
<link rel="stylesheet" type="text/css"
href="<?php echo $app_path ?>main.css" />
</head>
<!-- the body section -->
<body>
<header>
<ul>
<section id="headerLeft">
<li>
<a href="<?php echo $app_path; ?>">
<h1>Willie's Fishing Supply</h1>
</a>
</li>
</section>
<section id="headerRight">
<?php
// Check if user is logged in and
// display appropriate account links
$account_url = $app_path . 'account';
$logout_url = $account_url . '?action=logout';
if (isset($_SESSION['user'])) :
?>
<li>
My Account
</li>
<li>
Logout
</li>
<?php else: ?>
<li>
Login/Register
</li>
<?php endif; ?>
<li>
Cart
</li>
</section>
</ul>
</header>
<nav>
<ul><?php
$categories = get_categories();
foreach($categories as $category) :
$name = $category['categoryName'];
$id = $category['categoryID'];
$url = $app_path . 'catalog?category_id=' . $id;
?>
<li>
<a href="<?php echo $url; ?>">
<?php echo $name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<section id = "wrapper">
Try this css
.aj_R-departmentLinks > li:hover {
background: none repeat scroll 0 0 #FFFF00;
}
If you want to change background color on an element use the :hover selector
.element {
background-color: blue;
}
.element:hover {
background-color: red;
}