I am working with a website and have the following situation:
The Bootstrap Carousel works fine when the file index.php in on the root, however, if I rename the same php file and move it into a folder, the carousel freezes.
Please inspect the url. The one that works is http://webstudiopr.com/tertuleoPHP/index.php
The one that freezes is http://webstudiopr.com/tertuleoPHP/politica/politica-puerto-rico.php
Any idea on how to fix it?
Thanks
PJ
Check all your relative paths -- assuming that you haven't moved all your files, for example:
Instead of:
<script src="js/bootstrap.min.js"></script>
Use:
<script src="../js/bootstrap.min.js"></script>
Add to your head this tag:
<base href="http://webstudiopr.com/tertuleoPHP/">
It will set a base source for all absolute paths on the page - making bootstrap.js loaded from
http://webstudiopr.com/tertuleoPHP/js/bootstrap.min.js
Instead of
http://webstudiopr.com/tertuleoPHP/politica/js/bootstrap.min.js
For more information about the base tag: http://www.w3schools.com/tags/att_base_href.asp
On a side note: Take a look at the source of your website - It's completely invalid (You put meta tags inside the body, and then closing the head after the opening body tag. Fix it too.
Related
I'm recently doing a website for a school project. In order to organize my work, I create a tree folder that keeps all the work organized. It is similar like this:
Back-Office
Pages
Home
home_test1.php
home_test2.php
home_test3.php
Login
Folder_Login
login.php
logout.php
Resources
CSS
style_home.css
style_navbar.css
style_footer.css
JS
script_home.css
script_navbar.css
Sections
navbar.php
footer.php
After all, with the require() method available in PHP, I want to call the "navbar.php" file to the "home_test1.php", "home_test2.php" and "home_test3.php", but the CSS style that is connected with the file "navbar.php" ("style_navbar.php"), doesn't display.
I've tried to change the path of the CSS style in the file "navbar.php" when I require() to the other file ("home_test1.php") and the CSS style shows up, but wont display in other file with a different path. How can I make this work dynamically? Sorry for long post and bad English grammar.
Thank you in advance.
You need to set your css and js files with absolute path instead of relative path
$dir = realpath($_SERVER["DOCUMENT_ROOT"]);
<link rel="stylesheet" href="<?php echo $dir.'/resources/css/style_home.css'; ?>" >
Without physically seeing you code it is quite hard to debug however there is an "obvious" answer that I'll suggest as a starting point.
The important thing to remember is that PHP and HTML are processed in completely different places. PHP executes on the server and should be used to build a full HTML "document" which it gives to the client/browser. The client/browser then reads the document provided and renders it according to HTML standards.
Calling require() will tell PHP to get the file and slot its contents directly where it was called and as it is a CSS file it will need to sit within the style tags. With a lot of modern browsers, if you use require on a file outside of the html tags, the content will be dumped at the top of the screen or simply ignored due to invalid syntax.
Alternatively if you would like to simply use tell the browser to include the CSS file, you could use the good old method of using <link rel="stylesheet" href="/path/to/file">. It's good to know when and when not to use PHP.
PS: You have .css files in your JS directory.
In PHP, there is a global variable containing various details related to the server. It's called $_SERVER. It contains also the root:-
$_SERVER['DOCUMENT_ROOT']
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
<link rel="stylesheet" href="<?php echo $path.= '/Resources/CSS/style_navbar.css';?>" />
?>
I am not sure what exactly is broken and it's kinda hard to explain. My file structure looks something like this:
+bin
+css
-style.css
-fontawesome.min.css
+fonts
-FontAwesome.otf
- ...
+www
+comp
-header.php
-footer.php
-index.php
-otherpage.php
Both index.php and otherpage.php include header.php and footer.php at the top and bottom, the content is in between.
Requesting the domain gives me the index.php and requesting the otherpage.php shows that as well as expected.
Requesting the configured bin.domain.com/css/style.css shows the correct css-file.
However, and this is the problem: The Link-Tag to the css-files is in the header.php and the css is not applied. Going to the Inspector shows the link-tag and following the link inside that shows the css that should apply to the page.
Now, here comes the weird thing: Going to the Style-Editor Tab in the Firefox Devtools shows the CSS from fonts.google.com as one link-tag imports a font. This is as expected but nothing else is shown so I don't even know where the error is at. Any Ideas?
Requesting the configured bin.domain.com/css/style.css shows the correct css-file.
This might not be it but you say you are using the following
<link href="bin.domain.com/css/style.css" rel="stylesheet">
What if you change it to
<link href="http://bin.domain.com/css/style.css" rel="stylesheet">
I found the solution:
The website itself was loaded via https. The Stylesheets and assets however where linked with http. I regenerated the SSL-Certificate and made the bin-subdomain a https-one. This was also said in the console in my Firefox-Browser but I didn't notice that.
This also explains why the Google-Font-Link worked while the others didn't. It was a https-request instead of a http-one.
I'm developing a website for my conclusion work at school. I'm using XAMPP v3.2.1. to localhost the site.
My site's folder's are configured just like this in htdocs folder:
ibnm
css
js
img
...
site
about
midia
...
includes.php
index.php (HOME PAGE)
My problem starts here: on index.php I'm including includes.php, that's a simple file with define() functions to the folders of my site so I can print the constant on the HTML tags of the site as URL (just like below)
//includes.php
<?php
define("css", "localhost/ibnm/css");
?>
//index.php
<?php
include_once("includes.php");
?>
<link href="<?= css; ?>/bootstrap.css" rel="stylesheet">
But when I do this, the CSS don't function. When I see an <a> tag with the previously defined URL on page it looks like
localhost/ibnm/site/localhost/ibnm/css
instead of
localhost/ibnm/css
It's confunsing 'cause if the <a> tag doesn't have any value (href="") it output localhost/ibnm/site/.
What can be wrong? XAMPP or coding?
Any url is not starts with http then browser will assume that its relative path so it will append to your current path, thats why your getting localhost/ibnm/site/localhost/ibnm/css.
And one small correction in your code, its not good idea to hard code server name in the code, better to get server name dynamically. So that you no need to change while deploying your site in real server.
//includes.php
<?php
define("css", $host='http://'.$_SERVER['SERVER_NAME'].'/ibnm/css');
?>
This is because the browser think localhost is a folder, and then do this ontop of the current path, to fix is just add http:// before the localhost
define("css", "http://localhost/ibnm/css");
Instead of using absolute path you can just add one slash before CSS path -
<link href="/<?= css; ?>/bootstrap.css" rel="stylesheet">
I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?
./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.
Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.
Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.
I am having difficulty trying to get modernizer to run with codeigniter.
this is what I've done so far.
downloaded Modernizr and renamed the file modernizr-1.5.min.txt to modernizr-1.5.min.js
put the JavaScript file in the same directory as my header file is: apppath/views/tops/
included the file in my headings <script src="modernizr-1.5.min.js"></script>
included this in my HTML element <html class="no-js">
just to preserve my sanity I put the JavaScript file modernizr-1.5.min.js in my views directory and in the application directory.
I am getting absolutely zero response when I read my page source to see if the has been replaced with the elements that my browser covers the wave modernizr is supposed to work. I have tried this using Firefox and chrome as far as reading the source.
any suggestions? Thank you in advance
why would you put javascript files ito the view folder of your app? i would rather use this path "/media/javascripts/modernizr.js" and then <script src="/media/javascripts/modernizr.js"></script> link it like that. the view folder is only for templates. other thing is that you will never see the changes that javascript does to your page in the pagesource. because it only shows you what html the browser received. and javascript starts to work after the browser received the html. you need to install firebug to see the "live" dom.