[html/javascript/dhtml/layers] ronde hoekjes

[Verwijderd]

Ik wil graag
dit design: http://24.132.179.182/lotte/kinki/kinki/kinki3b_zwart_gallery.swf

op deze site:http://24.132.179.182/lotte/kinki/kinki/kinki/index.html

De site is opgebouwd uit frames, en het middelste vak scrollt (in IE5 in ieder geval).

Wat ik zoek is een manier om ronde hoekjes (zie design) hierin te verwerken.

kan niet in frames.. misschien wel in Layers, maar hoe laat ik die dan meescrollen als ik klik op een andere link?

[XangadiX]

hmmm dus die ronde hoekjes moeten OVER het scrollende gedeelte;

dan zou ik een layer eroverheen leggen (100%x100%) en daar een plaatje instoppen met de "rand" en het middelste stuk doorzichtig, maar dat wordt wel enorm buggy ben ik bang

misschien kun je beter de scrollende vlakken elk ronde hoekjes geven, das niet mooier maar wel functioneler

en ik houdt mijn hart vast voor netscape

[Verwijderd]

Op zaterdag 28 juli 2001 19:20 schreef XangadiX het volgende:
hmmm dus die ronde hoekjes moeten OVER het scrollende gedeelte;

dan zou ik een layer eroverheen leggen (100%x100%) en daar een plaatje instoppen met de "rand" en het middelste stuk doorzichtig, maar dat wordt wel enorm buggy ben ik bang

misschien kun je beter de scrollende vlakken elk ronde hoekjes geven, das niet mooier maar wel functioneler

en ik houdt mijn hart vast voor netscape

MAAAR (oh in NS werktie toch al niet). als ik een layer gebruik en ik skip van zoom in naar b.v. gallery moet dat ding (de layer) ook meescrollen...alleen HOE

[XangadiX]

waarom moet de layer meescrollen?!

als ie toch mee moet scrollen dan zou ik hem in het scroll gedeelte stoppen, kun je dat niet als achtergrond plaatje in het scroll gedeelte zetten?

[XangadiX]

he ik heb een koel idee, als je de border met de ronde hoekjes nou in een layer knalt en die via Timelines de andere kant op stuurt

of is dat erg ingewikkeld?

[Verwijderd]

Op zaterdag 28 juli 2001 19:35 schreef XangadiX het volgende:
he ik heb een koel idee, als je de border met de ronde hoekjes nou in een layer knalt en die via Timelines de andere kant op stuurt

of is dat erg ingewikkeld?

hee. ehm. ja. ik weet niet of dat ingewikkeld is.. maar het klinkt als EEn oplossing.

[XangadiX]

het is dezelfde oplossing als de layer met de hoekjes gewoon eroverheen leggen, maar het blijft allebei niet zo charmant, je mag echt geen achtergrond plaatje in die scoll zetten? want dan is het makkelijk EN charmant

[Verwijderd]

Op zaterdag 28 juli 2001 19:46 schreef XangadiX het volgende:
het is dezelfde oplossing als de layer met de hoekjes gewoon eroverheen leggen, maar het blijft allebei niet zo charmant, je mag echt geen achtergrond plaatje in die scoll zetten? want dan is het makkelijk EN charmant

hoe bedoel je achtergrondplaatje in de scroll?

[XangadiX]

wel die scroll pagina's zijn nu groen blauw rood etc.

als je nu ipv een achtergrondkleur een plaatje definieerd met daarin de ronde hoekjes dan werkt dat toch gewoon?

ascii art uitleg:

code:

         view: -------- 
scroll:  ~---~~-|-~~---~-|-~~-- >>
       |   || | ||   | | ||
       |   || | ||   | | ||
       ~---~~-|-~~---~-|-~~-- >>
             --------
en de ~ zijn dan dus ronde hoekjes

dus eigenlijk gewoon een kadertje om de pagina's in de scroller met ronde hoekjes

[Verwijderd]

Op zaterdag 28 juli 2001 19:56 schreef XangadiX het volgende:
wel die scroll pagina's zijn nu groen blauw rood etc.

als je nu ipv een achtergrondkleur een plaatje definieerd met daarin de ronde hoekjes dan werkt dat toch gewoon?

ascii art uitleg:

code:

         view: -------- 
scroll:  ~---~~-|-~~---~-|-~~-- >>
       |   || | ||   | | ||
       |   || | ||   | | ||
       ~---~~-|-~~---~-|-~~-- >>
             --------
en de ~ zijn dan dus ronde hoekjes

dus eigenlijk gewoon een kadertje om de pagina's in de scroller met ronde hoekjes

nope. WANT. dan scrollen die hoekjes dus ja.. in die middelste balk mee. en dta is niet mooi want als die scrollt verschuiven dan de hoekjes (maar dat snap jij ook wel).
dus neen.
ik wil stilstaande ronde hoekjes

[SWINX]

hmmm...

misschien je pagina instellen voor een resolutie (bijv 800*600) en dan de hoekjes als background instellen ??

[wizzard]

op deze site:http://24.132.179.182/lotte/kinki/kinki/kinki/index.html

ff iets anders hoe in hemelsnaam hebbie dat met dat scrollen van die pagina gedaan ik doe zelf wel eens wat voor anderen mensen (site's) maar ben er nog nie zo heelerg handig in is dat gewoon een scripje wat je ergens kuntr halen of ??? kortom hoe doe je dat (wel heel gaaf ) (vind ik)

[Verwijderd]

Als ik het goed zie dan zit er in dat frame dus een pagina met een stapel div's die van links naar rechts bewegen.

Kun je niet gewoon de rechte randen van het witte kader als afbeelding in de frames aan de buitenkant zetten en in het center-frame in statisch gepositioneerde div's de hoekjes die binnen het vierkante vlak vallen?

wel leuk, die fel gekleurde scrollende toestand.

============

hmm, volgens mij zie ik het niet goed en scrollt dus het hele middelste frame.

eh, in plaats van de pagina laten scrollen een heel brede div laten scrollen en de navigatie ook in je middelsta frame stoppen?

[SWINX]

Op zaterdag 28 juli 2001 20:12 schreef wizzard het volgende:

[..]

ff iets anders hoe in hemelsnaam hebbie dat met dat scrollen van die pagina gedaan ik doe zelf wel eens wat voor anderen mensen (site's) maar ben er nog nie zo heelerg handig in is dat gewoon een scripje wat je ergens kuntr halen of ??? kortom hoe doe je dat (wel heel gaaf ) (vind ik)

misschien kun je het hier uit opmaken:

code:

<script>

tablewidth = 600;
speed = 5;
currentpos = 0;
previous = 0;
opslot = 0;

function scroll(mover){
    
    opslot=1;

    if (destination != currentpos) {
        parent.content.scrollBy(mover,0);
        currentpos += mover;
    }
    else{
        clearInterval(timerID);
        opslot=0;
    }
    
}

function startscroll(menuitem){
    if(!opslot){
        difference =  menuitem - previous;
        previous = menuitem;
        mover = (difference * (tablewidth/100));
        destination = menuitem * tablewidth;
        timerID = setInterval('scroll('+mover+')',speed);
    }
}
</script>

met dit scriptje wordt (parent.content) dus de inhoud door het beeld gescolled met een snelheid ingesteld op 5.

[Verwijderd]

misschien is dit iets, zet in elke layer een tabel. Maak een plaatje(rood, geel roze... enz) in waar je de afgeronde hoeken in verwerkt. plaats dat als achtergrond van je tabel

[Verwijderd]

Op zaterdag 28 juli 2001 20:25 schreef SWINX het volgende:

[..]

misschien kun je het hier uit opmaken:

code:

<script>

tablewidth = 600;
speed = 5;
currentpos = 0;
previous = 0;
opslot = 0;

function scroll(mover){
    
    opslot=1;

    if (destination != currentpos) {
        parent.content.scrollBy(mover,0);
        currentpos += mover;
    }
    else{
        clearInterval(timerID);
        opslot=0;
    }
    
}

function startscroll(menuitem){
    if(!opslot){
        difference =  menuitem - previous;
        previous = menuitem;
        mover = (difference * (tablewidth/100));
        destination = menuitem * tablewidth;
        timerID = setInterval('scroll('+mover+')',speed);
    }
}
</script>

met dit scriptje wordt (parent.content) dus de inhoud door het beeld gescolled met een snelheid ingesteld op 5.

copyright: Teasz aka Martijn

[Verwijderd]

Op zaterdag 28 juli 2001 20:17 schreef exparrot het volgende:

hmm, volgens mij zie ik het niet goed en scrollt dus het hele middelste frame.

eh, in plaats van de pagina laten scrollen een heel brede div laten scrollen en de navigatie ook in je middelsta frame stoppen?

ja het hele middelste frame scrollt..
ehm. dus de brede div erbovenop met ronde hoekjes? als in transparante plaatjes?

[Verwijderd]

Op zaterdag 28 juli 2001 21:20 schreef wapje het volgende:
misschien is dit iets, zet in elke layer een tabel. Maak een plaatje(rood, geel roze... enz) in waar je de afgeronde hoeken in verwerkt. plaats dat als achtergrond van je tabel

grapjasje.
dat stelde XangadiX ook al voor.. maar dat lijkt me dus niks want dan zie je van die achterlijke hoekjes als het scrollt en dat was dus absoluut niet mijn bedoeling..

[Verwijderd]

Op zaterdag 28 juli 2001 21:36 schreef Lotte het volgende:

[..]

grapjasje.
dat stelde XangadiX ook al voor.. maar dat lijkt me dus niks want dan zie je van die achterlijke hoekjes als het scrollt en dat was dus absoluut niet mijn bedoeling..

hehehehe "ze zegt grapjasje tegen mij"
okidoki, ik kijk wel ff naar andere mogenlijkheden

[Verwijderd]

Op zaterdag 28 juli 2001 21:35 schreef Lotte het volgende:

[..]

ja het hele middelste frame scrollt..
ehm. dus de brede div erbovenop met ronde hoekjes? als in transparante plaatjes?

Precies, ik denk dat dat wel moet kunnen. Dan heb je iig niet van die lelijk trillende hoek-plaatjes die je waarschijnlijk wel hebt als je de hoek-afbeeldingen in het middelste frame laat bewegen.

(als je dus het frame naar links laat scrollen en de afbeeldingen binnen die pagina naar rechts...)

/edit
Ik bedoel dus de een brede div die naar links en rechts kan bewegen. Daarboven hangen dan layers met de benodigde hoekafbeeldingen.

Je kunt alleen niet veel doen op het gebied van anti-aliasing met die hoekplaatjes, maar dat probleem heb je hoe dan ook. (of je moet natuurlijk voor elke achtergrondkleur aparte gifs maken die je laat verwisselen als de 'masterDIV' een coordinaat passeert - ik draaf door... )

[Verwijderd]

Op zaterdag 28 juli 2001 20:17 schreef exparrot het volgende:
wel leuk, die fel gekleurde scrollende toestand.

t is maar wat je leuk noemt, ik krijg koppijn van al die schreeuwende kleuren

[Booster]

Uhm, mag ik even tussendoor wat vragen?

Lotte, waar heb jij dit idee vandaan? Ik heb vrijwel hetzelfde idee (grafisch gezien niet, het idee alleen dus) namelijk een tijd geleden op Sitechecks.nl gezien.

Wordt dat idee ergens vrij verspreid/gedemonstreerd ofzo?

[Verwijderd]

Op zondag 29 juli 2001 01:00 schreef Booster het volgende:
Uhm, mag ik even tussendoor wat vragen?

Lotte, waar heb jij dit idee vandaan? Ik heb vrijwel hetzelfde idee (grafisch gezien niet, het idee alleen dus) namelijk een tijd geleden op Sitechecks.nl gezien.

Wordt dat idee ergens vrij verspreid/gedemonstreerd ofzo?

ehm
ik heb het ehm.. maandje of 4, 5 geleden bedacht om binnen te komen op de hku.
maar ik neem aan dat er wel meerdere mensen met zo'n idee kunnen komen.
waarschijnlijk heb ik het ook wel ergens vandaan gejat..
overigens heb ik al eerder hier een topic over gepost (omdat ik toen ook al niet wist hoe ik dit voor elkaar moest krijgen)

[Verwijderd]

Op zondag 29 juli 2001 00:44 schreef BBQ-Man het volgende:
t is maar wat je leuk noemt, ik krijg koppijn van al die schreeuwende kleuren

de gustibus non est disputandum.

[Booster]

ok np.

[Verwijderd]

Hee denken jullie dat het werkt als ik de hele content (is middelste balk dus) in een layer zet.. en die laat scrollen (ipv dus een html pagina) en dan daaroverheen een stilstaande layer zet.??

[Clay]

Daar ben ik zelfs heilig van overtuigd

[Verwijderd]

Op zondag 29 juli 2001 20:32 schreef Clay het volgende:
Daar ben ik zelfs heilig van overtuigd

ehm.
denk je dat het makkelijk is? kan je vanaf een frame .. een layer in 1 ander frame aanroepen om te scrollen dan?

[RM-rf]

Op zondag 29 juli 2001 20:34 schreef Lotte het volgende:
ehm.
denk je dat het makkelijk is? kan je vanaf een frame .. een layer in 1 ander frame aanroepen om te scrollen dan?

iets als

code:

parent.FRAMENAME.document.getElementById('SCOLLENDELAYER').doScroll('below')

voor msie4 zou je enkel ipv getElementById weer document.all moeten gebruiken, ns4 weer document.layers.

doScroll() is ook msie5+-only en simuleert een scrollactie (klik op een scrollbar-button, of in de scrollbar-face), voor msie4 moet je met scollBy() werken die in pixels telt

weet eigenlijk niet of mozilla die ondersteund als je dat uitvind hoop ik dat je het meld want die moet ik binnenkort ook gebruiken

[Oefening]

weet niet of het al is gezegd maar als je nou van de hoekjes plaatjes maakt (met gedeeltelijke transparantie) en die in het middelste kader in een div gooit dan ben je toch klaar of niet?

of scrollen die hoekjes dan alsnog mee?

[Verwijderd]

Op zondag 29 juli 2001 23:44 schreef nelis het volgende:
weet niet of het al is gezegd maar als je nou van de hoekjes plaatjes maakt (met gedeeltelijke transparantie) en die in het middelste kader in een div gooit dan ben je toch klaar of niet?

of scrollen die hoekjes dan alsnog mee?

kan niet want de onderste balk scrollt dan en dan moet de div (die t.o.v. de balk scrollt) de andere kant op scrollen.
niet handig dus

[Verwijderd]

Wat dacht je van die kleur

[dusty]

btw Lotte, op die site als je je browser kleiner maakt wordt de bovenste balk ook kleiner en dan vallen op den duur de "letters/menu" half eraf. (niet erg netjes..)

Had beter verwacht van je

De beste manier in mijn mening is om de ronde hoekjes in de andere frames neer te zetten ipv in de main site. weet je tenminste ook zeker dat het onder netscape werkt.

[dusty]

Mmm..zie net dat je ze mee wil laten scrollen zodra je op een link klikt.. (ik moet beter kijken enzo..)

al gedacht om het gewoon netjes in een tabel te zetten ? met in de hoeken de afrondingen ?

[Pelle]

Op maandag 30 juli 2001 08:56 schreef dusty het volgende:
Mmm..zie net dat je ze mee wil laten scrollen zodra je op een link klikt.. (ik moet beter kijken enzo..)

al gedacht om het gewoon netjes in een tabel te zetten ? met in de hoeken de afrondingen ?

Dat gaat niet werken toch Als je de hele pagina scrollt, dan scrollen alle layers mee.
Er zijn dus 2 oplossingen: de layer verschuiven, zoals al gezegd, of de pagina verschuiven maar die hoekjes op hun plek houden. Dus: als de pagina 20px naar links schuift, moeten die hoekjes 20px naar rechts schuiven.
Hoe je dat precies in moet vullen weet ik niet; er zal vast wel iets van een onScroll-event zijn wat je daarvoor aan kunt roepen.

[dusty]

Op maandag 30 juli 2001 10:44 schreef Pelle het volgende:
Dat gaat niet werken toch Als je de hele pagina scrollt, dan scrollen alle layers mee.
Er zijn dus 2 oplossingen: de layer verschuiven, zoals al gezegd, of de pagina verschuiven maar die hoekjes op hun plek houden. Dus: als de pagina 20px naar links schuift, moeten die hoekjes 20px naar rechts schuiven.
Hoe je dat precies in moet vullen weet ik niet; er zal vast wel iets van een onScroll-event zijn wat je daarvoor aan kunt roepen.

Maar dat ga je dus zien.. en persoonlijk vindt ik dat er weer niet uitzien.

[Verwijderd]

Op zondag 29 juli 2001 20:26 schreef Lotte het volgende:
Hee denken jullie dat het werkt als ik de hele content (is middelste balk dus) in een layer zet.. en die laat scrollen (ipv dus een html pagina) en dan daaroverheen een stilstaande layer zet.??

[afbeelding]

Zoiets bedoelde ik idd.

Het layer (of layers) met de hoekjes blijft dan stilstaan op een niet-scrollende pagina en je hebt dan dus geen irritant trillende hoekjes.

De menu-opties zou je evt. ook in het center-frame kunnen zetten.

[Pelle]

Iets wat ook wel zou kunnen werken:
Maak er toch een frameset van, met 3 frames: linkerhoekjes, content, rechterhoekjes.
Nu scrollt het geheel natuurlijk niet onder die hoekjes door, maar als je -op het moment dat je pagina doorschuift naar een nieuwe kleur, en op het moment dat de nieuwe kleur volledig in beeld is- de achtergrondkleur van je linker- en rechterframe aanpast, dan heb je een voor het oog zelfde effect. Dit gaat niet werken als je je hoekjes heel groot neemt, of een hele lage scrollspeed hebt omdat het dan te obvious wordt.

Maar op zich zie ik wel wat in deze oplossing Is niet echt moeilijk te realiseren denk ik.

[Verwijderd]

Is vanuit wat er nu al is idd wel snel te realiseren.

[Verwijderd]

Op maandag 30 juli 2001 11:03 schreef Pelle het volgende:
Iets wat ook wel zou kunnen werken:
Maak er toch een frameset van, met 3 frames: linkerhoekjes, content, rechterhoekjes.
Nu scrollt het geheel natuurlijk niet onder die hoekjes door, maar als je -op het moment dat je pagina doorschuift naar een nieuwe kleur, en op het moment dat de nieuwe kleur volledig in beeld is- de achtergrondkleur van je linker- en rechterframe aanpast, dan heb je een voor het oog zelfde effect. Dit gaat niet werken als je je hoekjes heel groot neemt, of een hele lage scrollspeed hebt omdat het dan te obvious wordt.

Maar op zich zie ik wel wat in deze oplossing Is niet echt moeilijk te realiseren denk ik.

ja dat idee had ik dus ook (frames) en inderdaad dan schuift het er niet onderdoor.
en ik denk ook dat als je pas achteraf (als het er eenmaal staat ofzo) de achtergrondkleur gaat veranderen van de hoekjesrest. dat dat niet mooi is.. kan ik net zo goed 6 keer 4 hoekjes maken en die dingen voorbij laten scrollen steeds.
(wat ik ook niet wil).


IK WIL RONDE HOEKJES (my way)

[Verwijderd]

Op zondag 29 juli 2001 23:42 schreef RM-rf het volgende:


doScroll() is ook msie5+-only en simuleert een scrollactie (klik op een scrollbar-button, of in de scrollbar-face), voor msie4 moet je met scollBy() werken die in pixels telt

weet eigenlijk niet of mozilla die ondersteund als je dat uitvind hoop ik dat je het meld want die moet ik binnenkort ook gebruiken

ik zal morgen de code posten, heb net een nieuwe xbrowser/xplatform scrollfunctie moeten maken voor onze nieuwe site, de scrollbar bestaat uit 3 gifjes (upscroll, downscroll en een balletje dat meescrollt). Misscien hebben jij en Lotte er wat aan.

[Verwijderd]

[b]Op maandag 30 juli 2001 12:12

IK WIL RONDE HOEKJES (my way)

wat jij wil is PNG en ik kan mij idd een topic herinneren van zo'n 4 maanden geleden dat je ook vroeg hoe het zat met de technische haalbaarheid. Ik denk dat je toch zal moeten werken met een aantal hide-layers en een layer die scrollt

[Verwijderd]

Op maandag 30 juli 2001 20:41 schreef Shadow3333 het volgende:

[..]

ik zal morgen de code posten, heb net een nieuwe xbrowser/xplatform scrollfunctie moeten maken voor onze nieuwe site, de scrollbar bestaat uit 3 gifjes (upscroll, downscroll en een balletje dat meescrollt). Misscien hebben jij en Lotte er wat aan.

ben benieuwd..

[Verwijderd]

Op maandag 30 juli 2001 20:59 schreef Lotte het volgende:

ben benieuwd..

hier is ie dan, deze is in principe gemaakt voor een verticale scroll, maar je kan de x en y waarden veranderen om het gewenste effect te krijgen.

code:

<script language="JavaScript" type="text/javascript">

if(document.layers){ //NS4 resize fix...
    scrX= innerWidth; scrY= innerHeight;
    onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
</script>


<script language="javascript">
<!--//


var extra=30; // xtra aantal pixels dat wordt meegenomen in het scrollen
var bottom=130; // clipping gebied, hetgeen je dus ziet, kan je gewoon aanpassen
var right=250; // breedte van de layer die je scrollt
var speedy=4; // deze hoef je niet te veranderen
var height=341; // hoogte van de laag die scrollt

var netschaap=0;
var top=0;
var left=0;
var scrolly=0;
var start=0;
var end=0;
var bolspeed=0;
var bolpos=0;
var scrollneeded=0;


function init()
{
var version=parseFloat(navigator.appVersion);
if ((navigator.appName == 'Netscape')&&(version<5))netschaap=1;
else netschaap=0;

if(netschaap==0)
  {start=parseInt(document.getElementById('txt').style.top);
   end=parseInt(document.getElementById('txt').style.height)-bottom+40;
   bolspeed=((bottom-extra)/end)*speedy;
   bolpos=parseInt(document.getElementById('bol').style.top);}
else
  {start=parseInt(document.txt.top);
   end=height-bottom+40;
   bolspeed=((bottom-extra)/end)*speedy;
   bolpos=parseInt(document.bol.top);}


if(end>bottom)scrollneeded=1;


}


function mover()
{

if((scrolly)&&(scrollneeded))
{
if (netschaap)
   {if((scrolly==1)&&(parseInt(document.txt.top)>=start-end))
    {top+=speedy;bottom+=speedy; bolpos+=bolspeed;
    document.bol.top = Math.ceil(bolpos);
    document.txt.top = parseInt(document.txt.top)-speedy;
    document.txt.clip.bottom=bottom;
    document.txt.clip.top=top;}
    if((scrolly==2)&&(parseInt(document.txt.top)<=start-speedy))
    {top-=speedy;bottom-=speedy;bolpos-=bolspeed;
    document.bol.top = Math.ceil(bolpos);
    document.txt.top = parseInt(document.txt.top)+speedy;
    document.txt.clip.bottom=bottom;
    document.txt.clip.top=top;}
    }
else
   {if((scrolly==1)&&(parseInt(document.getElementById('txt').style.top)>=start-end))
    {top+=speedy;bottom+=speedy; bolpos+=bolspeed;
    document.getElementById('bol').style.top = bolpos;
    document.getElementById('txt').style.top = parseInt(document.getElementById('txt').style.top)-speedy;
    clipper="rect("+top+" "+right+" "+bottom+" "+left+")";
    document.getElementById('txt').style.clip=clipper;}
    if((scrolly==2)&&(parseInt(document.getElementById('txt').style.top)<=start-speedy))
    {top-=speedy;bottom-=speedy;bolpos-=bolspeed;
    document.getElementById('bol').style.top = bolpos;
    document.getElementById('txt').style.top = parseInt(document.getElementById('txt').style.top)+speedy;
    clipper="rect("+top+" "+right+" "+bottom+" "+left+")";
    document.getElementById('txt').style.clip=clipper;}
    }
}


setTimeout("mover()",50)  
}



function setscroll(nr)
{
scrolly=nr;
}



//-->
</script>

hoop dat je er wat aan hebt. Getest in NS 4.7, NS 6.x, MSIE 5, 5,5 (zowel PC als MAC versies)