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?
Related
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.
I've asked this question earlier on which has been technically answered by Bardh Lohaj but unfortunately the answer itself presents a further problem. The question is about a cool way to ajax upload files in a multi field form. The solution would work perfectly except that because the form is using bootstrap.min.css in order to display form sections in JS triggered tabs - meaning the form is nicely broken up into manageable parts while remaining all as one page, means the nice solution offered by Bardh does not function correctly. What is the best way forward to resolve the css/js conflict in order to get both functions to operate fully? I've never had this sort of problem before.
As requested, here is a fiddle of the page, I cannot get the +1 feature seated in Section 3, to work on the fiddle as it does on the real page. Fiddle: http://jsfiddle.net/k3dj214k/2/
I want to get this working in the file upload section (Section 3) of the page on the above fiddle. I've tried several times but always with the same failure - the bootstrap.min.css that is required for the tab function, breaks the file upload function. Advice on how to get them both working together is appreciated.
There is too much code to paste in here, please review jsfiddle link above
The accepted and used solution is not one I'm hugely proud of but it IS functional. Separate the upload form function from the main form so they are two separate pieces of html/php. Break the primary form part way through (close the form) and enter the file upload form as an iframe. After this, re-open the original form.
Not a wonderfully technical solution, but is does work with minimal issues/problems.
I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.
Do any of you have an idea how to accomplish this either by using javascript/java/flash?
Any option will do as long as it works...
P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.
Thanks a lot!
Currently possible alternatives:
rasterizeHTML.js:
this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo:
http://cburgmer.github.io/rasterizeHTML.js/
Lively 3D:
On the tool's website you can find a demo as well and it is still supported and developed.
http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html
HTML2Canvas:
Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.
https://html2canvas.hertzen.com
Old-Answer:
I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.
In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.
I'm currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night.
It's made of HTML, Javascript and a bit of PHP to access a DB.
Recently we discovered that the page keeps loading infinitely when you arrive on the website... It brokes some of our JS code and we don't know how to identify the ressource that might be corrupted or so...
What can make a page load "forever" ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
Many thanks
You're not crazy - this page does indeed take a very, very long time to load.
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it's best to defer loading of most of these assets until you need to display them, or at the very least until after you've loaded the assets you need right away.
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appear to load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
A few hints for this particular page:
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you'll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That's quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg's, except for the transparency. If you're feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you're willing to use WebGL, I have some code you can use.
Stops loading fine for me. Firebug will usually tell you if something is loading in the background. Look at the console area to see if any thing is stalling upon page load. Are you saying in it's current state it hangs, because for me it finished just fine.
In the console you can also see javascript errors that may cause things to not work properly.
In JavaScript console:
Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979
It says that debout.pop02 is not declared. Where do you initialize it?
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.