blocare cap de tabel

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje: 285

blocare cap de tabel

Salutare,

Incerc sa "inghet" capul unui tabel, am un exemplu luat de aici :
github.com/jmosbech/StickyTableHeaders

Insa am deja creata pagina web, vreau sa introduc doar acel tabel.
Codul meu este:

Cod: Selectaţi tot

<body>
<div id="navbar">
	<div id="navbar_general">
		<div id="navbar_first">
			<ul>
				<li><a href="index.html" class="active">LINK 1</a></li>
				<li><a href="#">LINK2</a></li>
			</ul>
		</div>
		<div id="navbar_second">
			<ul>
				<li><a href="#">SUBLINK 1</a></li>
				<li><a href="#">SUBLINK 2</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
fisierul css:

Cod: Selectaţi tot

#navbar_first ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

#navbar_first li {
    float: left;
}

#navbar_first li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar_first li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
Am introdus tabelul insa capul de tabel se opreste la margin-top: 0px, pe cand al celui care a facut codul se opreste undeva la margin-top: 50px.
Nu vreau sa introduc tot fisierul css in pagina mea web pentu ca imi da restul peste cap.
Nu stapanesc javascript asa ca m-a da peste cap codul.
Cum pot scoate din css si in fisierul js doar liniile de cod care au legatura stricta numai cu tabelul.

Prefer aceasta varianta cu js pentru ca am incercat sa fixez capul de tabel in css dar este foarte greu de controlat dimensiunea coloanelor din tbody sa corespunda cu dimensiunea din thead.
Multumesc!
MarPlo Mesaje: 4343
Salut
Din ce am vazut in Demo la acel plugin, margin-top e setat din codul js.
E cam mult cod js, nu stiu care parte apartine de ce vrei tu, si nici daca se poate scoate; pare a fi cu legatura intre acele functii.
Din css, doar sa adaugi tu margin-top cat vrei:

Cod: Selectaţi tot

#navbar_first ul {
    list-style-type: none;
    margin: 50px 0 0 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
misat Mesaje: 22
Intr-adevar, este nu prea simplu sa excluzi codul "nefolositor" din pluginul indicat de tine.
Deasemeni este putin dificil, neutilizind JS sa obtii efectul ca un anume element sa ramina fixat doar in momentul cind facand scroll aceste dispare din partea vizibila a ferestrei.
Iata mai jos un "mini plugin" jQuery cu care ai putea obtine ceea ce doresti

Cod: Selectaţi tot

(function() {
  $.fn.sticky = function() {
    var elements = $(this)
    ,   next_stiky_top = 0
    ,   initial_top_key = 'sticky.initialTop'
    ,   sticky_fixed_class = 'sticky-fixed'
    ;

    elements.each(function() {
      var $th = $(this)
      ,   element_top = parseInt($th.offset().top || 0)
      ;
      $th.data(initial_top_key, element_top)
    });

    $(window).scroll(function(event) {
      var scroll_top = $(this).scrollTop();
      elements.each(function() {
        var $th = $(this)
        ,   element_top = $th.data(initial_top_key)
        ;

        if (element_top < scroll_top + next_stiky_top) {
          if (!$th.is('.' + sticky_fixed_class)) {
            $th
              .addClass(sticky_fixed_class)
              .css('top', next_stiky_top)
            ;
            next_stiky_top += parseInt($th.height());
          }
        } else {
          if ($th.is('.' + sticky_fixed_class)) {
            next_stiky_top -= parseInt($th.height());
            $th
              .removeClass(sticky_fixed_class)
              .css('top', 'auto')
            ;
          }
        }
      });
    });
  }
}());
Acesta utilizeaza urmatorul css (destul de putin):

Cod: Selectaţi tot

.sticky-fixed{
    left: 0;
    margin: 0;
    padding: 0px;
    position: fixed;
}
Pentru a utiliza:
1. conectezi biblioteca jQuery
2. salvezi "mini pluginul" de mai sus si il conectezi
3. in pagina adaugi uramtorul cod js:

Cod: Selectaţi tot

$('document').ready(function() {
    $('.sticky').sticky();
});
4. Adaugi css indicat mai sus

Codul HTML ar trebui sa arate cam asa:

Cod: Selectaţi tot

<head>
...
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="sticky.js"></script>
    <script type="text/javascript">
      $('document').ready(function() {
        $('.sticky').sticky();
      });
    </script>
....
</head>
<body>
<div id="navbar">
   <div id="navbar_general">
      <div id="navbar_first">
         <ul class="sticky">
            <li><a href="index.html" class="active">LINK 1</a></li>
            <li><a href="#">LINK2</a></li>
         </ul>
       </div>
    </div>
 </div>
<p> MULT TEXT</p>        
<ul class="sticky"> 
  <li><a href="index.html" class="active">LINK 1</a></li>
  <li><a href="#">LINK2</a></li>
</ul>
<p>TEXT</p> 
...
sterica Mesaje: 285
@misat am testat codul facut de tine si l-am pus la capul unui tabel, insa capul de tabel il arunca sus-stanga (cu top:0 si left:0), si se redimensioneaza latimea celulelor in functie de text. Cum am putea sa "ghiceasca" automat la ce distanta sa se opreasca capul de tabel (ca exemplu: top:50px si centrat pe orizontala), iar dimensiunile celulelor tabelului sa le putem redimensiona.
Aici este codul unde am facut testele
https://jsfiddle.net/orh4qpkh/1/

Multumesc mult!
misat Mesaje: 22
Pozitionarea "capului" de tabel sus-stanga (cu top:0 si left:0) am facut-o intentionat, deoarece am crezut ca doresti sa utilizezi fixarea elementelor pentru realizarea unor meniuri (sau panouri cu instrumente rapide). In primul tau exemplu nu am vazut tabele si am crezut ca utilizezi pluginul de pe gittub doar ca exemplu.
Am modificat putin pluginul pentru a pastra fixe lungimile elementelor tabelelor (posibil ca mai sunt careva elemente carora ar trebui sa le pastrez pozitia initiala, daca stii care te rog sa-mi spui, eu nu stiu inca). Deasemeni am adaugat o optiune la initializare care permite fixarea la o anumita distanta fata de top:0.

Cod: Selectaţi tot

$('.sticky').sticky({
  startTop: 88
});
Am preluat exemplul tau si l-am incarcat aici (dupa modificare): http://codepen.io/maikttt/pen/KNKMWQ
andras Mesaje: 430
Eu va sugerez sa treceti la Bootstrap 3, scapati astfel de problemele de dimensionare si pozitionare, Bootstrap 3 imparte ecranul in 12 coloane, fiecare element poti sa-l definesti pe cite coloane vrei, plus ca este si responsive.
sterica Mesaje: 285
Multumesc mult, ar mai fi o mica chichita daca ma poti ajuta sa o fac. Dupa ce parcurg cu scroll tbody-ul tabelului, capul de tabel ramane vizibil, se poate elimina automat dupa ce tbody nu mai este vizibil si sa reapara atunci cand se revine la table?

Subiecte similare