Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2013, 14:19
Аватар для tvixa
Аспирант
Отправить личное сообщение для tvixa Посмотреть профиль Найти все сообщения от tvixa
 
Регистрация: 09.09.2013
Сообщений: 33

Position fixed, но динамический по оси ОХ
Всем здравствуйте. Недавно получила задание следующего характера: существует таблица:список мастеров сверху, а по вертикали время записи. Верхний блок(мастера) должен быть фиксированным по оси ОУ, но при прокрутке по горизонтали верхний блок должен стать динамическим,чтобы фамилии мастеров соответствовали их значениям по оси ОУ.
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2013, 14:56
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Не совсем понял вопрос, но если понял правильно то так:
echo '<div style="overflow:auto; width:200%;">'; 
echo '<div style="position:absolute; width:200%;">'; 
echo '<table border="1" width="200%">';
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo'</tr>';
echo '</table></div><br><br><br><br><br><br><br>';
echo '<div style="width:100%; height:68%;">
<table id="table" width="100%">';

for ($i=0; $i<100; $i++){
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo'</tr>';
}
echo'</div>';
?>

Оформление корявое но работает как положено
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2013, 15:11
Аватар для tvixa
Аспирант
Отправить личное сообщение для tvixa Посмотреть профиль Найти все сообщения от tvixa
 
Регистрация: 09.09.2013
Сообщений: 33

Гробовщик,не совсем. Блок №2 должен располагаться вертикально, а блок с фамилиями горизонтально.прилагаю скрин
когда я прокручиваю вправо верхняя панель с фамилиями остается на месте, хотя ячейки относятся не к ним. Хотела оформить решение через яваскрипт, условием if, но ничего не получается:-((
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2013, 15:21
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Ой извиняюсь, неправильно нихрена( Вот так лучше
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
<body>
<style>
#header {
    width: 150%;
    display: block;
    position: fixed;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}
#header div {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-weight: bold;
}
table {
    width: 150%;
}
thead {
    visibility: hidden;
}
td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 15px;
}
</style>

<script src='http://code.jquery.com/jquery-1.7.2.js' type='text/javascript'></script>  
<script language="javascript">
jQuery(document).ready(function($){
    var $table = $('table'),
 $header = $('#header'),
    $thead = $('thead');
    $thead.find('th').each(function(){
        var $newdiv = $('<div />', {
            style: 'width:'+ $(this).width()+'px'
            
        });
        $newdiv.text($(this).text());
        $header.append($newdiv);
    });
    
     var $viewport = $(window); 

    $viewport.scroll(function(){
     $header.css({
         left: -$(this).scrollLeft()
     });

    });
});
</script>

<div id="header"></div>
<table>
<thead>
<tr>
<th>Время</th>
<th>Иванов</th>
<th>Петров</th> 
<th>Сидоров</th> 
</tr>
</thead>


<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
</table>
</body></html>
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2013, 15:39
Аватар для tvixa
Аспирант
Отправить личное сообщение для tvixa Посмотреть профиль Найти все сообщения от tvixa
 
Регистрация: 09.09.2013
Сообщений: 33

спасибо большое)) чуть чуть доработать и само то)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню (position: fixed в position: fixed) bes (X)HTML/CSS 16 06.07.2012 18:37
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
position: fixed в мобильных версиях Safari Snipe Opera, Safari и др. 0 22.12.2010 16:47
position fixed в IE6 sdff Общие вопросы Javascript 24 27.01.2010 15:16
вопрос по position fixed demi Events/DOM/Window 8 29.06.2009 06:40