Im just practicing some things in PHP and have come across a problem.
I am linking multiple pages to single index.php page using PHP 'Include' function ( as i have read it makes a large site much more manageable and easily up-dateable'.
I have created external CSS files (3 in total, one for the navigation, page styling and wrapper content) and have a few external JS files which have all been linked to a PHP document named head.php. (below is the head.php contents)
The main page which the server will show first will be 'index.php' so for this page i am linking all the other segments which will all fit together to create the single page. (below is the index.php contents)
My problem is that in-between both the head and footer php include lines i have created a div named 'wrapper' (styles are already applied to an external CSS sheet named 'style.css' which is linked in head.php) (please see bottom for style.css contents) I would presume that when i view index.php in my browser (i am using XAMPP) that is should show the wrapper on the page, however i can not see the wrapper and i just continue to see the navigation bar only, i find this strange as i can use <h1> and <p> tags in index.php which are externally styled by the php included head.php page.
Please take a look at my code below for all the pages mentioned, I'm not sure what i am doing wrong here. Thank you
BELOW IS HEAD.PHP:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/sitestyle.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="responsee.js"></script>
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<script type="text/javascript" src="drop.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<title>MC SMM | Home</title>
</HEAD>
BELOW IS STYLE.CSS:
#wrapepr {
background-color:black;
width:1000px;
height:1000px;
margin:0 auto;
}
BELOW IS INDEX.PHP:
<?php include('segments/head.php'); ?>
<?php include('segments/facebookjs.php'); ?>
<?php include('segments/homenav.php'); ?>
<div id="wrapper"></div>
<?php include('segments/headbottom.php'); ?>
You have miss spelt your wrapper ID name in your stylesheet:
"#wrapepr"
Should become:
#wrapper
Related
For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}
My code is loading the HTML before the CSS, so my site looks like a skeleton at first. After a second or two, the CSS kicks in and my site is rendered how it should be. Is there some way to have both my HTML and CSS render at the same time, so the site doesn't look out of order at first?
I have an external CSS file that is linked to my .PHP file. This is how the beginning of my code looks like:
<?php
require_once "../../universal.php";
?>
<!DOCTYPE html>
<html>
<head>
<!--UNIVERSAL HEADER CSS-->
<link href="/universal.css" rel="stylesheet" type="text/css">
<!--STYLE SHEET FOR THIS FILE-->
<link href="/entertainment/template.css?ts=<?=time()?>"" rel=
"stylesheet" type="text/css">
<!--STYLE SHEET FOR FOOTER-->
<link href="/footer.css" rel="stylesheet" type="text/css">
</head>
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
Description:
I have a main page with header, footer, etc. The content (a div within body) of this page is changing depending on where you click(menu items). The content loaded are different pages within javascript and css files.
Problem: javascript and css files of the pages loaded don't work. I have to include ALL the page in order to make it works.
For example in the next code, javascript included in status.jsp don't work:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp #information");
}
However, this works, but it is not what i want:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp");
}
The result of the last code is a page similar to this:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>MainPage</title>
</head>
<body>
<div id="content>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>Status</title>
<div id=statusBox">
information
</div>
<script type="text/javascript" src="js/status.js"></script>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
I have a web page in which I add a css file in head section using javascript code from the bootom of the page:
$(document).ready(function(){
var css=document.createElement('link');
css.type='text/css';
css.href='/css/user.css';
css.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);
});
So I have a problem when user disable javascript then thic file can't be added to page so is there any way to include css file in that page using
<noscript>..Code..</noscript>
I can't add this file directly into my head Section.
So Is it possible to add css file into my html document without using
javascript?
with javascript:
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "/styles/yourcss.css"
}).appendTo("head");
http://api.jquery.com/jQuery/#jQuery2
without javascript:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>
you can try this:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Yes it is possible to load css file without using javascipt
<head>
<link rel="stylesheet" type="text/css" href="user.css">
</head>
If you want to add css on the basis of some condition then use php if statement as shown below:
<?php if(YOUR CONDITION){ ?>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<?php } ?>
<noscript>
<link href="style.css" rel="stylesheet" type="text/css">
</noscript>
Now you can place this code in head section and it'll be called only when javascript is disabled.
Not sure how HTML compliant this is, but you can include a link within your body tag and still have it reference the class, given that you cannot edit the head section as stated.
Doing this did work for me, referencing the 'class1' from the style.css file
<head>
</head>
<body>
<div class="class1"></div>
<link href="style.css" rel="stylesheet" type="text/css">
</body>
Edit: in HTML 4.01 it is not acceptable, however using HTML5, this is perfectly acceptable markup. If referencing a larger CSS file this may cause some elements to be without style temporarily as the head section is intended to load such documents prior to displaying content, however if this is not a possibility, then this may be a solution for you.