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);
Related
I have setup a Firebase Web Login with Email/Password sign in locally on my computer. I want to implement it on my domain, which is hosted by a web hosting company, so my domain and all it's catalogues are password protected.
Is this possible? Where/how do I configure this?
I have supplied my current setup as a snippet.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
document.getElementById('signed-in').style.display = "block";
document.getElementById('sign-in').style.display = "none";
} else {
// No user is signed in.
document.getElementById('signed-in').style.display = "none";
document.getElementById('sign-in').style.display = "initial";}
});
const form = document.getElementById("sign-in-form");
form.addEventListener("submit", login);
function login(event) {
event.preventDefault();
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
document.getElementById('error-message').textContent = errorMessage;
document.getElementById('error-message-div').style.display = "block";
});
}
body, html {
font-family: 'Nunito', sans-serif;
color: #999;
}
a {
color: #57b846;
text-decoration: none;
}
a:hover {
color: black;
}
#wrapper {
margin: 0;
position: absolute;
padding-bottom: 50px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
border-radius: 20px;
box-shadow: 0px 3px 20px 0px; #000;
}
#sign-in-header {
padding: 10px;
color: white;
font-weight: 700;
text-align: center;
background-color: #57b846;
border-radius: 20px 20px 0 0;
}
#sign-in-body {
box-sizing: border-box;
padding: 50px 50px 0 50px;
}
input {
outline: none;
box-sizing: border-box;
font-weight: 600;
font-size: 15px;
color: #1b3815;
line-height: 1.2;
width: 100%;
height: 55px;
background: #ebebeb;
border: none;
border-radius: 25px;
padding: 0 35px 0 35px;
}
#email {
margin-bottom: 15px;
}
input[type=submit] {
color: white;
background-color: #57b846;
padding: 0 35px 0 35px;
margin-bottom: 15px;
cursor: pointer;
margin-top: 20px;
}
input[type=submit]:hover {
background-color: #2e7522;
}
#forgot-password {
text-align: right;
}
#signed-in {
display: none;
}
#error-message-div {
box-sizing: border-box;
font-weight: 600;
font-size: 15px;
color: #D8000C;
width: 100%;
background: #FFBABA ;
border: none;
padding: 10px;
border-radius: 5px;
}
#error-message-div {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - The Meadow</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div id="wrapper">
<div id="sign-in">
<div id="sign-in-header">
<h1>Sign In</h1>
</div>
<div id="sign-in-body">
<form id="sign-in-form">
<input type="text" id="email" name="email" placeholder="E-mail"><br>
<input type="password" id="password" name="password" placeholder="Password"><br><br>
<div id="forgot-password">Forgot Username / Password?</div>
<input type="submit" value="SIGN IN">
</form>
<div id="error-message-div"><strong><span id="error-message"></span></strong></div>
</div>
</div>
<div id="signed-in">You are signed in</div>
</div>
</section>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBHoY2Vjhw6fbI6abd_osRzbkfgAZA5yt4",
authDomain: "fir-web-login-3b6c2.firebaseapp.com",
databaseURL: "https://fir-web-login-3b6c2.firebaseio.com",
projectId: "fir-web-login-3b6c2",
storageBucket: "fir-web-login-3b6c2.appspot.com",
messagingSenderId: "569718654639",
appId: "1:569718654639:web:51b3518dc6a0096c58765a",
measurementId: "G-G034W12YF0"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="index.js"></script>
</body>
</html>
Firebase Authentication can be used on any hosting provider.
It can also be used with any custom domain, no matter where you registered that domain. Just be sure to add the custom domain to the list of Authorized domains in the Firebase Authentication console.
I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
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 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
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>