Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

is html 'import' possible?

Home Forums Older releases 0.9.x is html 'import' possible?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2444
    DavidLen
    Participant

    Hi

    I’m trying to use the html 5 ‘import’ directive for embedding a single menu definition into multiple pages.

    Is that possible?

    Is there a working example?

    David L.

    #2454
    admin
    Keymaster

    Hi, nope, there is no “official” working demo or any “non-official” that I am aware of. To be honest, I am not very familiar with the “spec” and having in mind it’s still a draft:

    http://www.w3.org/TR/html-imports/

    and the scarce browser support:

    http://caniuse.com/#feat=imports

    I’d say it’s actually quite unsafe to use it for anything other than testing purposes.

    Anyway, here is a good tutorial that might help (I guess you might have already seen it but still):

    http://www.html5rocks.com/en/tutorials/webcomponents/imports/

    I may try to test this when I have some time but, unfortunately, right now I am not able to help you out with exact instructions.

    #2464
    DavidLen
    Participant

    thank you for your help

    the load is working fine, but, the list that makes up the menu gets displayed as a text, instead of becoming the menu.

    that’d indicate that it’s loaded too late in the page’s creation sequence, and I do not know enough to mess with this.

    thanks again

    David L.

    #2489
    Laurent
    Participant

    I was looking to do the same thing. I want to use the SmartMenu on 100s of pages, but I wanted to maintain only one file with the menu bar as it changes from time to time.

    You are right, this is a question of timing for loading the external file.
    After fiddling around a little bit, here is the code that works. It basically wait for the content to be inserted/loaded before initiating the menu. Therefore it should work.

    Replace the initial code to initiate the SmartMenus:

    
    $(function() {
      $('#main-menu').smartmenus();
    });
    

    With this code which will load the file /YourMenuFile.html and then once completed, will initiate the smartmenus and only then.

    
    <!-- SmartMenus jQuery init -->
    <script type="text/javascript">
        $(function() { 
    	    $("#includedContent").load("/YourMenuFile.html", function() {
    		$('#main-menu').smartmenus();
    		});
    	});
    </script>
    

    In the Header of your pages, you can add the following DIV.

    
    <!-- Beginning of the header page with the SmartMenus -->
    <div data-role="header" id="includedContent"></div> 
    <!-- end of the page header -->
    

    And your file /YourMenuFile.html would look like that , just your list menu.

    
    <ul id="main-menu" class="sm sm-blue">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a>
        <ul>
          <li><a href="#">Item 2-1</a></li>
          <li><a href="#">Item 2-2</a></li>
          <li><a href="#">Item 2-3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a></li>
    </ul>
    

    Enjoy!

    #2519
    DavidLen
    Participant

    Thanks, works like a charm, exactly what I wanted.

    David L.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘0.9.x’ is closed to new topics and replies.