I am new at this. I have cobbled together code from various examples. I am trying to create a map with a search widget and in which the popup info comes up in the bar at the bottom. I can't seem to do both.
When parser.parse() is commented out:
(1) the search widget appears, but doesn't have full functionality (no popup, no zoom).
(2) the popup information does not appear in the bottom bar
When parser.parse() isn't commented out, the search widget does not appear at all, but the popup information shows in the bottom bar when I click a feature.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Garbage and Recycling</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans">
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#search{
display:block;
background-color: white;
position: absolute !important;
top: 20px;
right: 20px;
}
#container{
width: 100%;
position: absolute;
bottom:0;
background-color:rgba(0,0,0,0.8);
color: white;
}
#instructionDiv{
font-style:italic;
}
#zoneDiv{
font-weight: bold;
padding-bottom:0;
}
#linkDiv{
padding-top:0;
}
#garDiv{
padding-bottom: 0;
}
#recDiv{
padding-top:0;
}
#map {
padding:0;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
require([
"dojo/on",
"dojo/_base/connect",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"esri/dijit/Popup",
"esri/dijit/Search"
],
function(
on,
connect,
dom,
registry,
domConstruct,
parser,
BorderContainer,
ContentPane,
Map,
arcgisUtils,
domUtils,
Popup,
Search
)
{
//parser.parse();
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("5cdc921a8e2d4eb08ab64a63d1c46e23", "map").then
(function(response){
var map = response.map;
//set infoWindow to false
map.infoWindow.set("popupWindow", false);
initializeBottomBar(map);
//create Search
var search = new Search({map:map, enableInfoWindow: true, zoomScale: 1000}, "search");
search.startup();
});
//initialize Bottom Bar (bottom)
function initializeBottomBar(map){
var popup = map.infoWindow;
//when the selection changes, update the info bar
connect.connect(popup, "onSelectionChange", function(){
displayContent(popup.getSelectedFeature());
});
connect.connect(popup, "onSetFeatures", function(){
displayContent(popup.getSelectedFeature());
});
}
function displayContent(feature){
if(feature){
var content = feature.getContent();
registry.byId("zoneDiv").set("content", content);
}
}
});
</script>
</head>
<body class="claro">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="width: 100%; height: 100%">
</div>
<div id="search" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="container" data-dojo-type="dijit/layout/ContentPane">
<div id="instructionDiv" data-dojo-type="dijit/layout/ContentPane">Click a collection zone on the map for more details.</div>
<div id="zoneDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="linkDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="descDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="garDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="recDiv" data-dojo-type="dijit/layout/ContentPane"></div>
</div>
</body>
</html>
include this at the end of your require array
"dojo/domReady!"
no need to put a matching argument in the function though you can for completeness and to avoid issues when you inevitably add another module to require and forget to re-order the arguments so "dojo/domReady!" comes last.
EDIT:
additionally for any widget code you should include "dojo/ready" in the require array and then wrap the widget code in
ready(function(){..widget code goes here...})
See this codepen for a working example
See my answer to this question for more details
Related
I am triying to install a floating likebox in prestashop website
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
</div>
</div>
The problem that all website break when i add jquery in head
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
How to use this code without jquery.min.js?
I think that jquery are included in prestashop
Bxslider slider shown only one slide, space between slider is very big or what is problem i can't figure out
it shows 1 slide after scorollin 2nd slide e.t.c.
but i want to 5 slidere scrolling alway like carousel
.bx-wrapper {
position: relative;
margin: 0 auto 20px;
padding: 0;
*zoom: 1;
width: 780px;
height: 100px;
}
.bx-wrapper img {
max-width: 20%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
border: 5px solid #fff;
left: -5px;
background: #fff;
}
Thanks!
this sample, i need auto too, in this example, http://bxslider.com/examples/carousel-dynamic-number-slides
SCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
HTML
<ul class="bxslider">
<li><img src="images/logo1" /></li>
<li><img src="images/logo2" /></li>
<li><img src="images/logo3" /></li>
<li><img src="images/logo4" /></li>
</ul>
<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/js/bxslider/jquery.bxslider.css" rel="stylesheet" />
Strange thing,
I added your code, now no scrolling and everything is vertical not horizontal.
I'm edited before something, but not js, I think something going wrong, but can't figure out
<script type="text/javascript">
$(function() {
var bx = $('.bx').bxSlider({
auto: true,
autoControls: true,
minSlides: 5,
maxSlides: 5,
moveSlides: 5,
slideWidth: 120
})
})
</script>
I am rasterizing the following simple html+svg+foreignObject html
<html>
<head>
<meta charset="UTF-8">
<!--reset stylesheet -->
<link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />
<style>
p {
border: 1px solid red;
font-size: 15px !important;
}
svg {
outline: 1px solid purple;
}
</style>
</head>
<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">
<svg style="width: 1050px; height: 750px;">
<foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Oh when the sun begins to shine.</p>
</body>
</foreignobject>
</svg>
</body>
</html>
using this simple rasterization script:
webPage = require 'webpage'
args = (require 'system').args
url = args[1]
destination = args[2]
page = webPage.create()
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
#page.zoomFactor = 1.991
#page.viewportSize = (width: 1050, height: 75)
page.open url, (status) ->
if status isnt 'success'
console.log "Error!", url, status
return phantom.exit()
rasterize = ->
page.render destination
console.log "Rasterized", url, "to", destination
return phantom.exit()
setTimeout rasterize, 100
As you can see, the sizing of the single visible element is 1050px x 750px. I would like to rasterize this exactly onto a 10.5in x 7.5in paper size at 100% the size.
My rasterization script does:
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
which turns out with a pdf like this:
So that doesn't scale to full-size. I can adjust to full-size by adjusting the zoom factor. experimentally I've found that this works
page.zoomFactor = 1.991
Now the element scales properly but the fonts are scaled up too much.
How do I take the left/topmost 1050px/750px of the page ans scale it to exactly 10.5inx7.5in on paper while maintaining the original font size?
Have you already tried with media queries on css?
webPage = require 'webpage'
args = (require 'system').args
url = args[1]
destination = args[2]
page = webPage.create()
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'#
page.zoomFactor = 1.991# page.viewportSize = (width: 1050, height: 75)
page.open url, (status) - >
if status isnt 'success'
console.log "Error!", url, status
return phantom.exit()
rasterize = - >
page.render destination
console.log "Rasterized", url, "to", destination
return phantom.exit()
setTimeout rasterize, 100
#media print {
body {
margin: 0;
background-image: none;
height: 10.5in;
width: 7.5in;
}
}
p {
border: 1px solid red;
font-size: 8pt !important;
}
svg {
outline: 1px solid purple;
}
<link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />
<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">
<svg style="width: 1050px; height: 750px;">
<foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Oh when the sun begins to shine.</p>
</body>
</foreignobject>
</svg>
</body>
I'm using iScroll 5 to scroll + zoom an iframe within an asp.net page.
Here is a Demo
In FireFox it seems to be freezing on mouse wheel. In all other browsers its working great. Any idea why this behavior in FF only?
Thanks in advance,
Jake
Edit: Here is the code for the page in question.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Schematic Diagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<base target="_parent" href="PartSchematics3.aspx?id=<%= schematicID.ToString()%>" />
<script type="text/javascript" src="Common/iscroll-zoom.js"></script>
<script type="text/javascript">
var scroll;
function loaded() {
scroll = new IScroll('#wrapper', {
scrollbars: true,
interactiveScrollbars: true,
freeScroll: true,
scrollX: true,
scrollY: true,
zoomMin: 0.37,
zoomMax: 4,
momentum: false,
onBeforeScrollStart: null,
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
});
scroll.zoom(0.37, 0, 0, 1000);
}
//disables browser mouse scrolling
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
function wheel(event) {
event.preventDefault();
event.returnValue = false;
}
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
padding:0px;
border-spacing:0px;
background-image: none;
margin: 0px;
border: 0;
text-align: left;
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body onload="loaded()">
<form id="form1" runat="server">
<div id="wrapper">
<div id="scroller">
<asp:Literal ID="litSchematicImageMap" runat="server"></asp:Literal>
</div>
</div>
</form>
</body>
</html>
Seems like an copy&paste error in iScroll-zoom.js in the _wheelZoom function:
wheelDeltaY = -e.detail / Math.abs(e.wheelDelta);
should be
wheelDeltaY = -e.detail / Math.abs(e.detail);
I have a set up where I have three squares, the first two are set up to fade away when the third one is clicked. When you click it what happens though is the first two just disappear, no fading, I can't really figure out why, any thoughts?
http://jsfiddle.net/6fSEz/
that's the fiddle and this is the code by itself:
<html>
<head>
<style>
.box
{
opacity:1;
color: white;
width: 100px;
height: 100px;
}
#box1
{
background-color: green;
}
#box2
{
background-color: red;
}
#box3
{
background-color: blue;
}
.fadeAway1
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
.fadeAway2
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 5s;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"
class="box">Tap to fade</div>
</body>
</html>
Thanks in advance for any help.
In the click function you are removing the styles applied by the ".box" class styles. This removes the width and height, etc. Also, CSS and JavaScript are case-sensitive. Capitalization between selectors must match the element attributes, exactly.
Updated jsfiddle: jsfiddle.net/6fSEz/2/