Question

I have been dealing with this problem for almost three days now so I guess my failed researches and trial and error of the concept I formulated are enough. Here’s the scenario:

I use open layers map. I generate markers. On hover with these markers i need to show a label “View Details” using the popup framed dialog. Once “View Details” is clicked, I need to load jpg file which is a top view screen shot of that particular place corresponding the marker in my map. I can do it successfully, I click “View Details” and I can show the image. But the big problem is, the four edges of my popup framed cloud are scattered around and its content is transparent with the image floating in the middle.

I attached an inline “onclick attribute” for the view details label:

fromImage = '<img src="'+data['map_locations'][key]['image_url']+'" class="ImageFrom"></img><label type="button" class="location_image_container" onclick="show_location_details()">VIEW DETAILS</label>';

and this is the function it calls everytime view details is clicked

function show_location_details(){
    jQuery('#cloud_dialog_details_link').hide();
    jQuery('.olFramedCloudPopupContent').width(500);
    jQuery('.olFramedCloudPopupContent').height(400);
    jQuery('.olPopup').height(400);
    jQuery('.olPopup').width(500);
    jQuery(".ImageFrom").show();
}

Any idea how can I make my popup framed cloud behave the way i want it to behave?

Thank you guys for any inputs.

[EDIT]
hi. To make things clear, I declared a global ‘AutoSizeFramedCloud’ in my script

AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud,{'autosize':true});

And inside a function, I set its initial constructor:

function addMarkers(lonlat, marker_name, description, id, label, subgroup, category){
        var ll,popupClass,popupContentHTML,marker,popupContentDiv;
        ll = lonlat;
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = description+label;
        marker = marker_name;
        popupContentDiv = id;
        popupGroupDiv = subgroup;
}

And by the time I clicked the ‘View Details’ label which is inside my popup:

<label type="button" class="location_image_container" onclick="show_location_details()">VIEW DETAILS</label>

I am calling function show_location_details()

function show_location_details(){
        this.popup.setSize(new OpenLayers.Size(500, 400));
        //alert(jQuery('popup.contentDiv').val());
        jQuery('#cloud_dialog_details_link').hide();
        jQuery('.olPopup').width(600);
        jQuery('.olFramedCloudPopupContent').width(480);
        jQuery('.olPopup').height(500);
        jQuery('.olFramedCloudPopupContent').height(380);
        jQuery(".ImageFrom").show();
    }

However, it gives me the error:

Uncaught TypeError: Cannot call method 'setSize' of undefined 

[EDIT]

Here’s how i create the features of my popup

function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow, marker_name, popupContentDiv, popupGroupDiv, category){
        var feature = new OpenLayers.Feature(marker_name, ll);
        feature.closeBox = closeBox;
        feature.popupClass = popupClass;
        feature.data.popupContentHTML = popupContentHTML;
        //feature.data.overflow = (overflow) ? "auto":"hidden";
        feature.data.icon = new OpenLayers.Icon("./img/icon/blank.png", size);
        feature.data.contentDiv = popupContentDiv;
        feature.data.groupDiv = popupGroupDiv;

...
}

Answer 1

Popup is made from lot of different DIV’s, don’t try to change their size directly, use appropriate methods of popup instead: setSize(contentSize), which takes size as parameter; or updateSize(), which auto-sizes popup to fit it’s content: http://dev.openlayers.org/docs/files/OpenLayers/Popup-js.html#OpenLayers.Popup.setSize

var myPopup = new OpenLayers.Popup.FramedCloud({
...    


myPopup.setSize(new OpenLayers.Size(500, 400));
// Or...
// myPopup.updateSize();