[OpenLayers-Users] OpenLayers Popups with JQuery Accordion

Mon Dec 16 12:42:55 PST 2013

Hello,

I am trying to add JQuery Accordion styling to an OpenLayers FramedCloud
popup. I copied the sample HTML JQuery accordion code from the JQuery
website and tried to add the HTML to the popup. All of the text appears in
the popup, but the accordion styling is never applied.

I copied the same HTML to JSFiddle and the accordion is applied. 

Is it possible that OpenLayers doesn't support JQuery accordion styling in
FramedCloud popups? The HTML I used is below. If anyone has tried to apply
JQuery accordion styling to popups and has any ideas on how to incorporate
this feature I would appreciate the help. Thanks!

HTML = 
'<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI
Accordion - Default functionality</title><link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><link
rel="stylesheet" href="/resources/demos/style.css"></head><body><div
id="accordion">
Section 1
<div><p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum
sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque
vulputate.</p></div>
Section 2
<div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit
ametpurus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
porttitorvelit, faucibus interdum tellus libero ac justo. Vivamus non quam.
Insuscipit faucibus urna.</p></div>
Section 3
<div><p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac
liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna
quislacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis
dui.</p><ul><li>List item one</li><li>List item two</li><li>List item
three</li></ul></div></div></body></html>'

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            selectedFeature = feature;
            while (map.popups.length) {
                map.removePopup(map.popups[0]);
            }

            popup = new OpenLayers.Popup.FramedCloud("feature",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                HTML,
                null,
                true,
                null);
            popup.panMapIfOutOfView = true;
            popup.autoSize = true;
            feature.popup = popup;
            map.addPopup(popup);
        }
    }

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/OpenLayers-Popups-with-JQuery-Accordion-tp5094531.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.