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.
Related
Edit: The page code can be found on my page URL. I don't know where the fault might be. Please help.
Problem:
When we click to the chess puzzles page for the first time, they work. However, the boards vanish when we re-click to them from the homepage.
Demo:
This is the home page.
You click on a player's picture and you are taken to this page. Please note that the boards appear in this one.
But you see that link to go back to the puzzle list. You click on that and you land on the home page again.
Now, if you click on any of the players' photo (or even the same player's photo), this is what you get.
From now on, none of the puzzle links would work.
You can check it yourself at chess-puzzle.com.
Few information:
The site used Cloudfare. I tested with Cloudfare (inactive) a few minutes back yet the problem is not resolved.
I validated JS and it seems to be okay.
I have only one CSS file on my own (mycss.css). Other external files came with the piece of software.
I don't know which code to share because I don't know why this might happen. Though I can share any code by editing this question if asked for.
Can anybody please provide an answer to this.
The problem is that you have the attribute async in the scripts (jquery, chessboard) and that means that they do not load in any particular order.
But, the chessboard uses jquery at some points so if the chessboard script loads/runs first it will crash because it does not find jquery.
The script at the bottom will also fail as it might run before jQuery is loaded.
Finally you have included the chessboard script twice in the `head.
The best solution for your case would be to move the scripts at the bottom of the body, right above your inline script and remove the async attribute from them.
This is a follow up to a previous, unanswered question of mine.
Goal: an input field in a web page (the general sense, not a form specifically) where input of certain patters, such as $\int$, will render math - an integral sign in this case, within the field itself, not in a separate preview box.
In the linked question I linked to a conteneteditable div implementation with MathJax I attempted, but failed (works somewhat on IE, which doesn't count). Please no lip on how contenteditable is terrible, I know this very well now.
I came across the IXL website, which they have an interesting implementation which works nicely for superscripts and fractions (at least). After answering a few questions you get a toolbar, but you can type Shift+^ to see a superscript immediately.
I think I can expand this for other things I need, but I'm not sure what in their code does this - it looks like a canvas, but I'm not sure, and I was hoping someone smarter can recognize immediately what they're using. The source of the page has the JS.
I've posted on MathJax GitHub and some other tools to advance a solution, but currently no one has this functionality properly (only the 'preview' box).
SO is my final attempt - the diversity of people here hopefully can get me started. I just need to focus my reading - the first lines of code, how is a fraction rendered as that box over line over box in the input field.
I apologize for not posting code of my own, my previous question was my best attempt so far.
As per jiggzson's suggestion, I checkout out Guppy, forked it and it's awesome (as far as my needs). You can check my fork at https://github.com/uperetz/guppy. I'll post my latest demo there now. Current branch is textmix but I'm hoping Daniel will merge to master.
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
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?
Alright, I'm ready to take the PHP plunge. I've got an HTML5 animation with table sorting tools (a button for "by date," another for "by title"), and I wanted to have these sort a table on the same page. I've Googled around and haven't found any suitably customizable ready-made table sorters, so I've learned some PHP basics as well as a bit of jQuery, and wanted to do this.
The HTML5 animation was compiled in Hype, and is technically an HTML document referring to a .js file.
If this is possible, any help is appreciated.
EDIT
Alright, I've got some code for you. There's more than a bit of it, so brace yourselves. This first one is from the "Hype.js" file, which is the file in question. Once again, this was completely compiled by Hype.
(dead link removed)
Now here's headeranimated_hype_generated_script.js. The second part of the link (starting with http://) is a link to the page I intend to put the table on, but since I've got less than 10 reputation, I'm limited to 2 links.
(dead links removed)
(I figure it's easier to view them in-browser as a standalone page rather than a comment box here)
My concrete question is, is it possible to use PHP or possible jQuery to use custom buttons to sort a table?
You can use the JQuery Table Sorter Plugin.