[Javascript] voor dummies (deel 11)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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...
  donderdag 7 april 2011 @ 13:00:07 #76
75592 GlowMouse
l'état, c'est moi
pi_95164003
Dat is ook handig ja.
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_95164216
Kan ik dat op dezelfde manier doen? ipv # een puntje ?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 7 april 2011 @ 13:06:14 #78
75592 GlowMouse
l'état, c'est moi
pi_95164250
Jquery heeft hele goede documentatie, zie http://api.jquery.com/category/selectors/
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_95164827
Top! ik zou film kijken maar ga nu de documentatie eens goed doornemen!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_95172115
Ik ben even wezen spelen maar krijg het niet helemaal voor elkaar :D

De volgende code werkt

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		    var thumb1 = $('img#thumb1');
    new AjaxUpload('imageUpload1', { 
                       action: $('form#upForm1').attr('action'), 
                       name: 'userfile', 
                       onSubmit: function(file, extension) {
                           $('div#preview1').addClass('loading');
                       }, 
                       onComplete: function(file, response) {
                           thumb1.load(function() {
                               $('#preview1').removeClass('loading');
                               thumb1.unbind();
                           });
                           thumb1.attr('src', response);
                       } });

    var thumb2 = $('img#thumb2');
    new AjaxUpload('imageUpload2', { 
                       action: $('form#upForm2').attr('action'), 
                       name: 'userfile', 
                       onSubmit: function(file, extension) {
                           $('div#preview2').addClass('loading');
                       }, 
                       onComplete: function(file, response) {
                           thumb2.load(function() {
                               $('#preview2').removeClass('loading');
                               thumb2.unbind();
                           });
                           thumb2.attr('src', response);
                       } });

en deze code die dus zelf alle elementen moet aflopen werkt niet :{ krijg een error ivm [newID]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		$(document).ready(function() {
    var map = $('div[id|="woei"]');
    var thumb = new Array();
    $.each(map, function(key, value) {
         var newID = value.id.substring(5, value.id.length);

         thumb[newID] = $('img#thumb' + newID');
         new AjaxUpload('imageUpload1' + newID, { 
                            action: $('form#upForm1').attr('action'), 
                            name: 'userfile', 
                            onSubmit: function(file, extension) {
                                $('div#preview1' + newID).addClass('loading');
                            },      
                            onComplete: function(file, response) {
                                thumb[newID].load(function() {
                                    $('#preview1' + newID).removeClass('loading');
                                    thumb[newID].unbind();
                                });
                                thumb[newID].attr('src', response);
                            } });
     
              });

hoe kan ik dit oplossen en zo de 'id's' variabel te maken?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_95182892
heb een site met een iframe, hierin staan delen van de site. echter ook eentje van buiten het domein/server. Nu probeer ik via javascript de achtergrond aan te passen in het iframe.

1parent.document.getElementById('iframe').contentWindow.document.body.style.background="url(bg-url)";

Deze code werkt in chrome voor de pagina's die op de zelfde server staan echter niet bij de externe.
Nu vroeg ik me af of er een manier is om het wel te laten werken of dat je nooit aan externe pagina's kan komen.

disclaimer: voordat mensen zeggen dat je van andermans pagina's moet afblijven. is van een bekende en wilde alleen de achtergrond aanpassen om hem beter in de layout te passen.

alvast bedankt
https://a-vents.com/STAR_Rally/
  Admin donderdag 7 april 2011 @ 20:51:20 #82
1 crew  Danny
always and nevermore
pi_95185873
quote:
1s.gif Op donderdag 7 april 2011 20:08 schreef qwox het volgende:
heb een site met een iframe, hierin staan delen van de site. echter ook eentje van buiten het domein/server. Nu probeer ik via javascript de achtergrond aan te passen in het iframe.

[ code verwijderd ]

Deze code werkt in chrome voor de pagina's die op de zelfde server staan echter niet bij de externe.
Nu vroeg ik me af of er een manier is om het wel te laten werken of dat je nooit aan externe pagina's kan komen.

disclaimer: voordat mensen zeggen dat je van andermans pagina's moet afblijven. is van een bekende en wilde alleen de achtergrond aanpassen om hem beter in de layout te passen.

alvast bedankt
kan helaas niet crossdomain.
Zie wat ik kijk: trakt.tv
pi_95186012
quote:
1s.gif Op donderdag 7 april 2011 20:51 schreef Danny het volgende:

[..]

kan helaas gelukkig niet crossdomain.
fixed.
zcflevo.nl
  Admin donderdag 7 april 2011 @ 20:56:33 #84
1 crew  Danny
always and nevermore
pi_95186291
quote:
1s.gif Op donderdag 7 april 2011 20:53 schreef KomtTijd... het volgende:

[..]

fixed.
eensch, hoewel het soms wel handig zou kunnen zijn ben ik blij dat het niet kan :)
Zie wat ik kijk: trakt.tv
pi_95187309
quote:
5s.gif Op donderdag 7 april 2011 16:05 schreef Chandler het volgende:
Ik ben even wezen spelen maar krijg het niet helemaal voor elkaar :D

De volgende code werkt

[ code verwijderd ]

en deze code die dus zelf alle elementen moet aflopen werkt niet :{ krijg een error ivm [newID]

[ code verwijderd ]

hoe kan ik dit oplossen en zo de 'id's' variabel te maken?
Door een class te gebruiken op de invoervelden voor bestanden.

Dan krijg je zoiets in je formulier:
1
2
3		<input type="file" name="upload[]" id="thumb1" class="thumb-upload">
<input type="file" name="upload[]" id="thumb2" class="thumb-upload">
<input type="file" name="upload[]" id="thumb3" class="thumb-upload">

De bijbehorende javascript-code (met jQuery) is niet zo lastig. Proof of concept:
1
2
3
4
5		$(document).ready(function() {
    $('.thumb-upload').each(function(ix, el) {
        alert($(el).attr('id'));
    })
});

Het is dus niet nodig om ieder veld met z'n eigen id aan te spreken. Als je het nodig hebt (waarschijnlijk niet), kun je het wel achterhalen.
fokstok.nl
pi_95188706
quote:
1s.gif Op donderdag 7 april 2011 20:56 schreef Danny het volgende:

[..]

eensch, hoewel het soms wel handig zou kunnen zijn ben ik blij dat het niet kan :)
ben het er ergens ook wel mee eens dat het niet mogelijk is, in dit geval vind ik het jammer.

iig allemaal bedankt voor het snelle antwoorden.
https://a-vents.com/STAR_Rally/
pi_95189457
quote:
1s.gif Op donderdag 7 april 2011 21:08 schreef Light het volgende:
Door een class te gebruiken op de invoervelden voor bestanden.

Dan krijg je zoiets in je formulier:

De bijbehorende javascript-code (met jQuery) is niet zo lastig. Proof of concept:

Het is dus niet nodig om ieder veld met z'n eigen id aan te spreken. Als je het nodig hebt (waarschijnlijk niet), kun je het wel achterhalen.
Opzich heel duidelijk alleen 1 vraag, hoe kan ik dan de id's dynamisch doorgeven? dat lukte mij niet, de error die ik kreeg in mijn voorbeeld kwam door thumb[newID] = $('img#thumb' + newID');
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  donderdag 7 april 2011 @ 21:38:58 #88
75592 GlowMouse
l'état, c'est moi
pi_95189780
de ' kloppen niet nu.
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_95190577
quote:
Op donderdag 7 april 2011 21:27 schreef qwox het volgende:
[..]

ben het er ergens ook wel mee eens dat het niet mogelijk is, in dit geval vind ik het jammer.

iig allemaal bedankt voor het snelle antwoorden.
Er zijn wat mensen die extensies hebben gemaakt waarmee je een iframe kan manipuleren, tot op zekere hoogte.

[ Bericht 2% gewijzigd door #ANONIEM op 07-04-2011 21:48:50 ]
pi_95191275
quote:
1s.gif Op donderdag 7 april 2011 21:38 schreef GlowMouse het volgende:
de ' kloppen niet nu.
Klopt! er stond nog een ' tegen de ) aan :D

Maar goed, ik heb het werkend! _O_

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21		$(document).ready(function() {
    thumb = new Array();
    $('.preview').each(function(ix, el) {
        var newID = $(el).attr('id').substring(7, $(el).attr('id').length);
        thumb[newID] = $('img#thumb' + newID);
        new AjaxUpload('imageUpload' + newID, { 
                           action: $('form#upForm' + newID).attr('action'), 
                           name: 'userfile', 
                           onSubmit: function(file, extension) {
                               $('div#preview' + newID).addClass('loading');
                           },      
                           onComplete: function(file, response) {
                               thumb[newID].load(function() {
                                   $('#preview' + newID).removeClass('loading');
                                   thumb[newID].unbind();
                               });
                               thumb[newID].attr('src', response);
                           } 
        });
    });
});

Nu kan ik uploaden op een prettige manier aanbieden! maar als jullie comments hebben hoor ik ze graag!

Gelijk een andere vraag, hoe kan ik tijdens het uploaden een ID meegeven, zodat ik het plaatje weer op dezelfde upload positie kan zetten? op zich weet ik wel 1, returnen als een array middels userfile[1] bv of moet ik dit anders aanpakken?
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')