[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  maandag 18 juni 2012 @ 11:59:45 #91
12221 Tijn
Powered by MS Paint
pi_113044559
Het is met jQuery Mobile lastig om een gelijkwaardige ervaring te bieden aan gebruikers zonder Javascript. Verder is er weinig mis mee, imho.
Verberg de nieuwsticker
  maandag 18 juni 2012 @ 12:41:01 #92
56176 Catch22-
Ben je Blind?!
pi_113045943
uhm ja... Maar de meeste mobiele devices hebben gewoon javascript natuurlijk.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  maandag 18 juni 2012 @ 13:25:40 #93
12221 Tijn
Powered by MS Paint
pi_113047568
quote:
11s.gif Op maandag 18 juni 2012 12:41 schreef Catch22- het volgende:
uhm ja... Maar de meeste mobiele devices hebben gewoon javascript natuurlijk.
Zeker, het is in de praktijk dan ook geen groot bezwaar. Maar het zou natuurlijk mooi zijn dat alles wat je maakt ook werkt zonder clientside scripting.
Verberg de nieuwsticker
pi_113047682
quote:
11s.gif Op maandag 18 juni 2012 12:41 schreef Catch22- het volgende:
uhm ja... Maar de meeste mobiele devices hebben gewoon javascript natuurlijk.
Reageer eens op je DM ofzo.
pi_113047701
quote:
14s.gif Op maandag 18 juni 2012 13:25 schreef Tijn het volgende:

[..]

Zeker, het is in de praktijk dan ook geen groot bezwaar. Maar het zou natuurlijk mooi zijn dat alles wat je maakt ook werkt zonder clientside scripting.
Het zou ook op papier moeten werken _O_
  maandag 18 juni 2012 @ 13:31:19 #96
56176 Catch22-
Ben je Blind?!
pi_113047803
quote:
14s.gif Op maandag 18 juni 2012 13:25 schreef Tijn het volgende:

[..]

Zeker, het is in de praktijk dan ook geen groot bezwaar. Maar het zou natuurlijk mooi zijn dat alles wat je maakt ook werkt zonder clientside scripting.
ja het zou ook mooi zijn als Kate Upton mij als haar vriend wou :9
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  maandag 18 juni 2012 @ 13:33:35 #97
12221 Tijn
Powered by MS Paint
pi_113047913
Lachen met jullie hoor B-)
Verberg de nieuwsticker
  maandag 18 juni 2012 @ 13:33:52 #98
56176 Catch22-
Ben je Blind?!
pi_113047935
och jonge dit is nog niets wooehooee
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_113048872
quote:
11s.gif Op maandag 18 juni 2012 13:33 schreef Catch22- het volgende:
och jonge dit is nog niets wooehooee
Psies _O_
  donderdag 28 juni 2012 @ 17:38:47 #100
292596 Faux.
Fan van zichzelf
pi_113519540
Met de volgende functie kan ik tekst plaatsen in een texarea:

1
2
3
4
5
6
7		function add(tekst)
  {
  
      document.getElementById('textarea').value = document.getElementById('textarea').value + tekst;
      document.getElementById('textarea').focus();
  
  }

Dat werkt prima, behalve als de tekst in "tekst" te groot wordt. Dan doet ie het opeens niet meer. Is hier een oplossing voor? :)
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
pi_113519841
Defineer "te groot"?
zcflevo.nl
  donderdag 28 juni 2012 @ 17:53:43 #102
292596 Faux.
Fan van zichzelf
pi_113520178
quote:
5s.gif Op donderdag 28 juni 2012 17:45 schreef KomtTijd... het volgende:
Defineer "te groot"?
Na even testen blijkt het aan de enters te liggen. Zodra er een enter in de tekst staat doet 'ie het niet meer.
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
pi_113549341
zet de enter om met nl2br
--edit--
oeps ik dacht dat ik in het php subforum zat lol

[ Bericht 57% gewijzigd door stefan1218 op 29-06-2012 11:28:52 ]
tjah :P
pi_113550226
als #textarea ook daadwerkelijk een <textarea> element is zou ik zeggen probeer het eens met innerHTML. Als het een input is is het natuurlijk logisch dat er geen enters in kunnen.
zcflevo.nl
pi_113574730
Een perl/js vraag die al opgelost is maar toch wat vragen oproept,
ik heb een regexp patroon [^a-z]/g, en wanneer ik een string waar geen alfabetisch karakter in voor komt test levert dit afwisselend true of false op. De global flag verwijderen zorgt dat de uitkomst constant wordt, maar dit hoort toch niet?

[ Bericht 0% gewijzigd door Quir op 29-06-2012 22:10:18 ]
"Social order at the expense of liberty is hardly a bargain."
  woensdag 4 juli 2012 @ 23:57:21 #106
220026 Treces
Hier had uw tekst kunnen staan
pi_113788123
Ik wil een grid van afbeeldingen maken op een fullscreen scherm, maar om te voorkomen dat er aan de rechterkant een zwarte balk komt kan ik mij een plugin herinneren die dit voorkomt (dus kijkt naar de schermbreedte en de afbeeldingen hierop aanpast).

Echter kan ik mij niet meer de naam herinneren, iemand die het zo weet?
pi_113788370
Waarom geen clear?
"Social order at the expense of liberty is hardly a bargain."
  donderdag 5 juli 2012 @ 00:22:13 #108
220026 Treces
Hier had uw tekst kunnen staan
pi_113789262
Zoals je ziet heb ik nu aan de rechterkant een witruimte.



Het liefst wil ik dat ie precies uitrekent hoe breed een afbeelding moet zijn wil ik dat kunnen voorkomen.
pi_113794284
quote:
7s.gif Op donderdag 5 juli 2012 00:22 schreef Treces het volgende:
Zoals je ziet heb ik nu aan de rechterkant een witruimte.

[ afbeelding ]

Het liefst wil ik dat ie precies uitrekent hoe breed een afbeelding moet zijn wil ik dat kunnen voorkomen.
width in % in plaats van px ?
  zaterdag 7 juli 2012 @ 09:50:59 #110
298746 Dalando
18, niet meer gefrustreerd
pi_113884262
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		function drawline(div1, div2, color, thickness) {
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + (off1.width / 2);
    var y1 = off1.top + (off1.height / 2);
    // top right
    var x2 = off2.left + (off2.width / 2);
    var y2 = off2.top + (off2.height / 2)
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    var angle_because_ie8_is_incompatible_garbage_radians = Math.atan2((y1-y2),(x1-x2));
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=" + angle_because_ie8_is_incompatible_garbage_radians + "); transform:rotate(" + angle + "deg);' />";
    
    document.body.innerHTML += htmlLine; 
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    var _w = el.offsetWidth|0;
    var _h = el.offsetHeight|0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x, width: _w, height: _h };
}
1drawline($('.player[data-playerid=52]'), $('.player[data-playerid=54]'), '#000', '3');

Waarom werkt het onderste stukje code niet?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
  zaterdag 7 juli 2012 @ 10:34:25 #111
137776 boem-dikkie
Jedi Mind Baby!
pi_113884846
Wat krijg je voor fout in je Chrome?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  zaterdag 7 juli 2012 @ 10:39:49 #112
298746 Dalando
18, niet meer gefrustreerd
pi_113884938
quote:
14s.gif Op zaterdag 7 juli 2012 10:34 schreef boem-dikkie het volgende:
Wat krijg je voor fout in je Chrome?
Geenenkele, maar de lijn die er moet komen komt er niet. Nouja, hij komt er wel, maar:

1<div style="padding:0px; margin:0px; height:3px; background-color:#000; line-height:1px; position:absolute; left:0px; top:-1.5px; width:0px; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transform:rotate(0deg);"></div>

Niet op de juiste positie.
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_114109114
Wat is het risico van het gebruiken van twee achtergronden, is die er of kan dit foutloos?

1
2
3
4		body {
    background-image: url(images/bg.png), url(images/bgtop.png);
    background-repeat: repeat, repeat-x;
}
  donderdag 12 juli 2012 @ 14:53:00 #114
56176 Catch22-
Ben je Blind?!
pi_114109226
het risico is dat het niet werkt in (oudere) browsers.

En background-repeat:repeat, repeat-x? Je maakt het jezelf wel moeilijk zo
1
2
3
4		body {
    background: url(images/bg.png) top left repeat-x, 
                          url(images/bgtop.png) top left no-repeat;
}
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  donderdag 12 juli 2012 @ 22:48:02 #115
75710 Sheep666
counting sheep
pi_114131710
Jáááááren geleden heb ik wel eens wat hobby sites gemaakt en ik dacht laatst, laat ik weer eens wat knutselen. De basis ken ik nog wel een beetje maar ik liep al snel vast. Dus een gratis template gevonden en daar verder op gaan borduren. Het lukt aardig, al zeg ik het zelf *) , maar ik zit nu toch met iets in de knoop...

Er zit een dropdownmenuutje in m'n menu bovenin, bij Collection (plaatje 1). Als ik bij Home ben dan is Home blauw (plaatje 1), zit ik bij Contact (plaatje 2), dan is Contact blauw maarrrrr... wil ik dat dropdownmenuutje (Collection) blauw hebben, dan wordt dat hele menuutje blauw en kun je de donkere tekst niet meer lezen (plaatje 3).







Dat blauwe krijg ik dan door class="selected" erbij te zetten (regel 12):
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		    <header>
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html"><span class="logo_colour">Sterling imitations</span></a></h1>
          <h2>And contemporary forgeries</h2>
        </div>
      </div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.html">Home</a></li>
          <li class="selected"><a>My Collection</a>
            <ul>
              <li><a>Short Cross Sterlings</a>
                <ul>
                  <li><a href="shortcrosssterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="shortcrosssterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              <li><a>Voided Long Cross Sterlings</a>
                <ul>
                  <li><a href="voidedlongcrosssterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="voidedlongcrosssterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              </li>
              <li><a>Edwardian Sterlings</a>
                <ul>
                  <li><a href="edwardiansterlings.html#continental">Continental Imitations</a></li>
                  <li><a href="edwardiansterlings.html#contemporary">Contemporary Forgeries</a></li>
                </ul>
              <li><a>Related Imitations</a>
                <ul>
                  <li><a href="relatedimitations.html">Jetons, Unknown, ...</a></li>
                </ul>
            </ul>
          </li>
          <li><a href="information.html">Information</a></li>
          <li><a href="articles.html">Articles</a></li>
          <li><a href="updates.html">Updates</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </nav>
    </header>

Dit is het stukje CSS code waar het om gaat (denk ik):
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106		/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 200px;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
}

ul.sf-menu { 
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* Theming the menu */
ul#nav { 
  float: right;
}

ul#nav ul { 
  background: #09D4FF;
  margin-top: 5px;
  padding-bottom: 15px;
}

ul#nav li a { 
  padding:7px 0px 6px 15px;
  font: 170% 'Yanone Kaffeesatz', arial, sans-serif;
  text-shadow: 1px 1px #000;
  text-decoration: none;
  color: #FFF;
  margin-right: 2px;
}

ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
  color: #09D4FF;
  text-shadow: none;
}

ul#nav ul li a { 
  color: #FFF;
  text-shadow: none;
}

ul#nav ul li a:hover { 
  color: #222;
  margin-right: 2px;
}

Ik heb de maker van de template al een mailtje gestuurd maar daar komt geen antwoord op helaas... Niet dat het dramatisch is dat ik het niet blauw krijg, maar ik vind het nogal frustrerend dat het overal werkt, behalve bij dat menuutje |:(

Uh... help -O-
pi_114140822
Wat je nodig hebt is background-color: ipv color dat lost je probleem wel op :).
klinkt alsof je niet zo heel veel snapt van websites aanpassen als ik zo de pagina doorlees.

Voeg bij elke <ul> tag een class toe. (welke je een blauwe achtergrond wil geven.)
Dan ziet het er zo uit: <ul class='blue'>
voeg onderstaande code aan je CSS toe en vervolgens is je website aangepast.
1
2
3		.blue{
background-color: #09D4FF;
}
Dit zou je achtergrond van je menu blauw laten kleuren.
Best simpel knullig probleempje trouwens. ik raad je aan om je meer in CSS en html te verdiepen. Of een eigen begin van een website te maken.

[ Bericht 20% gewijzigd door cablegunmaster op 13-07-2012 06:40:32 ]
Redacted
pi_114140839
quote:
0s.gif Op donderdag 12 juli 2012 14:50 schreef Snoepje5 het volgende:
Wat is het risico van het gebruiken van twee achtergronden, is die er of kan dit foutloos?
[ code verwijderd ]

De vraag is wat je ermee wilt bereiken? Waarom zou je hiervan niet 1 plaatje maken? :{
Redacted
pi_114140850
quote:
2s.gif Op zaterdag 7 juli 2012 10:39 schreef Dalando het volgende:

[..]

Geenenkele, maar de lijn die er moet komen komt er niet. Nouja, hij komt er wel, maar:
[ code verwijderd ]

Niet op de juiste positie.
Dan moet je de code backtracen en kijken waar het fout gaat. voeg waar je denkt dat het fout gaat een alert(variabel naam); toe waarmee je echo't wat je eruit krijgt. Zodat je voor jezelf weet wat je eruit moet krijgen.

Snap namelijk ook niet wat je met het script probeert te bereiken.
Redacted
pi_114141165
quote:
10s.gif Op vrijdag 13 juli 2012 06:27 schreef cablegunmaster het volgende:

[..]

De vraag is wat je ermee wilt bereiken? Waarom zou je hiervan niet 1 plaatje maken? :{
Ik heb bijvoorbeeld een 'balk' aan de bovenkant van de website, repeat-x.

Wanneer het bijvoorbeeld pasen is, kerst e.d. kan ik een achtergrond plaatsen. Die komt dan achter die balk aan de bovenkant en naast de zijkanten van de content op de website. Als ik dit 1 afbeelding maak moet ik de balk aan de bovenkant breder maken, want dat is gewoon 10 px breed nu ongeveer.
pi_114141177
Dan maak je een div met een achtergrond erin? :P
Dit zou uiteindelijk het zelfde effect bereiken.
Dan dat je 2x een achtergrond op de body gooit.
Redacted
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] Waar dummies nóg meer iniatief gaan tonen! ;) #26
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')