Zostatok vášho CSS Stĺpce s JavaScript

link: http://www.paulbellows.com/getsmart/balance_columns/

Október 20, 2007 Verzia 3. Sme integrované Lawrence Carvalho a Christian Heilmann text resize detector script ( text veľkosť detektor skript) a prepísal naše funkciu s someerror kontrolu, aby sa uistite sa, že každá div existuje na stránke (takže môžete použiť rovnaký skript na celom webe, aj keď počet stĺpcov zmeny). Tiež sme aktualizovaná, CSS, ktorý nebol prepísaný od roku 2005 – teraz obsahuje YUI font/reset triedy a naša Yellow Pencil  základná príprava tried.

28 August 2006 Verzia 2.1. Urobili sme to trochu jednoduchšie použiť skript teraz používa oveľa lepšie zavolať metódu. Nič zmeny s výnimkou, ako je to uvedené v súbore, by mal vyriešiť akékoľvek problémy, ľudia boli s s Dreamweaver a ostatné onload() štýl skripty, plus je to oveľa lepšia verzia. Chcel som aktualizácia tohto mesiace a mesiace dozadu, ale… no… mám deň práce.

HTML/CSS stĺpce

Toto je častý prípad.  CSS file na tejto stránke definuje 3 stĺpce, s názvom #left, #right  a #center. Môžete použiť triky ako stránku pozadí rovnakú šírku ako ľavý stĺpec, ktorý robí to vyzerať ako stĺpec pokračuje dole aj v prípade, ak obsah nemá zatlačte ju nadol. Avšak, ak máte premenná šírka rozloženia, môžete to urobiť, že od teba nemôže urobiť premenná šírka grafiky.

Javascript

Javascript nám umožňuje prečítať si informácie o našej stránke prvky a hodnoty sa vzťahujú na stránku prvok CSS vlastnosti. To je šikovný, najmä preto, že môžeme robiť oboje naraz.

Riešenie DOM (Document Object Model), môžeme požiadať o výške najvyšší stĺpec. Potom môžeme povedať, ostatné 2 stĺpce, ktoré chcete mať štýl hodnota tejto výšky. To je asi tak všetko je k nej.  Here’s the file…

Ako sa pridať na vaše stránky

  1. Prísť na to, čo ID mená stĺpcov, ktoré chcete saldo
  2. Pozrieť na tento riadok v hornej časti column.js
    var divs = new Array('center', 'right', 'left', other);
    nahradiť tieto ID mien s menami, ktoré používate v HTML a odstrániť to, čo nepoužívate
  3. Ste nemalo by byť potrebné upraviť nič iné
  4. Odkaz column.js v hlavičke stránky:
    <script type="text/javascript" src="(pathto...)/column.js"></script>
  5. To je o tom,

Záveru

Ocenila by som, feedback ak ste pekné.

Všetci sme sa snažia získať múdrejší.

Tu je zip JS, CSS a HTML:  Balance your Columns

Neváhajte použiť CSS ak zistíte, že je užitočné