Dear PHP Help Forum,
I always thought that I was at least good enough with PHP to make my Wordpress websites work properly. However, I now seem to have stumbled upon a problem I cannot fix myself. Therefore I am politly asking if anyone could help me out with the following:
I have made a website for use in Wordpress and I wanted to add a HTML5 header into it, which becomes smaller when scrolling down but stays at the top of the browser. However, I have made a mistake and it is probably enormously simple, but I do not know PHP and HTML5 well enough to fix it. I have created two pages, of which you can find the source code down below, to illustrate the problem.
First of all, what it is supposed to do. This is a .html file.
http://www.bananaweb.nl/wp-content/themes/lauwersloop/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lauwersloop 2014</title>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/default.css">
<script src="style/jquery.js"></script>
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
}
else{
$("header").removeClass("small").addClass("large");
}
});
</script>
</head>
<body>
<header class="large">
<nav>
<img class="logo" src="wdd.png"/>
</nav>
</header>
<section class="stretch">
<p>Let's get that menu small!</p>
<p class="bottom">End of the line.</p>
</section>
</body>
</html>
However, when putting it into a .php file (multiple .php files actually) I do something wrong. Here is the example:
http://www.bananaweb.nl/lauwersloop/
HEADER.PHP
[code]
Lauwersloop 2014 This is the header. [/code]INDEX.PHP
[code]<?php require("header.php"); ?>
<section class="stretch">
<p>Let's get that menu small!</p>
<p class="bottom">End of the line.</p>
</section>
<?php require("footer.php"); ?> [/code]
FOOTER
[code]Here is the footer.
[/code]The CSS-files and JS-file which are referred to in the respective heads are the same for both documents. Can anyone help me out with this (probably very simple) problem?