Toon posts:

implentatie van een diagonaal design ..

Pagina: 1
Acties:

zondag 9 juni 2002 15:07

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Hoe kan ik het beste een design met veel diagonale lijnen en velden uit photoshop omzetten naar HTML ? Bij een design met alleen verticale en horizontale is het een kwestie van wat slicen, maar vind het hier toch wat moeilijker.

Ook moet de tekst schijn lopen, dus bijv:
code:
1
2
3
4
5
6

        hier
         komt de
        schuine
       tekst die
      links geleidelijk
     af moet lopen

Denk dat dit wel met css -> clip: gaat lukken.

Een voorbeeldje van een design waar ik nu mee zit:
Afbeeldingslocatie: http://www.sovenewmedia.nl/GoT/layout1msnmeppel_thumb.jpg

Ik snap dat het vermijden van diagonalen een 'oplossing' zou zijn, maar wil 't toch graag eens proberen. (En het is maar een eigen projectje, dus kan aankloten wat ik wil :))

zondag 9 juni 2002 15:09

Acties:
  • Ramon
  • Registratie: Juli 2000
  • Laatst online: 22:30

Ramon

denk dat layers gebruiken dan wel makkelijk is :Y)

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

zondag 9 juni 2002 15:35

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 24-05 13:39

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Flink veel <BR>'s gebruiken :) Iets anders gaat niet lukken denk ik... Maar als je design een vaste grootte heeft, is er niets mis met die oplossing.

/edit: Tampie2000, mijn postrater werkt wel ;)

En over layers clippen: dat gaat niet zo lukken. Dat maakt een gat in een layer waardoor je een andere kan zien. Dan moet je dus wel op die andere layer alsnog de goede vorm aanhouden.

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

zondag 9 juni 2002 16:10

Acties:

Verwijderd

is een hele tijd geleden een topic over geweest, ging over diagonale scrollbars, zat ook een oplossing in om text diagonaal uit te lijnen (of een willekeurige andere vorm)

zondag 9 juni 2002 18:26

Acties:
  • 2
  • Registratie: November 2000
  • Laatst online: 31-03 13:52

2

[topic=277787/1/25]

zondag 9 juni 2002 19:06

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Jaw, jammer dat die pagina allemaal al offline zijn ;( Volgens mij had ik Clay een paar maandjes geleden al eens gemailt over die diagonale scrollbar, maar intussentijd is m'n computer al een paar keer gecrasht :P dus die heb ik vast niet meer ..

Heb nog even een ander probleempje.. heb deze html:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table cellpadding="0" cellspacing="0" width="100%">
    <tr><td bgcolor="C8FF44" valign="bottom" align="center" height="200px">[img]"test.jpg"[/img]</td></tr>
    <tr><td bgcolor="F5FFDE" align="center" valign="top" height="17px" style="font-size: 5pt; border-top: #8FC24B 2 solid; border-bottom: #8FC24B 2 solid;">
        <!--<a href="../input/aanmelding.php">[img]"aanmelden.jpg"></a>
        <img[/img]
        <a href="../show/all.php">[img]"weergeven.jpg"></a>
        <img[/img]
        <a href="../input/zoeken.php">[img]"zoeken.jpg"></a>
        <img[/img]
        <a href="../show/help.php">[img]"help.jpg"></a>
        <img[/img]//-->
        [img]"nickname.jpg">
            <input[/img][img]"arrow-lb.jpg">
    </td></tr>
    <tr><td[/img]&nbsp;</td></tr>
</table>

Maar de inputbox wil niet boven in het TD veld komen te staan.. :S heel vaag heb al vanaf alles geprobeerd

zondag 9 juni 2002 23:11

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Nou, heb eventjes een beginnetje gemaakt met een scriptje, maar moet alweer stoppen jammergenoeg. Ben tot nu toe zover gekomen.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<html>

<head>

<title> </title>

<style type="text/css">

</style>

<script language="JavaScript" type="text/javascript">
line = new Array();
intIndex = 0;

strText = 'Dit is de tekst die in de pagina moet worden geplaatst, welke een schuine verloop aan de linkerkant moet krijgen dmv in te springen. Dit is de tekst die in de pagina moet worden geplaatst, welke een schuine verloop aan de linkerkant moet krijgen dmv in te springen. Dit is de tekst die in de pagina moet worden geplaatst, welke een schuine verloop aan de linkerkant moet krijgen dmv in te springen.';

maxTekenLength = 30;
function fnGetLine(argPos) {
    if (strText.substr(argPos,1) != ' ') strReturn = fnGetLine(--argPos);
    else strReturn = strText.substring(0,argPos), strText = strText.substr(argPos, strText.length-argPos+1);
    return strReturn;
}

while (strText.length > maxTekenLength) {
    line[intIndex] = fnGetLine(maxTekenLength);
    intIndex++;
} line[intIndex] = strText.substr(0,strText.length);

document.write('<table>');
for (var i = 0; i < line.length; i++) {
    document.write('<div id="lines['+ i +']" style="margin-left: '+ i*10 +'px;">' + line[i] + '</div>');
}
document.write('</table>');
</script>

</head>

<body>

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

</script>

</body>

</html>

De regel met tekst wordt nu dus mooi opgebroken zonder dat er woorden door midden worden gehakt enzo :) maar 't werkt eigenlijk alleen maar 100% bij monospaced fonts, dus waar iedere letter even breed is. Heeft iemand misschien een goede oplossing voor normale fonts, zonder vooraf de breedte van iedere letter te gaan definiëren :)

maandag 10 juni 2002 10:47

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Hmpfr, 3 reply's van mijzelf in mijn eigen topic :?

Maar goed, ik ben weer uitgeslapen en ben alweer iets verder (check hier):
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<html>

<head>

<title> </title>

<style type="text/css">

</style>

<script language="JavaScript" type="text/javascript">
line = new Array();
intCurrentLine = intIndex = 0;
intIndent = 10;
intMaxLines = 5;

strText = 'Dit is de tekst die in de pagina moet worden geplaatst, 
   welke een schuine verloop aan de linkerkant moet krijgen dmv in te springen.
   Dit is de tekst die in de pagina moet worden geplaatst, welke een schuine 
   verloop aan de linkerkant moet krijgen dmv in te springen. Dit is 
   de tekst die in de pagina moet worden geplaatst, welke een schuine verloop aan de 
   linkerkant moet krijgen dmv in te springen.';

maxTekenLength = 30;
function fnGetLine(argPos) {
    if (strText.substr(argPos,1) != ' ') strReturn = fnGetLine(--argPos);
    else strReturn = strText.substring(0,argPos), strText = \
         strText.substr(argPos, strText.length-argPos+1);
    return strReturn;
}

while (strText.length > maxTekenLength) {
    line[intIndex] = fnGetLine(maxTekenLength);
    intIndex++;
} line[intIndex] = strText.substr(0,strText.length);

function fnFill(argEl, argLine) {
    
    if ((argLine > 0 - intMaxLines/2) && (argLine < line.length + intMaxLines/2)) {
        
        document.getElementById(argEl).innerHTML = '';
        
        for (var i = 0; i < intMaxLines; i++, argLine++) {
            if (line[argLine]) strTemp = line[argLine];
            else strTemp = '&nbsp;';
            document.getElementById(argEl).innerHTML += \ 
                   '<div id="lines['+ i +']" style="margin-left: '+ i*intIndent +'px;">'\
                         + strTemp + '</div>';
        }
    } 
    else if (argLine < 0 - intMaxLines/2) {
        intCurrentLine++;
    }
    else {
        intCurrentLine--;
    }
}

</script>

</head>

<body>
<div id="displayDiv">&nbsp;</div>
<a href="javascript: void(0);" onClick="fnFill('displayDiv', --intCurrentLine);">/\</a><br />
<a href="javascript: void(0);" onClick="fnFill('displayDiv', ++intCurrentLine);">\/</a>
<script language="JavaScript" type="text/javascript">

</script>

</body>

</html>

Nu kan ik dus mbv 2 links op en neer scrollen (alleen nog maar onclick), dus nu moet ik het nog voor mekaar krijgen om een scrollbar juist diagonaal te laten scrollen.

Iemand tips, references whatever ? :?

/edit:
scriptje geupdate met een eenvoudig scrollbarretje
zie check hier

dinsdag 11 juni 2002 10:20

Acties:

Verwijderd

als je voor die handle van de scrollbar nou ook de x positie bepaalt door bv de ypositie door 2 te delen. (maak er een plaatje van). Veel javascript ken ik niet, maar je haalt dan de y verplaatsing uit de muis en die stop je rechtsstreeks in de y verplaatsing van je handle en met een rekensommetje in de x verplaatsing

dinsdag 11 juni 2002 11:22

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Jup.. maar het was eigenlijk de bedoeling dat je die factor x voor y-1 niet handmatig hoefde in te voeren, maar dat die berekend werd aan de hand van de hoek die de scrollbar maakt..

Als ik die factor zelf handmatig in zou voeren, zou het niet zo zeer een probleem wezen..

dinsdag 11 juni 2002 11:23

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-05 18:53

Bosmonster

*zucht*

Op dinsdag 11 juni 2002 11:22 schreef r0bert het volgende:
Jup.. maar het was eigenlijk de bedoeling dat je die factor x voor y-1 niet handmatig hoefde in te voeren, maar dat die berekend werd aan de hand van de hoek die de scrollbar maakt..

Als ik die factor zelf handmatig in zou voeren, zou het niet zo zeer een probleem wezen..
Daar heb ik je gister via ICQ de formule voor gegeven ;)

dinsdag 11 juni 2002 11:37

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Op dinsdag 11 juni 2002 11:23 schreef Bosmonster het volgende:

[..]

Daar heb ik je gister via ICQ de formule voor gegeven ;)
Maar daarmee kom ik er dus niet uit ;(

dinsdag 11 juni 2002 14:03

Acties:

Verwijderd

Oké... Mijn wiskunde:

Afbeeldingslocatie: http://members.home.nl/spiritx/zooi/wiskunde.gif

a = Breedte van je scrollbar = 100px
b = Hoogte van je scrollbar = 500px

Rekenvoorbeeld:
Y-pos = e = 200px
X-pos = d = ?

[Snavelfiguur]
d : e = a : b
d : 200 = 100 : 500
d = 40 px

Op deze manier bereken je bij iedere Y-waarde een X-waarde.
HTH.

dinsdag 11 juni 2002 15:51

Acties:

Verwijderd

Eenvoudig voorbeeld

Succes!

dinsdag 11 juni 2002 16:57

Acties:
  • Nietzman
  • Registratie: April 2000
  • Laatst online: 22-05 08:36

Nietzman

Woei!

Geen van de hierboven geposte frutsels doet het in Mozilla....

Lijkt me toch iets om rekening mee te houden

dinsdag 11 juni 2002 17:18

Acties:

Verwijderd

Op dinsdag 11 juni 2002 16:57 schreef Nietzman het volgende:
Geen van de hierboven geposte frutsels doet het in Mozilla....

Lijkt me toch iets om rekening mee te houden
Beetje erg overbodige opmerking als het om voorbeeldjes gaat... ;)

dinsdag 11 juni 2002 17:37

Acties:

Verwijderd

Op dinsdag 11 juni 2002 17:18 schreef SpiritX het volgende:

Beetje erg overbodige opmerking als het om voorbeeldjes gaat... ;)
en trouwens ze doen het wel :) althans die van SpiritX doet het prima in Moz


edit-----

volgens mij is dit vorig jaar ook al een keer voorbijgekomen, kan het echter nergens meer terugvinden :'( misschien was het wel voor de grote crash? Ik kan mij nog goed herrineren dat het helemaal perfect werkte... kut dat je nu alles weer opnieuw moet doen.

dinsdag 11 juni 2002 18:08

Acties:
  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 03-02 22:51

Hangloozz

{ @$%&# }

Op dinsdag 11 juni 2002 17:37 schreef Shadow3333 het volgende:


volgens mij is dit vorig jaar ook al een keer voorbijgekomen, kan het echter nergens meer terugvinden :'( misschien was het wel voor de grote crash? Ik kan mij nog goed herrineren dat het helemaal perfect werkte... kut dat je nu alles weer opnieuw moet doen.
bedoel je soms dit topic? :)

www.jurgroessen.nl

dinsdag 11 juni 2002 18:12

Acties:

Verwijderd

Op dinsdag 11 juni 2002 18:08 schreef Hangloozz het volgende:

bedoel je soms dit topic? :)
juist ja die bedoel ik :) waar heb je op gezocht, ik kon nl. helemaal nada vinden.

dinsdag 11 juni 2002 18:16

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Tot zover (link) was ik al gekomen, maar het is afgezien van de bugs nog niet helemaal wat ik wou.. Zal even tekenen wat ik bedoel.. (kan eventjes duren)

edit:

Afbeeldingslocatie: http://www.sovenewmedia.nl/GoT/voorbeeld.gif
Ok, ik ben dus niet echt goed in wiskunde. Maar zover ben ik gekomen;

Zoals je zit loopt Z niet evenredig met de scrollbar, dat zou alleen zo zijn bij een van hoek 45 graden. Maar de scrollbar moet ook onder andere hoeken gebruikt kunnen worden. Anders had ik gewoon
b = a /(y/x)

Ik heb nu dus wel iets in de trant van:
b = a * variabele
Waarbij ik de variabele dan van te voren zelf handmatig invoer. Ik zou alleen liever willen dat dat automatisch gaat, maar ben er gisteren een behoorlijk tijd mee bezig geweest en het werkt helaas nog steeds niet :?

Dus OF het is te moeilijk voor mij OF ik ben te dom OF allebij :)

dinsdag 11 juni 2002 18:17

Acties:

Verwijderd

Op zondag 09 juni 2002 18:26 schreef 2 het volgende:
[topic=277787/1/25]
Op dinsdag 11 juni 2002 18:12 schreef Shadow3333 het volgende:

[..]

juist ja die bedoel ik :) waar heb je op gezocht, ik kon nl. helemaal nada vinden.
:)

dinsdag 11 juni 2002 18:23

Acties:

Verwijderd

het is niet echt mijn dag vandaag...

en met dit linkje maak ik het helemaal goed ;)

ik ben er zelf ook nog ff mee bezig geweest om het Moz compatible te krijgen maar dat moet maar tot morgen wachten, hoop dat je er wat aan hebt.

dinsdag 11 juni 2002 18:47

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 24-05 09:37

r0bert

Topicstarter
Shadow3333
dit linkje
Helaas scrollt die alleen maar met 45 graden
iedere loop: (1 omlaag, 1 naar rechts)

dinsdag 11 juni 2002 20:43

Acties:
  • Hangloozz
  • Registratie: Juli 1999
  • Laatst online: 03-02 22:51

Hangloozz

{ @$%&# }

Op dinsdag 11 juni 2002 18:12 schreef Shadow3333 het volgende:

[..]

juist ja die bedoel ik :) waar heb je op gezocht, ik kon nl. helemaal nada vinden.
ohw, ik had ook niet gezien dat ie al gepost was door 2... :{

maar ik heb gezocht op 'razor_blade scrollbar'; ik wist nog dat het een topic was van razor_blade (=papa_eend?)

www.jurgroessen.nl

dinsdag 11 juni 2002 23:35

Acties:

Verwijderd

Op dinsdag 11 juni 2002 20:43 schreef Hangloozz het volgende:

maar ik heb gezocht op 'razor_blade scrollbar'; ik wist nog dat het een topic was van razor_blade (=papa_eend?)
aha! jammer alleen dat alle linkjes in het topic reeds van de verschillende servers zijn afgehaald.
Pagina: 1
Reageer