[Javascript] voor dummies (deel 11)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  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...
pi_95195119
Gewoon een index retourneren voor elk plaatje dat je upload en dat uitlezen?
pi_95214087
Wat bedoel je precies met index?

-edit-
ik heb het opgelost door de response te gebruikenn (nu xml code) die ik weer kan uitlezen!
Zo kan ik meer gegevens uitlezen dan alleen de preview url.

[ Bericht 73% gewijzigd door Chandler op 08-04-2011 17:31:43 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_95295544
Ik heb een probleem dat waarschijnlijk makkelijk is op te lossen. Een horizontale image balk die kan scrollen door twee knoppen. Hoe die knoppen zich gedragen, valt later nog te tweaken. Ik heb lopen klooien met jQuery, maar daar kwam niks uit.

HTML
1
2
3
4
5		<div id="nav">
<div id="reel">
<table>6 images op een rij</table> - Ik weet het, tables zijn not-done, maar is maar even voor de proef
</div>
</div>

CSS
1
2
3
4
5
6
7		#nav{
width:100%;
height: 200px;
}
#reel{
height: 200px; 
}

Met dit stukje code wilde ik het simpelse maar eens proberen, de scrollafstand manipuleren.
1
2
3		<script type="text/javascript">
      $("#nav").scrolLeft(300);
</script>
pi_95297766
Wat is precies je doel? Wat wil er niet lukken? Watvoor foutmeldingen krijg je?
zcflevo.nl
pi_95299249
quote:
5s.gif Op zondag 10 april 2011 13:39 schreef KomtTijd... het volgende:
Wat is precies je doel? Wat wil er niet lukken? Watvoor foutmeldingen krijg je?
Krijg geen specifieke foutmelding (niet goed gekeken mss).

Wat ik wil is dat als je links hovert dat hij naar links scrollt en bij rechts hover naar rechts scrollt. Maar het scrollen wil niet lukken, de divs die er boven zweven kan ik prima maken. Maar het scrollgedeelte dus, hoe krijg ik dat voor elkaar (zonder marquee ;) ).
  zondag 10 april 2011 @ 14:29:05 #96
75592 GlowMouse
l'état, c'est moi
pi_95299710
Als je met scrolLeft geen foutmelding krijgt dan doe je wat fout.
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
pi_95301286
Typo....
  maandag 11 april 2011 @ 00:48:21 #98
298746 Dalando
18, niet meer gefrustreerd
pi_95328963
Hoe kan ik van afbeeldingen (in JS) de groote krijgen, en die resizen, net ong. zoals FOK! dat doet, zodat het net in de DIV past?
Spel-, taal- en grammaticafouten voorbehouden.
994a040db3f025e25771e045468fc121
pi_95330571
gewoon:
1
2
3		var plaatje = document.getElementById('plaatje');
var w = plaatje.width, h = plaatje.height;
plaatje.style.width = '100px'; plaatje.style.height = '100px';

Met style pas je eigenlijk de css aan, dus je kan ook procenten gebruiken en misschien ook wel em (ik weet het niet, en ik weet ook niet waarom je dat zou willen hoor :P)
En btw, deze methode werkt alleen als het plaatje al geladen is, anders is de hoogte en breedte onbekend en returned 0. Je moet het dus of gebruiken in een functie die je doet bij het event window.onload óf je moet het op deze manier doen:
1
2
3
4
5
6
7
8		plaatje = new Image();
plaatje.src = './teladenplaatje.png';
plaatje.onload = weergeefgrootte;

function weergeefgrootte()
{
    alert(this.width + ', ' + this.height);
}
Finally, someone let me out of my cage
pi_95378993
Ik hoop dat iemand mij hiermee kan helpen.
Ik ben opzoek naar een plugin voor een pagina waar snelbestellen moet komen, deze moet ervoor zorgen dat als je alleen het serienummer intypt dat de rest van de gegevens er ook komen dus de naam en prijs.

Hier onder is een voorbeeld van wat ik bedoel
SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.
Bedankt alvast!
...
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')