Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

using <!DOCTYPE html> will deactivate/breaks layerJS functionalities #2

Open
kennytordeur opened this issue Nov 10, 2016 · 1 comment
Open

using <!DOCTYPE html> will deactivate/breaks layerJS functionalities #2

kennytordeur opened this issue Nov 10, 2016 · 1 comment
Assignees
@kennytordeur
Labels
bitbucket-migrated bug prio:high

Comments

@kennytordeur
Copy link
Contributor

Description:
*was reproduced with the nested example from the wiki.

  • In the html file, insert at the first line.
  • Save.
  • Open the webpage in the browser (tested with chrome: Version 54.0.2840.71 m (64-bit))

Result:
Nothing is showing (no content?)



Originally created at 2016-11-03 08:21:57+00:00 (UTC) by GYoffe26 as a(n) major issue.
@kennytordeur kennytordeur mentioned this issue Nov 11, 2016
Closed
@kennytordeur
Copy link
Contributor Author

This is correct. When is used, we say to the browser that we will use HTML5. HTML 5 doesn't allow custom attributes. It accepts custom parameter in the form of data-* format. This is because HTML5 adds a property dataset to each element. This property can be used to access data-* attributes.

If you don't want to use the data-lj-* format but just lj-* format in an HTML5 document, you have to define the lj namespace in the HTML document. This can be done on the HTML tag.

<!DOCTYPE HTML>
<html xmlns:lj="http://layerjs.org">
<head>
  <script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.3.0.js"></script>
  <link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.3.0.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div lj-type="stage" style="width:100%;height:500px">
    <div lj-type="layer" lj-default-frame="frame1">
      <div lj-type="frame" lj-name="frame1">
        ... content of frame 1 ...
      </div>
      <div lj-type="frame" lj-name="frame2">
        ... content of frame 2 ...
      </div>
    </div>
  </div>
  <a href="#frame1">Frame 1</a>
  <a href="#frame2">Frame 2</a>
  <script>
    layerJS.init();
  </script>
</body>
</html>

@thomashandorf don't know if the wiki needs to be changed so that is uses data-lj-* format or to define a custom namespace?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kennytordeur kennytordeur

Labels
bitbucket-migrated bug prio:high
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thomashandorf @kennytordeur