Code for displaying Index items on web? - html

Ok so I've made an basic upload system with php to upload files from a device to a selected folder.
Trouble is the look of the folder where the files go to is basically the default index look(Basically it looks bland)
I'm wondering what code (html, php etc.) can display the items inside as a more user friendly way.

Get the hierarchy of a directory with PHP
... and style that using css or use a javascript api like Galleria or jsTree

Related

Can I bundle partial HTML and linked CSS into one file using node.js

I work on a project where I only have access to the text editor in CMS, so I create HTML files on local and copy the piece of HTML(content area), CSS and scripts to the CMS editor, is there a way I can use maybe node.js and set up something that can build a file with merged CSS and HTML(content are only) every time I make a change to CSS or HTML.
grunt-processhtml was the answer, I was able to combine CSS, chunk of HTML and JS into one file using this.

HTML File that watches folder and displays images

Can you have a HTML file "index.html" sitting in a folder that looks at an images folder and will render whatever is in that folder with certain styling?
The catch is the images folder can be added to so can it watch all new files added and render them.
Any suggestions would be great.
HTML Documents when served to the client, are rendered in the browser, which, even with JavaScript, will not know the layout of the filesystem on the server for your images folder.
The only really logical way to do this is use a server side language to processess the request (eg: PHP) to list all the files and write the HTML needed dynamically.
The alternative would be to have some sort of endpoint that would list the image names, and use javascript to dynamically add them to the document on page load, at the end of the day it's personal preference, but without either enabling directory listings for your webserver or using a server sided language of somesort somewhere, what you're asking isn't really possible.

How to create a link to a html file using the Meteor local server?

Currently, I have an html file which has a basic layout of a login page which has an option for new users to sign up if they're not a member.
I have the following line inside of my html :
Join Us!
What I want to have happen is load up a new HTML page which will be a modal (using twitter bootstrap) that will ask the user to input the correct data to create a login/pass combination.
But this isn't working. It keeps doing the following (doesn't do anything) :
http://localhost:3000/register.html
I'm a little confused whether my HTML is wrong or MeteorJS requires some sort of specific way to do something like this.
You can use a relative url: Example: register.html only
If your file is into the same project, you don't need to put him an url absolute.
Put your register.html file in your project's /public directory and you will be able to access it via /register.html. However that page will run outside your Meteor app and won't have any Meteor functionality per se.
The /public folder maps to / and is normally used for images and other client-side assets. It's common to map /public/images to /images for example.

Integrating html and CSS files in Spring-MVC project

I am working on a Spring-MVC project. Currently I have a few classes in order and I can save the information in database and retrieve it. I now have a website template in HTML, CSS, JS, images. I would like to pull this template into my spring project. Structure is as follows. I would like to know in which order I should create the directories and where to place them, so references will be parsed without error.
Structure :
webapp/
|--resources/
|
|+-WEB-INF/
+--web.xml
+--classes/
+--spring/
|+--root-context.xml
|+--appServlet/
|+--servlet-context.xml
+--views/
user.jsp
The template I am using has this format of referencing information
img/products/name_of_image.jpg
<a href="contact.html"/>
css/css-filename.css
js/js_filename.js
The user.jsp is the landing page and I have already put the HTML code for home inside it. I would just like to know how to structure the directories so I can directly put all those files and the template will work. Thank you for your time.

Is there a way to export a page with CSS/images/etc using relative paths?

I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.