jquery - Dynamic div displaying incorrectly -


i have dynamic legend being added leaflet map.

my issue div.innerhtml +='</div>' gets called before if statements , statement have finished.

i've been looking callbacks i'm stuck after hours of looking @ this, , seem going in circles

/*legend control */ function maplegendcontrol() {   dynamicmaplegend = l.control({     position: 'topright'   });   dynamicmaplegend.onadd = function(map) {     var div = l.domutil.create('div', 'legend'),       legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],       legendlabels = ["blue", "red", "green"];     div.innerhtml += '<div class="legend-inner-top">' + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">legend</strong></div>' + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closelegend"></button></div>' + '</div>' + '<div class="legend-inner-bottom">'     if (map.haslayer(jungle)) {       // loop through our density intervals , generate label colored square each interval       (var = 0; < legendcolors.length; i++) {         div.innerhtml +=           '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";       }     }     if (map.haslayer(tropical)) {       div.innerhtml += '<i><img src="assets/img/legend-tropical.png" alt="tropical icon" height="18" width="18"></i>' + 'tropical' + "<div style='margin-top: 10px;'></div>";     }     if (map.haslayer(forest)) {       div.innerhtml += '<i><img src="assets/img/legend-forest.png" alt="forest icon" height="18" width="18"></i>' + 'forest' + "<div style='margin-top: 10px;'></div>";     }     div.innerhtml += '</div>'     return div;   }   dynamicmaplegend.addto(map); }

one problem here .innerhtml doesn't work way you're expecting. it's not document.write() can write things html page piecemeal, <div> , </div> , things in between written out separately.

this may why appears </div> being added early: if assign .innerhtml , don't close tags, browser you. first .innerhtml assignment near top of onadd() doesn't leave tags open document.write() do, closes them right there. that's why other tags written below aren't getting nested inside.

if use .innerhtml should create string complete dom fragment in it, , after string built, assign entire string .innerhtml.

starting code have now, direct translation be:

/*legend control */ function maplegendcontrol() {   dynamicmaplegend = l.control({     position: 'topright'   });   dynamicmaplegend.onadd = function(map) {     var div = l.domutil.create('div', 'legend'),       legendcolors = ["#7c7c7c", "#9d2a2a", "#26a82f"],       legendlabels = ["blue", "red", "green"],       html = '';     html += '<div class="legend-inner-top">' + '<div class="legend-inner-top-m" style="padding-top: 3px color: #e3e3e3;"><strong style="color: #e3e3e3">legend</strong></div>' + '<div class="legend-inner-top-m" style="float: right;"><button type="button" class="btn btn-xs btn-legend closelegend"></button></div>' + '</div>' + '<div class="legend-inner-bottom">'     if (map.haslayer(jungle)) {       // loop through our density intervals , generate label colored square each interval       (var = 0; < legendcolors.length; i++) {         html +=           '<div style="margin-top: 10px;"><i style="background:' + legendcolors[i] + '"></i>' + legendlabels[i] + "</div>";       }     }     if (map.haslayer(tropical)) {       html += '<i><img src="assets/img/legend-tropical.png" alt="tropical icon" height="18" width="18"></i>' + 'tropical' + "<div style='margin-top: 10px;'></div>";     }     if (map.haslayer(forest)) {       html += '<i><img src="assets/img/legend-forest.png" alt="forest icon" height="18" width="18"></i>' + 'forest' + "<div style='margin-top: 10px;'></div>";     }     html += '</div>';     div.innerhtml = html;     return div;   }   dynamicmaplegend.addto(map); }

-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more