I need to perform a certain function on "resize" event and after the zoom in/zoom out on ipad. First I did oun event and raise "resize" event in listener:
ZoomHelper = (function () {
var zoomListeners = [];
var viewportScale = 1;
var polling = false;
function pollZoomFireEvent() {
var widthNow = window.innerWidth;
currentViewportScale = (window.screen.width / window.innerWidth).toPrecision(3);
if (currentViewportScale != viewportScale) {
viewportScale = currentViewportScale;
for (var i = 0; i < zoomListeners.length; i++) {
zoomListeners[i]();
}
}
if (polling)
setTimeout(arguments.callee, 500);
}
function startPollingIfNeeded() {
if (zoomListeners.length == 1) {
polling = true;
pollZoomFireEvent();
}
}
function stopPollingIfNeeded() {
if (zoomListeners.length < 1) {
polling = false;
}
}
return {
addZoomListener: function (func) {
zoomListeners.push(func);
startPollingIfNeeded();
},
removeZoomListener: function (func) {
index = zoomListeners.indexOf(func);
zoomListeners.slice(index, 1);
stopPollingIfNeeded();
}
}
})();
But later I found that if a page has at least one element with fixed positioning then the "resize" event raise automatically after zoom in or zoom out:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script>
window.onresize = onResize;
function onResize(e) {
console.log("resize");
}
</script>
</head>
<body>
<div style="position:fixed; border:5px solid red; width:50px; height:50px;">
</div>
</body>
</html>
Is it normal behaviour? Which of these variants is better to use? Or is there some better way to raise "resize" event after zoom?
Related
In TFS it is possible to get build historical data on start screen. So when you log into TFS you immediately see the status of your builds. Can the same be achieved for displaying Code Coverage? This is something that SonarCube definitely does nicely.
There isn’t the feature of include Code Coverage result in start screen. But you can custom dashboard widget with test REST API to achieve that.
A simple sample to custom dashboard:
<!DOCTYPE html>
<html>
<head>
<title>Custom widget</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles:true
});
VSS.require(["TFS/Dashboards/WidgetHelpers","TFS/TestManagement/RestClient"], function (WidgetHelpers,TFS_Test_WebApi) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("WidgetStarain", function () {
var projectId = VSS.getWebContext().project.id;
var getCodeCoverage = function (widgetSettings) {
return TFS_Test_WebApi.getClient().getBuildCodeCoverage(projectId, 252)
.then(function (buildCoverage) {
var $codeCoverageResult = $('div.codeCoverage');
var $codeCoverageObject = buildCoverage.coverageData[0].coverageStats;
var $detailResult = $codeCoverageObject[0].label + ": Total:" + $codeCoverageObject[0].total + ";covered:" + $codeCoverageObject[0].covered;
$codeCoverageResult.text($detailResult);
//$codeCoverageResult.text(JSON.stringify(buildCoverage))
return WidgetHelpers.WidgetStatusHelper.Success();
}, function (error) {
return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
});
}
return {
load: function (widgetSettings) {
var $title = $('h2.title');
$title.text('starain widget custom');
return getCodeCoverage(widgetSettings);
}
}
//return {
// load: function (widgetSettings) {
// var $title = $('h2.title');
// $title.text('starain widget custom');
// return WidgetHelpers.WidgetStatusHelper.Success();
// }
//}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title">widgets starain</h2>
<div class="codeCoverage">non code coverage</div>
</div>
</body>
</html>
After that, you can add that widget to the dashboard and check code coverage.
I'm implementing a WebView with dynamic height. I found the solution that works like a charm on iOS and doesn't work on android. The solution uses JS inside the WV to set the title to the value of the content height. Here's the code:
...
this.state = {webViewHeight: 0};
...
<WebView
source={{html: this.wrapWevViewHtml(this.state.content)}}
style={{width: Dimensions.get('window').width - 20, height: this.state.webViewHeight}}
scrollEnabled={false}
javaScriptEnabled={true}
injectedJavaScript="window.location.hash = 1;document.title = document.height;"
onNavigationStateChange={this.onWebViewNavigationStateChange.bind(this)}
/>
...
onWebViewNavigationStateChange(navState) {
// navState.title == height on iOS and html content on android
if (navState.title) {
this.setState({
webViewHeight: Number(navState.title)
});
}
}
...
But on android the value of the title inside onWebViewNavigationStateChange is equal to page content.
What am I doing wrong?
I was baffled by this too. It actually works but it's hard to debug why it does not work because Chrome remote debugging is not enabled for the React Native WebViews on Android.
I had two issues with this:
The script I injected to the Webview contained some single line comments and on Android all the line breaks are removed (another bug?). It caused syntax errors in the WebView.
On the first call the title content indeed is the full content of the Webview. No idea why but on latter calls it's the height. So just handle that case.
Here's the code I'm using now which on works on React Native 0.22 on Android and iOS
import React, {WebView, View, Text} from "react-native";
const BODY_TAG_PATTERN = /\<\/ *body\>/;
// Do not add any comments to this! It will break line breaks will removed for
// some weird reason.
var script = `
;(function() {
var wrapper = document.createElement("div");
wrapper.id = "height-wrapper";
while (document.body.firstChild) {
wrapper.appendChild(document.body.firstChild);
}
document.body.appendChild(wrapper);
var i = 0;
function updateHeight() {
document.title = wrapper.clientHeight;
window.location.hash = ++i;
}
updateHeight();
window.addEventListener("load", function() {
updateHeight();
setTimeout(updateHeight, 1000);
});
window.addEventListener("resize", updateHeight);
}());
`;
const style = `
<style>
body, html, #height-wrapper {
margin: 0;
padding: 0;
}
#height-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
<script>
${script}
</script>
`;
const codeInject = (html) => html.replace(BODY_TAG_PATTERN, style + "</body>");
/**
* Wrapped Webview which automatically sets the height according to the
* content. Scrolling is always disabled. Required when the Webview is embedded
* into a ScrollView with other components.
*
* Inspired by this SO answer http://stackoverflow.com/a/33012545
* */
var WebViewAutoHeight = React.createClass({
propTypes: {
source: React.PropTypes.object.isRequired,
injectedJavaScript: React.PropTypes.string,
minHeight: React.PropTypes.number,
onNavigationStateChange: React.PropTypes.func,
style: WebView.propTypes.style,
},
getDefaultProps() {
return {minHeight: 100};
},
getInitialState() {
return {
realContentHeight: this.props.minHeight,
};
},
handleNavigationChange(navState) {
if (navState.title) {
const realContentHeight = parseInt(navState.title, 10) || 0; // turn NaN to 0
this.setState({realContentHeight});
}
if (typeof this.props.onNavigationStateChange === "function") {
this.props.onNavigationStateChange(navState);
}
},
render() {
const {source, style, minHeight, ...otherProps} = this.props;
const html = source.html;
if (!html) {
throw new Error("WebViewAutoHeight supports only source.html");
}
if (!BODY_TAG_PATTERN.test(html)) {
throw new Error("Cannot find </body> from: " + html);
}
return (
<View>
<WebView
{...otherProps}
source={{html: codeInject(html)}}
scrollEnabled={false}
style={[style, {height: Math.max(this.state.realContentHeight, minHeight)}]}
javaScriptEnabled
onNavigationStateChange={this.handleNavigationChange}
/>
{process.env.NODE_ENV !== "production" &&
<Text>Web content height: {this.state.realContentHeight}</Text>}
</View>
);
},
});
export default WebViewAutoHeight;
As gist https://gist.github.com/epeli/10c77c1710dd137a1335
Loading a local HTML file on the device and injecting JS was the only method I found to correctly set the title / hash in Android.
/app/src/main/assets/blank.html
<!doctype html>
<html>
<head>
<title id="title">Go Web!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div id="content"></div>
<script>
var content = document.getElementById('content');
var fireEvent = function(event, data) {
document.title = data;
window.location.hash = event;
};
var setContent = function(html) {
content.innerHTML = html;
};
</script>
</body>
</html>
And the component
class ResizingWebView extends Component {
constructor(props) {
super(props)
this.state = {
height: 0
}
}
onNavigationStateChange(navState) {
var event = navState.url.split('#')[1]
var data = navState.title
console.log(event, data)
if (event == 'resize') {
this.setState({ height: data })
}
}
render() {
var scripts = "setContent('<h1>Yay!</h1>');fireEvent('resize', '300')";
return (
<WebView
source={{ uri: 'file:///android_asset/blank.html' }}
injectedJavaScript={ scripts }
scalesPageToFit={ false }
style={{ height: this.state.height }}
onNavigationStateChange={ this.onNavigationStateChange.bind(this) }
/>
)
}
}
There are multiple youtube videos playing in my site in a carousel. When a user click on a youtube video then I want to stop the auto scrolling of the carousel. Here is the code I am writing which is throwing me "players[player_id].getPlayerState() is not a function" error.
Also the youtube library is loading in my site from a thrid party javascript.
players = {};
window.onYouTubeIframeAPIReady = function(){
$('.youtube-video iframe').each(function() {
players[$(this).attr('id')] = new YT.Player($(this).attr('id'), {
events: {
'onStateChange': onPlayerStateChange($(this).attr('id'))
}
});
});
}
function onPlayerStateChange(player_id){
return function(event) {
if(players[player_id].getPlayerState() == 3 ||players[player_id].getPlayerState() == 1) {
//stop the auto scrolling
}
if(players[player_id].getPlayerState() == 0 || players[player_id].getPlayerState() == 2) {
//start auto scrolling.
}
}
}
Please let me know if you can find the issue in my code. Thanks in advance!
You forgot some sample paramters like videoId: $(this).attr('id') and events
was not placed at the good place.
I post you the correct code :
HTML
<div class="youtube-video" id="O1RHkPGb31Q"></div>
<div class="youtube-video" id="VjRb3RjqncQ"></div>
Javascript:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
players = {};
window.onYouTubeIframeAPIReady = function(){
$('.youtube-video').each(
function() {
players[$(this).attr('id')] = new YT.Player($(this).attr('id'),
{
videoId: $(this).attr('id'),
events: { 'onStateChange': onPlayerStateChange($(this).attr('id')) }
});
});
};
function onPlayerStateChange(player_id){
return function(event) {
if(players[player_id].getPlayerState() == 3 || players[player_id].getPlayerState() == 1) {
//stop the auto scrolling
console.log("stop scolling video" + player_id);
}
if(players[player_id].getPlayerState() == 0 || players[player_id].getPlayerState() == 2) {
//start auto scrolling.
console.log("start scolling video" + player_id);
}
};
}
Live demo : http://jsbin.com/nisetafoga/1/edit?html,js,console,output
I have an overlay on my page and I would like to give user a link / URL which leads them directly to the page, with the overlay loaded.
Is it possible to be done? How do I do that?
This is my code:
$(function() {
$('#overlay_job').click(function() {
document.getElementById('iframe_job').src = "http://targeturl-for-my-overlay-content";
$('#overlay_bg2').fadeIn('fast',function(){
$('#overlay_box').fadeIn('fast');
});
});
$('#boxclose').click(function() {
$('#overlay_box').fadeOut('fast',function() {
$('#overlay_bg2').fadeOut('fast');
});
});
var overlay_bg2 = $("#overlay_box");
//var top = $(window).scrollTop() - (overlay_bg2.outerHeight() / 2);
var top=0;
var left = -(overlay_bg2.outerWidth() / 2);
overlay_bg2.css({ 'margin-top': top,'margin-left': left });
if(getUrlVars()["openJobOverLay"] == "Y") {
$('#overlay_job').trigger('click');
}
});
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
===========
and on the page, user can click on this link to get the overlay shown:
<a id="overlay_job" class="underline" href="javascript:void(0);%20opener.jobframe.location.reload();">
See job openings
</a>
<img src="link_arrow.gif" class="linkarrow">
</div>
Hide the overlay with CSS: display: none;. Give the overlay element an id, then add the id to the URL like so http://www.yourpage.com#id. Then use jQuery to do something like this:
$(document).ready(function(){
if(window.location.hash) $('#' + window.location.hash).show();
});
Edit:
In your specific case add this line as the last line inside your $(document.ready();.
$(function() {
// All of your code inside this function...
if(window.location.hash) $('#' + window.location.hash).click();
});
function getUrlVars() {
// Some more of your code...
I have implemented the Jquery.mobile.scrollview.js and i am able to scroll the dropdown,But what happens is when i click to scroll the checkboxes inside the dropdown the checkboxes gets invisible and only the text is shown.. IS there is any workaround is there... Please let me know..
IS there any example on this..... I am adding my code below .. and giving data-scroll = 'y' in my div part ...
<!-- Scroll View code -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#evtCatcher
{
}
#evtCatcher .ui-scrollview-view
{
padding: 10px;
}
</style>
<script src="jsScroll/jquery.js" type="text/javascript"></script>
<script src="jsScroll/jsdefault.js" type="text/javascript"></script>
<script src="jsScroll/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jsScroll/jquery.mobile.scrollview.js" type="text/javascript"></script>
<script src="jsScroll/iscroll.js" type="text/javascript""></script>
<script type="text/javascript">
function fnClick() {
alert('clicked');
}
</script>
<script>
$("[ data-role=page]").live("pageshow", function(event) {
var $page = $(this);
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function() {
var $this = $(this);
// XXX: Remove this check for ui-scrolllistview once we've
// integrated list divider support into the main scrollview class.
if ($this.hasClass("ui-scrolllistview"))
$this.scrolllistview();
else {
var st = $this.data("scroll") + "";
var paging = st && st.search(/^[xy]p$/) != -1;
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
var opts = {};
if (dir)
opts.direction = dir;
if (paging)
opts.pagingEnabled = true;
$this.scrollview(opts);
}
});
changeDelayFormElementClick();
});
function changeScrollMethod() {
var val = $("#s_method").val();
var $sv = $("#evtCatcher").scrollview("scrollTo", 0, 0);
if (val === "scroll") {
$sv.css("overflow", "scroll");
}
else {
$sv.css("overflow", "hidden");
}
$sv.data("scrollview").options.scrollMethod = val;
}
function changeDelayFormElementClick() {
$("#evtCatcher").data("scrollview").options.delayedClickEnabled = ($("#s_delay").val() === "yes");
}
var cb_hd_pd,
cb_hd_sp,
cb_hm_pd,
cb_hm_sp,
cb_hu_pd,
cb_hu_sp;
var hd = $.mobile.scrollview.prototype._handleDragStart;
var hm = $.mobile.scrollview.prototype._handleDragMove;
var hu = $.mobile.scrollview.prototype._handleDragStop;
function getDummyEvent(o) {
return { target: o.target, _pd: false, _sp: false, preventDefault: function() { this._pd = true; }, stopPropagation: function() { this._sp = true; } };
}
function updateEvent(e, cb_pd, cb_sp) {
if (cb_pd.checked)
e.preventDefault();
if (cb_sp.checked)
e.stopPropagation();
}
$.mobile.scrollview.prototype._handleDragStart = function(e, x, y) {
hd.call(this, getDummyEvent(e), x, y);
updateEvent(e, cb_hd_pd, cb_hd_sp);
};
$.mobile.scrollview.prototype._handleDragMove = function(e, x, y) {
hm.call(this, getDummyEvent(e), x, y);
updateEvent(e, cb_hm_pd, cb_hm_sp);
};
$.mobile.scrollview.prototype._handleDragStop = function(e) {
hu.call(this, getDummyEvent(e));
updateEvent(e, cb_hu_pd, cb_hu_sp);
};
$(function() {
cb_hd_pd = $("#cb_hd_pd")[0];
cb_hd_sp = $("#cb_hd_sp")[0];
cb_hm_pd = $("#cb_hm_pd")[0];
cb_hm_sp = $("#cb_hm_sp")[0];
cb_hu_pd = $("#cb_hu_pd")[0];
cb_hu_sp = $("#cb_hu_sp")[0];
});
</script>
Thanks in Advance :)