This is my Menu items .
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li class="active">
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
Curently it reamains active on home page even changing to other page. How could i able to make it active of that page on every page changing.
Thanks in advance.
try this
<?php
$myactiveli = $_GET['con'];
?>
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li <?php if($myactiveli==1) { echo 'class="active"'; } ?> >
HEM
</li>
<li <?php if($myactiveli==3) { echo 'class="active"'; } ?>>OM OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
u can change index of <li> in .eq() according to page (starts from 0) the active class will aply to that index <li>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".nav").children("li").eq(2).addClass("active");
});
</script>
</head>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li>
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
This jQuery work too for me.
<script>
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
Related
I am having trouble including a php file with my navigation bar in another php file.
Here's the navigation file:
<?php echo "
<html>
<head>
<nav class = "navbar navbar-default navbar-fixed-top " role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header navbar-right">
<ul class = "nav navbar-nav">
<li> About Me </li>
<li> Contacts </li>
<li> Skills </li>
<li> Portfolio </li>
<li> Case Studies</li>
<li> Resume </li>
<li> Extras</li>
</ul>
</div>
</div>
</nav>
</head>
<script src = "js/bootstrap.min.js"></script>
<script src = "js/jquery.min.js"></script>
</html>
" ?>
I have this line in my index.php file
<?php
include"navigation.php";
?>
I have checked the referencing of the file and all refereces seem ok.
" should be '
<?php echo '
<html>
<head>
<nav class = "navbar navbar-default navbar-fixed-top " role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header navbar-right">
<ul class = "nav navbar-nav">
<li> About Me </li>
<li> Contacts </li>
<li> Skills </li>
<li> Portfolio </li>
<li> Case Studies</li>
<li> Resume </li>
<li> Extras</li>
</ul>
</div>
</div>
</nav>
</head>
<script src = "js/bootstrap.min.js"></script>
<script src = "js/jquery.min.js"></script>
</html>
';?>
include the file
<?php
include 'navigation.php';
?>
Why are you closing the HTML tag within your navigation file?
It's probably best having a 'master' application template, which you include the html tag, the head and the body, then inside the body include your scripts at the bottom and include your navigation bar using the PHP tag.
<?php try{
if( !file_exists("navigation.php") )
{ throw new Exception("Unable to include resources header"); }
else{ require_once("navigation.php"); }
}catch(Exception $e){
echo $e->getMessage();
exit;
}
?>
Please try this this will definitely work.This is working in my case.
I have a page which includes the menu bar (a php page). This works, but strangely the page doesn't load after the include.
Some code:
<div class="center">
<?php
include ('../menu.php')
?>
<div class="text" id="media">
Some text
</div>
When I add the
<div class="text" id="media">
Some text
</div>
to the menu.php it is showed, but not when it is on the parent page. Anybody has an idea? There isn't any warning or error showing.
<!-- begin menu -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="../../../../style/menu.css">
<div class="menu_b">
<div class="logo">
<img src="../../../../afbeeldingen/menu/logo.gif" width="375" title="Home" />
</div>
<div class="aangemeld">
</div>
<ul class="menu_tekst">
<li class="<?php echo $account_li;?>"><a class="nt" href="../../../../account.php">Account</a></li>
<li class="tussenstuk"></li>
<li class="<?php echo $contact_li;?>"><a class="nt href="../../../../contact.php">Contact</a></li>
<li class="tussenstuk"></li>
<li class="<?php echo $fotos_li;?>"><a class="nt" href="../../../../fotos.php">Foto's</a>
<ul class="sub_fotos sub">
<li class="space_left"> </li>
<li class="titel_blok_sub"><a class="nt" href="../../../../fotos/2013_2014.php">2013-2014</a></li>
<li class="titel_blok_sub"><a class="nt" href="../../../../fotos/kamp.php">Kampfoto's 2014</a></li>
</ul>
</li>
<li class="tussenstuk"></li>
<li class="nt"><a class="nt" href="../../../../winkelwagen.php">winkelwagen + besteld</a></li>
</ul>
</div>
<div class="onder_menu">
</div>
<div class="sub_menu">
</div>
<!-- einde menu -->
you forgot semicolon ;
include ('../menu.php');
You forgot a quotation mark:
<li class="<?php echo $contact_li;?>">
<a class="nt href="../../../../contact.php">Contact</a>
</li>
should be
<li class="<?php echo $contact_li;?>">
<a class="nt" href="../../../../contact.php">Contact</a>
</li>
Succes ermee
Above the div.center their was an other php include of a page that doesn't exist, after removing it, the page loaded. Didn't looked at it because it was above the menu.php which was loaded.
Try using require:
require('../menu.php');
I'm guessing that you have turned off display errors in your php.ini and that menu.php doesn't exist.
If you are not sure how to turn on error reporting in your development machine, add the following lines to your parent page;
<div class="center">
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include ('../menu.php');
?>
<div class="text" id="media">
Some text
</div>
This should then reveal why the page is not being included.
Take the parenthesis off the include statement. It should look like this:
include 'page.php';
hello so i'm trying to make a menu with css but when i try to click on an element from the menu it opens it in a new tab while i want it inside a div in the same page i'm new in css and thats my homework can you help me please and thanks
this is the code
<div id="menu"><?php include('admin/Menu/menu.php');?></div>
<div id="main">
i want the content here
</div>
this is the menu code
<ul id="menu">
<li>
Catalogue
<ul>
<li>Produits</li>
<li>Catégories</li>
<li>Marque</li>
<li>Fournisseur</li>
</ul>
</li>
<li>
Commandes
<ul>
<li>Commandes</li>
<li>Messages prédifinis</li>
</ul>
</li>
<li>
Clients
<ul>
<li>Clients <li>
<li>Pays</li>
<li>Groupes <li>
<li>Titre de civilité</li>
</ul>
</li>
<li>
Paramètres avancés
<ul>
<li>Emails</li>
<li>Images</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Employés</li>
<li>Profils</li>
<li>Permission</li>
</ul>
</li>
<li>
Stats
<ul>
<li>Stats</li>
</ul>
</li>
What you could do is either something like this:
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'>
<div id='showMeContent' class='content'>
<p>This is just some basic content</p>
</div>
<div id='showThisContent' class='content'>
<p>This is also just some basic content</p>
</div>
</div>
<style>
.content { display: none; }
#showMeButton:active #showMeContent { display: block; }
#showThisButton:active #showThisContent { display: block; }
</style>
This is the closest you can get using css, but you might be able to do this a little better by using jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'></div>
<script>
$('#showMeButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is some content</p>");
});
$('#showThisButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is also some content</p>");
});
</script>
Whatever you do, you dó have to make sure you start using id tags, otherwise it just acts as a link, you can easily replace the href='#' with id='something', and then write some css or javascript which opens your content inside the div you'd like it in.
I am creating a sorting page, which will show content of database, and the user can sort it with listjs. Problem is that when i press any button, the content loaded from the database disappears. When I fill the content manually it works great. Can anybody please help me with this problem?
My load function:
$(document).ready(function(){
$(".list").load("../wp-content/php/sorting.php");
});
sorting.php
<?php
mysql_connect("***", "***", "**") or die(mysql_error());
mysql_select_db("***");
$result = mysql_query("SELECT * FROM business");
while($row = mysql_fetch_array($result))
{
?><li class="onebusiness"><a href="<?php
echo $row['link'];?>"><img src="<?php
echo $row['img'];?>" height="125" width="125"/><p class="name"><?php
echo $row['name'];?></p><p class="category" style="display:none;"><?php
echo $row['category'];?></p></a></li><?php
}
mysql_close();
?>
HTML:
<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script>
<script src="../wp-content/js/list/list-min.js" type="text/javascript"></script>
<div id="busineseslist">
<input class="search" placeholder="Search Business" />
<ul class="sort-by">
<li class="sort btn" data-sort="name">Sort by name</li>
<li class="sort btn" data-sort="category">Sort by category</li>
</ul>
<ul class="filter">
<li class="btn" id="filter-none">Show all</li>
<li class="btn" id="filter-something">Only show something</li>
<li class="btn" id="filter-else">Only show something else</li>
</ul>
<div class="list"></div>
</div>
Why you dont just do this:
<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script>
<script src="../wp-content/js/list/list-min.js" type="text/javascript"></script>
<div id="busineseslist">
<input class="search" placeholder="Search Business" />
<ul class="sort-by">
<li class="sort btn" data-sort="name">Sort by name</li>
<li class="sort btn" data-sort="category">Sort by category</li>
</ul>
<ul class="filter">
<li class="btn" id="filter-none">Show all</li>
<li class="btn" id="filter-something">Only show something</li>
<li class="btn" id="filter-else">Only show something else</li>
</ul>
<div class="list"><?php include '../wp-content/php/sorting.php'; ?></div>
</div>
With this you can delete this line:
<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script>//delete this
Which i think its the js with the following code:
$(document).ready(function(){
$(".list").load("../wp-content/php/sorting.php");
});
Because with the php include you dont need the load function ;)
------------------------EDITED----------------------------------------
In wordpress, you can include files in this way:
Put the include files in your theme folder and use this in your theme's footer.php:
<?php include (TEMPLATEPATH . '/sorting.php'); ?>
See this reference link: http://www.deluxeblogtips.com/2010/06/wordpress-include-template-files.html
Your div should looks like:
Go to the 'Theme Editor', look for the file that generates the html. Edit it and place this code between the divs tags:
<div class="list"><?php include (TEMPLATEPATH . '/sorting.php'); ?></div>
Saludos.
I have a list of lis, and on mousemove, the code checks if a certain div doesn't contain a certain class. If it is the case, the ajax query is launched. Unfortunately it's not working and I do not understand why as my code is working if I do not use ajax. Thank you in advance for your help.
My HTML:
<div id="wrapper">
<div id="contentWrapper">
<div id="contentOne" class="content">
<ul>
<li refSortie="mmm">mmm</li>
<li refSortie="sss">sss</li>
<li refSortie="mmm">mmm</li>
<li refSortie="mmm">mmm</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="contentTwo" class="content"></div>
<div id="contentThree" class="content"></div>
<div id="contentFour" class="content"></div>
</div>
</div>
My JS:
$('#contentOne li').mousemove(function () {
var refSortie = $(this).attr('refSortie');
if(!$('#contentOne').hasClass('freezed')) {
$.ajax({
type: 'POST',
url: 'php/test2.php',
data: 'refSortie=' + refSortie,
success: function (data) {
$('#contentTwo').html(data);
}
});
}
}).mouseout(function () {
if(!$('#contentOne').hasClass('freezed')) {
$('#contentTwo').html('');
}
});
My PHP:
<?php
if(isset($_POST['refSortie'])) {
echo $refSortie=$_POST['refSortie'];
}
?>
Well, based on what you posted. Here's what I got and it's working fine for me.
HTML & JQUERY
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
</head>
<body>
<div id="wrapper">
<div id="contentWrapper">
<div id="contentOne" class="content">
<ul>
<li refSortie="mmm">mmm</li>
<li refSortie="sss">sss</li>
<li refSortie="mmm">mmm</li>
<li refSortie="mmm">mmm</li>
</ul>
</div>
<div id="contentTwo" class="content"></div>
<div id="contentThree" class="content"></div>
<div id="contentFour" class="content"></div>
</div>
</div>
<script type="text/javascript">
$('#contentOne li').mousemove(function(){
var refSortie=$(this).attr('refSortie');
if(!$('#contentOne').hasClass('freezed')){
$.ajax({
type:'POST',
url:'test2.php',
data:'refSortie='+refSortie,
success:function(data){
$('#contentTwo').html(data);
}
});}
}).mouseout(function(){
if(!$('#contentOne').hasClass('freezed')){
$('#contentTwo').html('');}
});
</script>
</body>
</html>
PHP
<?php
if(isset($_POST['refSortie'])) {
echo $refSortie=$_POST['refSortie'];
}
?>
Did I do something different than you?
Firebug Console view: