I'm looking to save out a div content (code and all) block by it's ID/CLASS on button click as an html file. Due to specifics of the project saving it out as an image through canvas wasn't an option.
So far I've tried the download attribute, which seems to be unsupported by Safari 10 and back, as well as, IE in general. From there I moved on to FileSaver.js which worked like a dream until I started incorporating required fields into it. After I did some reading on their site, it seems this is an issue for others as well.
I've prepared this fiddle to give you an idea of what I'm working with code wise and for a point of view for any suggestions out there.
Related
So I am just starting out trying to familiarize myself with some HTML, and for lack of knowledge of better places to start, I have been looking at some source code taken from websites and copy and pasting them into a notepad and then running the html file. But when I do this I often get incomplete pages with no links working(for example stackoverflow website). Is this because I don't have the images saved on my website, or because there are CSS and javascript pages that are hidden, or what other reason?
Why do simpler webpages (say http://sheldonbrown.com/web_sample1.html) look mostly complete when i do this, but more complicated/bigger websites have this problem?
Also if anyone has a good alternative to learning HTML that would also be appreciated.
Thanks
Just to add onto this question, is there something wrong with writing html in a notepad? I noticed that even if i have a text file that says "hello" and nothing else, running it as a html file will show hello, should this happen? Also, it seems to ignore my conditional statements say I do
i am not ie
the "i am not ie" message still appears in all browsers (IE included). Why is this the case as well?
Say I have a very tiny webpage, http://www.my-tiny-page.com:
<html>
<body>
<img src="/images/example.jpg" >
</body>
</html>
You look at the source, simple enough, and copy it to your notepad, and open it.
HEY! The image is not loading?!
The reason for this is really simple actually. The tiny-website links to the image relatively, which means they don't add the full domainname to it (= a lot easier).
Relative means "look from the directory where I am", or when starting with a slash it means "look from the extention (also know as document root)".
If you change the images to the full url, it'll work again:
http://www.my-tiny-page.com/images/example.jpg
How about styling and javascript? Exact same principle.
The reason it's not working is because the HTML only contains the basic structure and content of the site. Images are almost always linked relative to the root directory, meaning your browser is not going to be able to find them unless you saved the images in the same folder structure as the website. Without the CSS files(styling), Javascript files(functionality), images, etc. it's not going to look anything like the page where you're getting the code from.
Also, chances are the code you are seeing could have been generated by PHP, either way, it's probably too advanced for someone just starting out.
My suggestion would be to take an online course, there are several beginner HTML/CSS courses available. I was a big fan of Code School when I first started out.
Learn the basics of HTML first(html/body tags, headers, divs, etc.) before moving on to more advanced stuff.
To address your additional question:
No. There is nothing wrong with using notepad to write HTML, in fact, back in 2004 when I first started, that is exactly what I used. However, we have come a long way since then. There are now text editors that can predict what you are trying to do as well as color code your tags to make it easier to debug. While there's nothing wrong with using Notepad, I would STRONGLY suggest using something like Sublime Text instead, it will make your life much easier.
Here is what a proper conditional statement to target only IE would look like:
<!--[if IE]>
Only IE browsers can see this.
<![endif]-->
You can also target specific versions of IE. That would look like this:
<!--[if lt IE 8]>
Only IE7 or lower browsers can see this.
<![endif]-->
In the above conditional statement you are saying, if the browser is less than(lt) IE 8, then display this.
I am wanting to find a way I can have others edit a html webpage (found locally) and allow them to save the changes they have made.
I know this is an odd request, I have a very specific idea in mind, which I will include below as an optional read for those interested.
I found that this code in the address bar works for the editing: document.body.contentEditable='true'; document.designMode='on'; void 0
Then I found that just adding:
<div id="columns" contentEditable="true">
gets the job done since I can edit the html.
The problem is that I cannot save the changes. I have tried saving the page in several different formats, including webpage/complete, HTML only, TXT file.
Is there anyway to save these edits whether by saving the HTML or using some other kind of simple storage?
Reasoning:
I have a simple local html page I will be using with other co-workers. These co-workers are not very tech-savvy (even less than me). The very mention of trying to explain how to edit the html and make changes to the text created blank stares, and an unwillingness to work on the project. I would very much prefer for them to be able to edit the text of this HTML page from the front end and not mess up any of the coding.
Also, I have installed a Xampp server, and wordpress - this has become a bit overkill for the purpose and again, has confused the others.
Thanks,
Go into JavaScript. Select and right-click on . Click copy as html. Then save into a .txt file somewhere. If you want to restore the website, right-click on and select Edit as html. Copy/paste the code in. Then it's back to normal.
You can use localStorage to save the data in the user's browser.
I am working on a project that requires me to display an image when it is uploaded, and I have tried several solutions to no avail (See: option 1, option 2). In each case, I can get the solution to work in an independent set of test HTML/CSS/JavaScript files, but it cannot be integrated into the project. I have rewritten the HTML and Javascript of the main project a couple times, but the problem remains. What else might I try, or where else might I look, to resolve this difficulty?
Edit: To clarify – the first option is a working solution. I can run it in an independent HTML file, and it uploads and displays images. Yet, whenever and however I attempt to use this solution in the other project, the upload appears to be successful but the thumbnail image doesn't appear. This is the case even when the exact text of the solution above is pasted in, and this is a problem I have had with other solutions. I am asking for general troubleshooting advice – what I might do to understand where it is going wrong
Edit: Now I see that the functionality is there (i.e. images display correctly) in Firefox (Version 18.0.1), but images do not appear at all in Safari (Version 6.0.2). My revised question, then, is why would they not display in Safari?
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola
Having problems in IE7.It does not show me the "mouse over- drop down".
This "mouse over" was working well till yesterday also works in FireFox.
There a table that displays all the current documents.When one does a mouse over on a given document,it displays a list of options in form of a dropdown.
Can it be corrected in IE settings etc?
I am not talking about the javascript here , only the user settings.I am strictly the end user in this case.Also i tried downloading IE8 and it stopped in between.Hence I checked the ActiveX settings in IE and it was enabled.
Kindly help.
Your question seems well-founded, but it's difficult to discern what the question is exactly. Could you please elaborate? Source code may also help.
If you'd like to go a more DIY route, try throwing your code at JSLint. It will magically surface errors you didn't see.
Sitecore generates a lot of temporary and debug code files. This could be the problem. I would try deleting all of the temp/debug files, and see if that helps. They are scattered throughout the site, so you have to hunt for the debug directories.
However, I do see a lot of WEIRD JavaScript things with SiteCore. Sometimes I will load the content editor, and it wont work because of JS errors. I clear my cache and refresh and it works fine. But nothing in the JavaScript should be changing, since it would be the scripts from the vendor. I don't go in and change JS. Maybe they are generating JS somewhere.