scrollbalk stylen.. lukt mij niet met jQuery. - Softwareontwikkeling

dinsdag 28 mei 2013 11:10

Acties:

Topicstarter

voor een kennis maak ik een website.
http://www.dekoweb.nl/massagecoaching

In de div van de content wil een scrollbalk maken die niet lelijk (standaard) is.
Ik kwam uit bij jscrollpane (http://jscrollpane.kelvinluck.com/) maar die krijg ik niet werkend. vooral omdat ik het niet snap

Mijn kennis van javascript is erg beperkt en jQuery dus ook.

Heeft iemand een beter, eenvoudiger idee voor me of een logische uitleg hoe ik die jscrollpane (of andere) kan toepassen.
Dat laatste ben ik helaas niet tegen gekomen..

dinsdag 28 mei 2013 11:44

Acties:

Bosmonster

*zucht*

Heb je er ook al aan gedacht om dat stuk content helemaal niet te laten scrollen? Nu scrollt namelijk alles wat een heel raar effect geeft en eigenlijk niks toevoegt.

dinsdag 28 mei 2013 11:48

Acties:

Vos

AFCA

Met ^^

Vanwaar de interne scrollbar? De normale browser scrollbar doet toch prima zijn dienst indien de content te lang wordt voor iemands scherm?

Waarom zou je pagina zo 'laag' willen houden...

#36

dinsdag 28 mei 2013 11:51

Acties:

SlaadjeBla

ik heb er een gruwelijke hekel aan als er voor een scrollbar wordt gekozen en er daardoor veel ruimte op mijn scherm onbenut blijft. De content kan veel beter doorlopen naar onderen. Dan is een scrollbalk wellicht niet eens nodig en anders gebruik je de default. Ik sluit me aan bij de vorige posters.

dinsdag 28 mei 2013 22:51

Acties:

Hagen

Topicstarter

Bedankt voor jullie meningen!
Waarom, ik wil het design houden zoals het is, en de scrollbar intergreren..

Dus eigenlijk hoop iemand te vinden die mij een klein beetje uit wil leggen hoe die jQuery te werk gaat.

woensdag 29 mei 2013 00:00

Acties:

Verwijderd

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FreeYourMind</title>
    <link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen" type="text/css" href="include/a.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="include/jquery.jscrollpane.css" />
         ....
  </head>

Je opent je head tag niet van de pagina. En in de scrollcontainer stop je een h2 (block level element) in een p (inline element), dat geeft ook invalid html. Ik zou ook gewoon <!doctype html> gebruiken, je zit nu in strict mode.

Werkt de demo die bij de download zit wel goed als je die apart gebruikt? En als die goed werkt, probeer dan letterlijk de demo in je content vlak te stoppen met alle default styling voor de scrollpane.
Ik zou ook even de styles die je gedefineerd hebt in je style tag voor de scrollpane weghalen.

En voor usability voeg ik me bij de andere reacties. Je moet nu met de muiscursor over de scrollpane heen om te scrollen. In plaats van dat je direct je muiswiel kan gebruiken. De enige meerwaarde die het zou geven is voor het design en dat zou je ook anders op kunnen lossen.

woensdag 29 mei 2013 11:45

Acties:

Hagen

Topicstarter

Thx, ik ga naar je punten kijken!!
Kom hier nog op terug.

Die muiswiel moet gewoon werken, als je in het teks vlak staat scrollt het tekstvlak.
Als je een andere oplossing weet waarbij de tekst binnen dit model (dus zonder langer te worden) komt ben ik ook geïnteresseerd overigens!!

Hiernaast vind ik de genoemde argumenten steeds minder belangrijk worden als je je bedenkt dat mensen tegenwoordig diverse scrollbalken door elkaar gebruiken. Op het mobieltje, op de tablet of iPad, de Mac boom en dan nog de pc, al dan niet voorzien van verschillende browsers...

woensdag 29 mei 2013 15:43

Acties:

Herko_ter_Horst

Interne scrollbalken werken Kwalitatief Uitermate Teleurstellend op tablets en smartphones.

"Any sufficiently advanced technology is indistinguishable from magic."

woensdag 29 mei 2013 15:46

Acties:

Bosmonster

*zucht*

Hiernaast vind ik de genoemde argumenten steeds minder belangrijk worden als je je bedenkt dat mensen tegenwoordig diverse scrollbalken door elkaar gebruiken.

Dit is geen argument. Dat het vaker fout gedaan wordt wil niet zeggen dat je dan een vrijbrief hebt om het ook maar fout te doen.

Beter kun je gewoon zelf goed nadenken over de gevolgen van je designkeuzes.

woensdag 29 mei 2013 22:11

Acties:

Hagen

Topicstarter

@ Herko, heb je gelijk in, dus moet daar een oplossing voor gevonden worden zodat dit wel goed werkt!!!
@ Bosmonster, Fout?????? nadenken over de gevolgen... Nee, das de wereld op z'n kop!
Vast houden aan iets wat al gedaan is en voor de hand ligt is goed, en dat blijven we met z'n allen doen?

@ mike.stijlloos, thx voor de moeite die je gedaan om er naar te kijken iig.

Waarschijnlijk vinden jullie de site straks, ben al een end onderweg, bagger omdat je in het tekst veld moet gaan staan om te scrollen of om welke reden dan ook. Maar voor een neutrale bezoeken heeft de site straks wel een eigen uitstraling die mijn kennis zijn klanten wil voorschotelen en er niet uit ziet als de rest van het www.
Think out of the box people $_/-\o_$

sorry... moest ik ff kwijt..

woensdag 29 mei 2013 22:20

Acties:

Wokkels

Het lekkerste zoutje

Er wordt uitgelegd waarom je designkeuze uit interaction- en usabilitydesign overwegingen niet correct is, maar je stopt je kop in het zand en wil niet luisteren. Die website werkt _niet_ prettig nu, en al helemaal niet op mobiele devices. Ik heb een zeer snelle mobiel, maar door de code die je nu gebruikt is die site zo traag als bagger. Daarnaast is het niet intuïtief zoals het nu werkt. Het is irritant. Punt. Doe het goed of doe het niet.
Sterker nog: er is niemand die het met je eens is. Een wijs man gaat dan nog eens nadenken over de juistheid van zijn gemaakte keuze. Design gaat niet vóór usability.

[ Voor 17% gewijzigd door Wokkels op 29-05-2013 22:25 ]

Permanent wintericon!

donderdag 30 mei 2013 02:01

Acties:

_Thanatos_

Ja, en kaal

TS,
Ik heb smooth scroll in mijn browser uitstaan, en jij gaat dat voor mij weer aanzetten? Hoe dúrf je "aan mijn browser te komen"

Waarom maak je de website niet gewoon schaalbaar? Heb je de site weleens op een klein scherm (mobieltje) geprobeerd? Daarnaast, het scrollen met je vinger klopt geen zak meer van, nu je smooth scrolling forceert. Okay, je kunt zeggen "mobiel ondersteun ik niet", maar Windows 8 heeft volledige touch-support. Op de desktop (ik vind het ook kut, maar mensen gebruiken het nou eenmaal).

Veel erger nog, omdat je wrs allerlei events afvangt omdat je zonodig met javascript moet scrollen, kan ik niet meer pinchen om te zoomen. Zoomen naast dat panel gaat wel, maar pannen (zeg maar horizontaal scrollen) wanneer eenmaal ingezoomd, werkt dus ook niet meer. Je website is dus compleet onbruikbaar op een mobiel (of een andere device die zoomen nodig heeft, zoals een game console of een smart TV).

En als klap op de vuurpijl kun je ook niet scrollen met het toetsenbord.

Als ik je klant was, zou ik dit echt niet accepteren.

Iets constructiever. Als je frakking per se een "gestijlde" scrollbalk wilt, dan doe je dat maar met ::-webkit-scroll*. In andere browsers krijg je dan een default scrollbar. Maar je moet je realiseren dat een scrollbar onderdeel is van een browser, niet van een website. Dus hoe ie eruit ziet (en hoe ie aansluit op de instellingen en voorkeuren van de gebruiker) dat bepaalt de browser in samenspraak met het OS nog altijd. Bijvoorbeeld als de gebruiker door een visuele handicap high-contrast settings nodig heeft, dan zal een dergelijke stijl jouw stijl overrulen vanuit het OS, en dat dien je te respecteren.

[ Voor 42% gewijzigd door _Thanatos_ op 30-05-2013 02:13 ]

日本！🎌

donderdag 30 mei 2013 10:56

Acties:

Bosmonster

*zucht*

Hagen schreef op woensdag 29 mei 2013 @ 22:11:
@ Herko, heb je gelijk in, dus moet daar een oplossing voor gevonden worden zodat dit wel goed werkt!!!
@ Bosmonster, Fout?????? nadenken over de gevolgen... Nee, das de wereld op z'n kop!
Vast houden aan iets wat al gedaan is en voor de hand ligt is goed, en dat blijven we met z'n allen doen?

@ mike.stijlloos, thx voor de moeite die je gedaan om er naar te kijken iig.

Waarschijnlijk vinden jullie de site straks, ben al een end onderweg, bagger omdat je in het tekst veld moet gaan staan om te scrollen of om welke reden dan ook. Maar voor een neutrale bezoeken heeft de site straks wel een eigen uitstraling die mijn kennis zijn klanten wil voorschotelen en er niet uit ziet als de rest van het www.
Think out of the box people $_/-\o_$

sorry... moest ik ff kwijt..

Een site volgens standaarden van 10 jaar geleden heeft wel een "eigen uitstraling" idd. Of zijn klanten daarop zitten te wachten is een ander verhaal.

Maar goed.. ik zit hier niet om je te overtuigen, slechts om je te adviseren

[ Voor 3% gewijzigd door Bosmonster op 30-05-2013 11:16 ]

donderdag 30 mei 2013 12:02

Acties:

incaz

Ik vind de site voorlopig nog 13 in een dozijn. Niet lelijk hoor, maar zeker niet vernieuwend of wat dan ook. Het custom scrollen is niet wat het verschil maakt, en erg out-of-the-box is het ook niet want velen zijn je voorgegaan. (En allemaal met nadelige gevolgen.)

Bij mij verdwijnt nu overigens een deel van de site: alles beneden 'Over mij' kan ik niet zien. Bijvoorbeeld adres en contactgegevens. Dat is zeker 'out of the box' (ook letterlijk) maar de vraag is of het wat toevoegt?

Never explain with stupidity where malice is a better explanation

donderdag 30 mei 2013 13:01

Acties:

_Thanatos_

Ja, en kaal

incaz schreef op donderdag 30 mei 2013 @ 12:02:
out-of-the-box is het ook niet want....

want het is een kijkdoos op deze manier, dus juist inside-the-box

日本！🎌

donderdag 30 mei 2013 13:31

Acties:

InZane

Hagen schreef op woensdag 29 mei 2013 @ 22:11:
@ Bosmonster, Fout?????? nadenken over de gevolgen... Nee, das de wereld op z'n kop!
Vast houden aan iets wat al gedaan is en voor de hand ligt is goed, en dat blijven we met z'n allen doen?

Vasthouden aan iets dat al gedaan is, is juist hetgeen waar jij mee bezig bent.
Websites met scrollende contentblokjes vind ik echt iets van +10 jaar geleden.

_Thanatos_ schreef op donderdag 30 mei 2013 @ 02:01:
TS,
Ik heb smooth scroll in mijn browser uitstaan, en jij gaat dat voor mij weer aanzetten? Hoe dúrf je "aan mijn browser te komen"

Wat hij^ zegt. Je hoort het standaard gedrag van browsers niet te overrulen met dit soort meuk.

[ Voor 27% gewijzigd door InZane op 30-05-2013 13:36 ]

donderdag 30 mei 2013 20:10

Acties:

Hagen

Topicstarter

Hihihi.. en dan krijg je ineens wel reactie.. lol...

Maar goed, hij is nog niet af dus het afkraken kan stoppen ;-)
Of niet, het houd jullie lekker bezig iig...

Wel jammer dat behalve de eerste reactie van _Thanatos_ er totaal geen usable commetaar bij zit.
Voor de mobile version ga ik dat schaalbaar eens bekijken!

ps, ik heb nooit gezegd dat dit design voor de usability gaat of dat DIT design out of de box is!
Alles wat ik vraag is of er iemand wil mee denken om dit te realiseren..............

Bedank jullie allen voor de reacties, ik ga me elders orrienteren!

donderdag 30 mei 2013 20:16

Acties:

_Thanatos_

Ja, en kaal

Voor de mobile version ga ik dat schaalbaar eens bekijken!

Alleen het is geen mobile version. In "principe" (lees: mijn principe) is de desktop juist de verrijkte versie en wat jij "mobiele versie" noemt, zou default moeten zijn. Je krijgt die versie dan ook op andere minder-capabele devices, zoals (genoemd) game consoles en smart TV's (en meer).

Daarbij kan een desktop ook mobiel zijn (een laptop wordt in websiteland nog steeds "desktop" genoemd) en een mobiel kan prima desktop zijn (denk aan surface tablets als laptop).

Ik gebruik altijd drie layouts: default, medium, large. Default wordt opgepikt door mobieltjes en kleine tablets in portrait, maar ook handheld game consoles, en alle devices die geen media queries ondersteunen. Medium is een stapje verder - daar begint meestal de kolommenlayout, en large is nog een extra verrijking voor echt grote schermen.

日本！🎌

donderdag 30 mei 2013 21:33

Acties:

Vos

AFCA

@TS, het is geen afkraken. Ik bekijk de website op een iPad, maar ik kan niet alle content zien. Ik moet hem kantelen om meer te lezen, maar dan nog is niet alles te lezen. Dat wil je de bezoeker toch niet aan doen?

#36

vrijdag 31 mei 2013 07:30

Acties:

incaz

[b][message=40329532,noline]Wel jammer dat behalve de eerste reactie van _Thanatos_ er totaal geen usable commetaar bij zit.

Hartstikke usable: gebruik de scrollbalken die de browser gratisch en voor niets bij de browser levert. Je kunt overigens nog eea doen met position: fixed, maar wees ook daar voorzichtig mee, je wilt namelijk ook niet dat je een brievenbusje overhoudt van 2 regels om de content te scrollen.

Never explain with stupidity where malice is a better explanation

vrijdag 31 mei 2013 11:49

Acties:

Nedra

wat slecht hé, je krijgt dus eigenlijk bruikbaar commentaar waarom je iets niet zou moeten willen. Er wordt (niet in deze woorden) verteld dat het een prutswebsite is en je dus beter nog even een kijkje zou kunnen nemen naar 'responsive' mogelijkheden en jij klaagt over dat je geen bruikbaar commentaar krijgt?

vrijdag 31 mei 2013 13:03

Acties:

bartbh

Om maar even aan te geven: http://snag.gy/jDked.jpg

Ik heb geen scrollbalk, scrollen met muiswiel werkt ook niet en niet alle tekst is zichtbaar. Kortom, lijkt me dat je toch echt ff verder moet kijken.

Maar gezien het profiel van de TS is hij alleen ff voor deze vraag hier geweest en wil hij commentaar op z'n opzet/ontwerp niet aannemen.

vrijdag 31 mei 2013 13:12

Acties:

Tsurany

⭐⭐⭐⭐⭐

Hagen schreef op donderdag 30 mei 2013 @ 20:10:
Hihihi.. en dan krijg je ineens wel reactie.. lol...

Maar goed, hij is nog niet af dus het afkraken kan stoppen ;-)
Of niet, het houd jullie lekker bezig iig...

Afkraken? Je krijgt hier feedback en tips. Je hoort waarom jouw design een slecht design is en wat je er aan kan verbeteren. Jij steekt je kop in t zand en ziet enkel mensen die jou afzijken.

Wel jammer dat behalve de eerste reactie van _Thanatos_ er totaal geen usable commetaar bij zit.
Voor de mobile version ga ik dat schaalbaar eens bekijken!

Een mobile version betekent dat je site slecht ontworpen is. Een goede site heeft geen mobiele variant nodig. Als je toch van de grond op bouwt kan je beter een site ontwerpen die op mobiel ook goed werkt.

ps, ik heb nooit gezegd dat dit design voor de usability gaat of dat DIT design out of de box is!
Alles wat ik vraag is of er iemand wil mee denken om dit te realiseren..............

Je wilt geen design dat out of the box is aangezien dit 9/10 keer gewoon niet werkt. Je wilt een in the box design zodat klanten intuïtief navigeren over de website zonder dat ze allerlei moderne constructies tegenkomen die niet werken.

Bedank jullie allen voor de reacties, ik ga me elders orrienteren!

Je weet dat dit een van de stomste dingen is die je kan doen als junior webdesign? Je hebt kennelijk weinig ervaring met websites ontwerpen en krijgt hier feedback van powerusers en webdesigners met meer ervaring en vast meer succesvolle producten. Dan ga je dit volledig negeren omdat je iemand wilt die gewoon verteld wat jij wilt horen ondanks dat dit onzin is?

SMA SB5.0 + 16x Jinko 310wp OWO + 10x Jinko 310wp WNW |--|--| Daikin 4MXM68N + 1x FTXA50AW + 3x FTXM20N

zaterdag 1 juni 2013 23:56

Acties:

crisp

Devver

Pixelated

Laat ik het dan eens opnemen voor topicstarter

Native scrollbars binnen browsers zijn gewoon kut.

Zo, dat is gezegd

En ik heb er zelfs argumenten bij:

- windows scrollbars zijn lelijk
- afhankelijk van het os nemen ze extra ruimte in
- afhankelijk van het os is er soms zelfs compleet geen indicatie dat bepaalde content scrollbaar is (totdat je gaat scrollen)
- windows scrollbars zijn lelijk (had ik al gezegd, maar kan niet genoeg benadrukt worden

)

Maar een custom scrolling implementatie is geen Panacea en heel lastig overal goed te krijgen ivm:

- mousewheel scrolling
- touch scrolling
- performance
- automatische aanpassing bij dynamische content
- performance (had ik al gezegd, maar is zeker voor smooth scrolling en touch scrolling echt een issue)

Hier op Tnet gebruiken we ook op bepaalde plekken een custom scrollbar, maar het is en blijft een zorgenkindje, zeker mbt performance op mobiele devices. Ik heb ook diverse custom scrollbar libraries bekeken, maar ze zijn eigenlijk allemaal af te raden omdat ze buiten performance op meerdere punten tekort schieten. Voor full-page scrolling is een custom scrollbar sowieso af te raden.

Intentionally left blank

zondag 2 juni 2013 02:38

Acties:

_Thanatos_

Ja, en kaal

crisp schreef op zaterdag 01 juni 2013 @ 23:56:
- windows scrollbars zijn lelijk

Windows scrollbars zijn themed adhv het theme van de browser of het theme van Windows. Als je dat lelijk vindt, dat kan, maar het is wat de bezoeker gewend is en/of ingesteld heeft. Je gaat ook niet roepen dat de titelbalk lelijk is en dat je die dus weg wil stylen.

crisp schreef op zaterdag 01 juni 2013 @ 23:56:
- mousewheel scrolling
- touch scrolling

Keyboard scrolling! Denk aan mensen met een motorische handicap, onderuitgezakte IT'ers, en game consoles!

日本！🎌

zondag 2 juni 2013 13:25

Acties:

drm

f0pc0dert

Ik zou een frameset gebruiken.

* drm rent.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz