Custom scrollbar maken of anders?

[Verwijderd]

Hallo iedereen die dit leest.

Vooraf:

Ik heb gezocht in Google, GOT forum maar helaas niet iets bruikbaars gevonden wat ook echt werkt.
En ben nu een beetje ten einde raad. Ik wil het zo graag oplossen maar weet niet hoe.

Waar draait het om:

Ik ben bezig met een website voor een vriend van mij. Welke ik bouw in html + css.
Ik gebruik deze keer voor het eerst CSS in de gehele site, en dat bevalt me zeer goed moet ik zeggen tot nu toe.

Voorbeeld website:

DJ Léon D - dutch DJ

Het Probleem:

Het probleem waar het allemaal om draaid is te zien als je naar de Biography toe gaat. De tekst past dus niet helemaal in de content div wat ik dus wil oplossen met een scrollbar. Maar zoals je kunt zien staat de standaard windows scrollbar niet echt bij het design van de website. Daarom wil ik graag een andere oplossing. Nu weet ik dat je met CSS de scrollbars een andere kleur kan geven, maar dat wil ik ook niet, want dan krijg ik zo'n standaard vierkante scrollbar wat ook niet echt staat bij het design van de website.
Dus ik heb zitten nadenken en zitten zoeken om een javascript of dhtml oplossing te gebruiken.
Toen heb ik dit script gevonden: Script - DHTML scroll.
Opzich wel geinig dat ik dan zelf 2 plaatjes kan maken waarmee je de text kan laten scrollen, echter lastig in mijn script te krijgen en dit werkt niet helemaal super. Want zodra ik dit in een test pagina zet en vervolgens deze oproep dan krijg je in IE de volgende melding bovenaan:

Om de beveiliging van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven van actieve inhoud, die mogelijk toegang verschaft tot uw computer. Klik hier voor meer opties.

Tja daar zit je ook niet echt op te wachten zodra je op een website komt.

Ik heb wel eens van die verticale scrollbars gezien die dan 1 px breed zijn, soms stippellijntjes. Waar dan boven en onder het streepje 2 pijltjes staan waar je dan ook alleen op hoef te wijzen en dan scrollt de text heen en weer. Waarschijnlijk een soortgelijk script.

Mijn eisen:

1.) Een scrollbar die werkt, waar je dus niet zo'n IE beveiligings melding krijgt.

2.) De scrollbar of knopjes moeten goed bij het design passen.

Verder:

Voor de rest sta ik open voor ideeën van jullie.
Hoe kan ik dit het beste oplossen? en of wie wil mij helpen dit te programmeren in mijn website?

Onderstaande kleine probleempjes/vragen hebben een lage prioriteit, het gaat mij meer om wat hierboven allemaal beschreven is.

Ik heb ook nog een klein probleempje met de link die active is. Heb netjes in mijn CSS file de kleur en decoratie gedefinieerd maar in IE werkt het niet.

O ja, Als laatste zou ik van jullie ook nog een tip willen hoe ik het beste men site kan debuggen zodat deze werkt in IE en in Firefox. Want ik heb begrepen dat als je met CSS werkt dit nog wel is voor probleempjes wil zorgen in de browsers.

[ Voor 1% gewijzigd door Verwijderd op 27-04-2006 18:55 . Reden: mierenn3ukerij van een forum bezoeker, spelfoutje ]

[RobIII]

Verwijderd schreef op donderdag 27 april 2006 @ 14:51:
Om de beveiliging van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven van actieve inhoud, die mogelijk toegang verschaft tot uw computer. Klik hier voor meer opties.

Dat is alleen omdat je 'm lokaal draait. Je kunt dit uitzetten in Extra -> Internet opties -> Geavanceerd -> Actieve inhoud mag worden uitgevoerd in bestanden op mijn computer. Als je 'm online zet heb je er zowieso geen last van.

Verwijderd schreef op donderdag 27 april 2006 @ 14:51:
en of wie wil mij helpen dit te programmeren in mijn website?

Euh, we doen niet aan werving hier, en al helemaal niet aan script-requests

Verwijderd schreef op donderdag 27 april 2006 @ 14:51:
Ik heb ook nog een klein probleempje met de link die active is. Heb netjes in mijn CSS file de kleur en decoratie gedefinieerd maar in IE werkt het niet.

Toch mis je nog wat basics... ik zie in je CSS een boel id's die classes hadden moeten zijn en classnames als "donker_grijs" doe je natuurlijk niet want als je de CSS veranderd dat het rood wordt kun je alsnog overal je classes in je HTML gaan aanpassen (of je classname dekt de lading niet door "donkergrijs" te heten en rood weer te geven). Noem je classes liever "contentblock","item" en dat soort dingen.

/edit:
Hoewel, nu ik even de HTML in duik en zie waar je ze voor gebruikt valt het nogal mee. Je ID's lijken in ieder geval uniek te zijn (zoals ze horen te zijn).

Verwijderd schreef op donderdag 27 april 2006 @ 14:51:
O ja, Als laatste zou ik van jullie ook nog een tip willen hoe ik het beste men site kan debuggen zodat deze werkt in IE en in Firefox. Want ik heb begrepen dat als je met CSS werkt dit nog wel is voor probleempjes wil zorgen in de browsers.

Installeer FireFox (en Opera) en test het gewoon in die browsers

[ Voor 86% gewijzigd door RobIII op 27-04-2006 15:01 ]

[TwoR]

Die melding in IE komt denk ik doordat je het lokaal opslaat en vanaf daar opstart.

Zet dat eens online of op een webserver en probeer het dan nog eens. Ik denk dat je dan de melding niet krijgt.

_{Met bovenbuurman dus, he snel editten hé}

[ Voor 13% gewijzigd door TwoR op 27-04-2006 14:55 ]

[RM-rf]

Ik zou om te beginnen ervroo zorgen dat de scrollbar netjes gepositioneerd is, het mooiste zou waarschijnlijk zijn dat de pijl-buttons precies tussen die twee grijze lijnen in zouden komen, daar zijn ze het 'mooiste' gepositioneerd...

Ik snap verder niet geheel waarom je een scrollbar met custom kleuren niet geheel voldoet, je kunt er dan (die overigens enkel werkt in msie6 als je site in quirky mode is, dus niet valide, al gebruik je een hack die de site wel juist laat valideren, maar explorer in quirky mode stopt) een scrollbar die dezelfde kleuren benut als je site...
deze kent veel rechte en hoekige elementen alswel grijstinten en stevig oranje (ik zou zeker dat oranje als cotnrasterend element dan nemen, omdat het de aandacht vraagt en dat moet een scrollbar doen... teveel mensen misbruiken cstom scrollbars teveel om deze 'weg te stoppen')

in je site heeft enkel het logo en de headertekst een stukje ronde hoek, maar aangezien die verder nergens in de layout voorkomen, zou ik het vreemd vinden om ze opeens op bepaalde pagina's waar er gescrolld kan worden (dus niet op alle pagina's) terug te laten komen.

[Verwijderd]

Bedankt voor de snelle reacties van jullie, echt super.

RobIII:
Bedankt voor je advies om classes te gebruiken. Ik weet dat ik hier en daar nog wel wat kan verbeteren, maar wilde dit op het laatst pas doen, eerst maar even de website in orde krijgen en dan verbeteringen doorvoeren. En ja het is pas de eerste keer dat ik CSS in een gehele site gebruik, dus zal idd nog niet helemaal perfect zijn. Aldoende leert men, althans dat zeggen ze

Dus jullie raden mij aan om gewoon dat dhtml script te gebruiken waarna ik doorverwijs?
of hebben jullie nog een andere betere oplossing voor mij?

[Zoefff]

Zelf heb ik echt een rothekel aan alternatieve scrollbars. Ze werken altijd te langzaam, te snel, niet precies, of ze doen het helemaal niet omdat je browser het niet ondersteund.

Ik zou zoeken naar een andere oplossing. Probeer de tekst in te korten (zal wel geen optie zijn), maak de site langer of het tekstgedeelte wat breder zodat er geen scrollbalk komt, of splits de tekst op in 2 delen, 'History till nowadays' en 'Musicstyle', waarvoor je bovenin het biografie gedeelte 2 linkjes maakt.

[TwoR]

Zoefff schreef op donderdag 27 april 2006 @ 15:44:
Zelf heb ik echt een rothekel aan alternatieve scrollbars. Ze werken altijd te langzaam, te snel, niet precies, of ze doen het helemaal niet omdat je browser het niet ondersteund.

Ik zou zoeken naar een andere oplossing. Probeer de tekst in te korten (zal wel geen optie zijn), maak de site langer of het tekstgedeelte wat breder zodat er geen scrollbalk komt, of splits de tekst op in 2 delen, 'History till nowadays' en 'Musicstyle', waarvoor je bovenin het biografie gedeelte 2 linkjes maakt.

Een bijkomend nadeel is dat je dan niet altijd je scrollwieltje kan gebruiken.

Wat ik nog zat te bedenken is om ipv scrollen een knop volgende te maken. Zo hoef je niet het ontwerp te veranderen en heb je geen lelijke scrollbalk. Je kan dan bijvoorbeeld de tekst opdelen en een aantal keer de knop volgende eronder.

Je maakt er dan als het ware een navigatie waarmee je door de content heen kan lopen in stappen.

edit:
Het voorbeeld wat hieronder staat is inderdaad wat ik bedoelde.

[ Voor 5% gewijzigd door TwoR op 27-04-2006 16:51 ]

[RobIII]

Zo heb ik het ook opgelost bij (b.v.) www.sunlinezonweringen.nl (klik rolluiken). Voor de paar pagina's die meer dan de kleine ruimte beslaan is dat helemaal niet zo'n probleem. Ik ben normaliter niet zo kapot van die kleine designtjes, maar soms hebben de "eigenaars" dusdanig weinig te vertellen op hun site dat zo'n klein designtje juist weer goed past om het wat voller te laten lijken. Als je dan af en toe (en dus niet in 90% van de pagina's) een volgende/vorige pagina knop moet maken is dat imho niet zo'n ramp.

Uiteindelijk bleek het in mijn geval dus naderhand toch in veel gevallen een volgende/vorige knop nodig te hebben. En dan ben je een stuk minder blij met je mini-ontwerpje.

Moraal: Weet waar je aan begint

[ Voor 21% gewijzigd door RobIII op 27-04-2006 16:34 ]

[Tjeemp]

heel simpel scriptje

code:

<script language="JavaScript">
<!--
var UPSCRL=false; 
var DNSCRL=false; 

function scrollPageU() 
{ 
document.frames['v4main'].scrollBy(0,-2); 
} 

function scrollPageD() 
{ 
document.frames['v4main'].scrollBy(0,2); 
}
//-->
</script>

in je head... alleen werkt het wel met een IFRAME, ik weet niet of dat een probleem voor je is, natuurlijk niet up to date qua css enzo.

code:

<tr>
<td width="11" bgcolor="#2a2a2a" OnMouseout="style.backgroundColor='#2A2A2A';" onmouseover="style.backgroundColor='#3C3C3C';">[img]"images/navigation/scroll-up.gif"[/img]</td>
</tr>
<tr>
<td width="11" bgcolor="#2a2a2a" OnMouseout="style.backgroundColor='#2A2A2A';" onmouseover="style.backgroundColor='#3C3C3C';">[img]"images/navigation/scroll-down.gif"[/img]</td>
</tr>

en iets dergelijks als dat gebruiken voor de scrollbalkjes zelf....

[Verwijderd]

Ik wilde persoonlijk eigenlijk geen tabellen gebruiken.
Maar ik zal het script wat hierboven genoemt is ook uitproberen vanavond of morgen.

Bedankt in ieder geval

[Digihelp ®]

offtopic:
Wellicht dat je ook nog even goed de engelse grammatica kan checken?

[Verwijderd]

Digihelp ® schreef op donderdag 27 april 2006 @ 18:24:

offtopic:
Wellicht dat je ook nog even goed de engelse grammatica kan checken?

Text heb ik aangeleverd gekregen, maar vertel me maar wat er fout is in jouw ogen?

[grhmpf]

offtopic:
Je wil misschien je startpost ook wel aanpassen: "Waar draait het om" (omdat 'het' draait, tegenwoordige tijd en stam+t enzo)

[Verwijderd]

grhmpf schreef op donderdag 27 april 2006 @ 18:45:

offtopic:
Je wil misschien je startpost ook wel aanpassen: "Waar draait het om" (omdat 'het' draait, tegenwoordige tijd en stam+t enzo)

Ben je zo wel tevreden dan?
Waarom zo miereneukerij op een spelfout?

[Verwijderd]

Ben nu bezig geweest met het dhtml script, en online werkt het wel, dan krijg ik niet de windows melding. Dus ligt aan het feit dat ik hem locaal opende.

Maar wie kan mij aub helpen.
Biography

Ik heb het dhtml menu erin gezet, en de content erin maar krijg hem niet op de juiste positie zoals de content Biography_Copy wel goed was.

Please help me out, want ik heb hier niet zoveel kaas van gegeten moet ik zeggen.

[ Voor 4% gewijzigd door Verwijderd op 27-04-2006 19:54 . Reden: kleine aanpassing ]

[grhmpf]

Verwijderd schreef op donderdag 27 april 2006 @ 18:56:
[...]


Ben je zo wel tevreden dan?
Waarom zo miereneukerij op een spelfout?

Daarom was het ook offtopic.

[Digihelp ®]

Verwijderd schreef op donderdag 27 april 2006 @ 18:36:
[...]


Text heb ik aangeleverd gekregen, maar vertel me maar wat er fout is in jouw ogen?

Bijvoorbeeld:

near by Rotterdam => near Rotterdam
at the Netherlands => in The Netherlands
at a friends place => at a friend's place
when he was at the age of nineteen => at the age of nineteen

Zo kan ik nog wel even doorgaan, maar daar leer jij natuurlijk niets van...

[Digihelp ®]

Om je ook nog even verder te helpen: dit lijkt me wel een aardig dhtml script

[Zerora]

Nu weet ik dat je met CSS de scrollbars een andere kleur kan geven, maar dat wil ik ook niet, want dan krijg ik zo'n standaard vierkante scrollbar wat ook niet echt staat bij het design van de website.

Een CSS scrollbar is zo slecht nog niet hoor.

Sterker nog, omdat je allemaal mooie blokken met verschillende kleuren hebt past zo'n scrollbar er juist heel goed bij.

kijk maar naar de scrollbar die ik inelkaar gezet heb:



IK heb daar de volgende code voor gebruikt in mn CSS:

Cascading Stylesheet:

body
    {
        scrollbar-arrow-color: #FFA200;
        scrollbar-track-color: black;
        scrollbar-face-color: #333333;
        scrollbar-highlight-color: #333333;
        scrollbar-3dlight-color: #333333;
        scrollbar-darkshadow-color: #333333;
        scrollbar-shadow-color: #333333;
    }

Past toch goed bij de site??

[ Voor 14% gewijzigd door Zerora op 27-04-2006 21:28 ]

[RobIII]

Zerora schreef op donderdag 27 april 2006 @ 21:27:
[...]


Een CSS scrollbar is zo slecht nog niet hoor.
..
Past toch goed bij de site??

Leuk, maar dat werkt dus alleen in IE (en da's al gezegd hier)

[ Voor 54% gewijzigd door RobIII op 27-04-2006 21:34 ]

[Verwijderd]

Netjes, ziet er goed uit! 1 ding:

HTML:

<p align="center">

Dit doe je een aantal keer, ik zou dit ook in je css zetten.

[Verwijderd]

Bedankt voor jullie reacties, ik ga het vandaag weer verder uitproberen. En hopen dat het nu wel werkt. Zo niet hoop ik jullie steun weer te ontvangen...

Gr.

[Verwijderd]

DHTML scroll mogelijkheden die DigiHelp als voorbeeld gaf zijn geen optie. Zodra je die in je site heb gezet en je vraagt de pagina op waar de code in staat, moet je een of andere licentie aanschaffen.

Dus ik denk dat ik het maar oplos door zoals al eerder genoemd door RobIII met een volgende vorige knop erin.

Als ik nog iets anders bedenk horen jullie het wel....

[Yoozer]

Dus ik denk dat ik het maar oplos door zoals al eerder genoemd door RobIII met een volgende vorige knop erin.

Het mooiste is dan natuurlijk als het zonder de pagina te herladen gedaan kan worden . Dit is niet absurd moeilijk en kan gelijk werkbaar gemaakt worden in een hoop browsers (behalve Lynx dan ).

[Verwijderd]

Yoozer schreef op vrijdag 28 april 2006 @ 17:05:
[...]

Het mooiste is dan natuurlijk als het zonder de pagina te herladen gedaan kan worden . Dit is niet absurd moeilijk en kan gelijk werkbaar gemaakt worden in een hoop browsers (behalve Lynx dan ).

Daar ben ik nu naar opzoek. Als ik naar die pagina van die zonneweringen van RobIII kijk en vervolgens de broncode oproept heeft hij een javascript gebruikt.

Maar zoals in voorgaande berichten al gezegd ben ik daar niet echt super in thuis.
En jij zegt dat het niet absurd moeilijk is dus dan gaat me dat vast wel lukken, als ik maar een beetje opweg geholpen wordt.

Maar weet nu nog niet goed hoe ik dat moet aanpakken...

[RobIII]

Verwijderd schreef op vrijdag 28 april 2006 @ 17:15:
[...]


Daar ben ik nu naar opzoek. Als ik naar die pagina van die zonneweringen van RobIII kijk en vervolgens de broncode oproept heeft hij een javascript gebruikt.

Dat is voornamelijk omdat er meerdere (I-)frames tegelijk veranderd moeten worden en het menu moet meespringen met de gekozen opties (als ik me goed herinner).

Verwijderd schreef op vrijdag 28 april 2006 @ 17:15:
Maar weet nu nog niet goed hoe ik dat moet aanpakken...

Ik denk dat je te moeilijk denkt. Wat is er mis met een <a href="...">Volgende</a> naar pagina 2? Daar heb je echt geen javascript voor nodig.

[ Voor 29% gewijzigd door RobIII op 28-04-2006 20:07 ]

[We Are Borg]

Zerora schreef op donderdag 27 april 2006 @ 21:27:
[...]


Een CSS scrollbar is zo slecht nog niet hoor.

Sterker nog, omdat je allemaal mooie blokken met verschillende kleuren hebt past zo'n scrollbar er juist heel goed bij.

kijk maar naar de scrollbar die ik inelkaar gezet heb:

[afbeelding]

IK heb daar de volgende code voor gebruikt in mn CSS:

Cascading Stylesheet:

body
    {
        scrollbar-arrow-color: #FFA200;
        scrollbar-track-color: black;
        scrollbar-face-color: #333333;
        scrollbar-highlight-color: #333333;
        scrollbar-3dlight-color: #333333;
        scrollbar-darkshadow-color: #333333;
        scrollbar-shadow-color: #333333;
    }

Past toch goed bij de site??

Zoals al gezegd is, IE only. En waarom alleen IE only? Omdat je imo ook gewoon van die scrollbar moet afblijven. Mijn browser/OS bepaald hoe dat ding eruit ziet en daar heb je als webdevver niet aan te rommelen.

[Verwijderd]

RobIII schreef op vrijdag 28 april 2006 @ 20:05:
[...]

Dat is voornamelijk omdat er meerdere (I-)frames tegelijk veranderd moeten worden en het menu moet meespringen met de gekozen opties (als ik me goed herinner).

[...]

Ik denk dat je te moeilijk denkt. Wat is er mis met een <a href="...">Volgende</a> naar pagina 2? Daar heb je echt geen javascript voor nodig.

Daar is niets mis mee, wil het ook zo gaan oplossen, wil alleen nog misschien zo inbouwen dat de pagina niet helemaal herladen hoef te worden zoals al genoemd in voorgaande berichten. En alleen het tekst gedeelte herladen wordt.

[RobIII]

Verwijderd schreef op vrijdag 28 april 2006 @ 22:08:
[...]


Daar is niets mis mee, wil het ook zo gaan oplossen, wil alleen nog misschien zo inbouwen dat de pagina niet helemaal herladen hoef te worden zoals al genoemd in voorgaande berichten. En alleen het tekst gedeelte herladen wordt.

En (zoals ik dus al zei) kun je dat makkelijk met een I-Frame doen (maar dan hebben we het natuurlijk niet over useability of wat zoekmachines daarvan vinden).

[Verwijderd]

Kijk eens naar de scollbar van Blueshoes. Deze is eenvoudig te implementeren en aan te passen.

http://www.blueshoes.org/...iv/examples/example1.html

[Verwijderd]

Ik heb ook altijd sores met lappen tekst en stomme scrollbars...

Aangezien ik voor m'n site niet per se bovenaan in Google ofzow hoef, maar mensjes persoonlijk als het nodig is naar m'n pagina's laveer, heb ik voor 1 keer goed in Flash zitten wroeten om een mooie tekstbox te maken, en deze goed gebackupped.

Dit ging puur en alleen om de mooi, om opdrachten te krijgen en m'n werk te verzamelen. Ze is nog niet helemaal af, vooral de Wordpress 'achterkant' needs work. (contact op 'frontpages', bijna alle teksten , categories,ik moet de boel eigenlijk een keer compleet legen op enkele teksten na)

Wie weet slaat dit volgens velen hier de plank volledig mis, en maakt IE er, zoals gewoonlijk, een potje van, ik heb 't zo gedaan...

[RobIII]

Verwijderd schreef op maandag 08 mei 2006 @ 22:06:
Wie weet slaat dit volgens velen hier de plank volledig mis, en maakt IE er, zoals gewoonlijk, een potje van, ik heb 't zo gedaan...

Ik zou er zowieso effe een eolas-workaround op los laten

[ Voor 10% gewijzigd door RobIII op 09-05-2006 01:08 ]

[Verwijderd]

Sja, zoals ik al zei, IE phucks it up quite good... Maakt ook nie zoveel uit eigenlijk, ik geef a fair warning op de binnenkomer naar de bezoeker.

Just to be sure: als je bedoeld dat ik er slim aan doe de elementen direct clickable te maken, hebbie gelijk. M'n trouwe lezertjes met IE op hun laptopjes moeten nu twee keer klikken. Ik begrijp echter maar niet waarom mensen IE blijven gebruiken, maar ja.

Maar goed, dit was ik nou ook precies nog tussen de bedrijven door aan het uitdokteren. Waarschijnlijk ben ik er al met die link die je gaf... thanx!

Tenzij je natuurlijk heel iets anders bedoelde en m'n slaaptekort me parten speelt

edit:
Nouja, ik denk niet dat ik SViS hiermee nou echt van hulp ben, wilde toch even iets bijdragen

[ Voor 9% gewijzigd door Verwijderd op 09-05-2006 02:02 ]