[Javascript] voor dummies (deel 12)

DIG Digital Corner

Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.

Je bent niet ingelogd. Klik hier om in te loggen of hier om een gratis account aan te maken.

actieve topics nieuwe topics

abonnement Unibet Coolblue Bitvavo

actieve topics nieuwe topics

abonnement Unibet Coolblue Bitvavo

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 @ 08:53:33 #41

#ANONIEM

1
2
3

$('#foto').load('paprika.html img', function(){
$('#selector').fadeIn();
});

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.

[ Bericht 41% gewijzigd door #ANONIEM op 13-09-2011 08:54:39 ]

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

actieve topics nieuwe topics

abonnement Unibet Coolblue Bitvavo

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

» digital corner

» development

» digital corner

» development