Popup not popping UP??

CliveSwan · ‎03-13-2012

I have an informaton window to display the query, when the user clicks on the point.

In the ESRI example the Information window finds space eg if at the corner of the map.
The Information Window is below the point, does not move or Pop UP??

The code that I am updating, the Information Window remains hidden. You can only see a portion of the window, if the point if at the edge of the map??

I cannot see where the Information page is called in the WebPage????
I cannot get the Information Page to POP UP or appear within the Map Window, on the edge of the map??

Any suggestions appreciated!!

Web Page code below
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>City Mapping - COLGIS v0.01</title>

        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
        <script type="text/javascript" src="javascript/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dojox/grid/resources/claro.css" />
        <script type="text/javascript" src="myModules/infoWindow.js"></script>
        <link rel="stylesheet" type="text/css" href="myModules/infoWindow.css"   />
        <link rel="stylesheet" type="text/css" href="myModules/colgis.css" />
        <link rel="stylesheet" type="text/css" href="myModules/BingMapControl.css" />
        <script type="text/javascript" src="myModules/col_common.js" ></script>
        <script type="text/javascript" src="myModules/colgis.js" ></script>
        <link href="css/screen.css" media="screen" rel="stylesheet" type="text/css" />
     </head>

<body class="claro" >
    <div id="mainMapWindow" >
        
        <div id="header" style="background-color:white;position:relative;height:60px;width:100%; border-bottom: 0px solid #dcdcdc; padding-bottom: 1px;">

            <div id="logo" >
                <img alt="City " src="images/interface/logo-_Small.png" />
            </div>
            <div id="headerText">
                <h2>City - COLGIS</h2>
             </div>
            <div style="clear:both;"></div>
        </div>
       <div style="clear:both;"></div>


</body>
</html>

>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>

Information Window code below
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>
/**
* @name Custom info Window
* @version 1.0
* @author: L I D 2012-02-10 Adpadted with slight variations from ESRI JSAPI
* @fileoverview
* <p>Requires infoWindow.css</p>
*/

dojo.provide("myModules.InfoWindow");

dojo.require("esri.InfoWindowBase");
dojo.require("dojo.fx");
/***************
* MyInfoWindow
***************/
dojo.declare("myModules.InfoWindow", [ esri.InfoWindowBase ], {


constructor: function(parameters) {
    dojo.mixin(this, parameters);

    isContentShowing: false;


    dojo.addClass(this.domNode, "myInfoWindow");

    this._closeButton = dojo.create("div", { "class": "close", title: "Close" }, this.domNode);
    this._title = dojo.create("div", { "class": "title" }, this.domNode);
    this._content = dojo.create("div", { "class": "content" }, this.domNode);

    //this._toggleButton = dojo.create("div",{"class": "toggleOpen", title:"Toggle"},this.domNode);

    /*
      var toggler = new dojo.fx.Toggler({
        node: this._content,
        showFunc: dojo.fx.wipeIn,
        hideFunc: dojo.fx.wipeOut
      });

     toggler.hide();
     */

    this._eventConnections = [
      dojo.connect(this._closeButton, "onclick", this, function(){
        this.hide();
        //hide the content when the window is closed so it displays in closed state next time it opens.
        if(this.isContentShowing)
        {
          //toggler.hide();
          this.isContentShowing = false;
          //dojo.removeClass(this._toggleButton);
          //dojo.addClass(this._toggleButton,"toggleOpen");
        }
      })/*,


      dojo.connect(this._toggleButton,"onclick",this,function(){
        //animate the display of content
        if(this.isContentShowing){
          toggler.hide();
          this.isContentShowing = false;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleOpen");
        }else{
          toggler.show();
          this.isContentShowing=true;
          dojo.removeClass(this._toggleButton);
          dojo.addClass(this._toggleButton,"toggleClose");
        }

      })*/
    ];

    // Hidden initially
    esri.hide(this.domNode);
    this.isShowing = false;
},

/*****************************************
   * Override and implement methods defined
   * by the base class: InfoWindowBase
   *****************************************/

setMap: function(map) {
    // Run logic defined in the base class
    this.inherited(arguments);

    // hide the info window when the user is focusing elsewhere.
    this._eventConnections.push(dojo.connect(map, "onPanStart", this, this.hide));
    this._eventConnections.push(dojo.connect(map, "onZoomStart", this, this.hide));
},

setTitle: function(title) {
    this.place(title, this._title);
},

setContent: function(content) {
    this.place(content, this._content);
},

show: function(location) {
    // Is location specified in map coordinates?
    if (location.spatialReference) {
      location = this.map.toScreen(location);
    }

    // Position 10x10 pixels away from the
    // requested location
    dojo.style(this.domNode, {
      left: (location.x + 10) + "px",
      top: (location.y + 10) + "px"
    });

    // Display
    esri.show(this.domNode);
    this.isShowing = true;
    this.onShow();
},
hide: function() {
    esri.hide(this.domNode);
    this.isShowing = false;
    this.onHide();
},

resize: function(width, height) {
    dojo.style(this._content, {
      width: width + "px",
      height: height + "px"
    });
    dojo.style(this._title,{
      width: width + "px"
    });
},

/************************************
   * Defining some methods specific to
   * my info window
   ************************************/

destroy: function() {
    dojo.forEach(this._eventConnections, dojo.disconnect);
    dojo.destroy(this.domNode);
    this._closeButton = this._title = this._content = this._eventConnections = null;
}

});

CliveSwan · ‎03-13-2012

This block works ie no fault (NO POP UP).
The imageWindow goes under another layer (<DIV>)

map.infoWindow.setTitle("Identify Results");
map.infoWindow.setContent(tc.domNode);
map.infoWindow.resize(360, 200);
map.infoWindow.show(event.screenPoint, map.getInfoWindowAnchor(event.screenPoint));

When I add the line below, I get an error???
map.infoWindow:popup,extent:initExtent;