[html, css, js] .clearfix ALL THE THINGS

zondag 24 maart 2013 @ 11:13:10 #201

Chandler

Niemand een idee waarom de styling van infoBox verdwijnt? en hoe ik dit kan voorkomen? nu krijg ik alleen maar de icoon te zien die verwijst naar de lokatie op de map...

Daarbij gebruik ik onderstaande 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

Just say hi!

zondag 24 maart 2013 @ 11:24:15 #202

Devv

Wat krijg je terug in data? Misschien zitten daar karakters in die de opmaak kapot maken.

zondag 24 maart 2013 @ 13:40:21 #203

n8n

Pragmatisch

quote:
Op zondag 24 maart 2013 00:04 schreef boem-dikkie het volgende:

[..]

Sowieso nooit meer dan 64, daar kun je natuurlijk op letten.

is alleen een beetje lastig met fluid design > procenten

“Specialization is for insects”.—Robert Heinlein

zondag 24 maart 2013 @ 17:47:59 #204

Chandler

quote:
Op zondag 24 maart 2013 11:24 schreef Devv het volgende:
Wat krijg je terug in data? Misschien zitten daar karakters in die de opmaak kapot maken.

Nee at is het probleem niet, zal eens proberen om ook de opmaak via ajax te versturen en kijken of ik dan de stijl kan behouden maar lijkt me sterk

Just say hi!

zondag 24 maart 2013 @ 17:52:07 #205

Merkie

Surprisingly contagious

Doorloop je request eens regel voor regel en kijk op welke regel het fout gaat. En wat is de inhoud van data?

2000 light years from home

zondag 24 maart 2013 @ 18:11:05 #206

Chandler

Na veel pogingen ben ik er achter dat je middels setContent het gehele blok moet vullen met de juiste HTML code. En dat daarmee ook direct de eigenschappen van het blok veranderd worden. Dus voor iedere aanroep van setContent moet ik ook de opmaak van <divs> van de infoBox meenemen. Het is nu duidelijk!

-edit-
Weet iemand ook of het mogelijk is om met https://github.com/jawj/OverlappingMarkerSpiderfier na het aanmaken van alle markers deze alsnog om te zetten? dus ipv het in de code te verweven dit na het aanmaken van alle markers alsnog gedaan kan worden?

-edit 2-
Zoveel vragen.... met map.fitBounds(bounds); zet ik de zoom op het aantal markers, maar stel ik wil maximum zoom van 11? hoe krijg je dan dat deze bounds maximaal zoom 11 krijgt ipv zoom 15?
oplossing edit2:

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.

-edit 3-
En een ander, want nu wordt deze functie automatisch getriggerd als ik map.fitBounds doe

1
2
3
4

google.maps.event.addListener(map, 'zoom_changed', function()
{
BoundBasedMarkers(map)
});

hoe zorg ik er voor dat wanneer ik map.fitBounds aanroep de zoom functie niet alsnog getriggerd wordt?

Als ik nu een adres laad via een zoek functie, wordt map.fitBounds gebruikt om de map goed te positioneren, echter wordt direct daarna binnen de bounds nog een oproep gedaan om de markers te in te lezen, dus dubbel....

opgelost:

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.

Ik leer het allemaal nog wel

en nu kijken hoe ik die OMS er dynamisch in kan zetten

[ Bericht 26% gewijzigd door Chandler op 25-03-2013 14:19:00 ]

Just say hi!

donderdag 28 maart 2013 @ 08:13:02 #207

Chandler

Ik hem OMS nog steeds niet aan het werk maar dat komt spoedig

nu even een andere vraag, heb mijn script geoptimaliseerd maar zou graag wat opbouwende punten willen horen, verder snap ik niet waarom de function createlist() geen json data ontvang, deze heb ik toch in het begin als globale variabel ingesteld.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

    var map,
        json;

    // markers = [];
    var infoWindow;
    var zoomIgnore = false;

    function load() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(40, -100),
            zoom: 4,
            maxZoom: 11,
            mapTypeId: 'roadmap',
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            scrollwheel: false
        });

        // infoWindow = new google.maps.InfoWindow();
        infoWindow = new InfoBox({
            content: $("#infobox"),
            disableAutoPan: false,
            pixelOffset: new google.maps.Size(-140, 0),
            zIndex: null,
            boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75
            },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1)
        });

        /* functions to enable reload after zooman drag */
        google.maps.event.addListener(map, 'dragend', function() {
            BoundBasedMarkers(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function() {
            if (zoomIgnore) { return false; }
            BoundBasedMarkers(map);
        });
    }

    function BoundBasedMarkers(map) {
        var searchUrl = '/test/script?' + 'SW_LAT='  + map.getBounds().getSouthWest().lat()
                                        + '&SW_LNG=' + map.getBounds().getSouthWest().lng()
                                        + '&NE_LAT=' + map.getBounds().getNorthEast().lat()
                                        + '&NE_LNG=' + map.getBounds().getNorthEast().lng();

        $.ajax({
            url: searchUrl,
            error: function() { alert('Er is geen data gevonden worden binnen gegeven coordinaten'); },
            dataType: "json",
            success: function (json) {
                var bounds = new google.maps.LatLngBounds();
                for (var i = 0, length = json.length; i < length; i++) {
                    var data = json[i];
                    var latLng = new google.maps.LatLng(data.lat, data.lng);

                    createMarker(latLng, data.id, data.name);
                    bounds.extend(latLng);
                }

                createList();
            }
        });
    }

    function searchLocations() {
        var address = $("#addressInput").val();
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({address: address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var center = results[0].geometry.location;
                var radius = $('#radiusSelect').val();
                var searchUrl = '/test/script?lat=' + center.lat() +
                                            '&lng=' + center.lng() +
                                         '&radius=' + radius;

                $.ajax({
                    url: searchUrl,
                    dataType: "json",
                    error: function() { alert('Er is geen data gevonden worden met opgegeven lokatie'); },
                    success: function (json) {
                        zoomIgnore = true;

                        var bounds = new google.maps.LatLngBounds();
                        for (var i = 0, length = json.length; i < length; i++) {
                            var data = json[i];
                            var latLng = new google.maps.LatLng(data.lat, data.lng);

                            createMarker(latLng, data.id, data.name);
                            bounds.extend(latLng);
                        }
                        map.fitBounds(bounds);

                        zoomIgnore = false;

                        createList();
                    }
                });
            }
            else {
                alert(address + ' not found');
            }
        });
    }

    function createMarker(latlng, id, name) {
        var marker = new google.maps.Marker({
            map: map,
            position: latlng
        });

        google.maps.event.addListener(marker, 'click', function() {
            $.ajax({
                url: '/test/ajax?name=' + name + '&id=' + id,
                success: function(data) {
                    infoWindow.setContent('<div class="infobox-wrapper"><div id="infobox" style="display: block;">' + data + '</div></div>');
                    infoWindow.open(map, marker);
                    map.setCenter(marker.getPosition());
                }
            });
        });
        // markers.push(marker);
    }

    function createList() {
        console.log('createlist');
        if (typeof json !== 'undefined') {
            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i];
                $('#list').append('<div id="addresslist"><h2>' + data.name + '</h2><p>' + data.address + '</p></div>');
            }
        }
    }

    //]]>

Ik krijg ook geen foutmeldingen of wat dan ook, en in de console zie ik dat de functie createlist wel aangeroepen wordt, iemand een idee?

Just say hi!

donderdag 28 maart 2013 @ 08:18:37 #208

Catch22-

Ben je Blind?!

Je moet de jsondata wel meegeven natuurlijk

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 28 maart 2013 @ 08:59:39 #209

Chandler

quote:
Op donderdag 28 maart 2013 08:18 schreef Catch22- het volgende:
Je moet de jsondata wel meegeven natuurlijk

Ik dacht dat doordat ik var json; in het begin van het script heb gezet, deze array overal te benaderen was... maar daar zit ik dus fout mee? hoe kan ik wel zorgen dat deze data overal beschikbaar is?

Just say hi!

donderdag 28 maart 2013 @ 09:27:29 #210

KomtTijd...

quote:
Op donderdag 28 maart 2013 08:59 schreef Chandler het volgende:

[..]

Ik dacht dat doordat ik var json; in het begin van het script heb gezet, deze array overal te benaderen was... maar daar zit ik dus fout mee? hoe kan ik wel zorgen dat deze data overal beschikbaar is?

Je definieert hem als lege variabel, waar stop je er data in?

zcflevo.nl

donderdag 28 maart 2013 @ 09:31:57 #211

Catch22-

Ben je Blind?!

quote:
Op donderdag 28 maart 2013 08:59 schreef Chandler het volgende:

[..]

Ik dacht dat doordat ik var json; in het begin van het script heb gezet, deze array overal te benaderen was... maar daar zit ik dus fout mee? hoe kan ik wel zorgen dat deze data overal beschikbaar is?

Nooit zulke globale variabelen op deze manier gebruiken! Altijd gewoon meegeven aan de methode die er wat mee doet. Anders krijg je gedonder

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 28 maart 2013 @ 11:21:37 #212

Chandler

@KomtTijd; in de functies searchLocations() en BoundBasedMarkers(map)

kijk maar eens goed, daar wordt deze functie ook aangeroepen!

@Catch22; je zult ongetwijfeld gelijk hebben hoor, maar map wordt ook op zo'n manier gebruikt en dat werkt wel dus vraag mij af waarom dit dan niet werkt... (wil het fijne er eigenlijk van weten..)

Just say hi!

donderdag 28 maart 2013 @ 11:44:04 #213

Catch22-

Ben je Blind?!

quote:
Op donderdag 28 maart 2013 11:21 schreef Chandler het volgende:
@KomtTijd; in de functies searchLocations() en BoundBasedMarkers(map) kijk maar eens goed, daar wordt deze functie ook aangeroepen!

@Catch22; je zult ongetwijfeld gelijk hebben hoor, maar map wordt ook op zo'n manier gebruikt en dat werkt wel dus vraag mij af waarom dit dan niet werkt... (wil het fijne er eigenlijk van weten..)

Dat is omdat er 1 maar 1 map object is, die 1x wordt geset. Die JSon wordt met elke call mogelijk aangepast en dan ga je rare dingen krijgen. Ik gebruik zelf eigenlijk nooit globale (window) variabelen in mijn javascript.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 28 maart 2013 @ 11:45:46 #214

Tijn

Powered by MS Paint

quote:
Op donderdag 28 maart 2013 11:21 schreef Chandler het volgende:
@KomtTijd; in de functies searchLocations() en BoundBasedMarkers(map) kijk maar eens goed, daar wordt deze functie ook aangeroepen!

In Javascript kunnen globale en lokale variabelen dezelfde naam hebben. Het is niet zo dat je de globale variabele "json" bijwerkt op het moment dat je een lokale variabele vult met dezelfde naam.

In jouw code blijft de variabele "json" die je bovenin definieert altijd leeg omdat je 'm nergens een waarde toewijst.

Verberg de nieuwsticker

donderdag 28 maart 2013 @ 11:46:53 #215

Chandler

dus ook in de $.ajax functie niet? daar geef ik toch de parameter json mee?

1	function (json)

Just say hi!

donderdag 28 maart 2013 @ 11:47:00 #216

Tijn

Powered by MS Paint

Het is sowieso een goed idee om een object voor je functionaliteit te maken en die de benodigde properties en methods te geven in plaats van een losse lijst met variabelen en functies.

Verberg de nieuwsticker

donderdag 28 maart 2013 @ 11:47:53 #217

Tijn

Powered by MS Paint

quote:
Op donderdag 28 maart 2013 11:46 schreef Chandler het volgende:
dus ook in de $.ajax functie niet? daar geef ik toch de parameter json mee?
[ code verwijderd ]

Nee, de ajax-functie geeft de data die terugkomt van de server mee in een variabele die json heet. Dit heeft niets te maken met de globale variabele in jouw code die ook json heet.

Verberg de nieuwsticker

donderdag 28 maart 2013 @ 11:48:46 #218

Scorpie

Abject en infaam!

quote:
Op donderdag 28 maart 2013 11:46 schreef Chandler het volgende:
dus ook in de $.ajax functie niet? daar geef ik toch de parameter json mee?
[ code verwijderd ]

Nee.

Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.

donderdag 28 maart 2013 @ 11:50:20 #219

Chandler

quote:
Op donderdag 28 maart 2013 11:44 schreef Catch22- het volgende:
Dat is omdat er 1 maar 1 map object is, die 1x wordt geset. Die JSon wordt met elke call mogelijk aangepast en dan ga je rare dingen krijgen. Ik gebruik zelf eigenlijk nooit globale (window) variabelen in mijn javascript.

Dan zal ik mij daar ook maar aan houden, wil eigenlijk bovenstaande functies zo gaan maken dat ze op welke map dan maar ook te gebruiken zijn... heb nog een hoop te doen!

quote:
Op donderdag 28 maart 2013 11:48 schreef Scorpie het volgende:
Nee.

En waarom niet? please tell me

quote:
Op donderdag 28 maart 2013 11:47 schreef Tijn het volgende:
Nee, de ajax-functie geeft de data die terugkomt van de server mee in een variabele die json heet. Dit heeft niets te maken met de globale variabele in jouw code die ook json heet.

Duidelijk!

Gelijk weer een andere vraag, stel ik wil in mijn createlist functie (die ik nu aanroep met createlist(json)) ook een link toevoegen en wanneer mensen op deze link klikken, dat de map dan centreert naar de 'marker' en eventueel de infowindow opent.. hoe doe je dat? ben al wezen zoeken maar kan er niet zoveel over vinden...

Just say hi!

donderdag 28 maart 2013 @ 11:50:26 #220

Tijn

Powered by MS Paint

quote:
Op donderdag 28 maart 2013 11:21 schreef Chandler het volgende:

(wil het fijne er eigenlijk van weten..)

http://yuiblog.com/crockford/

Verberg de nieuwsticker

donderdag 28 maart 2013 @ 11:51:19 #221

KomtTijd...

Wat Tijn zegt. En dan nog zou het niet werken omdat de functie aanroep niet wacht op de json response. Die moet je op zijn minst verplaatsen naar de success function.

zcflevo.nl

donderdag 28 maart 2013 @ 11:51:47 #222

Chandler

quote:
Op donderdag 28 maart 2013 11:51 schreef KomtTijd... het volgende:
Wat Tijn zegt. En dan nog zou het niet werken omdat de functie aanroep niet wacht op de json response. Die moet je op zijn minst verplaatsen naar de success function.