locked
Control Pages and IDs

    Question

  • Hi.

    I have this problem. There are pages in our organization's app that are supossed to incorporate mini games on it. Every mini game is implemented as a page control, with the idea that in that way the code of every game would be independent of the others and of the the rest of the app.

    BUT, in the design of the games, some generic IDs were used (as every one of them would represent atomic units on their own), say <div id="timer"></div>, and they collide with each other when more than one is called in the same app page. Page Control's javascript are even able to manage the elements of the page that contains them.

    Until now, we've fixed it by differentiating every ID in the html pages. Is there a more elegant way to manage this?

    Thanks in advance.

    Thursday, October 25, 2012 8:20 PM

Answers

  • In general you want to favor using classes over IDs within page controls for this reason that ids could collide.  Then your page control code should do all of its querySelector/WinJS.Utilities.query on the page control's element, not the document.  And last, when you do CSS styling for each page control, make sure to scope your styles to that particular page control using some unique class at the root of the control so you don't accidentally style another control's element that shared the class name.

    Friday, October 26, 2012 6:18 AM
  • I agree with Brian,

    Even if we're building normal webbrowser hosted web application (instead of Windows Store javascript app), we will encounter such confliction if the app is single page (javascript ) based. In such cases, we should only use ID to identify global or top level containers and under reach top level containers, we use classes to decorate the nested child UI elements. e.g.

    <body>
    <div id='pageContainer'>
    <div id='page1' >
     <div class='page_header'>
      </div>
      <div class='page_body'>
      </div>
    </div>
    
    <div id='page1' >
     <div class='page_header'>
      </div>
      <div class='page_body'>
      </div>
    </div>
    
    
    </div>
    </body>
    Thus, no matter in JS code or CSS style, you can use ID to locate the top level or global elements, and use CSS classes to further select a sub level element. e.g.

    #page1 .page_header


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by AS_L Monday, October 29, 2012 2:27 AM
    Friday, October 26, 2012 8:39 AM
    Moderator

All replies

  • In general you want to favor using classes over IDs within page controls for this reason that ids could collide.  Then your page control code should do all of its querySelector/WinJS.Utilities.query on the page control's element, not the document.  And last, when you do CSS styling for each page control, make sure to scope your styles to that particular page control using some unique class at the root of the control so you don't accidentally style another control's element that shared the class name.

    Friday, October 26, 2012 6:18 AM
  • I agree with Brian,

    Even if we're building normal webbrowser hosted web application (instead of Windows Store javascript app), we will encounter such confliction if the app is single page (javascript ) based. In such cases, we should only use ID to identify global or top level containers and under reach top level containers, we use classes to decorate the nested child UI elements. e.g.

    <body>
    <div id='pageContainer'>
    <div id='page1' >
     <div class='page_header'>
      </div>
      <div class='page_body'>
      </div>
    </div>
    
    <div id='page1' >
     <div class='page_header'>
      </div>
      <div class='page_body'>
      </div>
    </div>
    
    
    </div>
    </body>
    Thus, no matter in JS code or CSS style, you can use ID to locate the top level or global elements, and use CSS classes to further select a sub level element. e.g.

    #page1 .page_header


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by AS_L Monday, October 29, 2012 2:27 AM
    Friday, October 26, 2012 8:39 AM
    Moderator