I recently started my first HTML project with the help of Youtube. I'm a beginner and only saw the basics of Javascript in college.
Just finished writing my HTML project and wanted to upload it for free using Google Drive and drv.tw.
The only problem is that certain images and icons do not load (irregularly) enter image description hereand/or the pages on the navigation bar take too long to switch.
My question would be, is it because of the free domain or did I do something wrong in HTML?
When I open the HTML file in Safari everything works fine.
Since I'm new to the community, I don't know exactly what and how much I have to upload to get help. So have mercy on me :'D.
To help troubleshoot, use your browsers "developer" (F12) mode. Look at the Network view to see why the images aren't displayed. For example: It might be "not found", "not authorized", or other reasons.
From your comment, it would appear that at times the page is rendering before the images are available to display or something else is limiting image files from being presented at all.
Once we know why the browser can't display the images, then the cause can be addressed.
Post the .html .js and .css code
Please update your question and show the folder structure. It should look something like:
-site-
|
-js
-css
-images
Copy and paste in the code below the folder structure and list the images and their size.
I am not familiar with google drive's capabilities.
It is important to use a web host. There are plenty of free or low cost sites available, so I won't go into it.
Related
Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.
I'm downloading one page from reddit and saving it locally:
http://www.reddit.com/r/TheRedPill/comments/2uomrv/meta_sjws_are_reportedly_working_with_admins_to/
The HTML is identical in my test.html file, but when I open the local file in a browser, the page display is all messed up. Right Nav disappears, etc.
Normally I'd assume this is a CSS issue (and it definitely could be) but there are only three CSS files in the document, and they are all hosted remotely on www.redditstatic.com -- so they should still be working, right?
Is there something else I'm missing? Is redditstatic somehow smart enough to not serve CSS when I request it from my local machine?
What else could be causing the display issues? How should I troubleshoot?
Reddit uses external CSS, JavaScript, etc. to make it look as feel as it is. The website won't function correctly unless you download them all, even locally because the HTML doesn't know where to find the called file.
Overall mission:
For the purpose of printing, I want to download 330 images that are linked from a Pinterest board. Note, not the thumbnails that you see when visiting a board, but the larger images that they link to.
Context:
Go to a Pinterest.com board of choice and view the source. The relevant hi-res image links can be seen in the page source within the atttribute data-closeup-url
Example URL
http://pinterest.com/stonegarden/misc/
The relevant board is invite-only, I reckon that may be relevant with regards to scripts not being 'logged in' etc.
My question is: How can I download all these 330 hi-res images from a board with the least effort? I.e with a script, with iMacros or anything else. The end result would be a folder that contains all these 330 images downloaded.
Edit, as requested:
What I've tried so far
I'm not using any specific programming language, my skills are limited in that field. Either way, I imagine the problem's gonna be the permissions.
Automating with the Firefox extension iMacros - fails because I can't get it to do anything useful with the image URLs and other reasons
The solution provided by Benno - I can paste the relevant URLs, but fails and says "No permissions for requested resource"
So, how does Pinterest differentiate between a user clicking a thumbnail to get the large image, and Safari trying to download the same resources via the Download window?
Open up your browser's web inspector and go to the Console.
Put in this code:
var s = ''; $('div[data-closeup-url]').each(function() {
s+= $(this).data('closeup-url') + "\n";
}); s;
That will give you the URLs of all the images, then you can just copy and paste them into a URL capturing utility like jdownloader. Takes away the need to do anything related to logging in to their server. Or just write a script to file_get_contents (php) for each URL.
If you use Safari, open the download window and paste the list of URL's into the download window (ctrl+v or cmd+v) and it downloads all of them (tested in safari 6 on mac)
I managed to collect the behavior of a complex web site into a webarchive. Thereafter I would like to turn that webarchive into an html set of nested directory. Yet, when I did it both with Waf and with a commercial software bought on the the Apple store, what I get is just the nested directory with the html page at the bottom and no images, nor css nor working links.
If you are interested the webarchive document is at:
http://www.miafoto.it/it/GiroMilano.webarchive
while the weak product of the extraction is at:
http://www.miafoto.it/it/Giromilano/Pagine/default.aspx
and the empty directories above.
In addition to the different look, the webarchive displays the same behavior as the official web site - when a listbox vales is selected and then the button pushed - while the extracted version produces a page with no contents by loading itself rather than the official page.
As you may see the webarchive is over 1MB while the extraction just little over 1 KB.
What is wrong with it and how may I perform such an apparently trivial business with usable results?
Thanks,
textutil -convert html example.webarchive
Be careful — html with files is created in the same folder as webarchive!
Also, I had to open .html with text editor and replace "file:///image.tiff" links (replace "file:///" with "") so they point to relative path.
Also, not all browsers display .tiff images.
Who knew we have Stack Overflow wiki?
I find that this WebArchiveExtractor.app works on my Mac (Mojave OS) –
https://robrohan.github.io/WebArchiveExtractor/
I managed the issue by finding all parameters being submitted in the page and submitting them too in my script, ignoring the webarchive.
To save HTML pages on mac, I use chrome. Download and install it and save your page as HTML. Safari will save the web pages with webarchiveformat and for me, it's very hard to deal with it.
I have made a page in html5 with css3. It works fine on local (I dont use any server, just doubleclick in the index to open it).
I want to put it in google drive. I have load all the documents needed, but when I try to open the html, I can only see the text (I mean, it is not being executing, I can see just the source code).
Any suggestion?
Not available any more, https://support.google.com/drive/answer/2881970?hl=en
Host web pages with Google Drive
Note: This feature will not be available after August 31, 2016.
I highly recommend https://www.heroku.com/ and https://www.netlify.com/
EDIT: As of August 2016 Google Drive can no longer be used to host static web pages, so this solution no longer works.
Create a new folder in Drive and share it as "Public on the web."
Upload your content files to this folder.
Right click on your folder and click on Details.
Copy Hosting URL and paste it on your browser.(e.g. https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM)
It will launch index.html if it exist in your folder other wise list all files in your folder.
I don't think it is necessary to "host" the content using the way from the accepted answer. It is too complicated for a normal user with limited developing skills.
Google actually has provided hosting feature without using Drive SDK/API, what you need is just few clicks. Check this out:
http://support.google.com/drive/bin/answer.py?hl=en&answer=2881970
It is the same to the answer of user1557669. However, in step 4, the URL is not correct, it is like:
https://drive.google.com/#folders/...
To get the correct host URL. Right click on the html file (you have to finish 1-3 steps first and put the html in the public shared folder), and select "Details" from the context menu. You will find the hosting URL right close to the bottom of the details panel. It should look like:
https://googledrive.com/host/.../abc.html
Then you can share the link to anyone. Happy sharing.
Now you can use
https://sites.google.com
Build internal project hubs, team sites, public-facing websites, and more—all without designer, programmer, or IT help. With the new Google Sites, building websites is easy. Just drag content where you need it.
While drive allows you to edit plain text and HTML files I don't believe they allow the HTML to actually be displayed. I don't think they want people hosting websites from their drive space.
A lot of the solutions offered here do not seem to work anymore. I'm currently on a chromebook and wanted to view an HTML5 banner. This seems impossible now through Google Drive or other apps (as mentioned in previous comments).
The method I ended up using to view the HTML5 was the following:
Open Google Adwords (create a free account if you dont have one)
Click on Ads in the top panel
Click on "+AD" and choose image ad
Choose "upload an ad"
Drag and drop your zip file into the area
Click on Preview
Voila, you will see your HTML5 banners in their full beauty
There may well an easier way, but this way is pretty good too. Hope it helps and worked well for me.
Create a new folder in Drive and share it as "Public on the web."
Upload your HTML, JS & CSS files to this folder.
Open the HTML file & you will see "Preview" button in the toolbar.
Share the URL that looks like www.googledrive.com/host/... from the preview window and anyone can view your web page.
Found method to see your own html file (from here (scroll down to answer from prac): https://productforums.google.com/forum/#!topic/drive/YY_fou2vo0A)
-- use Get Link to get URL with id=... substring
-- put uc instead of open in URL