Forum:

HTML Pages with CSS and JavaScript

Problem getting some code from jsfiddle to work.

Greenhorn

Posts: 3

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Folks, I found some code in jsfiddle that I would like to incorporate into my own site; http://jsfiddle.net/zLjae81b/18/. At the moment I'm just trying to get it working on my site before tailoring it. I've looked at some of the answers on this site and I thought I had covered everything but I can only get it nearly working. Basically the slider in the HTML part isn't showing up. I've downloaded the external resources (ol.css and jquery) tried $(document).ready(function() { and $(window).load(function(){. There are no errors showing up in 'console' mode. Can anyone spot something I may have missed? Thanks.

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>

//$(document).ready(function() {
$(window).load(function(){

function updateIcon(f) {
    f.style.externalGraphic = "marker.png";
    vector.drawFeature(f);
}

options = {
    div: "map",
    zoom: 2,
    center: [0, 0],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};
map = new OpenLayers.Map(options);
vector = new OpenLayers.Layer.Vector();
map.addLayer(vector);

var point1 = new OpenLayers.Geometry.Point(0,0);
var point2 = new OpenLayers.Geometry.Point(1000000, 1000000);
var point3 = new OpenLayers.Geometry.Point(2000000, 2000000);
var radius = $( "#amount" ).val();
 var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon(point2,radius,40,0);
     var featurecircle = new OpenLayers.Feature.Vector(mycircle);

//var selected_polygon_style = {
 //    strokeWidth: 5,
 //    strokeColor: '#ff0000'
//     // add more styling key/value pairs as your need
// };
//
// featurecircle.style = selected_polygon_style;

marker1 = new OpenLayers.Feature.Vector(point1, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
marker1.style = { display: 'none' };

marker2 = new OpenLayers.Feature.Vector(point2, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});

marker3 = new OpenLayers.Feature.Vector(point3, null, {
    externalGraphic: "marker.png",
    graphicWidth: 32,
    graphicHeight: 32,
    fillOpacity: 1
});
vector.addFeatures([marker1, marker2, marker3, featurecircle]);

$( "#slidertest" ).slider({
      range: "max",
      min: 1000000,
      max: 3000000,
      value: 1000000,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
         radius =  $( "#amount" ).val();

vector.removeFeatures([featurecircle]);
var mycircle = OpenLayers.Geometry.Polygon.createRegularPolygon
(
    point2,
    radius,
    40,
    0
);

featurecircle = new OpenLayers.Feature.Vector(mycircle);
vector.addFeatures([featurecircle]);

console.log(radius);

}
    });
    $( "#amount" ).val( $( "#slidertest" ).slider( "value" ) );
$( radius ).val( $( "#slidertest" ).slider( "value" ) );

}); // Closes window.load

</script>
</head>
<body>

<p>
  <label for="amount">Minimum number</label>
  <input type="text" id="amount" value="1000000"  style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slidertest"></div>
<div id="map" style="width:900px;height:600px;"></div>

</body>
</html>

Jeanne Boyarsky

author & internet detective

Posts: 41878

909

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I don't see the problem, but I've added this thread to our JavaScript forum. That way our JavaScript gurus are more likely to see it!

[OCP 17 book] | [OCP 11 book] | [OCA 8 book] [OCP 8 book] [Practice tests book] [Blog] [JavaRanch FAQ] [How To Ask Questions] [Book Promos]
Other Certs: SCEA Part 1, Part 2 & 3, Core Spring 3, TOGAF part 1 and part 2

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

JUnit 5 (verified skill)
Skill verified by Jeanne Boyarsky

Shane Stevens

Greenhorn

Posts: 3

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Jeanne Boyarsky wrote:I don't see the problem, but I've added this thread to our JavaScript forum. That way our JavaScript gurus are more likely to see it!

Hi Jeanne, thanks for that. I've also posted the stylesheet code in case the problem is there.

.ol-control.ol-scale-line{position:absolute;padding:2px}
.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}
.ol-mouse-position{top:8px;right:8px;position:absolute}
.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}
.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}
.ol-overlay-container{will-change:left,right,top,bottom}
.ol-unsupported{display:none}
.ol-viewport 
.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}
.ol-control:hover{background-color:rgba(255,255,255,.6)}
.ol-zoom{top:.5em;left:.5em}
.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}
.ol-rotate
.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.ol-zoom-extent{top:4.643em;left:.5em}
.ol-full-screen{right:.5em;top:.5em}@media print{
.ol-control{display:none}}
.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}
.ol-control button::-moz-focus-inner{border:none;padding:0}
.ol-zoom-extent button{line-height:1.4em}
.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}
.ol-touch 
.ol-control button{font-size:1.5em}
.ol-touch 
.ol-zoom-extent{top:5.5em}
.ol-control button:focus,
.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}
.ol-zoom 
.ol-zoom-in{border-radius:2px 2px 0 0}
.ol-zoom 
.ol-zoom-out{border-radius:0 0 2px 2px}
.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}
.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}
.ol-attribution li{display:inline;list-style:none;line-height:inherit}
.ol-attribution li:not(:last-child):after{content:" "}
.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}
.ol-attribution button,
.ol-attribution ul{display:inline-block}
.ol-attribution.ol-collapsed ul{display:none}
.ol-attribution.ol-logo-only ul{display:block}
.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}
.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}
.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}
.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}
.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}
.ol-zoomslider{top:4.5em;left:.5em;height:200px}
.ol-zoomslider button{position:relative;height:10px}
.ol-touch .ol-zoomslider{top:5.5em}
.ol-overviewmap{left:.5em;bottom:.5em}
.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}
.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}
.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}
.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}
.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The ready handler is preferred over the load handler.

I'd recommen setting a breakpoint in the code and stepping through to find out what part is not doing what you expect. Then you can ask a more targeted question on that part.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Shane Stevens

Greenhorn

Posts: 3

posted 6 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:The ready handler is preferred over the load handler.

I'd recommen setting a breakpoint in the code and stepping through to find out what part is not doing what you expect. Then you can ask a more targeted question on that part.

Thanks Bear Bibeault, I found a better example of what I was after which was commented so I could understand the code.

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?