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
Related
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>
i'm new in wordpress and i'd like to replace the footer with a pure html code.
i mean, i till want the "container" generated by wp, but inside i want to use pure html code.
i tried changing the content of "partials/footer-layout.php" to this code, and i'm able to see the code, but not to click the links...
any ideas?
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
About us
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul></div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul></div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul></div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul></div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul></div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Your HTML code isn't XHTML-compliant. There's a missing <li>...</li>.
Some possible solutions:
1- try to add links to the anchor tags and check if it works.
2- check if there's a HTML element which overlaps the anchor tags. Use firebug or any other developer tool to check if there's an overlapping element.
3- check if there's a Javascript event which is called once you click on the anchor. Use a Javascript debugger (Firebug etc.).
Here's the updated code:
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
<li>About us</li>
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul>
</div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul>
</div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul>
</div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul>
</div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Often when you can't click a link, it is a case that a layer is positioned on top of it.
Use a code inspector such as Firebug, and see if there are any 'invisible layers' above that area.
There is also the chance that css has cursor:none applied so it doesn't look like you can click it, but it can. Try replacing your # links with real links.
Also, About us needs li tags around it, but I doubt that is the issue.
I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.
I have managed to create a dynamic navigation, using following code in my header.php:
<div class="nav">
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>
Which in HTML, translates to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li> About </li>
</ul>
</div>
I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li class="underline"> About </li>
</ul>
</div>
According to the docs, the current page item should already have a class .current-menu-item. you can use that to style the item with underline. Do you not see this class?
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items
I'm using the include function as a way to prevent me having to update my top menu on every one of my pages when I make a change. Here is the snippet using include function on my site:-
<div id ="header">
<div id="logo"></div>
<nav>
<?php include 'menu.php' ?>
</nav>
</header>
And here is what the menu.php file holds
<div id="menu_container">
<ul class="sf-menu" id="nav">
<li>Home</li>
<li>About Us</li>
<li>Leagues
<ul>
<li>Brighton
<ul>
<li>Singles
<ul>
<li>Results</li>
<li>Tables</li>
</ul>
</li>
<li>Doubles
<ul>
<li>Results</li>
<li>Tables</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Rules</li>
<li>Hall of Fame
<ul>
<li>Brighton
<ul>
<li>Singles</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
However my problem is that the menu items that include nested items, that will drop down and offer more options when you hover over them, aren't working this way. But they do work correctly when I copy the code in directly.
Here at the pages where the code is copied in directly and works and where I'm using include and it doesn't work:-
Working dtlsports.co.uk/badmintonSinglestables.php
Not working dtlsports.co.uk/badmintonSinglestablesA.php
As you can see, the navigation menu on the first page works, but it doesn't drop down properly on the second page
Is there anything anyone can suggest? Thanks!
The problem is that on the non working page you are not including al js scripts that you have on the working page. For example:
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
$('.top').click(function() {$('html, body').animate({scrollTop:0}, 'fast'); return false;});
});
</script>
I'm using jCoursellite as a content scroller that has misc content, images and markup. This has always worked in the past, but now it is killing any anchor tags that ARE NOT on the 1st page of the slider. So again, any links on the first page work fine, but the links only any following page won't fire. They have an active cursor hover states and my sprites function fine, but when you actually click it simply does nothing...any ideas?
<div id="contentSlider">
<div class="slider">
<ul>
<?// First Slide-----------------------------?>
<li class="1">
<div>
<p>Content Here</p>
</div>
</li>
<?// Second Slide-----------------------------?>
<li class="2">
<div>
<p>Content Here</p>
</div>
</li>
<?// Third Slide-----------------------------?>
<li class="3">
<div>
<p>Content Here</p>
</div>
</li>
<?// Fourth Slide-----------------------------?>
<li class="4">
<div>
<p>Content Here</p>
</div>
</li>
</ul>
</div>
</div>