When working on a handlebars demo, I am noticing that the stylesheet does not show up when viewing the page. I have provided links to the code and the live page below. Does anyone know why the stylesheet isn't working?
The code is here:
https://github.com/sutri001/DA670/tree/master/week7_handlebars
The live page is here:
http://67.205.184.187:1000
Your rendered page does have the link tag that references the stylesheet you're looking for. What's happening is your server is throwing a 404 when a request is made for the stylesheet.
Looking at the code for your express server, I see you're telling express to serve files staticly from the public directory (good)... but you don't have a public directory, and even more your css directory is located outside of such a place.
My advice is to move your css directory into a new public directory (so you'll have public/css/style.css). That should resolve your issue.
Also, remember that it's the browser that's handling your link tags, not the server! That means browsers are currently trying to go to http://yoursite/../../css/style.css. Thankfully your browser understands how to handle this, but this is definitely not what you want.
Your link tag's href attribute should be set to /css/style.css because, from the browser's perspective, that's where the stylesheet is located.
Related
In one of the applications that I am working on for my company, I came across a weird behaviour or maybe it's just my misunderstanding and I hope I can get some clarification.
The application is served by Apache and the root is : /company/client. For every page that I visit, for example https://11.11.11.11/index.phtml, it will actually point to the file in the server /company/client/index.phtml and so on. In one of the modules of the application, it contains a move_uploaded_file php function, and the target directory is /images/example/, when the page is run, the app is trying to go to the absolute server root /images/example/ instead of /company/client/images/example/.
Also the a new windowed opened up by window.open has an img tag having src='/images/exmaple/', this points to the server root instead of /company/client/images/example/, is this expected?
Am I missing anything, or is it something to do with Apache configuration?
Additional info:
The application is served as a virtual host in conf file, with DocumentRoot "/company/client/".
The page that is executing window.open and php function is used as an Iframe inside /company/client/index.phtml
sorry for my mistake.
Thanks for the help from the everyone especially Chris G, the problem was that the code is using a GET variable incorrectly, as a result the image name isn't passed. And I got confused because someone made a mistake in the code by moving image relative to the root folder which is incorrect. That made me think that PHP is also treating path like the client side which is a mistake. I'm guessing I can conclude that the web server document root only applies to everything client side, like the url, JS, HTML?
I have been coding up a localhost, and I made the localhost by using of course a JavaScript file to do so, and I then made it reference an HTML file. However, I noticed that when I am using localhost to serve up the HTML file I get this error:
"GET http://localhost:3333/filetesting.js"
The filetesting.js is that js file, there are also other things I'm referencing too, like websites. I'm referencing it by using script tag src.
I looked at the network on developer tools of it and it says it's a 404 error not found. I'm trying to figure out how to reference my script tag src's without having localhost:3333 go before it.
When I run the HTML file without using the localhost, it works just fine when it comes to the script tag src's. If you do not entirely understand what I'm asking for, just ask.
Assuming that your script will always reside in the root level of your website, you can simply target it with the root-relative prefix /:
<script src="/filetesting.js"></script>
This will load your script from the root, regardless of the site the file is hosted on. For example, on http://localhost:3333/ it will load the file from http://localhost:3333/filetesting.js, and from http://localhost:3333/folder/, it will attempt to load the file from the same location.
If you move your files over to a proper website, it will still work the same way: www.example.com will look for the file at www.example.com/filetesting.js, and www.example.com/folder/ will look for the same file at www.example.com/filetesting.js.
Hope this helps! :)
I made a simple website. The site is fully functionable in my localhost (my computer). Everything working fine here.
But problem arises when I upload the files into the web server in order for running that in public domain. There, no content is showing except the layout. No link or tab is working, no paragraph inside the body is displaying. You may have a look here.
For what reason?
I uploaded all the files (with source code) associated my website except the images and videos (since there are a lots of images and I will upload it a bit later).
[NOTE: I have xampp local server installed in my computer. All the
sourse codes files are stored inside the htdocs folder. Inside the
htdocs folder I have a folder named jquery(which was installed with
the package). I saved my .JS file inside the JQuery folder (since I
used jquery code too). So when I upload file into the server do I need
to upload the whole htdocs folder? Or how about the JQuery folder
(which contains the JQuery source code)? Do I also need to upload it?
My paths set are the following:
C:\xampp\htdocs\jquery [contains the whole project's source file]
C:\xampp\htdocs\jquery\js [Contains only JavaScript&JQuery file]
If you inspect your page and look where you expect the content to be, you'll find <div id="home">. Looking at the CSS for this, it shows line 258 of your css file has this:
#all_contents >div {
display:none;
}
This is causing all of your contents to not display. Removing this will fix the problem.
Also, if you look on the browser's console when your page loads, you'll notice a lot of 404s trying to load various scripts, stylesheets, and images. That's potentially contributing to the problem. I'd focus on fixing those first, to make sure everything is loading properly.
I tried debugging the HTML on your website. I found the following code in design.css at line number 258
#all_contents >div {
display:none;
}
Once you remove this(display:none), all the content is available on the website link that you shared.
Also, I am not sure why this is working on your local. Are you sure that you have uploaded the same version which is running in your local?
You can debug your webpage by pressing F12 and then selecting the problematic area. On the right hand side, you can see the css rules associated with the selected element.
For getting the specific content in a page and not all, create a new file by the name who_im.html and put your content over there and then You should do something like
About Me
Like this you will have to make other pages as well and add the hyper links to the menu in every page.
I have a very strange issues in production servers. In VbScript application in pages i've linked it to js or css resources. Somehow part of the url, for download js or css resource, connect with some other part of code on the page or in included pages (this is seen in logs already). Other part can be js, css or html code.
For example: full path to resourse
../mydomain/admin/somefolder/css/la-core-main.css
Instead this in logs i see error (System.Web.HttpException (0x80004005): A potentially dangerous Request.Path value...) with next URL:
../mydomain/admin/somefolder/css/lead>
Without a code example it's hard to nail down your problem. On your activation of the download links target _blank instead so it does not try to navigate the user to the file directly.
Download
EDIT: to better address OP's question.
Includes for CSS and javascript only fail due to improperly linked paths. It is possible that you are trying to link the css and js files from the server end of the folder structure and not the client end of the folder structure. Trying to link the css and js files from the server end, you would use the Scripting.FileSystemObject to read in the files and populate them as part of the page. You would NOT use <link rel""...> or <script src=""...> to connect the scripts in the vbscript/asp code.
If you are trying to connect the scripts to the website on the client end, you need to verify the paths of the js and css documents from the website directly. Open the webpage from your browser and build off of the direct path from the website. So that way it specifically matches the containing folders in the website.
Examples:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Final note: Also verify that your js and css documents are in your hosting web application folders so that you can actually get to them via website.
I load any web page. Then open firebug console and run the below javascript, which creates a link element in the head of the page. the code is below.
var s = document.createElement('link');
s.setAttribute('href', 'file:///home/simha/.public_html/new1.css');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
the content of the file:///home/simha/.public_html/new1.css
body { background-color: #0000ee !important; }
I run the code in the firebug console and the following appears in the head of the html
<link type="text/css" rel="stylesheet" href="file:///home/simha/.public_html/new1.css">
But there no change in the background color (change to blue) of the body.
I checked the css rule independently from editing the css in firebug, the background color changes to blue.
I have apache web server installed. So i also tried instead of "file:///home/simha/.public_html/new1.css" to "localhost/~simha/new1.css" still it does not work.
I am using firefox browser.
That's because for security reasons external resources can be loaded from a local URI scheme (like file:) only if the document has been loaded from a local URI too.
Try this,
s.setAttribute('href', 'new1.css');
Your stylesheet named new1.css needs to be referenced in relation to the server's document root.
So you're using Apache, which means you setup the apache2.conf (or httpd.conf, etc) as well as the site conf file(s). The path you used in this config for DocumentRoot will be the reference point. From there you simply put /path/to/new1.css.
So in your case,
file:///home/simha/.public_html/new1.css
will translate to
/new1.css
So your final code will be
<link type="text/css" rel="stylesheet" href="/new1.css">
When you put file:/// prefixing an address, it's not using the server filesystem to load the file, it's using the client/user. This is due to the blank string where the hostname should be - file://_BLANKHOSTNAME_/. Here's more info if you're curious.
For your localhost/new1.css to work, it needs to be prefixed with http:// like this:
href="http://localhost/new1.css"
Otherwise it's interpreting localhost as if it were a directory name and not the hostname.
I think the problem is with file: or localhost in firefox, I saved the file in dropbox and used that link it worked.
var s = document.createElement('link');
s.setAttribute('href', 'https://dl-web.dropbox.com/get/new1.css?w=AACLoomOT900PfGVqEuu9rHP4NlewdOq0KaSZbhzmgyG1A&dl=1');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
But is there any setting in the linux for apache and file to make it work locally.
One possible problem might be the path you have
file:///home/simha/.public_html/new1.css
When you allow per user directories in Apache, it is usually public_html without a leading dot. So, when you rename the directory to /home/simha/public_html, http://localhost/~simha/new1.css should work as expected.
Your code works as is, at least when you use an absolute URL
<button type="button" class="btn btn-info">Info</button>
In the Javascript, I replaced your CSS with the publicly accessible Bootstrap CSS
s.setAttribute('href', 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
everything else is left as is, see JSFiddle
As you can see, the button is coloured like the Info button in the docs at Bootstrap - Buttons.
If you did not solve this problem yet,
Serve all static content from a (http) server of your choice. Do not use file system paths. Firefox wont load them ( in a web page context )
Try to put all the static resources along with your
html, and serve them with relative url.
Now try this thing. open view source, and check if the css path is clickable and is fetching the content according to your expectation. If not, directly access that file from address bar of the browser. (Make sure your localhost is running and you have put all your files related to this in the web server - I normally use /var/www/). Use the path that works like this in your html too. (no file:// protocol, remember).
If you are not success by these, WWJD.
Also tell us when you are successful.