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)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?