abonnement Unibet Coolblue
  vrijdag 2 maart 2012 @ 10:23:46 #1
56176 Catch22-
Ben je Blind?!
pi_108617198
[html, css, js] Voor Dummies

Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.

HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies

Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: Topicreeks: Algemeen Wordpress topic

Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (code.png), zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.

Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.

IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.

Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
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?
  vrijdag 2 maart 2012 @ 10:24:48 #2
84244 Scorpie
Abject en infaam!
pi_108617216
Welk probleem overigens :') heb helemaal over die google maps shit heen gelezen.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
  vrijdag 2 maart 2012 @ 10:31:00 #3
87680 Mirel
Mirel wil een bongophone.
pi_108617362
Het probleem ligt aan de manier waarop de content naar beneden wordt geslide. Als ik die hele animatie weghaal en dat gedeelte al te zien is (geen uitklap nodig), dan is de map ook goed te zien.

Dan maar even daar naar kijken.
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:32:39 #4
56176 Catch22-
Ben je Blind?!
pi_108617398
Oke ik ga je toch helpen.

Post het stuk code eens dat dat vlak uitklapt.
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?
  vrijdag 2 maart 2012 @ 10:34:48 #5
87680 Mirel
Mirel wil een bongophone.
pi_108617443
Ben nog aan het zoeken. Ik weet alleen dat als ik een div met id="panel_wrapper" weghaal, dat de uitklapanimatie weggaat en alles direct te zien is.

Dus ik download even de hele template op m'n bureaublad. Dan prop ik het hele mapje in notepad++ zodat ik door alle bestanden kan zoeken naar panel_wrapper. Eens kijken wat ik krijg :P
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:35:42 #6
56176 Catch22-
Ben je Blind?!
pi_108617464
heb je het ergens staan waar we het kunnen bekijken?
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?
  vrijdag 2 maart 2012 @ 10:36:27 #7
87680 Mirel
Mirel wil een bongophone.
pi_108617482
Nog niet. Eerst even zoeken waar en wat het is en dan zet ik het wel in pastebin ofzo.
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:38:56 #8
87680 Mirel
Mirel wil een bongophone.
pi_108617526
Dit is alles. Ik kan wel de hele .js posten maar ik geloof dat dit het is.
1
2
3
4
5
6
7
8
9
10
        // pages top toggle box 
        jQuery("#open").click(function(){
            jQuery("div#panel_wrapper").slideDown("slow");
        });    
        jQuery("#close").click(function(){
            jQuery("div#panel_wrapper").slideUp("slow");    
        });        
        jQuery("#toggle a").click(function () {
            jQuery("#toggle a").toggle();
        });    

Eens kijken wat er gebeurt als ik hier panel_wrapper vervang door de div waar de googlemap in werd gezet. :o
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:40:27 #9
56176 Catch22-
Ben je Blind?!
pi_108617573
quote:
0s.gif Op vrijdag 2 maart 2012 10:38 schreef Mirel het volgende:
Dit is alles. Ik kan wel de hele .js posten maar ik geloof dat dit het is.
[ code verwijderd ]

1
2
3
4
5
jQuery("#open").click(function(){
            jQuery("div#panel_wrapper").slideDown("slow", function() {
initialize();
});
        });  
en de andere initialize referentie verwijderen.
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?
  vrijdag 2 maart 2012 @ 10:42:24 #10
87680 Mirel
Mirel wil een bongophone.
pi_108617635
Ok. Maar waarom haal je de knop weg om het weer dicht te maken? :P Edit, ik dacht dat ik alles moest vervangen, maar dit komt nog erbij zeker..? :)
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:43:26 #11
56176 Catch22-
Ben je Blind?!
pi_108617672
dat hoef je niet aan te passen. Ik heb dat niet meegepost omdat dat hetzelfde blijft.

wat je doet met deze oplossing is de callback van de slideDown functie gebruiken. Een callback is een functie die wordt aangeroepen als de aangeroepen functie 'klaar' is.
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?
  vrijdag 2 maart 2012 @ 10:44:05 #12
87680 Mirel
Mirel wil een bongophone.
pi_108617691
Oh ik zie het al, daarboven staat nog het label 'open'. Daar moet initaliizejizjeizjee bij.
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:50:52 #13
87680 Mirel
Mirel wil een bongophone.
pi_108617863
Ah ja, hij doet al.

In header.php is dus een van de 2 initializers weg. (jij had nog een 2e erbij gezet, aanvankelijk stond er gewoon eentje):
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
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    function initialize() {
        var latlng = new google.maps.LatLng(52.1025780, 5.0978729);
        var settings = {
            zoom: 15,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

var companyPos = new google.maps.LatLng(52.1025780, 5.0978729);

var companyLogo = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo.png',
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('http://www.filmdepartment.nl/v2/wp-content/themes/filmdept/images/googlemaps/logo_shadow.png',
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(52.1025780, 5.0978729);
var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyLogo,
    shadow: companyShadow,
    title:"Filmdepartment"
});
}
</script>

De jquery is dus zo:
1
2
3
4
5
6
7
8
9
10
11
12
        // pages top toggle box 
        jQuery("#open").click(function(){
                    jQuery("div#panel_wrapper").slideDown("slow", function() {
        initialize();
        });
                });
        jQuery("#close").click(function(){
            jQuery("div#panel_wrapper").slideUp("slow");    
        });        
        jQuery("#toggle a").click(function () {
            jQuery("#toggle a").toggle();
        });

Je ziet nu een stukje kaart linksboven en daarna begint de rest vanaf het midden te laden (niet in 1x, je ziet het zichzelf opbouwen).


thanks :)
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:52:55 #14
56176 Catch22-
Ben je Blind?!
pi_108617907
Als ik een stukje code post waarin een functie wordt aangeroepen houdt dat in dat hij op andere plekken weg moet ;)
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?
  vrijdag 2 maart 2012 @ 10:54:02 #15
87680 Mirel
Mirel wil een bongophone.
pi_108617931
Ik ga eens dat toggle stukje js in header.php proppen ergens bovenaan, misschien dat 'ie dan nog eerder geladen wordt :P Het is nu een beetje lelijk dat een enkele seconde na het uitklappen pas de boel te zien is. :P
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 10:56:04 #16
56176 Catch22-
Ben je Blind?!
pi_108617981
Dat komt omdat de map met overlays werkt die niet goed worden ingeladen als het verschuift. Ik zou gewoon een loadingicoontje over map leggen ofzo.
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?
  vrijdag 2 maart 2012 @ 10:56:49 #17
87680 Mirel
Mirel wil een bongophone.
pi_108617997
Ja inderdaad. Kunnen gifjes, of is het flash, of jquery? Maar dan moet dat icoontje stoppen of weggaan als het klaar is. Waarmee doe je die dingen :') ?
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 12:21:36 #18
87680 Mirel
Mirel wil een bongophone.
pi_108620361
Maarre moet dat icoontje er op een speciale manier in? Ik heb jqueryloader geprobeerd maar werkt niet. Een gifje zomaar eronder zetten kan ook niet, want de grijze ondergrond van googlemaps staat er zelf al op.

Ik heb dus iets nodig wat eroverheen kan gaan en na een seconde of 2 weggaat. Even googlen naar timers enzo :')
When all else fails, you always have delusion.
  vrijdag 2 maart 2012 @ 12:30:16 #19
56176 Catch22-
Ben je Blind?!
pi_108620624
Loader. Gif zoeken, die er absolhut overheen positioneren en met een settimeout of callback weghalen
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?
  vrijdag 2 maart 2012 @ 12:38:19 #20
87680 Mirel
Mirel wil een bongophone.
pi_108620838
Ja, ik dacht hetzelfde. Ik wil dit gebruiken:
http://papermashup.com/jquery-fading-a-div-after-a-certain-time/

Hopelijk gaat position:absolute wel z'n werk doen in zo'n uitklap ding :P
When all else fails, you always have delusion.
pi_108623087
quote:
11s.gif Op vrijdag 2 maart 2012 10:10 schreef Catch22- het volgende:
Ja, maar dan moet je dus niet hier komen.

Het is hetzelfde als aan een automonteur vragen hoe je een band moet vervangen en als hij zegt "Pak eerst de krik" dat jij vraagt "wat is een krik?"
Hmm, nouja, een vraag stellen kan altijd..
Er zullen zat mensen zijn die niet veel van programmeren weten maar bijvoorbeeld wel een leuk achtergrondje of plugin aan hun profieltje/weblog/hyves/etc toe willen voegen. Ik vind het een beetje ver gaan om te zeggen dat elke hobbyist zich volledig in moet lezen in dingen die ze daarna nooit meer gebruiken. (zoals ik al eerder vergeleek, als ik een vriend in het buitenland vraag hoe ik 'dank je wel' moet zeggen in het spaans, zal een 'ga eerst maar eens een LOI studie Spaans volgen' me ook niet echt verder helpen).
Dat je als gevorderde geen zin hebt om een vraag, die voor jou makkelijk is te beantwoorden, te beantwoorden aan iemand die zelf maar een beetje aan t hobby-en is, dat is natuurlijk een tweede, en je volste recht.
pi_108623234
quote:
0s.gif Op vrijdag 2 maart 2012 13:51 schreef Maartel het volgende:

[..]

Hmm, nouja, een vraag stellen kan altijd..
Er zullen zat mensen zijn die niet veel van programmeren weten maar bijvoorbeeld wel een leuk achtergrondje of plugin aan hun profieltje/weblog/hyves/etc toe willen voegen. Ik vind het een beetje ver gaan om te zeggen dat elke hobbyist zich volledig in moet lezen in dingen die ze daarna nooit meer gebruiken. (zoals ik al eerder vergeleek, als ik een vriend in het buitenland vraag hoe ik 'dank je wel' moet zeggen in het spaans, zal een 'ga eerst maar eens een LOI studie Spaans volgen' me ook niet echt verder helpen).
Dat je als gevorderde geen zin hebt om een vraag, die voor jou makkelijk is te beantwoorden, te beantwoorden aan iemand die zelf maar een beetje aan t hobby-en is, dat is natuurlijk een tweede, en je volste recht.
Vind ik ook. KomtTijd.. ik vind dat je best fel bent. Mensen komen hier gewoon om wat hulp vragen, jij hoeft ze niet te helpen maar ze meteen weer wegsturen vind ik ook wat ver gaan.
pi_108623326
quote:
14s.gif Op vrijdag 2 maart 2012 13:56 schreef picodealion het volgende:

[..]

Vind ik ook. KomtTijd.. ik vind dat je best fel bent. Mensen komen hier gewoon om wat hulp vragen, jij hoeft ze niet te helpen maar ze meteen weer wegsturen vind ik ook wat ver gaan.
Nouja, hij heeft ook niet gezegd dat ik nooit meer in dit topic mag komen.
En ik ben van mijn kant wellicht ook wel gemakszuchtig. Ik heb in vrijwel alles wat ik mezelf heb aangeleerd dat vaak gedaan door heel veel uit te proberen, te googlen, over te nemen en dan aan te passen, en zo heel af-en-toe als ik er echt niet uit kwam een vraag te stellen.
Nu was die laatste vraag naar mijn inzien ook niet eens een 'schrijf een een script voor mij!' vraag, maar puur een vraag of iets mogelijk is, zodat ik iig weet of het zin heeft om me verder in css3 te verdiepen, voordat ik daar uren in steek om vervolgens te ontdekken dat wat ik wil niet eens kan.
pi_108624284
quote:
14s.gif Op vrijdag 2 maart 2012 13:56 schreef picodealion het volgende:

[..]

Vind ik ook. KomtTijd.. ik vind dat je best fel bent. Mensen komen hier gewoon om wat hulp vragen, jij hoeft ze niet te helpen maar ze meteen weer wegsturen vind ik ook wat ver gaan.
Ik wil ook iedereen helpen hoor, maar na een keer of 4 ben je wel zat om ieder greintje medewerking eruit te moeten zeulen bij degene die je probeert te helpen. Dan heb ik wel wat beters te doen.
  vrijdag 2 maart 2012 @ 14:28:41 #25
12221 Tijn
Powered by MS Paint
pi_108624333
quote:
14s.gif Op vrijdag 2 maart 2012 14:27 schreef KomtTijd... het volgende:

[..]

maar na een keer of 4 ben je wel zat om ieder greintje medewerking eruit te moeten zeulen bij degene die je probeert te helpen. Dan heb ik wel wat beters te doen.
Je hoeft natuurlijk niet te posten.
abonnement Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')