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>
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 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
Our server returns ads to the publisher's app (android/iOS apps). Let's consider this case where the returned ad is an HTML with img tags containing remote images (resources stored in third party servers of ad networks). Something like this -
<!DO CTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Untitled Document</title>
<style> #ad{ margin: 0px auto 0 auto; width: 308px; padding: 5px; height: 38px; border: 1px solid #ddd; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color:#fff; text-align:left; } #ad h3{ padding: 0; margin: 0; color:#0067FF; font-weight: normal; font-size: 12px; } #ad a { color:#009C00; font-size: 10px; text-decoration:none; margin: 0; padding: 0; } #ad p.description { margin: 0; padding: 0; font-size: 8px; margin-bottom: 10px; } .ad_label{ margin: 0 auto 0 auto; text-align: center; color: #a09f9f; font-size: 12px; padding: 3px 0 0 0; } </style>
</head>
<body>
<div id="ad">
<h3>Junk-A-Car</h3>
yp.com/reviews
<p class="description">Find Local Automobile Salvage Need Help? Click Here!</p>
</div>
<img src="http://imp.admarketplace.net/imp?id=7R7wxEzkiFdwxr3NJGbzfQbX4BkW4BkXfYbW1C\WfQ\W4p\W4pH+7RcdIG7+GmwqgClkfZldfQ8XfQ2Xfp2XfpbW4Z8nxnEZGmzYI=EYgCbnHF3QJre+GmwqgClrfpf+fCDW7ncQHmzdJR3KiF2zfQld4C2nimE+jmzYIczvIpkY4Zq+fp8Yfp2nxr7kgCbnxGEwxRwKj=EYJCdQHG7Z7nckxZkX1CbZfQxZ1pHnHncZIEzQx=fzfBaafpbnHF4kjFcTGm4WHZkX5QLWftInIFEqGr4wxRIwxQdw5GNuJtkkfBIdxr7KImEVGmwqgGTOxY8PfCDX5t7Q8Q\kfZ2T8n4V8Q\Y5t7q8Q\dfplT8R\O1QlXfQfrKBIWjF7KiF2zfCb+4Q2nHnwqI=EYGmwqgCby" width="1" height="1" />
</body>
</html>
<img src="http://54.204.70.10/fam/view.php?p=__pid=4e17aeb00411789d__sid=102175__bid=1259380__cb=e56d08f1c9__h=1431522124__acp=800660a03aab58e96ec93211c5fc5db6__s=f398b7b975fb896b27fed55d213f6687" alt="" width="1" height="1" />
Questions
Do the images resources get cached, by default, on client side and the same get rendered on subsequent ad requests? If not, can it be enforced from server side, by passing "necessary" headers?
I tried testing with fiddler, and always observed "200 Ok" status being displayed for same images.
How do I know when a cached image is loaded?
Updates
Updated ad response format - HTML format.
The server generatng the HTTP protocol response is responsible for sending cache control headers along with it indicating whether it is permitted to be cached and if so whether the server needs to be informed before each use.
This blog begginners guide is a good place to start for details. Then move on to the RFC 7234 caching specification itself
I have problem with jssor slider. It only show me first photo. I think the problem is in the responsive code.
I want make full width and full height slider, also fully responsive. When open on smaller devices it cut photo. Please help.
Please help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider with Slideshow Example - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="background:#fff;">
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{$Duration:1200,x:1,$Delay:50,$Cols:8,$Rows:4,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad},$Opacity:2}
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
var scaleWidth = windowWidth;
if (originalWidth / windowWidth > originalHeight / windowHeight) {
scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
}
jssor_slider1.$ScaleWidth(scaleWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<!-- ORIGINAL SLIDER!!!!!!!!!!!!!
<div id="slider1_container" style="position: relative; width: 600px;
height: 300px;"> END!!!!!!!!!!!!!!!!!!!! -->
<div style="position: relative; width: 100%; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
<!-- use 'margin: 0 auto;' to auto center element in parent container -->
<div id="slider1_container" style="margin: 0 auto;" >
</div>
</div>
</div>
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; height: 100%;
overflow: hidden;">
<div>
<img u=image src="../img/landscape/01.png" />
</div>
<div>
<img u=image src="../img/landscape/02.png" />
</div>
<div>
<img u=image src="../img/landscape/03.jpg" />
</div>
<div>
<img u=image src="../img/landscape/04.jpg" />
</div>
</div>
<a style="display: none" href="http://www.jssor.com">jquery content slider</a>
</div>
</body>
</html>
See http://www.jssor.com/testcase/full-screen-slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider with Slideshow Example - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="background:#fff; margin: 0px; overflow: hidden;">
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/slider-with-slideshow-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, x: 1, $Delay: 50, $Cols: 8, $Rows: 4, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 }
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
var scaleWidth = windowWidth;
if (originalWidth / windowWidth > originalHeight / windowHeight) {
scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
}
jssor_slider1.$ScaleWidth(scaleWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<div style="position: relative; width: 100%; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div>
<img u=image src="../img/landscape/01.jpg" />
</div>
<div>
<img u=image src="../img/landscape/02.jpg" />
</div>
<div>
<img u=image src="../img/landscape/03.jpg" />
</div>
<div>
<img u=image src="../img/landscape/04.jpg" />
</div>
</div>
<a style="display: none" href="http://www.jssor.com">jquery content slider</a>
</div>
</div>
</div>
</body>
</html>
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);