[html, css, js] voor dummies #17

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_99279522
quote:
0s.gif Op zondag 10 juli 2011 15:16 schreef YazooW het volgende:
Ik ben behoorlijk noob hier in, snap echt niet wat ik moet doen met die jquery.noConflict.
Ik heb dus gewoon 2 scriptjes los van elkaar gedownload, deze helemaal zitten aanpassen naar eigen smaak maar nu gaat het dus mis bij het samenvoegen. :{
Niets, je moet niet 2 verschillende libraries door elkaar gebruiken.
zcflevo.nl
  zondag 10 juli 2011 @ 15:58:10 #152
218617 YazooW
bel de wouten!
pi_99281271
Probleem is inmiddels opgelost.
In het bestand slide.js "$" vervangen door "jQuery".
Werkt nu perfect naast elkaar :7
pi_99281578
Dan nog zit je met 2 libraries door elkaar heen te werken. Niet wenselijk.
  zondag 17 juli 2011 @ 15:08:46 #154
37634 wobbel
Da WoBBeL King
pi_99579257
Help :P Ik snap niks van jQuery :(

Ik wil de ID's van ALLE geselecteerde LI's in het input veld #hardware krijgen. Dat lukt, behalve dat als ik hem niet meer geselecteerd heb hij blijft staan :(

http://intranet.vdxml.nl/test.html

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		<script>
$(function() {
        $( "#selectable" ).selectable({
            stop: function() {
                var result = $( "#hardware" ).val('');
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.val( $( "#hardware" ).val() + this.id + ' ' );
                });
            }
        });
});
</script>

<div class="demo">

<ol id="selectable">
    <li class="ui-state-default" id="2255">1</li>
    <li class="ui-state-default" id="3311">2</li>
    <li class="ui-state-default" id="3355">3</li>

    <li class="ui-state-default" id="6633">4</li>

    <li class="ui-state-default" id="1111">5</li>
    <li class="ui-state-default" id="2222">6</li>
    <li class="ui-state-default" id="1337">7</li>
    <li class="ui-state-default" id="666">8</li>
    <li class="ui-state-default" id="3399">9</li>

</ol>

</div>
Hosted VoIP SIP trunks Vast mobiel VoIP
pi_99579415
Hoe bedoel je ? Als je hem deselecteert dan verdwijnt hij ook gewoon uit het veld (Chrome 12.0)
  zondag 17 juli 2011 @ 18:25:57 #156
37634 wobbel
Da WoBBeL King
pi_99585377
quote:
7s.gif Op zondag 17 juli 2011 15:14 schreef DaFan het volgende:
Hoe bedoel je ? Als je hem deselecteert dan verdwijnt hij ook gewoon uit het veld (Chrome 12.0)
Oops...hij was gecached :D
Hosted VoIP SIP trunks Vast mobiel VoIP
pi_99585482
quote:
0s.gif Op zondag 17 juli 2011 18:25 schreef wobbel het volgende:

[..]

Oops...hij was gecached :D
Dus je snapt het wel ;)
  dinsdag 19 juli 2011 @ 22:10:08 #158
12221 Tijn
Powered by MS Paint
pi_99681468
Wat is een goede manier om statusupdates van een Facebook page op een website te tonen? Vroeger had je de minifeed, maar het lijkt nu niet meer mogelijk te zijn om via RSS updates van Facebook binnen te halen. En bij de API's zie ik ook niet direct iets wat me nuttig lijkt.

Iemand een idee? Het gaat om een openbare Facebook page, dus geen profiel van een persoon ofzo.
Verberg de nieuwsticker
  woensdag 20 juli 2011 @ 01:41:02 #159
218617 YazooW
bel de wouten!
pi_99691700
quote:
5s.gif Op dinsdag 19 juli 2011 22:10 schreef Tijn het volgende:
Wat is een goede manier om statusupdates van een Facebook page op een website te tonen? Vroeger had je de minifeed, maar het lijkt nu niet meer mogelijk te zijn om via RSS updates van Facebook binnen te halen. En bij de API's zie ik ook niet direct iets wat me nuttig lijkt.

Iemand een idee? Het gaat om een openbare Facebook page, dus geen profiel van een persoon ofzo.
http://developers.facebook.com/docs/reference/rest/status.get/
  woensdag 20 juli 2011 @ 01:47:18 #160
218617 YazooW
bel de wouten!
pi_99691846
1
2
3
4
5
6
7
8
9
10		<script>
$(document).ready(function(){

$('a').click(function () {
   var divName = this.name;
   $("#"+divName).fadeIn(1200).siblings().fadeOut(1200);
});

});
</script>

Script zorgt ervoor dat de oude div weg gaat als een nieuwe div aangeroepen wordt, zodat er altijd maar 1 div zichtbaar is. Effecten zijn fadeOut en fadeIn, hoe kan ik dit script nou zo krijgen dat de fadeIn even wacht totdat de fadeOut klaar is. Nu faden ze door elkaar zeg maar, de ene fadeOut en de andere fadeIn.
pi_99713995
Door delay() te gebruiken in de chain, of de fade-out in de call-back van de fadeIn te zetten.

1  $("#"+divName).fadeIn(1200).siblings().delay(1200).fadeOut(1200);

of

1
2
3		$("#"+divName).fadeIn(1200,function(){
$(this).siblings().fadeOut(1200);
});

Zoiets.

[ Bericht 0% gewijzigd door PimD op 20-07-2011 19:06:28 ]
Nee.
  woensdag 20 juli 2011 @ 18:49:55 #162
218617 YazooW
bel de wouten!
pi_99715953
Beide opties doen hetzelfde hier: Nieuwe div wordt getoond, terwijl de oude div nog zichtbaar is. Nadat de nieuwe div op het scherm is getoverd komt de .delay, en dan pas fade de oude div uit.
pi_99716650
Dan doe je toch iets verkeerd lijkt me, aangezien de callback pas wordt uitgevoerd als de fadeIn voltooid is. Gooi eens een voorbeeld online, zodat we kunnen zien wat je wilt/hebt.
Nee.
pi_99716905
quote:
0s.gif Op woensdag 20 juli 2011 19:07 schreef PimD het volgende:
Dan doe je toch iets verkeerd lijkt me, aangezien de callback pas wordt uitgevoerd als de fadeIn voltooid is. Gooi eens een voorbeeld online, zodat we kunnen zien wat je wilt/hebt.
Volgens mij is het de bedoeling dat je eerst fadeOut krijgt, en daarna pas fadeIn.
fokstok.nl
  woensdag 20 juli 2011 @ 19:14:41 #165
218617 YazooW
bel de wouten!
pi_99716990
quote:
0s.gif Op woensdag 20 juli 2011 19:12 schreef Light het volgende:

[..]

Volgens mij is het de bedoeling dat je eerst fadeOut krijgt, en daarna pas fadeIn.
dit dus

edit, heb de gehele code ff op pastebin gezet: http://pastebin.com/zBTDvxd0

[ Bericht 12% gewijzigd door YazooW op 20-07-2011 19:25:23 ]
pi_99717471
De volgorde aanpassen zou niet zo moeilijk mogen zijn:
1
2
3		$("#"+divName).fadeOut(1200,function(){
$(this).siblings().fadeIn(1200);
});
Niet getest, dat mag je zelf doen.
fokstok.nl
  woensdag 20 juli 2011 @ 19:31:24 #167
218617 YazooW
bel de wouten!
pi_99717668
quote:
0s.gif Op woensdag 20 juli 2011 19:27 schreef Light het volgende:
De volgorde aanpassen zou niet zo moeilijk mogen zijn:
[ code verwijderd ]

Niet getest, dat mag je zelf doen.
Nu werkt die, thanks!
pi_99721177
quote:
0s.gif Op woensdag 20 juli 2011 19:31 schreef YazooW het volgende:

[..]

Nu werkt die, thanks!
Snap je ook wat er is veranderd?
fokstok.nl
  woensdag 20 juli 2011 @ 23:47:39 #169
218617 YazooW
bel de wouten!
pi_99731295
quote:
0s.gif Op woensdag 20 juli 2011 20:48 schreef Light het volgende:

[..]

Snap je ook wat er is veranderd?
Ben pas begonnen met jQuery dus kan zijn dat ik er naast zit:
Eerst stond alles in 1 regel achter elkaar, waardoor hij alles dus in 1x ging runnen.
Nu zijn het 2 regels geworden, hij runt nu eerst de fadeOut, als hij daarmee klaar is begint hij met een functie waarin de fadeIn staat.
Kan zijn dat ik er behoorlijk naast zit, stukje code heb ik ergens van internet geplukt en een beetje aangepast.

Verder heb ik nu weer het probleem dat als ik op link van div1 klikt hij div3 opent, klik op div3 opent hij div1, klik ik op div2 doet die helemaal niks.

Mijn code ziet er nu zo uit:
1
2
3
4
5
6
7
8
9
10
11		<script>
$(document).ready(function(){

$('a').click(function () {
    var divName = this.name;
    $("#"+divName).fadeOut((1000),function(){
    $(this).siblings().show(("slide", 1000));
});
});
});
</script>
Heb zo'n vermoede dat ik jou code niet helemaal goed heb geplakt in mijn oude code.

Mijn uiteindelijke einddoel is dit:

<---logo---><---------------menu---------------->
<--menu--><--------------content--------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------------------foooter--------------------->

Als je op de pagina komt zie je dus een logo, een menu links, de content, het menu boven de content moet nog leeg zijn op de beginpagina. Als je vervolgens op een menuitem klikt (linkse menu) dat moet er een div geopent worden rechts van het menu met daarin aan de bovenkant een (sub)menu, en daaronder dan de content.

Voorbeeld:

<---logo---><--appels--peren--bananen-->
<--menu--><-------content over appels----->
<----fruit---><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------------------foooter--------------------->

Dus je hebt op fruit geklikt in het menu, vervolgens zie je een (sub)menu bovenaan tevoorschijn komen, en in de content info over appels (omdat appels de eerste link is in het (sub)menu), klik je op peren in het (sub)menu dan moet de content van de appels verdwijnen en plaats maken voor de content van de peren.

Klik je op een ander item in het linkse menu dan moet het (sub)menu (appels, peren, etc) en de content plaats maken voor een nieuwe (sub)menu en content.

Zoals je aan mijn beschrijving kan zien ben ik dus nog wel even bezig dit voor elkaar te krijgen aangezien ik nu niet eens normaal divs kan openen en sluiten... Wil eigenlijk het liefst zo snel mogelijk beginnen mijn CMS te bouwen in php maar ik kan dat jQuery gewoon niet zomaar negeren aangezien het er zo slick uit ziet :P
pi_99760399
Hoi Fok-ers!

Zit met een probleempje, hopelijk weten jullie meer dan ik (waarschijnlijk wel!).

De bedoeling is de illusie te geven dat de header doorloopt achter de witte container, wat op dit screenshot dus gelukt is. Het donkergrijze loopt door achter de content. Browser is trouwens FireFox.

http://imageshack.us/f/818/ss1ob.png/ (copy/paste deze link)

Dit heb ik gedaan der middel van 2 divjes aan beide kanten van de witte container, onder de header. Die heb ik vervolgens een vaste waarde (px) meegegeven zodat ze de margin-left en margin-right van de container opvulden.

Echter, en waar ik al rekening mee hield, in een andere browser past het weer net niet. Zie screenshot:

http://imageshack.us/photo/my-images/823/schermafbeelding2011072v.png/ (copy/paste deze link)

Zoals jullie zien kom ik daar een stukje te kort en is de hele illusie weg. Vervolgens heb ik geprobeerd dmv de z-index de container boven de balk te plaatsen. De balk 100% width gegeven en een z-index van -1. Werkte niet. (Omdat de div's in andere files staan?).

Zijn er nog manieren om dit werkend te krijgen?

Bij voorbaat dank!
Peter.
pi_99760492
Volgens mij ben je onnodig moeilijk aan het doen. Je kunt die grijze balk toch gewoon als background-color meegeven van je bovenste div, en dan de witte container een negatieve top-margin geven...?
Nee.
pi_99803550
Heel stom. Dankjewel! ;)
pi_99847128
Nou. Dan is het nu misschien ook maar eens tijd om wat tussentijdse adviezen/meningen over m'n projectje te ontvangen. Het gaat om een webshopje.

Lastige is dat ik nog niet precies weet wat ik er mee wil doen, misschien verkoop ik 't hele handeltje, misschien ga ik hem zelf gebruiken, en als ik hem zelf ga gebruiken; wat wil ik gaan verkopen? Met het oog op al deze vragen heb ik besloten de shop zo clean mogelijk te maken. Met als prioriteit usability en overzichtelijkheid.

De laatste dagen echter, slaat bij mij de twijfel toe of deze cleane look wel the way to go is. Ik zelf hou er erg van, maar het draait in principe natuurlijk niet om wat ik vind. Daarom graag jullie op- en aanmerkingen. (Niet kijken naar de producten, dat is pure opvulling).

Klik hier.

Thanks! :)
pi_99848791
Ik ga geen commentaar geven op het design, aangezien daar vast andere topics voor zijn. Wel op je HTML/CSS:

- Tabellen, anno 2011... echt waar?
- Inline styling. Handiger zou zijn om gewoon alles in een CSS-file te zetten, zodat je alles op 1 centraal punt kunt beheren i.p.v. in allemaal losse HTML/PHP bestanden.
- Lees eens wat over semantiek. Lijstjes zoals je footer zouden gewoon geneste UL's/OL's moeten zijn i.p.v. div's met een unieke ID en 5x 99% dezelfde CSS.
Nee.
pi_99851122
Beste TimD,

Het betreft hier een ondertussen hevig aangepast opensource pakket. Er zitten inderdaad tables in, maar die zijn er niet door mij ingezet. Hoe ik dat kan gaan aanpassen is me onbekend. Gaat dit problemen opleveren / heeft het negatieve consequenties op enig vlak?

Over semantiek ga ik me eens inlezen. Bedankt! :)
  zondag 24 juli 2011 @ 15:39:29 #176
42636 TheSeeker_NL
Damn fine coffee
pi_99879272
ik wil graag weten hoe ik mijn footer op de correcte plek positioneer, dus onder de content en niet erboven.



HTML
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		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Portal</title>
<link href="style/portal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
    <h1>Portal</h1>
</div> <!-- HEADER -->

<div id="content">
    <h2> Opties </h2>
    <div id="menu1"><h2>Menu 1</h2> </div> <!-- MENU 1 -->
    <div id="menu2"><h2>Menu 2</h2> </div> <!-- MENU 2 -->
    <div id="menu3"><h2>Menu 3</h2> </div> <!-- MENU 3 -->
    <div id="menu4"><h2>Menu 4</h2> </div> <!-- MENU 4 -->
    <div id="menu5"><h2>Menu 5</h2> </div> <!-- MENU 5 -->
    <div id="menu6"><h2>Menu 6</h2> </div> <!-- MENU 6 -->
    <p> Klik op een menu om verder te gaan</p>
</div> <!-- CONTENT -->  

<div id="footer">
    <p>Footer</p>
</div> <!-- FOOTER -->
</body>
</html>

CSS
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		@charset "utf-8";
/* CSS Document */

body {
}

#content {
    width:1000px;
    background-color:#CCC;
    position:absolute;
    left:50%;
    margin-left:-500px;
    clear:right;
    }

#menu1 {
    background-color:#00F;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-bottom:25px;
    margin-left:25px;
}

#menu2 {
    background-color:#393;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-bottom:25px;
}

#menu3 {
    background-color:#966;
    width:300px;
    height:300px;
    float:left;
    margin-bottom:25px;
}

#menu4 {
    background-color:#96F;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-left:25px;
}

#menu5 {
    background-color:#CF3;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
}

#menu6 {
    background-color:#6C3;
    width:300px;
    height:300px;
    float:left;
    }

#header {
    background-color:#CCC;
}

#footer {
    background-color:#CCC;
}

.clear {
    clear:both;
}

Ik neem aan dat het met de float van de menu's te maken heeft in de content div en dat de footer deze als 't ware negeert en gewoon onder de header gaat zitten. Als ik me niet vergis moet ik ergens correct gebruik maken van "clear" maar waar precies? Kan iemand me even helpen?

Hartelijk dank.
pi_99879409
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.

Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Nee.
  zondag 24 juli 2011 @ 15:53:07 #178
42636 TheSeeker_NL
Damn fine coffee
pi_99879904
quote:
0s.gif Op zondag 24 juli 2011 15:42 schreef PimD het volgende:
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.

Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Ik zag dat ik je bovenstaande reactie al staan ja. Ik zal eens even kijken wat je er precies mee bedoelt, je moet niet vergeten dat sommige mensen niet op jouw kennis niveau zitten.

Ik waardeer echter wel dat je me probeert naar een ideale manier van schrijven probeert te loodsen hoor.

Ik ga eerst even aanpassen wat je suggereerde en daarna zal ik eens kijken of ik uit de voeten kom met je UL idee. Bedankt alvast.
  zondag 24 juli 2011 @ 15:58:05 #179
42636 TheSeeker_NL
Damn fine coffee
pi_99880109
Na het weghalen van :

1
2
3
4
5		#content {
    position:absolute;
    left:50%;
    margin-left:-500px;
    }

Klopt de flow van de pagina inderdaad weer. Maar die code had ik juist gebruikt om de content precies in het midden van de pagina te positioneren. Waarom leverde dit eigenlijk problemen op, en is er een alternatief? Als je me hier antwoord op weet te geven, dan beloof ik je dat ik met UL aan de slag ga :s)
pi_99880467
Het levert problemen op omdat:
a) position:absolute sowieso alleen gebruikt moet worden als het echt noodzakelijk is, om dingen over elkaar te plaatsen bijv.
b) margin-left: -500px zorgt dat je content uit beeld verdwijnt op schermen die geen 1000 pixels breed zijn

En waarom zou je niet gewoon zoals de rest van de hele wereld margin: auto gebruiken als je iets wilt centreren?
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] voor dummies #17
Index

» digital corner

» development

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