1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Javascript in a page node

Discussion in 'Troubleshooting and Problems' started by optrex, Aug 23, 2013.

  1. optrex

    optrex Active Member

    I have an html page as below that I would like to put as a page node

    HTML:
    <html>
    <head>
    <title>Open Weather Map</title>
        <style type="text/css">
            #map {
                width: 100%;
                height: 99%;
                border: 1px solid black;
            }
        </style>
    
    </head>
    <body  onload="init()">
    <div id="basicMap"></div>
    </body>
    
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
    
    <script type="text/javascript">
    var map;
    function init() {
    
        //Center  ( mercator coordinates )
        var lat = 7486473;
        var lon = 4193332;
    
    // if  you use WGS 1984 coordinate you should  convert to mercator
    //    lonlat.transform(
    //        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    //        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
    //    );
    
        var lonlat = new OpenLayers.LonLat(lon, lat);
    
            map = new OpenLayers.Map("basicMap");
    
        // Create overlays
        // map layer OSM
            var mapnik = new OpenLayers.Layer.OSM();
        // Create station layer
        var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
        // Create weather layer
        var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
    
        //connect layers to map
        map.addLayers([mapnik, stations, city]);
    
        // Add Layer switcher
        map.addControl(new OpenLayers.Control.LayerSwitcher());         
    
        map.setCenter( lonlat, 10 );
    }
    </script>
    </html>
    I think it should be like this in my page node

    Code:
    <div class="messageText ugc baseHtml">
    
        <style type="text/css">
            #map {
                width: 100%;
                height: 99%;
                border: 1px solid black;
            }
        </style>
    
    
    <div id="basicMap"></div>
    
    
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
    
    <script type="text/javascript">
    var map;
    function init() {
    
        //Center  ( mercator coordinates )
        var lat = 7486473;
        var lon = 4193332;
    
    // if  you use WGS 1984 coordinate you should  convert to mercator
    //    lonlat.transform(
    //        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    //        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
    //    );
    
        var lonlat = new OpenLayers.LonLat(lon, lat);
    
            map = new OpenLayers.Map("basicMap");
    
        // Create overlays
        // map layer OSM
            var mapnik = new OpenLayers.Layer.OSM();
        // Create station layer
        var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
        // Create weather layer
        var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
    
        //connect layers to map
        map.addLayers([mapnik, stations, city]);
    
        // Add Layer switcher
        map.addControl(new OpenLayers.Control.LayerSwitcher());         
    
        map.setCenter( lonlat, 10 );
    }
    </script>
    </div>
    But I cant get it to display. Any suggestions please?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Typically I put the CSS first, then the javascript and then the content last.

    You have the javascript and css enclosed in the content div - move it outside it.
    For example:
    Code:
    <style type="text/css"> #map { width: 100%; height: 99%; border: 1px solid black; } </style>
    
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
    <script type="text/javascript">
    Code
    </script>
    
    <div class="messageText ugc baseHtml">
    Content
    </div>
    
     
  3. optrex

    optrex Active Member

    hmm, I still cant get it to display. How do I ensure all CSS is ignored within the article section?
     

Share This Page