Центр динамически созданной ячейки таблицы в окне

Question

Я работаю над папкой сотрудника, которая позволяет пользователю искать сотрудника и отображать информацию о них в макете типа дерева/орг-диаграммы. Я использую код Google's Org Chart для рисования диаграммы. Он отображает контактную карточку каждого сотрудника в <td> с менеджерами и подчиненными выше или ниже этого в другом <tr>. Результат выглядит примерно так:

Если работник имеет более чем горстки подчиненных, пользователь должен прокручивать по горизонтали, чтобы увидеть их все. Не проблема.

Моя проблема заключается в том, что если есть более чем 10 или около того, вы теряете из виду работника вы искали полностью и приходится прокручивать вправо, пока вы не найдете их:

Это кажется, что это будет раздражать. Я попытался просто сбросить <a name="anchor"> на карту и прыгнуть на нее при загрузке страницы, но она прокручивает достаточно далеко до , едва поместил его на экран.

В идеале он будет центрировать карту, положив ее прямо в фокус пользователя.

Есть ли способ перейти непосредственно к сотруднику, о котором идет речь, когда страница загружается?

Если это помогает, вот фрагмент кода для того, что индивидуальная карта выглядит следующим образом:

<td> 
    <h1>Mike</h1> 
    <div class="cardBody"> 
     <img src="Images/stock1.jpg" style="float:left; margin-right:5px;" /> 
     <table class="data" cellpadding="0"> 
      <tr> 
       <td><i class="fa fa-briefcase"></i></td> 
       <td><span style="color:red;">President</span></td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-building"></i></td> 
       <td>Administration</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-globe"></i></td> 
       <td>Home Office</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-phone"></i></td> 
       <td>Ext. 2402</td> 
      </tr> 
      <tr> 
       <td><i class="fa fa-envelope"></i></td> 
       <td><a href="mailto:email@address.com">Send Email</a></td> 
      </tr> 
     </table> 
    </div> 
</td> 

Answer 1

Немного смущенный тем, что вы пробовали далеко. Работает ли jQuery для вас? Если да, то this solution кажется достаточно простым.

$(container).scrollTo(target); 

Теперь, если вы можете передать свою «цель» через запрос url. Вы должны быть в состоянии разобрать и использовать его следующим образом:

Примечание: Это предполагает, что вы есть URL, как www.website/searchpage.html?i=targetID

Также: Это настройка для работы с идентификаторами, поэтому измените код, если вам нужно работать с классами.

var params;  
function parseURLParams(url) { 
     var queryStart = url.indexOf("?") + 1, 
      queryEnd = url.indexOf("#") + 1 || url.length + 1, 
      query = url.slice(queryStart, queryEnd - 1), 
      pairs = query.replace(/\+/g, " ").split("&"), 
      parms = {}, i, n, v, nv; 

     if (query === url || query === "") { 
      return; 
     } 

     for (i = 0; i < pairs.length; i++) { 
      nv = pairs[i].split("="); 
      n = decodeURIComponent(nv[0]); 
      v = decodeURIComponent(nv[1]); 

      if (!parms.hasOwnProperty(n)) { 
       parms[n] = []; 
      } 

      parms[n].push(nv.length === 2 ? v : null); 
     } 
     return parms; 
    } 

$(document).ready(function(){ 
    params = parseURLParams(window.location.href); 
    $("#Container").scrollTo("#"+params.i); 
}); 

Надеюсь, это поможет кому-то.

Редактировать: Я понимаю, что вы хотите, чтобы он был центрирован, что будет немного сложнее.Вам понадобится, чтобы ваш контейнер был намного больше (или бесконечен?), Чем требовалось для того, чтобы он соответствовал всем данным, а затем прокручивается до положения нужного элемента плюс смещение для половины ширины представления контейнера и на половину ширины элемента. Возможно, вы просто хотите создать невидимый элемент с абсолютной позицией при вычислении этого числа. Затем переместите элемент в это положение и, наконец, экран этого элемента.

Answer 2

Вы могли бы добавить к URL, чтобы так подскакивает к DIV с определенным идентификатором. Например, в коде карты вы вывесили вы измените дела до этого:

<div class="cardBody" id="mikeCard"> 

Затем изменить ссылку на страницу с

<a href="employees.html#mikeCard">Link to page with Mike's card centered</a> 

или если вы хотите сделать ссылку на ту часть из та же страница только делает

<a href="#mikeCard">Jump to Mike's card</a>