[Javascript] voor dummies (deel 12)

dinsdag 16 augustus 2011 @ 17:50:36 #1

KomtTijd...

Hier kan je alle vragen stellen over Javascript en alles wat er mee te maken heeft.

Heb je een probleem, post dan ook even de code waar het probleem zit

Zo kunnen we je beter proberen te helpen.

Handige links:
Quircksmode Javascript
Javascript Cheat Sheet
_{Mis je een link? Geef even een gil in het topic}

Tutorials:
W3Schools Javascript
W3Schools AJAX

Let op! Verwijder je post niet.
Als je bijvoorbeeld zelf al een antwoord hebt gevonden, laat ons dan even weten hoe je het hebt opgelost.
Wel zo aardig.

zcflevo.nl

dinsdag 16 augustus 2011 @ 18:00:51 #2

GlowMouse

l'état, c'est moi

met jQuery gaat zoiets veel makkelijker.

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

woensdag 24 augustus 2011 @ 14:30:05 #3

Ikbenmijnwachtwoordkwijt

En mijn email klopte niet

Kent iemand hier ContentFlow?

http://www.jacksasylum.eu/ContentFlow/index.php

Ik krijg het niet aan de praat in IE, krijg steeds deze melding:

SCRIPT5022: Uitzondering geactiveerd maar niet afgehandeld
contentflow.js, regel 2 teken 21713

Op de site staat dat het hoort te werken, en ik heb de code gewoon zo geplaatst.

Iemand een idee?

woensdag 24 augustus 2011 @ 14:48:47 #4

KomtTijd...

Datsoort scripts hebben over het algemeen ook een niet-minified versie, probeer die eens. Dat debugt wat makkelijker.

zcflevo.nl

vrijdag 26 augustus 2011 @ 13:16:50 #5

Lamzak_

FC Twente!

Ik noteer: Ik heb geen idee hoe je het kan testen, of uberhaubt kan weten dat het werkt. Heeft javascript ook een syntax checker? Ik heb geen idee of dit uberhaubt wel klopt

Ik heb een button. En die moet een timer starten.

Die timer checkt elke 5 seconden of er iets veranderd is in de de database, met een maximale lengte van 90 seconden.

Nou had ik zoiets bedacht, maar het werkt volgens mij niet. (Ik bak ook niet veel van javascript)

(voor de test wil ik eigenlijk alleen even een alert laten oppoppen)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<input type="submit" style="width:120px; height:40px;" name="Genereren" id="Genereren" value="Genereren" onclick="timer()"/>

<script type="text/javascript">
function timer(){
  var interval = window.setInterval("checkPDF()" ,5000);
  window.setTimeout(timer()) {
  clearInterval(interval);
  alert('Interval klaar');
},90000);
}

function checkPDF(){
    alert('Interval!');
}
</script>

Enschede, onze stad! ons domein!

vrijdag 26 augustus 2011 @ 13:24:35 #6

MrMonkeyman

( ͡° ͜&#

Binnenkort maar eens wat met JSON gaan lopen experimenteren. Wil gaan knutselen met Flickr en Facebook API

( ͡° ͜ʖ ͡°)

vrijdag 26 augustus 2011 @ 14:28:25 #7

Lamzak_

FC Twente!

Ej, mensen, help! Dit is toch easy voor de gemiddelde javascript gure (2 posts up)

Enschede, onze stad! ons domein!

vrijdag 26 augustus 2011 @ 15:31:47 #8

GlowMouse

l'état, c'est moi

window.setTimeout(timer()) {
clearInterval(interval);
alert('Interval klaar');
},90000);
wordt:
window.setTimeout("clearInterval(interval); alert('Interval klaar');",90000);

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

vrijdag 26 augustus 2011 @ 15:33:21 #9

Lamzak_

FC Twente!

NVM!

[ Bericht 94% gewijzigd door Lamzak_ op 26-08-2011 17:06:55 ]

Enschede, onze stad! ons domein!

vrijdag 26 augustus 2011 @ 18:28:14 #10

KomtTijd...

quote:
Op vrijdag 26 augustus 2011 13:16 schreef Lamzak_ het volgende:
Ik noteer: Ik heb geen idee hoe je het kan testen, of uberhaubt kan weten dat het werkt. Heeft javascript ook een syntax checker? Ik heb geen idee of dit uberhaubt wel klopt

ctrl+shift+j

zcflevo.nl

dinsdag 30 augustus 2011 @ 17:45:07 #11

Crutch

Filantroop || Taalzwengel

Whut?

setInterval doet het niet.

Ik gebruik Chrome en kwam erachter dat JavaScript de functie niet herhaalt om de 3 seconden.
Dus ik test het met een simpel scriptje:

1
2
3
4
5
6
7

function test() {

alert('hoi');

}

setInterval(test(), 3000);

De code wordt één keer uitgevoerd en daar blijft het bij.

Je moeder is een hamster

dinsdag 30 augustus 2011 @ 17:47:56 #12

GlowMouse

l'état, c'est moi

Je ziet nu ook direct 'hoi' ipv na 3 seconden. Het eerste argument moet tussen ", anders voert hij test uit en voert hij elke 3 seconden uit wat test returnt.

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

dinsdag 30 augustus 2011 @ 17:48:17 #13

KomtTijd...

Denk dat je de haakjes weg moet halen bij de functieaanroep.

zcflevo.nl

dinsdag 30 augustus 2011 @ 17:49:58 #14

Crutch

Filantroop || Taalzwengel

Helden

functie zonder haakjes idd.

Je moeder is een hamster

zondag 4 september 2011 @ 11:15:47 #15

Ikbenmijnwachtwoordkwijt

En mijn email klopte niet

Weet iemand of je de tekst kan veranderen die in het bericht staat dat je krijgt wanneer Google Maps om je locatie vraagt?

dinsdag 6 september 2011 @ 17:39:03 #16

TheSeeker_NL

Damn fine coffee

Ik ben wat aan het oefenen met jQuery en ik stuit op het volgende probleem:

Ik wil graag gebruik maken van .tabs uit jQuery en met AJAX de remote content laden. Tergelijke tijd met het laden van de content wil ik de stylesheet veranderen. tabBlue moet blue.css krijgen, tabGreen - green.css en tabRed - red.css.

Met mijn huidige .js lukt het om de content en css te laden op een tab. Ga ik vervolgens naar een andere tab, dan lukt dit wel maar hij hide de oude tab niet. Er staan dus 2 pagina's aan content.

HTML

1
2
3
4
5
6
7
8
9
10

  <div id="nav">
            <ul>
            <li><a href="blue.html" id="blue" title="tabBlue"><span>Tab Blue</span></a></li>
            <li><a href="green.html" id="green" title="tabGreen"><span>Tab Green</span></a></li>
            <li><a href="red.html" id="red" title="tabRed"><span>Tab Red</span></a></li>
                 </ul>
</div>
<div id="tabBlue"></div>
<div id="tabGreen"></div>
<div id="tabRed"></div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document).ready(
    function(){
        $('div#nav > ul').tabs({
                                  fx: {
                                      opacity: 'toggle',
                                      duration: 'slow'
                                  }
                                  })
        $("#red").click(function() {
                                                    $("link").attr("href", "css/red.css");
                                                    });
        $("#green").click(function() {
                                                    $("link").attr("href", "css/green.css");
                                                    });
        $("#blue").click(function() {
                                                    $("link").attr("href", "css/green.css");
                                                    });
                                                      }

    );

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

body {
    background-color:#fff;
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}

#nav ul {
    list-style:none;
    background:#000000;
    padding:5px;
}

#nav ul li {
    display:inline-block;

}

#nav ul li a {
    text-decoration: none;
    margin:0 20px;
    color:#ffffff;
}

.ui-tabs-hide {
    display:none;
}

dinsdag 6 september 2011 @ 17:44:19 #17

Crutch

Filantroop || Taalzwengel

Ik zie je ook nergens de .ui-tabs-hide class gebruiken.

Je moeder is een hamster

dinsdag 6 september 2011 @ 18:13:01 #18

TheSeeker_NL

Damn fine coffee

quote:
Op dinsdag 6 september 2011 17:44 schreef Crutch het volgende:
Ik zie je ook nergens de .ui-tabs-hide class gebruiken.

Ah, ik zie dat in de andere stylesheets ik die regel had weggelaten! In de eerste css dus wel. Bedankt want ik keek nu wel op de juiste plek

woensdag 7 september 2011 @ 15:57:35 #19

TheSeeker_NL

Damn fine coffee

Ik loop nu vast op iets anders. Het zou heel simpel moeten zijn maar hoe lang ik er ook mee stoei ik kom er niet uit.

De bedoeling is dat zodra ik op de a#tempDialogueOpen klik de div tmpDialogue zichtbaar wordt.

Ik doe iets fout want er gebeurd niks. Iemand die het wel ziet? Mijn dank is gigantisch.

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
33
34
35
36
37
38
39
40
41
42

<!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>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script type='text/javascript' src='js/jQuery.js'></script>
<script type='text/javascript' src='js/jQueryUI.js'></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/calender.js"></script>

</head>
<body>
  <div id="header">
      <div id="logo"></div>
      <div id="nav">
    <a href="" id="tmpDialogueOpen">Calender open</a>
    <a href="" id="tmpDialogueClose">Calender dicht</a>
        <ul>
            <li><a href="tab1.html" title="tab1">First Tab</a></li>
            <li><a href="tab2.html" title="tab2">Second Tab</a></li>
            <li><a href="tab3.html" title="tab3">Third Tab</a></li>
            <li><a href="tab4.html" title="tab4">Fourth Tab</a></li>
            <li><a href="tab5.html" title="tab5">Fifth Tab</a></li>
        </ul>
    </div>
</div>
<div id="container">
    <div id="main">
        <div id="tab1"></div>
        <div id="tab2"></div>
        <div id="tab3"></div>
        <div id="tab4"></div>
        <div id="tab5"></div>
    </div>
    <div id="sidebar">

    </div>
</div>
    <div id="tmpDialogue"><p>Calender</p></div>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10

#tmpDialogue {
    height:200px;
    width:200px;
    display:none;

}

div.tmpDialogueOn {
    display:block;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// JavaScript Document

var tmpExample = {
    ready : function() {
        $('a#tmpDialogueOpen').click(
                        function($e) {
                              $e.preventDefault();
                              $('div#tmpDialogue').addClass('tmpDialogueOn');
                                      }

                          );
        $('a#tmpDialogueClose').click(
                        function($e) {
                            $e.preventDefault();
                            $('div#tmpDialogue').removeClass('tmpDialogueOn');
                        }
                        );
    }
};
$(document).ready(tmpExample.ready);

donderdag 8 september 2011 @ 07:41:53 #20

GI

Nee ik heet geen JOE

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
    $("#tmpDialogueOpen").click(function(){
        $("#tmpDialogue").show();
    });

    $("#tmpDialogueClose").click(function(){
        $("#tmpDialogue").hide();
    });
});

donderdag 8 september 2011 @ 08:45:06 #21

TheSeeker_NL

Damn fine coffee

quote:
Op donderdag 8 september 2011 07:41 schreef GI het volgende:

[ code verwijderd ]

Super! Het kan dus veel gemakkelijker. Ik had het ondertussen al wel zover dat er iets gebeurde met het toevoegen en weghalen van die extra class. Margin, Padding lukte wel maar Display, daar deed hij gek mee?

Hoe dan ook, in dit geval werkt jou oplossing perfect ik heb nog wel even de preventDefault toegevoegd want anders laat hij de pagina opnieuw en zie je maar een splitseconde het gewenste effect

Hartstikke bedankt.

donderdag 8 september 2011 @ 15:40:19 #22

RenRen-

Misschien kunnen jullie mij helpen, ik heb google analytics op een site gegooid, direct achter de /head-tag, zoals het moet.

Nu krijg ik te horen dat er een Javascript Error in de site zit:

"iets anders is, dat er een javascript-error in de site zit. In alle pagina.s"

1
2
3
4
5

Bericht: '{' wordt verwacht
Regel: 14
Teken: 15
Code: 0
URI: http://urlvandesite.nl

"Dat verwijst hiernaar:"

1
2
3
4
5
6
7
8
9

Nou zegt hij dat het komt door dat stukje onderin, Function. Maar die hele code kan ik niet terugvinden in mijn broncode. Weet één van jullie waar deze vandaan komt en hoe ik die op kan lossen? Ik ben niet zo bekend met Javascript, ik heb gewoon dat stukje code in de site gezet (Best een beetje van belang voor hun site).

Ik heb met IEtab de broncode bekeken in IE en FF, en in beiden zie ik deze code terug...

[ Bericht 1% gewijzigd door RenRen- op 08-09-2011 16:10:23 ]

donderdag 8 september 2011 @ 16:29:14 #23

Crutch

Filantroop || Taalzwengel

Moet er niet op z'n minst {} achter een functie staan?

Dus:

1	function() {}

Je moeder is een hamster

donderdag 8 september 2011 @ 16:30:20 #24

RenRen-

quote:
Op donderdag 8 september 2011 16:29 schreef Crutch het volgende:
Moet er niet op z'n minst {} achter een functie staan?

Dus:
[ code verwijderd ]

Die hele function staat niet in mijn code, wel in de bron maar niet in de code achter de schermen

Dus ik kan niets aan die function veranderen

donderdag 8 september 2011 @ 16:31:39 #25

KomtTijd...

Je bent de {literal} tags vergeten in je template. Smarty gaat over zijn nek.

zcflevo.nl

donderdag 8 september 2011 @ 16:32:33 #26

RenRen-

quote:
Op donderdag 8 september 2011 16:31 schreef KomtTijd... het volgende:
Je bent de {literal} tags vergeten in je template. Smarty gaat over zijn nek.

waar moet ik die plaatsen dan? Ervoor en erna?

donderdag 8 september 2011 @ 16:37:06 #27

Crutch

Filantroop || Taalzwengel

quote:
Op donderdag 8 september 2011 16:32 schreef RenRen- het volgende:

[..]

waar moet ik die plaatsen dan? Ervoor en erna?

Ach so.

Ja dan openen met {literal} en sluiten met {/literal}

http://www.smarty.net/docsv2/en/language.function.literal

Je moeder is een hamster

donderdag 8 september 2011 @ 16:40:05 #28

RenRen-

Voor <script> en na </script> toch?

Thanks, even vragen of hij er van af is nu

vrijdag 9 september 2011 @ 17:10:02 #29

TheSeeker_NL

Damn fine coffee

1
2
3
4
5

$(document).ready(function() {
    $("input#kleurKop").click(function(){
        $("#koptekst").addClass('rood');
    });
});

Kan iemand mij vertellen wat er mis is met dit mini stukje script? Ik wil gewoon een class toevoegen aan een <h1> element maar 't lukt niet.

vrijdag 9 september 2011 @ 17:15:32 #30

GlowMouse

l'état, c'est moi

1
2
3

$(document).ready(function() {
$("h1").addClass('rood');
});

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

vrijdag 9 september 2011 @ 17:17:05 #31

TheSeeker_NL

Damn fine coffee

quote:
Op vrijdag 9 september 2011 17:15 schreef GlowMouse het volgende:

[ code verwijderd ]

Okay bedankt voor je snelle antwoord maar ik wil dat 't pas gebeurd nadat de knop is ingedrukt input#kleurKop dus

vrijdag 9 september 2011 @ 17:22:49 #32

Crutch

Filantroop || Taalzwengel

quote:
Op vrijdag 9 september 2011 17:17 schreef TheSeeker_NL het volgende:

[..]

Okay bedankt voor je snelle antwoord maar ik wil dat 't pas gebeurd nadat de knop is ingedrukt input#kleurKop dus

Wat als je input weghaalt?

1
2
3

$("#kleurKop").click(function(){
$("#koptekst").addClass('rood');
});

Je moeder is een hamster

vrijdag 9 september 2011 @ 17:22:51 #33

GlowMouse

l'état, c'est moi

vervang #koptekst door h1? Of heeft de h1 het id koptekst?

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

vrijdag 9 september 2011 @ 17:27:34 #34

TheSeeker_NL

Damn fine coffee

1
2
3
4
5
6
7
8
9

<h1 id="koptekst">GROEN WORDT ROOD</h1>
<input type="button" name="rodeKleur" value="kleur" id="kleurKop" size="50" />

.rood {
color:rood;
}
#kleurKop {
margin-left:20px;
}

input weghalen helpt niet. En ja de h1 heeft id "koptekst" omdat ik niet elke h1 rood wil geven :-) Gewoon een simpele oefening voor mezelf maar ik loop steeds vast, ik vind de syntax toch erg lastig

vrijdag 9 september 2011 @ 17:30:40 #35

GlowMouse

l'état, c'est moi

url? en is jQuery wel geladen?

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

vrijdag 9 september 2011 @ 18:05:11 #36

TheSeeker_NL

Damn fine coffee

quote:
Op vrijdag 9 september 2011 17:30 schreef GlowMouse het volgende:
url? en is jQuery wel geladen?

Sorry was even boodschappen doen, ja jQuery is geladen. Test url is http://onzereis.com/simpelveld/index.html

zaterdag 10 september 2011 @ 00:14:52 #37

GlowMouse

l'état, c'est moi

De fout zit in css: color:rood; is geen Engels.

eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0

zaterdag 10 september 2011 @ 21:10:11 #38

ursel

"Het Is Hier Fantastisch!

Ik kom er niet helemaal uit volgens mij.

Ik wil graag gebruik gaan maken van de volgende drag en drop Jquery.
http://jqueryui.com/demos/droppable/#photo-manager

Deze Jquery in dit format krijg ik zo aan het werk binnen mijn applicatie. Echter is het de bedoeling dat ik een onbekend aantal drop plekken per pagina ga krijgen. Middels een loop creeer ik de opmaak daarvan.

Alleen lukt het me niet om de Jquery hier op aan te passen. Of alle blokken worden telkens tegelijk gehighlight als je erover heen gaat met een drag item. En dan wordt vervolgens het item onder alle blokken geplaatst.

Bedoeling is dus dat het item binnen het desbetreffende blok komt te staan.

Wat ik volgens mij moet doen is elk blok een eigen ID gaan geven en middels een class er voor zorgen dat hij droppable is.. Binnen de afhandeling zal ik dan ergens het ID moeten oprakelen ofzo.

Iemand die me hier verder in kan helpen?

zondag 11 september 2011 @ 18:12:24 #39

TheSeeker_NL

Damn fine coffee

quote:
Op zaterdag 10 september 2011 00:14 schreef GlowMouse het volgende:
De fout zit in css: color:rood; is geen Engels.

Dat meen je niet... pfff.. ik me helemaal kapot zoeken in de js, maak ik zo'n stom foutje. Mijn dank is groot

dinsdag 13 september 2011 @ 08:49:46 #40

TheSeeker_NL

Damn fine coffee

Kan je aan een .load() event eigenlijk een effect meegeven zoals .fadeIn:

$('#foto').load('paprika.html img').fadeIn("slow");

Ik wil namelijk graag dat de foto langzaam zichtbaar wordt maar dit lijkt niet te werken. Is daar een oplossing voor? Ik zit rustig aan te zoeken maar kwam nog niks tegen totdusverre.

dinsdag 13 september 2011 @ 09:01:55 #42

TheSeeker_NL

Damn fine coffee

quote:
Op dinsdag 13 september 2011 08:53 schreef Scorpie het volgende:

[ code verwijderd ]

De 2e argument van load is een callback, in dit geval een anonieme functie, waarin je de fadeIn/out/effect doet. Deze callback wordt pas uitgevoerd nadat de load is voltooid. Wat jij deed was action chaining, maar dat werkt niet met een asynchrone load actie.

Ah bedankt voor je uitleg daar ook bij, dit maakt mij heel blij :-)

dinsdag 13 september 2011 @ 10:38:45 #43

TheSeeker_NL

Damn fine coffee

@Scorpie

Het werkte niet meteen en ik ben er even mee gaan stoeien omdat ik je niet direct wilde lastig vallen maar toen bedacht ik me:

Met .load wordt de foto al geladen en getoond dus de .fadeIn() zul je niet zien omdat de foto er dan al is. Toen heb ik even .fadeOut() geprobeerd en dat werkte wel gewoon dus mijn conclusie is dan ook dat het niet aan de syntax ligt maar dat de code gewoon niet geschikt is voor wat ik voor ogen heb.

Ik wil dus de foto laden zonder direct te tonen, maar het met een fadeIn() doen. Moet ik dan omslachtig gaan doen door de eerst een .hide() te gebruiken en dan een .fadeIn()? Lijkt me dat er een logischere oplossing voor moet zijn.

dinsdag 13 september 2011 @ 11:31:59 #44

mschol

quote:
Op dinsdag 13 september 2011 10:38 schreef TheSeeker_NL het volgende:
@Scorpie

Het werkte niet meteen en ik ben er even mee gaan stoeien omdat ik je niet direct wilde lastig vallen maar toen bedacht ik me:

Met .load wordt de foto al geladen en getoond dus de .fadeIn() zul je niet zien omdat de foto er dan al is. Toen heb ik even .fadeOut() geprobeerd en dat werkte wel gewoon dus mijn conclusie is dan ook dat het niet aan de syntax ligt maar dat de code gewoon niet geschikt is voor wat ik voor ogen heb.

Ik wil dus de foto laden zonder direct te tonen, maar het met een fadeIn() doen. Moet ik dan omslachtig gaan doen door de eerst een .hide() te gebruiken en dan een .fadeIn()? Lijkt me dat er een logischere oplossing voor moet zijn.

geen held met JS (en kan nu eff niet snel eerst eff testen) maar probeer dit eens:

1	$('#content').load('paprika.html img', function() { $(this).fadeIn("slow"); }));

bron

dinsdag 13 september 2011 @ 11:47:35 #45

TheSeeker_NL

Damn fine coffee

quote:
Op dinsdag 13 september 2011 11:31 schreef mschol het volgende:

[..]

geen held met JS (en kan nu eff niet snel eerst eff testen) maar probeer dit eens:
[ code verwijderd ]

bron

Hmm het lijkt echt wel zo te moeten inderdaad maar om een of andere reden lukt het niet.
Ik had die comment daaronder ook al geprobeerd, dus de div waar de image heen gaat in de css op display:hidden gezet maar ook dat werkte niet.

Het plaatje wordt wel getoond maar niet met een fadeIn. Heel frustrerend.

Zou het kunnen komen door mijn overige script:

1
2
3
4
5
6
7
8
9
10
11
12

//    paprika //

    $("#paprika").click(function($e){
    $e.preventDefault();
    $('li').removeClass('zaaien oogsten');
    $("#apr").addClass("zaaien");
    $("#dec").addClass("oogsten");
    $('#foto').load('paprika.html img', function() { $(this).fadeIn("normal"); });
    $('#pictureText').load('paprika.html p');
    $("#koptekst").load('paprika.html h1');

                                   });

Het zal vast heel rommelig ogen maar ik ben ook maar lerende, vergeef me

edit:

Op deze manier lukt het wel maar dit lijkt me niet de bedoeling

1
2
3

$('#foto').load(paprika.html img', function(){
$(this).hide();
$(this).fadeIn("slow")});

[ Bericht 3% gewijzigd door TheSeeker_NL op 13-09-2011 16:29:24 ]

vrijdag 16 september 2011 @ 09:56:05 #46

Ikbenmijnwachtwoordkwijt

En mijn email klopte niet

Ik heb een scriptje gemaakt (met jquery) waarmee ik de hoogte van bepaalde divs bereken en dan de hoogte aan elkaar aanpas zodat het mooi eruit ziet.

Het script werkt gewoon goed, alleen er is een probleem.
Bij de eerste keer laden pakt hij niet de juiste gegevens, en dus ziet het er niet mooi uit.

Het gaat om deze code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {
var loyaalcolumnheight = ($("#loyaalcolumn").height());
var gastvrijheidexpertisecolumnheight = ($("#gastvrijheidexpertisecolumn").height());
var gerelateerdeonderwerpenheight = ($("#gerelateerdeonderwerpen").height());

if (loyaalcolumnheight > gastvrijheidexpertisecolumnheight){
    var difference = loyaalcolumnheight - gastvrijheidexpertisecolumnheight;
    $("#gastvrijheidexpertisecolumn").height(gastvrijheidexpertisecolumnheight + difference);
    $("#gerelateerdeonderwerpenfix").height(gerelateerdeonderwerpenheight + difference + 31);
}

if (loyaalcolumnheight < gastvrijheidexpertisecolumnheight){
    var difference = gastvrijheidexpertisecolumnheight - loyaalcolumnheight;
    $("#loyaalcolumn").height(loyaalcolumnheight + difference);
    $("#gerelateerdeonderwerpenfix").height(gerelateerdeonderwerpenheight + 31);
}

});

Op deze pagina:

http://elearning.hotelsch(...)woord/338/klant.html

Het gaat dus om dat blauwe blok onder alle tekst.

Kan iemand mij uitleggen waarom de eerste keer een verkeerde hoogte wordt gepakt? Moet ik soms iets anders dan document.ready gebruiken?

vrijdag 16 september 2011 @ 10:44:35 #47

Ikbenmijnwachtwoordkwijt

En mijn email klopte niet

Nevermind, ik heb het probleem opgelost.

Ik heb er een timeout omheen gezet, hij pakt nu telkens de verkeerde hoogte dus heb ik gewoon de hoogte die erbij zou komen aangepast en nu gaat het telkens goed.

De 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

setTimeout(function() {
var loyaalcolumnheight = ($("#loyaalcolumn").height());
console.log("loyaalcolumnheight: " + loyaalcolumnheight);
var gastvrijheidexpertisecolumnheight = ($("#gastvrijheidexpertisecolumn").height());
console.log("gastvrijheidexpertisecolumnheight: " + gastvrijheidexpertisecolumnheight);
var gerelateerdeonderwerpenheight = ($("#gerelateerdeonderwerpen").height());
console.log("gerelateerdeonderwerpenheight: " + gerelateerdeonderwerpenheight);

if (loyaalcolumnheight > gastvrijheidexpertisecolumnheight){
    var difference = loyaalcolumnheight - gastvrijheidexpertisecolumnheight;
    console.log("loyaalcolumnheight is groter dan gastvrijheidexpertisecolumnheight");
    console.log("het verschil is "+ difference + " px");
    $("#gastvrijheidexpertisecolumn").height(gastvrijheidexpertisecolumnheight + difference);
    $("#gerelateerdeonderwerpenfix").height(gerelateerdeonderwerpenheight + difference + 46);
}

if (loyaalcolumnheight < gastvrijheidexpertisecolumnheight){
    var difference = gastvrijheidexpertisecolumnheight - loyaalcolumnheight;
    console.log("loyaalcolumnheight is kleiner dan gastvrijheidexpertisecolumnheight");
    console.log("het verschil is "+ difference + " px");
    $("#loyaalcolumn").height(loyaalcolumnheight + difference);
    $("#gerelateerdeonderwerpenfix").height(gerelateerdeonderwerpenheight + 46);
}
}, 1000);

Toch bedankt voor wie mee leest.

vrijdag 16 september 2011 @ 11:54:03 #48

ViPeRII

It's a good day to die

Het lijkt er op of je code dan voor het uitlezen van de andere hoogtes al is uitgevoerd, en of die variabele is meegekomen.
Ligt het niet gewoon aan je volgorde?

-- ViPeRII --

vrijdag 16 september 2011 @ 15:31:10 #49

Chandler

Ik wil een IFRAME op 100% zetten maar dat wil niet met de standaard paramters... dus wil ik javascript gebruiken.

alle browsers werken goed behalve natuurlijk IE.

Die geeft op de volgende regel:
var the_height=document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;

De volgende melding:
SCRIPT5: Access is denied.
index.html, line 18 character 1

Is hier een oplossing voor?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 16 september 2011 @ 17:52:38 #50

KomtTijd...

Klinkt als een XSS beveiliging?

Is de iframe van het zelfde domein?

zcflevo.nl

zaterdag 17 september 2011 @ 04:01:16 #51

Chandler

Nee, is een google maps iframe!

Maar Chrome werkt wel naar behoren en gaat mij niet om de content maar wil gewoon de gehele iframe op 100%/100% hebben!

The people who lost my respect will never get a capital letter for their name again.
Like trump...

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

» digital corner

» development

» digital corner

» development