SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I apply HTML5 to my AJAX panels?

    Can anyone advise me on how to apply HTML5 sectioning to my AJAX panels which I am building using jquery ui.
    Here is the code so far:

    This is the ul list on the main page. These are the links to my content which is used by the ui.tabs.js file as a tab set.

    Code:
    <ul>
         <li><a href="description.html">Description</a></li>
         <li><a href="learning_objectives.html">Learning Objectives</a></li>
         <li><a href="testimonials.html">Testimonials</a></li>
         <li><a href="FAQ.html">FAQ</a></li>
         <li><a href="contact.html">Contact</a></li>
         <li><a href="information.html">Information</a></li>
         <li><a href="pictures.html">Pictures</a></li>
    </ul>
    Here is the css so far ( contained in a linked css file ):

    Code CSS:
    /* group of tabs */
    #tabSet {
     
    }
     
    #content .ui-tabs-panel h2 { font-family: Arial; margin-left: 0; color: red; width: 100%; font-size: 1.8rem; font}
     
    #content .ui-tabs-panel p { font-family: Arial; margin-left: 0; color: blue; width: 100%; font-size: 1.2rem;}
     
    #content .ui-tabs-panel p.clear { clear: both; }
     
    #content .ui-tabs-panel ul { font-family: Arial;  }
     
    #content .ui-tabs-panel ul li { font-family: Arial;  margin-left: 10%; color: red;}
     
    #content .ui-tabs-panel ul a { font-family: Arial; color: red;}
     
    #content .ui-tabs-panel ul a.home { font-family: Arial; color: red; width: 100%; clear: both;}
     
     
     
    /* style for hiding panels */
    .ui-tabs-hide {
    	display: none;
    }
     
    /* for ul holding tab li elements */
    .ui-tabs-nav {
    	margin-left: 5%;
    	padding: 0;
    	list-style: none;
      zoom: 1;
    }
     
    /* tabs */
    .ui-tabs-nav li {
    	padding: 0;
    	margin: 0 5px;
    	float: left;
    }
     
    /* style link inside tab */
    .ui-tabs-nav a {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	color: #999;
    	background: yellow;
      text-decoration: none;
      display: block;
      padding: 5px 15px 3px 15px;
    	border: 1% solid #999;
    	border-bottom: none;
    }
     
     
    /* link style for selected tab */
    .ui-tabs-selected a {
      color: #000;
      background: #99FF66;
    	position: relative; /*position to overlap panel to remove border line between panel and tab */
    	top: 1px;
    }
     
    /* remove outline around link of selected tab */
    .ui-tabs-nav a:focus {
      outline: none;
    }
     
    /*panel style*/
    .ui-tabs-panel {
    	clear: left;
    	/*border: 1px solid #999;*/
      	margin-left: 4%;
    	padding: 1%;
    	background: #99FF66;
    	width: 90%;
    }

    I'm assuming that the jquery "ui.tabs.js" creates a div for the panel when it renders the html to put the content on the page.

    Here is one of my html files:

    <h2>Description</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.<br/>
    </p>

    Presumably I need to do something like this on my html pages?

    <header>
    <h2>Description</h2>
    </header>

    <article>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.
    </p>
    <article/>

    Any constructive comments or advice would be greatly appreciated. Thanks for looking.
    Last edited by TechnoBear; May 6, 2012 at 03:49. Reason: Code tags added


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •