I am developing a web application and I am having a problem with a menu in the header.
I explain better:
my page is divided like this:
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a id='home' href='#'>Home</a></li>
<li><a id='pagina1' href='#'>pagina1</a></li>
<li><a id='pagina2' href='#'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<main>
<h1> Main</h1>
</main>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
And obviously I have other pages like pagina1.php and pagina2.php
Now....I would like to load the pagina1.php in the when I click on the button on the menu.
I tried some scripts but it seems not not working...Can someone help me?
You have not specified a location for the link to go to. href='#' will keep you on the same page. Change this to any other url.
for example
<li><a id='home' href='/home.php'>Home</a></li>
<li><a id='pagina1' href='/pagina1.php'>/pagina1</a></li>
<li><a id='pagina2' href='/pagina2.php'>/pagina2/a></li>
EDIT:
Since your recent comment indicates you want to change the content of main when you click on a link, this should do the trick.
Create a page called pagina1.html (or php, does not matter) and add the following content:
Pagina1
Create a page called pagina2.html (or php, does not matter) and add the following content:
Pagina 2
Modify your existing page to:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#pagina1").click(function(){
$.ajax({url:"pagina1.html",success:function(result){
$("#main").html(result);
}});
});
$("#pagina2").click(function(){
$.ajax({url:"pagina2.html",success:function(result){
$("#main").html(result);
}});
});
});
</script>
</head>
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a id='home' href='#'>Home</a></li>
<li><a id='pagina1' href='#'>pagina1</a></li>
<li><a id='pagina2' href='#'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<div id="main">
<h1> Main</h1>
</div>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
I've created a plunk where you can see the code working:
http://plnkr.co/edit/iJZSbWYCWGH3NKBzwY7u?p=preview
you need ajax,
something like this, see http://www.w3schools.com/jquery/ajax_ajax.asp
$("#pagina1, #pagina2").click(function(){
page = $(this).attr("id");
$.ajax({url: page + ".php", success: function(result){
$("main").html(result);
}});
});
Simply use load function
$("#pagina1").click(function(){
$("main").empty();
$("main").load(pagina.php);
});
$("#pagina2").click(function(){
$("main").empty();
$("main").load(pagina2.php);
});
html
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li id='home'>Home</a></li>
<li id='pagina1'>pagina1</a></li>
<li id='pagina2'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<main>
<h1> Main</h1>
</main>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
Related
i am running a website which buy from some one. website is created on php now i am trying to modifying website header i want to set a drop down menu in my header but drop down is not working on it or may be i am programming in a wrong way.
<!-- Nav start -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse" id="nav-main">
<ul class="nav navbar-nav">
<li><a title="" href="<?php echo base_url(); ?>">Home</a></li>
<li class="<?=(current_url()==base_url('cms/cms_page/about-us')) ? 'active':''?>"><a title="" href="<?php echo base_url(); ?>cms/cms_page/about-us">About Us</a></li>
<li><a title="" href="<?php echo base_url() ?>training">Training</a></li>
<li><a title="" href="<?php echo base_url() ?>seeker-login">Post Resume</a></li>
<li class="<?=(current_url()==base_url('job')) ? 'active':''?>"><a title="" href="<?php echo base_url() ?>job">Government Jobs</a></li>
<li><a title="" href="<?php echo base_url() ?>contact">Contact Us</a></li>
<li class="yellow">Employer Site</li>
<li class="black">Sign In</li>
<li class="green">Register</li>
</ul>
<!-- Nav collapes end -->
</div>
<div class="clearfix"></div>
</div>
<!-- Nav end -->
Here is a code in which i want to set drop down
please any one rewrite code of "Training" with drop down for me with same css.
once i get the idea i will do it my self
It's hard to say without seeing the css and js code, but maybe the problem is that the bootstrap js script is not included in your website.
Try adding in your header the links to bootstrap:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
If it is a Wordpress website, you need to include these links via functions.php file:
function your_prefix_scripts() {
wp_enqueue_style('bootstrapcss', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css', array(), '5.0.0');
wp_enqueue_script('bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js', array(), '5.0.0', true);
}
add_action('wp_enqueue_scripts', 'your_prefix_scripts');
Hope this will solve the issue.
here is my code i was just wondering how i can bring that image above the nav bar!
http://jsfiddle.net/Xb2UT/640/
apbook
<body>
<div id="logo00">
<img src="http://emojipedia-us.s3.amazonaws.com/cache/de/ca/decadd7edb6b1014ca0cb7a1afcb8ea3.png">
</div>
<header id="header">
<nav id="nav">
<ul id="ulnav">
<li><a id="test11" href="#two">Software</a></li>
<li><a id="test21" href="#three">Store</a></li>
<li><a id="test31" href="about">About</a></li>
<li><a id="test31" href="blog">Blog</a></li>
<li><a id="test31" href="careers">Career Opportunities</a></li>
<li><a id="test31" href="support">Support</a></li>
<div id="gay">
<li><button id="login-button">Login</button></li>
</div>
</ul>
</nav>
If you mean move the image in front of the header change the z-index on #header. If you mean move the image on top of the header increase the #header top value.
Initially I had a bootstrap navbar, and I hard coded the navbar code into every one of my html files. I set the active class of the tab of whatever page the user was currently viewing manually like this:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
This worked fine, but I realized it was bad practice to repeat code like this, so I put the navbar code into a separate file, turned all my html files into php files, and used the php include statement to load the navbar in each page. I then used JavaScript in an attempt to dynamically set the active class. However, I can't get the active class to show at all when clicking on my tabs.
<head>
<link href="../css/navbar.css" type="text/css" rel="stylesheet" />
</head>
<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS-->
<script type="text/javascript">
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse-->
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="navbar-brand" href="homepage.html">
<img src="../images/pksoilogo.png" id="logo">
</a>
</div>
<div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown-->
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any thoughts on how to correct the JavaScript to fix this?
EDIT - Sorry, I hadn't read the part about you wanting a Javascript fix. Hopefully someone can give a JS solution to your problem soon enough!
Here's one way to go about it.
<ul class="nav navbar-nav">
<li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>>Home</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>>About</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>>View Map</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>>Submit Document</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>>Contact</li>
</ul>
Obviously that's not the cleanest of ways, but it's quite easy. You could also make a function that you could call to make it look a bit better.
i am using $session[login] but $_SESSION seem like don't not work on my home page of html/php webpage . It don have show up anything . why? could anyone help me
and tell me why? is it the session name wrong? or need to input php inside?
<html>
<title>Home</title>
<head>
<link href="SSCdesign.css" rel="stylesheet" type="text/css">
<script src="script.js"> </script>
</head>
<body>
<header id="SSClogo"><img src="SSC_logo_v2.png"></header>
<div id='userbar'>
<?php
$_SESSION['login'] = true;
while($row = mysql_fetch_assoc($result))
{
$_SESSION['student_id'] = $row['studnet_id'];
$_SESSION['student_name'] = $row['student_name'];
}
?>
</div>
<div id='wrapper' align="center">
<nav id='cssmenu'>
<ul>
<li class='active'><a href='SSC.html'><span>Home</span></a></li>
<li><a href='advisors.html'><span>Advisors</span></a></li>
<li class='has-sub'><a href='pals.html'><span>PALS</span></a>
<ul>
<li><a href='registersession.html'><span>Register Session</span></a></li>
<li><a href='timetable.html'><span>Timetable</span></a></li>
<li><a href='feedback.html'><span>Feedback</span></a></li>
<li class='last'><a href='buzz.html'><span>Buzz</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='econsultation.html'><span>e-Consultation</span></a>
<ul>
<li><a href='appointment.html'><span>e-Appointment</span></a></li>
<li><a href='upcoming.html'><span>Upcoming List Appointment</span></a></li>
<li class='last'><a href='history.html'><span>History</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='workshop.html'><span>Workshop</span></a>
<ul>
<li><a href='calendar.html'><span>Calendar</span></a></li>
<li class='last'><a href='eportfolio.html'><span>e-Portfolio</span></a></li>
</ul>
</li>
<li><a href='facilities.html'><span>Facilities</span></a></li>
<li class='last'><a href='contactus.html'><span>Contact Us</span></a></li>
<li class='la'><a href='login.html'><span>Login</span></a></li>
</ul>
<div id="announcement">
<h2> <center> Announcement will be posted here </center> </h2>
<p> <center> This site is currently under development, do check it out soon! </center> </p>
</div>
<div id="slideshow">
<h2> <center> Slideshow will be here </center> </h2>
</div>
</nav>
<div class="push"></div>
</div>
</body>
</html>
You have to start your session before you use it with:
session_start();
So your code should looks something like this:
<?php
session_start();
$_SESSION['login'] = true;
(Also if you say you use: $session[login], it's wrong you would have to use it with: $session['login'] otherwise login is a constant which it isn't)
For more information see: http://php.net/manual/en/function.session-start.php
I want to include some pages into a div but I don't know how. The code with the problem is below
I want to include a page in a content div, so when I click on contact in the navigationbar the contact.php needs to be loaded in the index.php's content div and when I click on about us in the navigationbar the about.php page is included into the index.php's content div..
<html>
<body>
<div id="navbar">
<ul>
<li>
home
</li>
<li>
about us
</li>
<li>
contact
</li>
<ul>
<div id="content">
<!--so when the user clicks on contact us there needs
to be an include in this div wich includes the contactus.php page.
-->
<?php include 'contactus.php'; ?>
</div>
</body>
</html>
Recode ul like below
<ul>
<li id="home">
home
</li>
<li id="aboutus">
about us
</li>
<li id="contact">
contact
</li>
<ul>
$(document).ready(function(){
$("#home").click(function(){
$("#content").load("home.php");
});
});
same for contact and aboutus