Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.

Fancybox fails when page is rendered as XML/XHTML #623

Closed
tigerhawkvok opened this issue Jun 18, 2013 · 10 comments
Closed

Fancybox fails when page is rendered as XML/XHTML #623

tigerhawkvok opened this issue Jun 18, 2013 · 10 comments

Comments

@tigerhawkvok
Copy link

Title says it all. Doesn't do a thing. By changing the file extension, for example, from .html to .xht (or by changing the way the server delivers the file) it breaks FancyBox.
@fancyapps
Copy link
Owner

I do not see why the file extension should impact JavaScript.

@tigerhawkvok
Copy link
Author

Citation: https://developer.mozilla.org/en-US/docs/Writing_JavaScript_for_XHTML

There are numerous reasons why this is the case, the most common of which is document.write() which should be replaced with node creation for the most part.

@tigerhawkvok
Copy link
Author

As a test case -- you can use the provided demo file, and change the first three lines to the following:

then save the file as "index.xht" and open it in the browser. You'll see FancyBox fails.

@fancyapps
Copy link
Owner

You should then make changes to the file as noted in the page you posted.

@tigerhawkvok
Copy link
Author

The changes in the link posted are for the javascript -- there is no change to be made to the source code. As I mentioned, doing nothing more than changing the opening lines of the provided demo to:

<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Will break the implementation (I'd upload the file if I could). Or, to quote the Mozilla dev document:

To test the following examples locally, use Firefox's extension switch. Just write an ordinary (X)HTML file and save it once as test.html and once as test.xhtml.

On my own page, for the pages I need FancyBox, I'll probably change the way some things are served and do further debugging, but for broad compatibility, this is a change that's need in FancyBox, and a legitimate bug for a legitimate use case (serving a document as xhtml, thus using the faster xml parser in a browser and strictly enforcing correct code syntax).

To once again quote Mozilla:

Problem: My Favourite JS Library still Breaks

If you use JavaScript libraries like the famous prototype.js or Yahoo's one, there is bad news for you: As long as the developers don't start to apply the points mentioned above, you won't be able to use them in your XML-XHTML applications.

Two possible ways still are there, but neither is very promissing: Take the library, recode it and publish it or e-mail the developers, e-mail your friends to e-mail the developers and e-mail your customers to e-mail the developers. If they get the hint and are not too annoyed, perhaps they start to implement XML features in their libraries.

I like what I see here, and I'd love to see it properly compatible!

@Spetnik
Copy link

Spetnik commented Jun 15, 2017

Why is this closed? Fancybox is still not xhtml-compatible.

@mjcampagna
Copy link

Because it's 2017. Stop using XHTML, get on with HTML5. Else go back to Fancybox 2 if that's the era you want to work in.

@Spetnik
Copy link

Spetnik commented Jun 16, 2017 •
edited
Loading

@mjcampagna HTML5 fully supports XML-serialized HTML, or XHTML. It is a current standard and used by many templating systems. It is an active part of the HTML5 standard: https://www.w3.org/TR/html5/the-xhtml-syntax.html

And especially when dealing with a commercial product like Fancybox (yes, I would be a commercial user), "stop using XHTML" is hardly helpful or appropriate.

@fancyapps
Copy link
Owner

@Spetnik Sorry, I have no idea what do you mean by "not xhtml-compatible" and you have not given any clue.

I do not see any issue with fancyBox - it creates valid html code that you can customize, if needed. Yes, the script uses HTML5 data attributes, but you can write your own click handler that opens fancyBox manually (using $.fancybox.open()).

@Spetnik
Copy link

Spetnik commented Jun 16, 2017

@fancyapps Thanks for the response.

When clicking on a fancybox element in a page served as "application/xhtml+xml" (the content-type for XHTML), Chrome gives the error: Uncaught DOMException: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document.
I am looking at the code now and I have found several instance where the HTML is not XML-compatible (e.g. <div data-fancybox-next ... - XML-compatible HTML would be <div data-fancybox-next="data-fancybox-next" ...).

I'll create a pull request to fix the issues.

@Spetnik Spetnik mentioned this issue Jun 16, 2017
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tigerhawkvok @fancyapps @Spetnik @mjcampagna