Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Datumbereik

Onderwerpen

AND

Subforum

Topicstarter

Topicstatus

260 topics - Pagina 1 van 11

Window.Outerwidth() + extra pixels

28-05-2015 discussie 4
Hallo Allen,

Mijn vraag is, ik heb nu een scriptje die laat de grote van het beeld zien: window.outerWidth()

Nu wil ik graag dat bij deze bijvoorbeeld 100pixels bij op komen, dus zeg maar de breedte is 1920 pixels + 100 pixels is 2020, is dit mogelijk?

Alvast bedankt!

[jQuery] Class toevoegen aan parent div checkbox/radiobutton

10-04-2015 discussie 9
Hoewel het simpel leek, ben ik hier inmiddels al uren mee bezig.

Ik probeer een generiek stukje jquery te schrijven waarmee ik bij radiobuttons en checkboxes de bovenliggende 'container-select' kan voorzien van een extra class 'selected'. Daarnaast wil ik kunnen selecteren door op de bovenliggende div te klikken. Bij een checkbox moet deze dan uit of aan gaan. Bij een radiobutton moet deze dan aan gaan voor de huidige container.

Ik heb de volgende html bij een checkbox:
code:
1 2 3 4 5 <div class="container-select"> <div class="form-select"> <input class="form-checkbox" type="checkbox" name="select_x" /> </div> </div>
of de volgende html code bij een radiobutton
code:
1 2 3 4 5 <div class="container-select"> <div class="form-select"> <input class="form-radio" type="radio" name="select_y" /> </div> </div>
Voor de radio buttons heb ik het werkend gekregen, aangezien er altijd maar eentje geselecteerd mag zijn en de andere dan automatisch gedeselecteerd wordt:
code:
1 2 3 4 5 6 7 8 $('.container-select', context).click(function(event) { // Check radio when clicked on container $('.form-radio', this).prop('checked', true); // Remove all 'selected'-classes from all containers $('.container-select').removeClass('selected'); // Add 'selected'-class for current container $(this).addClass('selected'); });
Echter voor de checkboxes werkt het iets anders, aangezien je een checkbox aan en uit kan zetten en meerdere checkboxes tegelijk kan selecteren. Het lukt me wel om de class toe te voegen als ik de checkbox aan- of uitvink. Echter als ik de bovenliggende container aanklik gaat het fout en blijft de checkbox ongewijzigd. Ook het uitvinken van de checkbox haalt de 'selected' class van de andere container weg.

Zie code
code:
1 2 3 4 5 6 7 8 9 if ($('.form-checkbox', this).is(':checked')) { $('.form-checkbox', this).prop('checked', true); $(this).addClass('selected'); } if (!$('.form-checkbox', this).is(':checked')) { $('.form-checkbox', this).prop('checked', false); $(this).removeClass('selected'); }
Ook pogingen om event.preventDefault() te gebruiken zijn niet gelukt, hoewel het wel lijkt dat ik het in die hoek moet zoeken.

Waar zit mijn denk fout?

Om het wat makkelijker te maken: zie https://jsfiddle.net/vx3hzmrz/

Hoe werkt deze method en hoe kan ik hem callen met .click?

06-04-2015 discussie 1
Ik wil een card interface maken op basis van Packery JS. Dit is mijn eerste project na het afronden van de Codecadamy courses, dus heel soepel is het allemaal niet gegaan. Ik heb het overgrote deel nu uitgevogeld maar loop vast op het laatste stuk: het verschuiven van de kaarten adhv een navigatie menu'tje.

Dit probeer ik te doen met de fit method van Packery, hiermee kan je de items verplaatsen als je er op klikt. Ik probeer dat nu om te schrijven naar dat de items verplaatsen als ik op een ding met een bepaalde id klik.

Hiermee verschuiven de items als je er op klikt:
JavaScript:
1 2 3 $container.on( 'click', '.item', function( event ) { $container.packery( 'fit', event.target, 200, 0 ); });
Codepen Example

Ik stel mij zo voor dat de code om dit aan te roepen als je ergens anders op klikt er zo uit ziet:
JavaScript:
1 2 3 $container.on( 'click', '#vision-button', function( event ) { $container.packery( 'fit', '#vision', 200, 0 ); });
Maar dan net anders. Dus nu mijn vraag, hoe anders?

Om het allemaal een beetje in een context te kunnen plaatsen heb ik mijn hele zooitje op Codepen gezet.

Bij voorbaat dank.

Grid met 35k cellen en performance issues

15-03-2015 discussie 19
Bij het verdelen van medewerker uren over activiteiten/projecten is het krijgen van overzicht best lastig. Ik gebruik daar enige tijd een Excel document voor, op zich werkt dit prima, echter loop ik ook geregeld tegen bepaalde problemen aan. De ins en outs zal ik nu even laten voor wat het is, want dat is voor deze post niet zo belangrijk. Om deze problemen het hoofd te bieden ben ik dit weekend aan de slag gegaan om een variant te maken in een .NET webapplicatie. Niet alleen leerzaam, ook nog eens praktisch :-)

De gekozen oplossingsrichting is een tabel met verticaal de activiteiten en horizontaal de medewerkers. Door gemiddeld een 150-200 medewerkers en 150-200 activiteiten komt de tabel grofweg op 35000 cellen. Het op het scherm slingeren van deze cellen is dan ook het hoofdprobleem:De pagina wordt al snel 500kbyte groot Het initieel renderen van 35k cellen Het scrollen gaat met hoten en stotenZoals gezegd dit weekend heb ik besteed aan een eerste versie. Deze is nog niet interactief en voorzien van uitgebreide opmaak. Linkje: http://leosiepel.nl/t/test.html


Naast algemene tips voor cosmetische en technische verbeteringen heb ik concreet twee vragen:Voor het scrollen maak ik nu gebruik van een tabel die achter een div valt en met jQuery en scrollLeft / scrollTop heen en weer geschoven wordt, dit hakt, is er een beter mechanisme? Met enkele optimalisaties is het me gelukt om het HTML-bestand van 4MB naar 450KB te verkleinen, zien jullie nog verbeteringsmogelijkheden?

[JS] variable ipv string doorgeven via data attribute

02-03-2015 discussie 2
Ik ben bezig met het opzetten van een webapplicatie gebaseerd op leafletjs. Als onderdeel daarvan wil ik een eigen layer control maken om lagen aan en uit te kunnen zetten.

Een laag kan ik aanzetten via map.addLayer(layer). Dus de laag 'restaurants' kan ik aanzetten via map.addLayer(restaurants).

Nu wil de de naam van laag doorgeven in de data attribute van een link, echter heb ik dus eigenlijk de variable zelf nodig en niet de naam als string.

Nu heb ik dat opgelost door gebruik te maken van window[], maar ik vraag me af of er nog een andere/betere oplossing mogelijk is.
HTML:
1 2 3 <a data-layer="restaurants" href="#">restaurants</a> <a data-layer="sport" href="#">sport</a> <a data-layer="sights" href="#">sights</a>

JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 $("a").click(function(event) { event.preventDefault(); id = $(this).data("layer"); //dit is dan 'restaurants', 'sport' of 'sights' if(map.hasLayer(window[id])) { $(this).removeClass('selected'); map.removeLayer(window[id]); //dit is dan 'restaurants', 'sport' of 'sights' } else { map.addLayer(window[id]); $(this).addClass('selected'); } });
En omdat een voorbeeld meer zegt dan woorden, een uitgekleed voorbeeld: http://jsfiddle.net/fwLdbf3c/1/

Validate van input zonder form submit

25-02-2015 discussie 8
Ik ben een formulier aan het bouwen en loop tegen het volgende aan.

Voorbeeld van het input veld:
code:
1 2 3 <html><head><title></title></head><body><form> <input type="number" min="1" max="10"> </form></body></html>
fiddle: http://jsfiddle.net/e0nhkzh7/

So far so good, echter ik weet de min/max waarde nog niet op het moment dat de input op het scherm geplaatst is. Dit kan ik pas later bepalen.

Nu zet ik de waarde van min en max via een jquery script:
http://jsfiddle.net/np0zjv4p/
Dan controleert hij de waarde wanneer je op submit klikt.

Nu heb ik echter geen submitknop maar een andere button die een javascript uitvoert dat wat checks uitvoert en dan het formulier submit.

De validatie op het veld wordt dan overgeslagen
http://jsfiddle.net/cnmkrz2u/1/

Dit probleem komt omdat we eigen checks hebben en een jquery plugin die validatie toepast bij de submit van het formulier. De eigen checks worden door het javascript uitgevoerd en de jquery plugin doet dit onsubmit.

Nu is het volgens mij de enige optie om hiervoor de onsubmit van het formulier zelf te gebruiken. Maar wellicht is er een andere optie die ik over het hoofd heb gezien?

"Best practice" Gebruikers profiel updaten MYSQL, PHP, ...

25-02-2015 discussie 15
- Moet natuurlijk "Best Practice" zijn -

Hi,

Ik zit er al een tijdje mee te struikelen dus vond ik het tijd de vraag even te stellen aan personen die ook veel bezig zijn met ontwikkeling.

Stel je volgende situatie eens voor:

Klant registreert zich op een website geeft al zijn persoonlijke gegevens in (NAAM, VOORNAAM, TEL.NR., EMAIL, WOONPLAATS, LEEFTIJD, ...) Na een tijdje klopt zijn woonplaats niet meer en moet enkel zijn WOONPLAATS aangepast worden, mijn vraag gaat hierover... Hoe doe je dit nu het best?

Voorbeeld code:
PHP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php $userquery = $db->prepare("SELECT * FROM users"); $userquery->execute(); $userrow = $userquery->fetch(PDO::FETCH_ASSOC) ?> <div class="row"> <div class="col-lg-6"> <h5><?php echo htmlspecialchars($userrow['user_name'], ENT_COMPAT, 'UTF-8'); ?></h5> </div> <div class="col-lg-6"> <input type="text" name="<?php echo $userrow['user_name']; ?>" class="form-control" /> </div> </div> <div class="row"> <div class="col-lg-6"> <h5><?php echo htmlspecialchars($userrow['user_city'], ENT_COMPAT, 'UTF-8'); ?></h5> </div> <div class="col-lg-6"> <input type="text" name="<?php echo $userrow['user_city']; ?>" class="form-control" /> </div> </div>
Wat heb ik al gedaan:
1.
Ik heb mijn input veranderd naar dit
PHP:
1 <input type="text" name="<?php echo $userrow['user_city']; ?>" class="form-control" value="<?php echo $userrow['user_city']; ?>"/>
- Namelijk een value aan gekoppeld die hij uit mijn query haalt en als er geen veranderingen gebeuren en ik doe een submit dan controleert hij eerst of de value gelijk is en indien niet zal hij een update uitvoeren. Nadeel = veel code en nogal omslachtig volgens mij.

2.
submit knoppen naast ieder veld geplaatst en dan bovenaan in mijn php code een controle gedaan welke submit ingedrukt geweest is en dan ook nog eens een controle gedaan of de value weldegelijk veranderd is geweest. Nadeel = terug veel code maar iets overzichtelijker.

Mijn vraag van hierboven komt hier nu terug. Hoe lossen jullie dergelijk iets op? Werken jullie hier misschien met jQuery en Ajax? of is er een gouden tussenweg in PHP?

Bedankt om jullie werking te delen!

[JavaScript] scope vraag

15-12-2014 discussie 6
In het kader van school ben ik bezig met foto bewerking in JavaScript. Hiervoor gebruik ik voornamelijk 2 JS libraries, jQuery en CamanJS. Alleen loop ik tegen een probleem aan waar ik maar niet kan zien wat ik verkeerd doe. Ik weet dat ik in de hoek van scope moet kijken en dat daar mijn fout ligt

De situatie is op dit moment zo; een gebruiker kan uit een <ul> lijst kiezen welke van zijn eigen geuploade fotos hij wil bewerken. Op het moment dat hij deze gekozen heeft wordt deze geplaatst in een <canvas> met de ID genaamd "active", zal de foto geschaald worden afhankelijk van de resolutie van het scherm van de gebruiker (om te voorkomen dat je een foto met een resolutie van 8000x4000 op een scherm laat zien van 1680x1050 en je de hele interface niet meer kan zien) en dit word helemaal afgehandeld door CamanJS. Daarna kan de gebruiker aan de rechter kant van het scherm kiezen voor een aantal filters over de foto heen. Zoals zwart-wit en sepia. Op moment dat de gebruiker klaar is met bewerken, klikt die op de knop "bevestig", word er een AJAX call gedaan naar de PHP zijde waardoor de wijzigingen in de foto opgeslagen word. Deze AJAX call bestaat voornamelijk uit een Base64 string encoding van het <canvas> element.

Alleen wat ik eerst vergeten was, zodra je een <canvas> element andere dimensies meegeeft en je vraagt daar vervolgens de Base64 encoded versie van op heeft die Base64 string ook die verkleinde dimensies. Dus wat er eerst gedaan moet worden is die canvas terug zetten naar de oorspronkelijke dimensies, daar de Base64 string van opvragen en dan weer terug schalen naar de "oude" dimensies.
JavaScript:
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 $('#confirm').click(function() { window.halloWereld = { 'miauw':'' }; Caman("#active", function() { // Gets the original imageHeight + imageWidth var orgHeight = Caman("#active").imageHeight(); var orgWidth = Caman("#active").imageWidth(); // Gets the current height + width; var viewHeight = Caman("#active").height; var viewWidth = Caman("#active").width; // Now we resize it back to the original dimensions this.resize({ height: orgHeight, width: orgWidth }); this.render(); // Now we fetch the Base64 representation of the canvas element window.halloWereld.miauw = document.getElementById("active").toDataURL("image/jpeg"); console.log(window.halloWereld.miauw); // Now we resize back to the viewing dimensions this.resize({ height: viewHeight, width: viewWidth }) this.render(); }); console.log(window.halloWereld.miauw); // Hierna komt de AJAX call });
Dit is de code waarbij het fout gaat. Op het moment dat als dit uitgevoerd word, dan krijg ik netjes de Base64 string terug.
JavaScript:
1 2 document.getElementById("active").toDataURL("image/jpeg"); console.log(halloWereld.miauw);
Maar als ik op regel 39 vervolgens de
JavaScript:
1 console.log(halloWereld.miauw);
output bekijk dan krijg ik daar alleen maar een empty string terug... Terwijl ik een paar regels daarvoor wel netjes mijn verwachte output kreeg....

Wat ik al geprobeerd heb;

- Andere variabelen namen (misschien toch nog ergens de hoop dat mijn eigen bedachte variabelen misschien er anders gebruikt werden / ook gebruikt werden door de browser )
- Global variabelen
- Object gemaakt

Responsive design trigger met jQuery

14-12-2014 discussie 5
Momenteel ben ik even aan het knutselen met een responsive design, daarbij liep ik tegen het probleem aan als ik met jQuery verschillende afbeeldingen wil laden op het moment als de breedte van de website wordt gewijzigd.

Het werkt prima! Kan het beter? Vergeet ik iets?
JavaScript:
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 $(document).ready(function(){ // eerste keer functie aanroepen triggerBreakPoint(); // functie aanroepen wanneer de breedte wordt gewijzigd // moet deze hier trouwens staan? of is het beter om deze buiten de domready te plaatsen? $(window).resize(function(){ triggerBreakPoint(); }); }); var bpCheckNum=0; function triggerBreakPoint() { var c = $('#breakpoint').css('color') var num = c.charAt(4); // content alleen laden/wijzigen wanneer de breakpoint echt gewijzigd wordt, anders // wordt het 101 keer aangeroepen wanneer het venster in breedte gewijzigd wordt. if (num != bpCheckNum) { bpCheckNum = num; // content inladen/wijzigen } }
Alleen zit ik nog een beetje te klooien met de verschillende breedtes. Volgens mij hoeven er maar drie of vier in te staan. denk ik, dacht ik.
Cascading Stylesheet:
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 #breakpoint { display: none; color: #010101; } .site-width { max-width: 1200px; } @media screen and (max-width:1200px) { #breakpoint { color: #020202; } .site-width { max-width: 1000px; } } @media screen and (max-width:1000px) { #breakpoint { color: #030303; } .site-width { max-width: 800px; } } @media screen and (max-width:800px) { #breakpoint { color: #040404; } .site-width { width: 100%; } }
nou doei he. tot morgen

Google Analytics - Event tracking

07-11-2014 discussie 5
Op een website heb ik Google Analytics erop gegooid.
Pagina waar ook een jQuery onClick event op zit.

Als ik naar LIVE reporting gaat registreert die het click Event.
Maar ik zie de registratie van het onClick event alleen maar live in overige reporting zie ik die actie nergens terug.

Bij Behaviour -> Events wordt niks bijgehouden.

de Code die in het onClick event zit is dit:
ga('send', 'event', 'button', 'click', 'test');

Waar gaat het mis?

[PHP/jquery] Hoe pak ik de value van hidden veld

06-09-2014 discussie 2
Mede tweakers,

Ik zit al een tijdje vast met het volgende probleem.

Ik heb een inschrijfsysteem dat ik wil laten werken met n klik.
Het uitschrijven wil wel, maar het inschrijven niet.

Hoe kan ik kijken/opzoek gaan naar het hidden input veld klasid als er op een niet checked checkbox wordt geklikt (dat iemand dus niet ingeschreven is en inschrijfid leeg is)?
En dat ook het juiste klasid wordt gepakt en niet alleen de eerste die in de rij voorkomt.

dit kleine html/php stukje staat in een while loop die de aantal inschrijfmomenten laat zien.
PHP:
1 2 3 4 5 <form> <input type="hidden" value="klas_id_<?echo$rUserQ['klas_id'];?>" name="klasid" id="klasid"/> <input type="text" value="klant_id_<?echo$_SESSION['klant_id'];?>" name="klantid" id="klantid" /> <input type="checkbox" <?echo$checked;?> class="in_uitschrijven" id="inschrijfid" name="inschrijfid" value="<?echo$rIngeschrevenQ['klas_insch_id'];?>" /> </form>

JavaScript:
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 $('.in_uitschrijven').click(function(){ var inschrijfid = $(this).val(); var klasid = $('input#klasid[type="hidden"]').val(); var klantid= $('input#klantid[type="hidden"]').val(); if(inschrijfid !== '') { $.ajax({ type:'POST', url:'inschrijving_deleten.php', data: { inschrijfid: inschrijfid }, //patient_bsn wordt hier naar php gestuurd als $_POST['patient_bsn'] success:function(data) { if(data) { $('.succes_melding').html(data).fadeIn().fadeOut(1000); $('#test').load('tabel_inschrijvingen.php'); } else { $('.succes_melding').html("Er ging iets fout!").fadeIn().fadeOut(3500); } } }); } else { $.ajax({ type:'POST', url:'inschrijving_insert.php', data: { klasid: klasid, klantid: klantid }, //klasid wordt hier naar php gestuurd als $_POST['klasid'] success:function(data) { if(data) { $('.succes_melding').html(data).fadeIn().fadeOut(1000); $('#test').load('tabel_inschrijvingen.php'); } else { $('.succes_melding').html("Er ging iets fout!").fadeIn().fadeOut(3500); } } }); } });

[JS] UTF-8 naar ISO-8859-1 in een AJAX POST

13-03-2014 discussie 10
Hallo allemaal,

Zoals ik in de CC al bezig was met proberen, zit ik met een probleem(pje). Ik heb al een tijdje een auto-post-plugin voor Tweakers.
Gewoon een Greasemonkey JS die vanalles doet. Alles gaat goed. Behalve de speciale karakters, de encoding gaat fout.
Tweakers is ISO-8859-15 en AJAX POST is altijd UTF-8.
Dus, als ik een , , whatever post gaat het nogal mis

Nou had OnTrack iets cools gezegd en gedaan: OnTracK in "De Devschuur Coffee Corner - Iteratie 5" en OnTracK in "De Devschuur Coffee Corner - Iteratie 5"
Dat gaat nog steeds niet helemaal goed, in mijn lokale testje gaat het mis.
JS:
JavaScript:
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
$('#button').on("click", function() {
    var text = $('#text').val();
    text = unicode2cp1252(text);
    text = "string="+text;
    $.ajax({
        url: "URL",
        method: "POST",
        data: text,
        processData: false,
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: function(jqXHR) {
            jqXHR.overrideMimeType('application/x-www-form-urlencoded');
        },
        success: function(j) {
            console.log(j);
        }
    });
});

function unicode2cp1252(str) {

    var res = [];
    var char;
    for (var i = 0, len = str.length; i < len; i++) {

        char = str.charCodeAt(i)
        if(char < 128)
            res.push(str[i]);
        else if(char < 256) {
            switch(char) {
                case 233: char = "\233"; break;
                case 225: char = "\225"; break;
                case 237: char = "\237"; break;
                case 243: char = "\243"; break;
                case 250: char = "\250"; break;
            }
            res.push(char);
        } else
            res.push("&#"+char+";");
    }
    return res.join("");
}
PHP: enkel teruggeven van de $_POST['string'] met HTML erbij (meta dingen enzo)
HTML: heeft een iso-8859-1 codering

Wie helpt mij uit de brand?

ajax functie met bestanden?

07-02-2014 discussie 6
Hallo allemaal,

Ik ben bezig met een project waarin ik regelmatig ajax-requesten uitvoer: je kent het wel, formuliertje, jquery .ajax(...) naar een php bestand dat na wat gescharrel in de database feedback teruggeeft. Nu zou ik dit ook willen doen, maar ik zou ook een bestand willen versturen. Dit gaat niet via ajax, en ik zag mijzelf genoodzaakt om dit dus te doen via een 'gewoon formulier', en dan redirecten naar de vorige pagina met een GET-variabele die als ze bestaat de feedback doet verschijnen. Dit is echter vervelend, want bij het vernieuwen van de pagina zal die feedback blijven staan, en dat is niet wat ik wil.

Ik ben vrij onervaren, dus het is perfect mogelijk dat ik iets banaals over het hoofd gezien heb.

Alvast bedankt

[JS] [AJAX] [SSL] Inloggen met AJAX in modal beveiligen

13-12-2013 discussie 49
Een project waar ik op dit moment aan werk; een webshop in Wordpress, heb ik een login modal. Deze modal komt in beeld bij het inloggen op de website. Dat inloggen verloopt nu gewoon doormiddel van Ajax en dat werkt prima. Echter worden de gebruikersnaam en wachtwoord gewoon in plain-text verstuurd. Een gewone loginpagina maken en die voorzien van https is een idee, maar misschien zijn er andere oplossingen.

De website maakt gebruik van jQuery en de jQuery.ajax verteld mij:quote:Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.Dat zou dus betekenen dat de pagina waarop de Ajax request gedaan word, ook https moet zijn om in de request zelf https te kunnen gebruiken. Op Google kan ik niks vinden waarmee het op te lossen zou zijn, in ieder geval niet op 'standaard' consumenten hosting.

Wat zijn nu goede alternatieven? Zelf gaan encrypten of zijn dat tegenwoordig geen goede oplossingen meer? Of moet ik echt naar een 'dedicated' loginpagina toe waar ik gebruik maak van https?

--- Encrypted AJAX wrapper ---
Een oplossing als deze ziet er bijvoorbeeld wel netjes uit, maar de key... Die kun je niet veilig houden aan de client side.

--- jCryption ---
Een complete library, voor jQuery. Ziet er erg goed uit, maar ik moet nog even uitzoeken wat ik nu aan de serverkant allemaal kan doen.

http://www.jcryption.org/

Een mooie oplossing als je zelf host, maar aangezien proc_open nodig is voor deze oplossing, gaat het niks worden.

Misschien kunnen we om het proc_open probleem heen werken door gebruik te maken van de php functies voor openssl. Op de server waar het project straks live gaat, is openssl aanwezig in php, dus dat moet toch lukken!

[jQuery] JSON wordt verkeerd geparsed.

13-11-2013 discussie 1
Ik heb een vreemd probleem met jQuery (v1.9.0).

Ik haal met getJSON een PHP op, waar een JSON object inzit.
Dit doe ik alsvolgt:
JavaScript:
1
$.getJSON("load.php", function(data){this.ploaded(data)}).error(function(){tools.errorDialog("Error","Error loading dinges")});
(Even vereenvoudigd voor de duidelijkheid)

En daarna parse ik em alsvolgt:
JavaScript:
1
2
3
/*public*/ this.ploaded = function(data) {
    console.dir(data);
}
Echter gebeurd er iets vreemds. De JSON die ik stuur is deze:
JavaScript:
1
{"name":"Test","randomize":"0","created":"11:31:39 14-12-2012","machines":0,"machineids":"","content":[{"id":"208","contentType":"socialcast","soundOn":"0","priority":"1","link":"","schedule":[{"dateStart":"","dateEnd":"","timeStart":"","timeEnd":"","dayHTML":"","dayToolTip":"","data":{"dateStart":"0","dateEnd":"0","timeStart":"0","timeEnd":"1439","daysOfWeek":"127"}}],"socialCastName":"","socialCastSearch":"","socialCastGroupName":"Unknown group","socialCastThreadURL":"","socialCastMaxAge":"1 month","socialCastType":"all","socialCastGroup":-1,"socialCastThread":"","duration":"500","fileType":"as2","templateID":"70","templateName":"","fsize":"1291249","width":"1360","height":"768"},{"id":"209","contentType":"socialcast","soundOn":"0","priority":"1","link":"","schedule":[{"dateStart":"","dateEnd":"","timeStart":"","timeEnd":"","dayHTML":"","dayToolTip":"","data":{"dateStart":"0","dateEnd":"0","timeStart":"0","timeEnd":"1439","daysOfWeek":"127"}}],"socialCastName":"","socialCastSearch":"","socialCastGroupName":"Unknown group","socialCastThreadURL":"","socialCastMaxAge":"msg3","socialCastType":"all","socialCastGroup":-1,"socialCastThread":"","duration":"500","fileType":"as2","templateID":"70","templateName":"","fsize":"1291249","width":"1360","height":"768"}]}
Het gaat om een playlist met 2 items voor een van mijn CMSen.

Het gaat echter fout bij de schedule arrays bij beide items.
Zoals je ziet is dat een array met bij ieder ding maar 1 object er in.
Als ik een online parser gebruik zoals: http://json.parser.online.fr/ dan werkt dit ook prima.
Als ik echter via jQuery parse zoals hierboven krijg ik dit als output:
code:
1 2 3 4 5 6 *knip* schedule: Array[8] 0: Object 7: Object length: 8 *knip*
De array met maar 1 object wordt dus ineens een array met 2 objecten met een member op 0, en een op 7.
Het object heeft 7 members, dus ik kan me de telling wel voorstellen, maar waar komt het 2e array item in eens vandaan en waarom begint die op 7? Mijn code snapt dit natuurlijk niet en dat gaat niet helemaal goed.
Beide objecten lijken trouwens hetzelfde te zijn. Ze bevatten allebei dezelfde content.

Heeft iemand enig idee waar het fout gaat?

[jQuery] zelfde versie meerdere keren aanroepen

29-10-2013 discussie 14
Ik ben bezig met een website waarin ik een aantal jQuery plug-ins gebruik. Hiervoor laad ik zelf een jQuery library in.

Nou is het echter zo dat door de manier van werken van de klant ik alleen invloed heb op het content gedeelte.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html> 
<html> 
  <head> 
    <title>website</ttle> 
  </head> 
  <body> 
    <div class="invloed"> 
      Alleen hier kan ik code plaatsen. 
      <script src="jquery.js"></script> 
      <script src="plugin.js"></script> 
    </div> 
    <script src="jquery.js"></script> 
  </body> 
</html>
Buiten de div.invloed kan ik dus niks doen. Mijn scripts worden dus ook aangeroepen binnen deze div. Nou gaan om n of andere reden alle jQuery plug-ins op hun plaat. De versies zijn gelijk aan elkaar, dus daar ligt het niet aan. Ik kan niet mijn plugins aanroepen na de laatste aanroep van jquery, want daar kan ik geen code plaatsen. Zelf jQuery niet aanroepen werkt ook niet omdat dan $ nog niet beschikbaar is bij het aanroepen van de plug-ins en andere scripts.

De vraag is dus waarom gaan de scripts op hun plaat ookal word de zelfde versie ingeladen.

[jQuery] LI's wrappen per 5 in een UL

20-07-2013 discussie 9
Hallo,

Ik heb een sub-menu gemaakt met een bepaalde breedte waarbij elke 5 list-items in een div moeten worden gewrapt, om zo max. 3 wrappers (divs) te tonen. Floatend naast elkaar met elk 5 list-items.

Met jQuery probeer ik dit af te dwingen waarbij het bij de eerste 2 sub-menu's goed gaat maar bij het 3e sub-menu onder een menu-parent worden alle items opeens niet meer gewrapt. Wat doe ik fout?
code:
1 2 3 4 jQuery('.sub-menu > li').each(function(i) { if( i % 5 == 0 ) { jQuery(this).nextAll().andSelf().slice(0,5).wrapAll('<div class="wrap_li"></div>'); }

[jQuery] Selector uit variabelen resulteert in foutmelding

18-06-2013 discussie 11
Om de state van een form te reconstrueren aan de hand van een query_string, heb ik een jQuery selector gemaakt die dat zou moeten doen. Echter blijf ik zitten met de foutmelding: Uncaught Error: Syntax error, unrecognized expression: #orderby-price-desc.
JavaScript:
1
$('#orderby-'+orderby+'-'+order.toLowerCase()+'').addClass('is-selected');
De selector in console.log(); en dan hardcoden is geen probleem, dan krijg ik netjes #orderby-price-desc terug.

Ben inmiddels al heel wat pogingen verder, maar niks mag baten. String() om de variabelen heen doet niks, replacen van whitespace ofzo is het ook niet. Iemand die ziet wat ik hier fout doe? Wellicht een heel simpel probleem, maar ik kom er echt niet uit.

Vreemd gedrag firefox met event bubbling van right-click

03-06-2013 discussie 0
Ik zie een andere gedrag van firefox mbt het afhandelen van een right-click event dan in andere browsers:

http://jsfiddle.net/RyDZU/4/

In Firefox print dit "body" bij een rechtermuisklik op het woordje Test in de console. In IE/Chrome niet. Het lijkt alsoft Firefox om een of andere reden een click event direct op de document node raised.

Heeft iemand hier ervaring mee? Hoe kan ik dit verhinderen? Dit werkt iig niet:

$("body").on("click", "span", function(e) {
e.preventDefault();
});

$_GET met Jquery

23-05-2013 discussie 6
Hallo,

Ik ben met een afstudeer project bezig wat een soort archief in van nieuwe media bestanden. Nu is het de bedoeling zo gauw er een div geopend word (met jquery) dat deze onthouden word in de url zodat je op deze manier een selectie kan maken van een aantal intressante nieuwe media projecten en deze bijv kan mailen.

Nu heb ik alles werkend alleen nog niet de GET functie met Jquery ik wil namelijk dat met jquery na dat ik de box geopend heb de ID van de box in de URL zichtbaard word en deze later ook weer kan openen op deze manier.

Dit is de code die ik al heb:
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 25 26 27 28 29 30 31 32 33 34 35 function bindButton() { var $aantal = $(".focused").length +1; $(".idboxwrapper").each(function() { var $self = $(this); $self.find(".info").click(function() { var $array = $(".focused:visible").length; //console.log($array); if ($array < 4){ if (!$self.hasClass("focused")) { $self.addClass("focused"); resizeBoxes(); var currentId = $self.attr('id'); //console.log(currentId); } } }); $self.find(".sluiten").click(function(e) { $self.removeClass("focused"); resizeBoxes(); var currentId = 0; console.log(currentId); }); }); } bindButton();

jquery form validation .submit() doet het niet

13-05-2013 discussie 7
Beste tweakers,
Bij het programmeren van de inlogpagina van mijn site ben ik tegen het volgende voorval gebotst:
De jquery client-side form validation (om te checken of alle velden ingevuld zijn etc) lukt perfect, maar het formulier wil maar niet verzonden worden.
JavaScript:
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// JavaScript Document
$(document).ready(function(){
        $("#login_submit").click(function(e){
                e.preventDefault();
                //clearing all error spans
                $("span.error_span").html("");
                //getting the values of the input
                var input_email=$("#email").val();
                var input_password=$("#password").val();
                
                //setting the validation parameter to true. if an error has occured, it will be set as 'false';
                var login_verification=true;
                
                
                //checking if email is empty
                if( !$("#email").val() ) {
                      //email is not set
                    var login_verification=false;
                    //setting extra var to see if you have to echo that the email isn't valid. If this var is true, no email validation is needed
                    var input_email_empty=true;
                    $("#email_span").append("Dit veld mag je niet leeg laten");
                } else {
                    //email is set
                }
                
                //checking if password is empty
                if( !$("#password").val() ) {
                      //password is not set
                     var login_verification=false;
                     $("#password_span").append("Dit veld mag je niet leeg laten");
                } else {
                    //password is set
                    
                }
                
                //validating email adres
                function is_valid_email(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};
            //checking if email field is empty. If so, no valiation is needed
            
            if(input_email_empty==true){
                // the email is empty, no validation needed.
            } else {
                
                if(is_valid_email(input_email)){
                    //email is valid
                    
                } else {
                    //no valid email
                    var login_verification=false;
                    
                    $("#email_span").append("Dit is geen geldig e-mailadres");
                }
            
            }
                
                
                if(login_verification==true){
                    //the login is ok    
                    alert("the form will be sended");
                    $("#login_form").submit();
                    alert(" the form has been sended");
                    
                }
        });
    
});
Zoals jullie zien staat er boven de .submit regel een alert, en eronder ook. Beide worden weergegeven, alleen wordt het formulier nog altijd niet verzonden.

Weet iemand wat ik over het hoofd gezien heb? Alvast bedankt

jquery width van een string achterhalen

25-03-2013 discussie 9
Hallo,
Ik probeer een functie te maken waarbij als op een van de li's geklikt wordt, diens waarde in een inputbox verschijnt (vrij gemakkelijk), maar deze inputbox moet zijn 'width' aan de 'width' van de gekozen string aanpassen, dwz, net zo lang zijn, zodat de string er net inpast. Helaas kan ik in jquery de width van een string niet achterhalen.(zie code). de .width() blijkt maar niet te werken.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
            $(document).ready(function() {
            $('li').click(function() {
                var selected_name= $(this).text();
                $("#naam").val(selected_name);
                $("#naam").addClass("selected");
                $(".dropdown").addClass("hidden");
                var width=$(selected_name).width();
                $("#naam").width(width);

            });
                    
        });
            
            
        </script>
Hopelijk heeft iemand ervaring met dit probleem.
Alvast bedankt

JQuery-wordpress verliest CSS-formatting bij nieuwe tab

06-03-2013 discussie 1
Op goede hoop dat jullie me kunnen helpen:

bij het bouwen van een website voor een klant gaat er veel goed, maar ik heb een probleem wat ik niet opgelost krijg. Of nouja, ik weet niet goed waar ik moet beginnen. Het gaat om www.plantobehaviour.nl. De klant wil direct kunnen linken naar nieuwe blog-posts, maar wanneer ze dat doen opent de pagina zonder formatting, dus met een witte achtergrond en het standaard systeem-lettertype. Nu is me inmiddels duidelijk dat dat komt doordat we gebruik maken van jquery, maar niet hoe we dat op kunnen lossen. Ik kan bijvoorbeeld niet direct zien in welke file ik in de <head> iets, bijvoorbeeld een CSS-include, zou kunnen plaatsen om dit (al is het maar deels) op te vangen. Het mooist zou natuurlijk zijn als de hele pagina opent en dan direct 'doorrolt' naar de desbetreffende post.

[jQm] Nieuwe pagina -> events werken niet

17-02-2013 discussie 4
Hallo,

Ik ben nu bezig met jQ Mobile voor een schoolopdracht, met meerdere daadwerkelijke bestanden met pagina's.
Het probleem is zo dat als er een nieuwe pagina (of subpagina in zelfde bestand) wordt geladen, alle binds die horen bij de nieuwe page niet worden gebind (zo zou je kunnen zeggen). Ook wordt pageinit niet gefired en kan ik dus niet daarop triggeren om ze opnieuw te binden.

Hierdoor moet ik dus herladen steeds om de code op die pagina werkend te krijgen. Het probleem treedt op met $.mobile.changePage en met een gewone <a> met een href...

Ik zit nu al langer te kloten hiermee maar ik snap niet waarom het niet werkt, meerdere mensen op internet hebben het probleem, maar nergens een duidelijke oplossing...

Iemand een idee?

[jQuery] 'hashChange' event fired pas na $.ajax callback

28-01-2013 discussie 10
Een raar probleem, waar ik niet uit kom

De situatie in stappen.

1. var busy = true;
2. Producten ophalen
3. location.hash = hash;
4. var busy = false;

Op enkele plekken busy bekeken:

1. Before ajax, busy: true 2. Ajax request! 3. After ajax, busy: false 4. Hashchange, busy: false 5. Before ajax, busy: true 6. Ajax request! 7. After ajax, busy: false

1. Before callback, busy = true;
2. Ajax request met parameters.
3. Done callback, busy = false;

Dan bij 4 krijgen we een hashchange, terwijl ik al voor busy = false de location.hash wijzig!

De versimpelde code:
JavaScript:
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
var busy = false;

(function($){
    $.fn.get_products = function(args){

        var target = $(this);

        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: data,
            dataType: 'json',
            beforeSend: function (xhr) {
                busy = true;
                console.log('Before ajax, busy: '+busy);
            }
        }).done(function (response) {

            console.log('Ajax request!');

            if (response.status === "OK") {

                if (response.data.hash) {
                    location.hash = "filter:"+response.data.hash;
                } else if (location.hash) {
                    location.hash = '';
                }

                // [...] Andere shizzle

                target.html(response.data.html);

            } else {
                // Spit out response for debugging
                console.log(response);
            }

            busy = false;
            console.log('After ajax, busy: '+busy);
        });
    };
})(jQuery);
De functie get_products() word aangeroepen bij het veranderen van de opties, of als er geklikt word op volgende/vorige knoppen van de browser 'hashChange'.
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Detect a hash change, browser next of prev buttons
$(window).hashchange(function(){

    console.log('Hashchange, busy: '+busy);

    if (!busy) {
        // Check is a hash is present
        if (location.hash) {            
            // Get products by hash
            productListing.get_products({ hash: location.hash });
        } else {
            // Get products
            productListing.get_products();
        }
    }
});
Heeft iemand een idee waarom hij niks doet met deze volgorde?
Resultaten per pagina: 25 | 50 | 100
1 2 3 ... 11


Samsung Galaxy S7 edge Athom Homey Xcom 2 Samsung Galaxy S7 Fallout 4 Apple iPhone 6C Hitman (2016) LG G5

© 1998 - 2016 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Carsom.nl de Persgroep Online Services B.V. Hosting door True