[HTML, CSS, JS] Frontend #36: Think before you act

Komt vast van http://datatables.net/

quote:

Op donderdag 12 september 2013 17:21 schreef Catch22- het volgende:

[..]

Gooi je code eens op jsfiddle, volgens mij maak je alles veel te moeilijk

De site gaat binnenkort online, dan kun je de hele JS zien.

quote:

Op donderdag 12 september 2013 17:46 schreef Darkomen het volgende:
Komt vast van http://datatables.net/

Klopt. Ik ging ervan uit dat iedereen hier de plugin wel kende. Zo niet: zeker het proberen waard. Echt super veel mogelijkheden en erg makkelijk in te stellen als je de documentatie goed doorneemt.

Ik ben bezig met het maken van een website die is opgebouwd uit 3 kolommen naast elkaar (incl. header, footer, etc).

Het is de bedoeling dat de de hoogte van de website (en de kolommen) altijd 100% is, ongeacht hoeveel tekst / plaatjes de website bevat.
De container heeft wel een 100% hoogte en schikt zich naar de hoogte van het venster.
De 3 kolommen zitten in die container maar veranderen alleen van hoogte als er een regel tekst bijkomt of als ik een height opgeef.

De code is alsvolgt:

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

quote:

Op dinsdag 17 september 2013 12:21 schreef karton2 het volgende:
Ik ben bezig met het maken van een website die is opgebouwd uit 3 kolommen naast elkaar (incl. header, footer, etc).

Het is de bedoeling dat de de hoogte van de website (en de kolommen) altijd 100% is, ongeacht hoeveel tekst / plaatjes de website bevat.
De container heeft wel een 100% hoogte en schikt zich naar de hoogte van het venster.
De 3 kolommen zitten in die container maar veranderen alleen van hoogte als er een regel tekst bijkomt of als ik een height opgeef.

De code is alsvolgt:

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Gooi het eens in jsfiddle.

Google "faux columns".

quote:

Op dinsdag 17 september 2013 12:23 schreef donroyco het volgende:

[..]

Gooi het eens in jsfiddle.

http://jsfiddle.net/H5Uyd/

quote:

Op dinsdag 17 september 2013 12:25 schreef KomtTijd... het volgende:
Google "faux columns".

Die ben ik ook tegen gekomen maar ik heb begrepen dat dit niet dé manier zou zijn, achterhaald en zulks.

Ik denk dat ik hem heb.
De code uit mijn eerste post heb ik minimaal aangepast..
..#container een background-image meegegeven van 939px breed en 1px hoog.
In die afbeelding de kolommen weergegeven met kleuren en hij doet het.

Tip: maak je plaatje 10/20px hoog, oudere versies van IE slaan helemaal op tilt van backgrounds die te vaak herhaald worden.
En bij een .png maakt het qua bestandsgrootte waarschijnlijk geen verschil.

Nieuwe vraag in aantocht.
De centrale kolom wordt gevuld met nieuws berichten.
Het is de bedoeling dat de twee kolommen aan de zijkant niet mee bewegen zodra de bezoeker door de nieuwsberichten gaat scrollen.
Met een simpele overflow:scroll; voor het content gedeelte kan ik dat bereiken.
Gevolg is dat ik twee scrollbalken heb: één voor het content gedeelte en één aan de rechter zijde van het scherm.
De meerst rechtse scrollbalk is het gevolg van de 100% hoogte van de achtergrond.
Als ik die 100% kleiner maak dan gaat, neem ik aan, die rechter scrollbalk weg zodat ik alleen de content scrollbalk nog heb.
Het mooiste zou echter zijn als dat ik alleen een scrollbalk rechts aan de rand van het scherm zou hebben en dat ik daarmee door de centrale kolom kan scrollen.

Mijn oplossing zou zijn het vastzetten van de volledige website met uitzondering van het nieuwsdeel.
De volledige website schuift dan mee zodra de bezoeker naar beneden scrollt.
Probleem is dat ik niet weet hoe ik de 100% hoogte van de drie de faux kolommen ga bepalen in de html/css.
Ik ben benieuwd naar jullie advies.

Huidige situatie:

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

position:fixed is wat je zoekt.

evt. in combinatie met een stukje JS, zodat ze pas fixed worden als de header weggescrold is.

quote:

Op woensdag 18 september 2013 12:16 schreef KomtTijd... het volgende:
position:fixed is wat je zoekt.

evt. in combinatie met een stukje JS, zodat ze pas fixed worden als de header weggescrold is.

Die fixed doet inderdaad wat ik zoek.
Het probleem is echter dat als ik het venster smaller maak de rechter kolom sneller verschuift dan de linker.
Ik ben uitgegaan van dit voorbeeld alleen is daar hetzelfde probleem. De gele balk schuift sneller naar links dan de tekst zelf.
Voorheen liet ik de 3 kolommen naast elkaar floaten binnen in een container maar dat werkt nu ook niet meer natuurlijk door die fixed.

Nu kom ik deze jsFiddle tegen en die laat, volgens mij, zien wat ik bedoel.
Echter die werkt alleen als left:50%; is... Als ik die verander naar bijv. 30% dan schuift alles weer op zijn eigen snelheid.

quote:

Op woensdag 18 september 2013 14:15 schreef Catch22- het volgende:
doet dit alsjeblieft niet... fixed height is nooit een goed idee. Gewoon lekker floaten

Hoe kan ik er dan voor zorgen dat de 2 buitenste kolommen blijven staan terwijl je door de middelste kolom kan scrollen?
Dat kan met overflow, maar dan krijg ik twee scrollbalken.

Zie:

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Het gekke is dat mijn footer fixed aan de onderkant van het venster staat.
Wat ik ook doe met het venster, hij blijft altijd op de juiste plek.
Mijn linker en rechter kolom daarentegen..

...ik heb echt geen idee meer wat je nu allemaal aan het doen bent en wat er precies niet wil lukken.

quote:

Op woensdag 18 september 2013 15:00 schreef KomtTijd... het volgende:
...ik heb echt geen idee meer wat je nu allemaal aan het doen bent en wat er precies niet wil lukken.

quote:

Op woensdag 18 september 2013 15:11 schreef Catch22- het volgende:

[..]

Ja dat zal, maar het is geen papier he. Op het web hebben dingen variabele hoogtes. Je moet dit gewoon niet zo doen en willen.

Ik heb een .rar geüpload voor degenen die zelf willen kijken: http://www.filedropper.com/voorbeeld
Bevat een index.html met CSS in de head + een .png die de kolommen visualiseerd.

Ik ben eerder weer opnieuw begonnen en heb geprobeerd om de basis op te zetten, maar ik kom er niet meer uit.
Het is de bedoeling dat de website uit 3 kolommen bestaat.
Links een menu, rechts polls en ander spul. Centraal komt de inhoud van de site.
De linker en rechter kolom moeten -altijd- in beeld blijven als de gebruiker naar beneden scrollt.
De linker kolom staat goed en reageert zoals het hoort, ook als ik het venster smaller maak.
De rechter kolom moet identiek reageren maar ik krijg het niet voor elkaar.. hij wil zelfs niet verschijnen.
Mijn eeuwige dank voor degene die het werkend krijgt.

Met


Is je #rechts sidebar zichtbaar en aan de rechterkant van het scherm gepositioneerd. Maar met alle respect, het is toch geen 1998 meer? Wat ga je doen als die sidebars hoger zijn dan de viewport bijvoorbeeld?

quote:

Op woensdag 18 september 2013 17:22 schreef PimD het volgende:
Met
[ code verwijderd ]

Is je #rechts sidebar zichtbaar en aan de rechterkant van het scherm gepositioneerd. Maar met alle respect, het is toch geen 1998 meer? Wat ga je doen als die sidebars hoger zijn dan de viewport bijvoorbeeld?

Wat hij zegt, hier is een jsfiddle met nog wat tweaks:

http://jsfiddle.net/pUkT6/

Zoiets?
http://jsfiddle.net/djqnB/

Paar handige jsfiddle tips:

Typ: lorem20 druk op tab en je krijgt twintig woorden lorem ipsum...

Nog meer voorbeelden als je op tab drukt:

In de html-editor:
div.bladiebla wordt: <div class="bladiebla"></div>
div#hoi wordt: <div id="hoi"></div>
a wordt: <a href=""></a>

In de CSS-editor:

bg#333 wordt: background: #eee;
pr3 wordt: padding-right: 3px;

quote:

Op woensdag 18 september 2013 21:43 schreef Crutch het volgende:
Paar handige jsfiddle tips:

Typ: lorem20 druk op tab en je krijgt twintig woorden lorem ipsum...

Nog meer voorbeelden als je op tab drukt:

In de html-editor:
div.bladiebla wordt: <div class="bladiebla"></div>
div#hoi wordt: <div id="hoi"></div>
a wordt: <a href=""></a>

In de CSS-editor:

bg#333 wordt: background: #eee;
pr3 wordt: padding-right: 3px;

Dat is de syntax van Emmet, daar kun je nog veel meer leuks mee doen.

Bijvoorbeeld:

wordt na een druk op Tab

Emmet is ook toe te voegen aan veel code editors. Erg handig om snel je code te kunnen typen.

Edit: Probleem opgelost.

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

[ Bericht 4% gewijzigd door Lucaas op 19-09-2013 20:07:42 ]

quote:

Op donderdag 19 september 2013 19:33 schreef Lucaas het volgende:
Beste FOK!ers,

Dit jaar informatica in mijn pakket gekozen op school, erg interessant.
Nu heb ik een opgave waarbij ik doormiddel van JavaScript (verwerkt HTML) een site moet maken met een manier om rente op rente te berekenen voor een bepaald bedrag.

Stel:
Ik heb een rekening met 150.000 euro, daar krijg ik 3% rente op en ik wil weten hoeveel ik heb over 6 jaar.
Dan voer ik dus het bedrag in, de rente, en het aantal jaar en moet dan het bedrag krijgen wat er na die 6 jaar opstaat.

Echter kom ik niet verder dan 1 jaar. Iemand die mij kan helpen?

Hier is mijn script tot nu toe (CSS script even terzijde, die is voor mijn vraag niet belangrijk):
...

Allereerst je kunt je code tussen code tags zetten dat leest wat fijner. Verder ben je op de goede weg. Weet je hoe je wiskundig rente op rente berekent? Verder nog een stijl tip die je code overzichtelijker maakt: maak een aparte functie bereken (startbedrag, rente, jaren) { .. } die de berekening zelf doet. Dan wordt je code ongeveer: