[Javascript] voor dummies (deel 11)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  donderdag 31 maart 2011 @ 15:17:49 #51
111382 Ofyles2
Bestemming: onbekend
pi_94856274
quote:
1s.gif Op donderdag 31 maart 2011 15:00 schreef xaban06 het volgende:
Ik heb een bestel formulier op mijn website, aan het eind moet aan de hand van een aantal keuzes een berekening gemaakt worden.

Zou iemand mij hier bij kunnen helpen? Of desnoods wijzen naar tutorials welke dit behandelt.

Constructie:
[ code verwijderd ]

Ik heb 3 verzend mogelijkheden, namelijk:
[ code verwijderd ]

Daaronder heb ik betaal mogelijkheden, namelijk:
[ code verwijderd ]

Verzendkosten: EUR <bedrag berekend a.d.h.v. de keuze>
Totaalbedrag: EUR <totale bedrag van beginwaarde + verzendwijze + betaalwijze>

De bedragen wil ik ook mee geven aan een:
[ code verwijderd ]

Prijsberekening:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		//Prijskaartjes 'scannen'
var $kostenVerzendwijze = document.form.verzendwijze.value;
var $kostenBetaalwijze = document.form.betaalwijze.value;

//Bovenstaande prijzen bij elkaar optellen
function berekenPrijs()
{
return $kostenVerzendwijze + $kostenBetaalwijze;
}

//De prijs gaat vervolgens naar het veld 'verzendkosten'
document.form.verzendkosten.value = berekenPrijs();

//Prijs in 'totaalbedrag' optellen bij de verzendkosten
document.form.totaalbedrag.value = document.form.totaalbedrag.value + document.form.verzendkosten.value;

Ben er niet zeker van of ik het de eerste keer goed heb genoteerd.
Afscheidsrede
  donderdag 31 maart 2011 @ 15:19:01 #52
107418 wdn
Elfen lied O+
pi_94856331
quote:
1s.gif Op dinsdag 29 maart 2011 10:09 schreef Scorpie het volgende:

[..]

Ternary operations zijn voor de leek nog niet zo makkelijk te begrijpen :)
Maar zodra je het door hebt leest het zoveel makkelijker O+

xaban06: je kunt toch gewoon de values tellen?
document.getElementById('verzendkosten').value=parseFloat(document.getElementById('verzendwijze').value)+parseFloat(document.getElementById('betaalwijze').value);
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
  donderdag 31 maart 2011 @ 15:22:56 #53
111382 Ofyles2
Bestemming: onbekend
pi_94856505
quote:
1s.gif Op donderdag 31 maart 2011 15:19 schreef wdn het volgende:

[..]

Maar zodra je het door hebt leest het zoveel makkelijker O+

xaban06: je kunt toch gewoon de values tellen?
document.getElementById('verzendkosten').value=parseFloat(document.getElementById('verzendwijze').value)+parseFloat(document.getElementById('betaalwijze').value);
Mooie aanvulling, vergat rekening te houden met parseFloat/parseDouble.
Afscheidsrede
  donderdag 31 maart 2011 @ 15:25:18 #54
107418 wdn
Elfen lied O+
pi_94856603
quote:
14s.gif Op donderdag 31 maart 2011 15:22 schreef Ofyles2 het volgende:

[..]

Mooie aanvulling, vergat rekening te houden met parseFloat/parseDouble.
:D Oh hoe vaak ik dat al vergeten ben ;)

een .toFixed(2) erachter is denk ik ook aan te bevelen.
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
  donderdag 31 maart 2011 @ 15:27:36 #55
111382 Ofyles2
Bestemming: onbekend
pi_94856713
quote:
1s.gif Op donderdag 31 maart 2011 15:25 schreef wdn het volgende:

[..]

:D Oh hoe vaak ik dat al vergeten ben ;)

een .toFixed(2) erachter is denk ik ook aan te bevelen.
Dat maakt hem nou helemaal af.

* Ofyles2 pas komt kijken in dit topic, maar al bezig met het schrijven van een geavanceerde tekstverwerker voor websites.
Afscheidsrede
  donderdag 31 maart 2011 @ 15:32:05 #56
107418 wdn
Elfen lied O+
pi_94856927
quote:
1s.gif Op donderdag 31 maart 2011 15:27 schreef Ofyles2 het volgende:

[..]

Dat maakt hem nou helemaal af.

* Ofyles2 pas komt kijken in dit topic, maar al bezig met het schrijven van een geavanceerde tekstverwerker voor websites.
Ik ben een 1/2 jaar geleden begonnen met JS en heb al aardig wat live staan (finance, sales, cms'en). JS + LAMPP (achterkant heb ik niks voor hoeven doen).

Ik kan iedereen activewidgets.js (www.activewidgets.com) en floating_window.js (dhtmlgoodies) aanraden als toolset ;)
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
pi_94857107
quote:
1s.gif Op donderdag 31 maart 2011 15:19 schreef wdn het volgende:

[..]

Maar zodra je het door hebt leest het zoveel makkelijker O+

xaban06: je kunt toch gewoon de values tellen?
document.getElementById('verzendkosten').value=parseFloat(document.getElementById('verzendwijze').value)+parseFloat(document.getElementById('betaalwijze').value);
Mja ik ben een totale leek op gebied van JS. Nadeel van om alles zelf willen te maken (ik ben niet zo van de templates).

Ik zal eens kijken of het mij lukt om de code ergens in te plakken zodat het ook werkt :D
  donderdag 31 maart 2011 @ 15:38:13 #58
107418 wdn
Elfen lied O+
pi_94857240
quote:
1s.gif Op donderdag 31 maart 2011 15:35 schreef xaban06 het volgende:

[..]

Mja ik ben een totale leek op gebied van JS. Nadeel van om alles zelf willen te maken (ik ben niet zo van de templates).

Ik zal eens kijken of het mij lukt om de code ergens in te plakken zodat het ook werkt :D
Zet een .onclick functie op de 2 radio buttons en je kunt on the fly de andere bijwerken.

dan wordt het iets als dit:
1
2
3		document.getElementById('verzendwijze').onclick=function(){
   document.getElementById('verzendkosten').value=parseFloat(document.getElementById('verzendwijze').value)+parseFloat(document.getElementById('betaalwijze').value);
}
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
pi_94857271
Vraagje: hoe kun je javascript het makkelijkst debuggen? Ik heb linux, maar javascript is altijd een pain in the ass....Als het niet werkt krijg je geen error, niets.. zijn daar tools voor?
  donderdag 31 maart 2011 @ 15:41:42 #60
107418 wdn
Elfen lied O+
pi_94857391
quote:
10s.gif Op donderdag 31 maart 2011 15:38 schreef erikkll het volgende:
Vraagje: hoe kun je javascript het makkelijkst debuggen? Ik heb linux, maar javascript is altijd een pain in the ass....Als het niet werkt krijg je geen error, niets.. zijn daar tools voor?
Ik gebruik Aptana studio als editor en daar zit een debugger in.
http://www.aptana.com/products/studio2/download zie 'customize download' voor de Linux versie.

Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
pi_94864135
quote:
10s.gif Op donderdag 31 maart 2011 15:38 schreef erikkll het volgende:
Vraagje: hoe kun je javascript het makkelijkst debuggen? Ik heb linux, maar javascript is altijd een pain in the ass....Als het niet werkt krijg je geen error, niets.. zijn daar tools voor?
Gewoon, ctrl+shift+J?
zcflevo.nl
pi_94864235
quote:
3s.gif Op donderdag 31 maart 2011 18:18 schreef KomtTijd... het volgende:

[..]

Gewoon, ctrl+shift+J?
:o Asjemenou!
quote:
1s.gif Op donderdag 31 maart 2011 15:41 schreef wdn het volgende:

[..]

Ik gebruik Aptana studio als editor en daar zit een debugger in.
http://www.aptana.com/products/studio2/download zie 'customize download' voor de Linux versie.

[ afbeelding ]
chill.
pi_94878505
Of gewoon runtime met firefox en firebug.
  maandag 4 april 2011 @ 13:43:30 #64
78498 classpc
I don't like change
pi_95020892
Ik vroeg me af of jullie me op weg kunnen helpen met een scriptje.

Mijn JS ervaring is vrijwel nul, so bear with me. ;)

Wat ik probeer te bereiken is dat een element in de pagina (div) wordt weergeven zodra er naar beneden wordt gescrolld en de header niet meer zichtbaar is.
Zodra de bezoeker naar boven scrollt en de header komt weer in beeld, dan moet het element zich verbergen.
Ongeveer zoals die top bar op de frontpage.

Het element zelf is simpel genoeg te doen met CSS, maar ik vroeg me af hoe ik de JS kant het beste kan oplossen. Misschien dat jullie me een duwtje in de goede richting kunnen geven?
Op zoek naar een nieuwe printer? Kies voor een Brother laser printer. Uiterst betrouwbaar en economisch!
  maandag 4 april 2011 @ 13:53:18 #65
107418 wdn
Elfen lied O+
pi_95021369
window.onscroll
is een functie die aangeroepen wordt als je scrollt.
1
2
3
4		window.onscroll = scrollEvent;
function scrollEvent() {
   alert("scroll");
}
en dan bepalen wanneer je jouw div op hidden moet en wanneer op block :)

edit: wat webhulp:
http://help.dottoro.com/ljurkcpe.php

onscroll in body:
http://www.java2s.com/Cod(...)/onScrollExample.htm
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
  maandag 4 april 2011 @ 16:21:47 #66
329156 Peem
Skiddelly
pi_95027184
Hoi! Ik wil graag een hover stop in mijn jquery, maar ik snap nooit wat van de uitleg van de jQuery site, kan iemand mij verder helpen? Op het moment heb ik dit:

html:
1
2
3
4
5
6
7
8
9
10
11
12
13		    <div id="slider">
        <div id="imageloader">
            <img src="images/ajax-loader.gif" />
        </div>
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
        <img src="images/foto.jpg" id="foto" />
      </div>

CSS:
1
2
3
4		#slider {position: relative; overflow: hidden;height:300px; width: 650px;}
#slider img {position:absolute;    margin:0; height:85px;;display:none;}
#imageloader {position:relative; display:block; width: 100%; margin: 0px auto; text-align: center;}
#imageloader img { position:relative; top:70px; z-index:100; width:128px; height:15px; display:inline;}

JS:
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		var speed = 50;
    var pic, numImgs, arrLeft, i, totalWidth, n, myInterval; 

$(window).load(function(){
    pic = $("#slider").children("img");
    numImgs = pic.length;
    arrLeft = new Array(numImgs);
    
    for (i=0;i<numImgs;i++){
        
        totalWidth=0;
        for(n=0;n<i;n++){
            totalWidth += $(pic[n]).width();
        }
        
        arrLeft[i] = totalWidth;
        $(pic[i]).css("left",totalWidth);
    }
    
    myInterval = setInterval("flexiScroll()",speed);
    $('#imageloader').hide();
    $(pic).show();    
});

function flexiScroll(){

    for (i=0;i<numImgs;i++){
        arrLeft[i] -= 1;        

        if (arrLeft[i] == -($(pic[i]).width())){    
            totalWidth = 0;    
            for (n=0;n<numImgs;n++){
                if (n!=i){    
                    totalWidth += $(pic[n]).width();
                }            
            }    
            arrLeft[i] =  totalWidth;    
        }                    
        $(pic[i]).css("left",arrLeft[i]);
    }
}

Het maakt gebruik van de jquery FlexiSlider plugin (http://www.jquerygallery.net/2010/09/flexi-slider/)

Hoop dat iemand mij verder kan helpen :)

P.S: Hoverstop bedoel ik mee; de plaatjes gaan op dit moment heletijd doorlopen, ik wil als ik met muis erover ga dat het stopt, muis eraf - weer doorgaan.

[ Bericht 1% gewijzigd door Peem op 04-04-2011 16:40:16 ]
---
pi_95027266
En wat is een hover stop precies?
  maandag 4 april 2011 @ 16:39:37 #68
329156 Peem
Skiddelly
pi_95028077
Oh, sorry :)

Pas het nu aan :)
---
  maandag 4 april 2011 @ 16:40:14 #69
107418 wdn
Elfen lied O+
pi_95028117
Ik neem aan dat bedoelt wordt dat een animatie moet stoppen tijdens het hoveren?
Dan moet je ergens een
.stop()
toevoegen :+

Ik heb 1 voorbeeld gevonden:

Geen stop:
1$(this).find('a.dribbble-over').fadeIn('normal');
Met stop:
1$(this).find('a.dribbble-over').stop().animate({opacity: 1},600);
Beatus vir qui suffert tentationem.
PSN Rinzewind en Cadsuana Melaidhrin
Stellar Blade *O* Sea of Stars *O* Trails Daybreak *O*
  maandag 4 april 2011 @ 23:49:43 #70
329156 Peem
Skiddelly
pi_95053655
Ik kom daar helaas niet verder mee, heb a.dribble-over vervangen met #slider en #slider img, maar snap er niet vrij veel van atm.. Maybe it's the time :x

Edit: Tevens dank voor de tijd om te kijken :)
---
pi_95145747
Hooi allemaal, het volgende zit in mijn vingers maar wil er niet uit komen en zoek wat aanwijzingen.

Het volgende stukje code kan ik gebruiken om een plaatje te uploaden, waarbij ik een preview na het uploaden kan weergeven van het plaatje (van zurb.com/playground/ajax_upload).

Nu zou ik dit scriptje graag willen aanpassen zodat het werkt met meerdere bestanden! zonder dat ik voor ieder formuliertje een aparte functie hoef te schrijven!.

De code is als volgt
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		<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/ajaxupload.js" type="text/javascript"></script>
<script type="text/javascript">
/* original */

$(document).ready(function() {
    var thumb = $('img#thumb');
    new AjaxUpload('imageUpload', { 
                       action: $('form#newHotnessForm').attr('action'), 
                       name: 'userfile', 
                       onSubmit: function(file, extension) {
                           $('div.preview').addClass('loading');
                       }, 
                       onComplete: function(file, response) {
                           thumb.load(function() {
                               $('.preview').removeClass('loading');
                               thumb.unbind();
                           });
                           thumb.attr('src', response);
                       } });
    });

</script>
</head>
<body>

<div class="preview">
    <img src="#" id="thumb" height="100px" width="100px" />
</div>
    <form action="./upload.php" id="newHotnessForm"><label>Brouwse: </label>
        <input size="20" id="imageUpload" type="file" /><br />
        Description:<br />
        <input type="text" name="imageText" value="" width="300" /><br />
        <button class="button" type="submit">Save</button>
    </form>
</div>

Nu was mijn gedachte, ik moet van thumb, thumb1, thumb2, thumb3 e.t.c. maken en zelfde voor newHotnessForm en natuurlijk bijbehorende invoervelden..

Maar goed, als dat technisch gezien handig zou zijn, hoe kan ik dan middels jQuery een loopje maken van alle thumb* id's en daar de rest van de code op aanpas.

Anyone?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_95147424
Eh que? Ik snap de vraag niet.
pi_95155929
De vraag is hoe ik middels jquery, alle id's kan uitlezen die beginnen met thumb (dus thumb1, thumb2, thumb3) etc
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 7 april 2011 @ 12:48:36 #74
75592 GlowMouse
l'état, c'est moi
pi_95163542
als je daar thumb-1, thumb-2, etc van kunt maken, dan http://api.jquery.com/attribute-contains-prefix-selector/
anders met regexes werken.
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_95163718
of op basis van classes? dat wanneer ik een class aan een div koppel alle id's van de divjes uitlees die een bepaalde class hebben? :D of is dat niet handig?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies (deel 11)
Index

» digital corner

» development

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