Use google analytics to capture touch events in a slider? - javascript

So I been trying to track mobile swipes where inside the slider there is other swipes. Look the image below. The code you see attached is part of my Google Analytics events tracking code.
Here is my code:
// Shop buttons
jQuery('.shop-btn-group a').click(function(event) {
var clickedLink = jQuery(this);
var gaqArgs = ['_trackEvent', 'Shop'];
var validShopLink = false;
if ( clickedLink.hasClass('shop-women') ) {
validShopLink = true;
gaqArgs.push('Click-Shop');
}
if (this.rel) {
gaqArgs.push(this.rel);
}
if (validShopLink) {
// Check if the user is using a keyboard command to open the link in a new tab
if (event.metaKey || event.ctrlKey || event.shiftKey) {
try {
_gaq.push(gaqArgs);
}
catch(err) {}
return;
}
else {
event.preventDefault();
try {
_gaq.push(gaqArgs);
_gaq.push(function() {
document.location = clickedLink[0].href;
});
}
catch(err) {
document.location = this.href;
}
}
}
});
// Product click
jQuery('.image-wrap a').click(function(event) {
var clickedLink = jQuery(this);
var gaqArgs = ['_trackEvent', 'Shop'];
var validShopLink = false;
if ( clickedLink.hasClass('frame-image') ) {
validShopLink = true;
gaqArgs.push('Click-Product');
}
if (this.rel) {
gaqArgs.push(this.rel);
}
if (validShopLink) {
// Check if the user is using a keyboard command to open the link in a new tab
if (event.metaKey || event.ctrlKey || event.shiftKey) {
try {
_gaq.push(gaqArgs);
}
catch(err) {}
return;
}
else {
event.preventDefault();
try {
_gaq.push(gaqArgs);
_gaq.push(function() {
document.location = clickedLink[0].href;
});
}
catch(err) {
document.location = this.href;
}
}
}
});
// Color dots
jQuery('.color-dots .dot').click(function(event) {
var dot = jQuery(this);
var colorIndex = dot.index();
var sku = null;
try {
var link = dot.closest('.color-dots')
.siblings('.btn-wrapper')
.eq(0)
.find('.shop-btn-group')
.eq(colorIndex)
.children('a')
.eq(0);
if ( link[0].rel ) {
sku = link[0].rel;
}
}
catch(err) {}
if (sku) {
try {
_gaq.push(['_trackEvent', 'Shop', 'Click-Color', sku]);
}
catch(err) {}
}
});
Any help will be awesome thanks in advance.

Related

avoid multiple new tab for same link

var mywin = null;
var mywin1 = null;
var mywin2 = null;
var mywin3 = null;
chrome.browserAction.onClicked.addListener(function () {
if (mywin == null || mywin.closed) {
mywin = window.open('https://google.com');
} else {
mywin.focus();
}
if (mywin1 == null || mywin1.closed) {
mywin1 = window.open("https://facebook.com");
} else {
mywin1.focus();
}
if (mywin2 == null || mywin2.closed) {
mywin2 = window.open("https://youtube.com");
} else {
mywin2.focus();
}
if (mywin3 == null || mywin3.closed) {
mywin3 = window.open("https://gmail.com");
} else {
mywin3.focus();
}
});
this code avoid the duplicate new tab when tab already open but this code work correctly when click but after some time i try to click it will open all tab again pls help me
Pass the second argument name to the window.open("http://facebook.com", "fbwin");
More on window.open can be found here ... http://www.w3schools.com/jsref/met_win_open.asp

Modify javascript to open in a new window (window.location.href)

I'm creating a site for a client who needs to use a zip code to search for a provider but the search is on a provider search website that's not within our domain. I need to modify this script to be able to force it to open in a new window.
<script type="text/javascript">
$(document).ready(function () {
var submitVetSearchD = function () {
submitVetSearch($('#zip'));
}
function submitVetSearchM() {
submitVetSearch($('#zipM'));
}
function submitVetSearchF() {
submitVetSearch($('#zipF'));
}
function submitVetSearch(ele) {
var zipval = ele.val();
var url = 'https://www.fakesearchresultswebsite.com/';
if (zipval !== "") {
return window.location.href = url + '?zip=' + zipval;
}
}
$("#zip").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchD();
}
});
$('#large-header-vet-search').click(submitVetSearchD);
$("#zipM").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchM();
}
});
$('#mob-vet-search').click(submitVetSearchM);
$("#zipF").keyup(function (event) {
if (event.keyCode == 13) {
submitVetSearchF();
}
});
$('#footer-vet-search').click(submitVetSearchF);
$("a[rel^='prettyPhoto']").prettyPhoto();
//top menu size
$(window).resize(function () {
setTopMenuHeight();
});
setTopMenuHeight();
var smallHeader = false;
var menuBig = true;
$(document).scroll(function () {
var ele = $("#top-menu-height");
var menuBigNew = !(ele.is(":visible") && $(window).scrollTop() > 200);
if (menuBig != menuBigNew && smallHeader) {
menuBig = menuBigNew;
$("#navtop").toggleClass("small-page-header");
$(".fixed-top").toggleClass("pos-fix");
$("#page-header").toggleClass("fixed-header");
$("#title-area").toggleClass("title-area-small");
$("#logo1").finish();
$("#logo2").finish();
$("#top-menu").finish();
if (menuBig) {
$("#logo2").toggle();
$("#logo1").toggle(1000);
} else {
$("#logo1").toggle();
$("#logo2").toggle(1000);
}
//$("#top-menu").fadeToggle();
}
});
//$('body').on('open.fndtn.reveal', function(){
// $('body').css('overflow', 'hidden');
//});
//$('body').on('closed.fndtn.reveal', function(){
// $('body').css('overflow', 'visible');
//});
});
function setTopMenuHeight() {
var ele = $("#top-menu-height");
var height = $("#page-header").height();
ele.height(height);
}
</script>
Replace
return window.location.href = url + '?zip=' + zipval;
with
var newWin = window.open(url + '?zip=' + zipval);
return true;
Declare newWin in the global scope, it will reference the new window.
Reference: http://www.w3schools.com/jsref/met_win_open.asp

Cursor pointer moves to first position onclick textarea using CK-Editor

I am using CK-Editor 4. In which I have created Directive. When I click on Textarea my cursor pointer is Move to First position. I want my cursor position should be available when I click in any of the Place inside Textarea. It should not be able to move first or last position until I click on last position.
vpb.directive('ckeInline', function ($timeout, $parse, $rootScope,$) {
return {
require: "ngModel",
link: function (scope, element, attrs, ngModel) {
if (attrs.ckeInlineShowtitle) ngModel = "";
isMobile = $(".ipad, .ipod, .android").length > 0;
var destroy_this_editor = function(id)
{
setTimeout(function () {
try{
CKEDITOR.instances[id].destroy(true);
} catch (ex) {
}
},500)
}
if (!isMobile) {
var create_and_focus = function () {
if (scope.setup.edit_mode || attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
var a_id = attrs.ckeInlineId;
var menu_selector = attrs.ckeInlineMenu;
//get editor
//create editor if doesn't exist
var e = CKEDITOR.instances[a_id];
if (!e) {
element.menu = $(menu_selector);
//set up behavior for menu
uif.wire_up_menu(element, scope);
//hide all menu bars
$("nav.text-editor-menu-bar").hide();
//create editor
var config = {
toolbar: "More",
on: {
'blur': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focusout': function () {
save_editor_content(function () {
destroy_this_editor(a_id);
});
},
'focus': function () {
//show the current menu
element.menu.show();
//fix menu width
uif.stretch_menu(element);
},
'instanceReady': function (event,element) {
//----------------I think,Here i want logic to set caret sign or set mouse
//pointer to appropriate place
// event.editor.focus();
// element.focus();
}
}
};
if (attrs.ckeInlineToolbar) {
config.toolbar = attrs.ckeInlineToolbar;
}
var editor = CKEDITOR.inline(a_id, config);
if (attrs.ckeInlineOnInit) {
uif.apply_scope($rootScope, $parse(attrs.ckeInlineOnInit));
}
}
else
{
e.focus();
element.focus();
}
} else
{
attrs.$set('contenteditable', false);
}
}
element.click(function () {
create_and_focus();
});
if (attrs.ckeInlineFocusWatch) {
scope.$watch(function () {
return $parse(attrs.ckeInlineFocusWatch);
}, function () {
if (attrs.ckeInlineFocusCondition == undefined || $parse(attrs.ckeInlineFocusCondition)() == true) {
create_and_focus();
}
})
}
var saving = false;
var save_editor_content = function (cb) {
if (!saving)
{
saving = true;
var a_id = attrs.ckeInlineId;
if (a_id) {
var editor = CKEDITOR.instances[a_id];
if (editor) {
var menu_selector = attrs.ckeInlineMenu;
element.menu.hide();
//attrs.$set('contenteditable', false);
var newValue = editor.getData().replace(/ /, ' ');
if (ngModel.$modelValue != newValue) {
if (attrs.ckeInlineBlurBool) {
$parse(attrs.ckeInlineBlurBool).assign($rootScope, false);
}
ngModel.$setViewValue(newValue);
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
$timeout(function () {
saving = false;
if (cb) cb();
}, 1100)
} else
{
saving = false;
$rootScope.setup.blcok_edits = false;
$rootScope.setup.block_all_editors = false;
if (cb) cb();
}
}
}
else
{
saving = false;
}
}
};
} else if (attrs.ckeNonEditMode) {
attrs.$set('contenteditable', true);
element.blur(function () {
ngModel.$setViewValue(element.html().replace(/ /, ' '));
if (attrs.ckeInlineSave) {
uif.apply_scope(scope, $parse(attrs.ckeInlineSave));
}
})
}
}
}
});

fullscreen api not working for IE

I am trying to display content in full screen in IE using Full Screen API everything works fine except IE below is code, any help would be great.thank you in advance.
JAVASCRIPT CODE:
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
var fsButton = document.getElementById('fsbutton');
var fsElement = document.getElementById('container');
if (window.fullScreenApi.supportsFullScreen) {
// handle button click
fsButton.addEventListener('click', function() {
//alert(fsElement);
window.fullScreenApi.requestFullScreen(fsElement);
//alert("hi");
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
alert("yes");
//fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
alert("no");
// fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
alert("no");
// fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
</script>
HTML CODE:
<div>
<div id="container" >
..... content goes here
</div>
<input type="button" id="fsbutton" title="View Full Screen">
</div>
I didn't try it but I think that it's because IE doesn't use the camelCase for "Fullscreen" in "cancelFullscreen" and "requestFullscreen", which is the actual live standard recommandation btw.
Other browsers are wrong this time.

Manually calling PDFJS functions. What func to call after PDFView.open to render

CanĀ“t find in the documentation what to do next.
Calling:
PDFView.open('/MyPDFs/Pdf1.pdf', 'auto', null)
I am able to see the blank pages, the loader and also the document gets the number of pages of my PDF.
The only thing is missing is the rendering.
Does anyone knows what I should call next?
Thanks
$(document).ready(function () {
PDFView.initialize();
var params = PDFView.parseQueryString(document.location.search.substring(1));
//#if !(FIREFOX || MOZCENTRAL)
var file = params.file || DEFAULT_URL;
//#else
//var file = window.location.toString()
//#endif
//#if !(FIREFOX || MOZCENTRAL)
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
document.getElementById('openFile').setAttribute('hidden', 'true');
} else {
document.getElementById('fileInput').value = null;
}
//#else
//document.getElementById('openFile').setAttribute('hidden', 'true');
//#endif
// Special debugging flags in the hash section of the URL.
var hash = document.location.hash.substring(1);
var hashParams = PDFView.parseQueryString(hash);
if ('disableWorker' in hashParams)
PDFJS.disableWorker = (hashParams['disableWorker'] === 'true');
//#if !(FIREFOX || MOZCENTRAL)
var locale = navigator.language;
if ('locale' in hashParams)
locale = hashParams['locale'];
mozL10n.setLanguage(locale);
//#endif
if ('textLayer' in hashParams) {
switch (hashParams['textLayer']) {
case 'off':
PDFJS.disableTextLayer = true;
break;
case 'visible':
case 'shadow':
case 'hover':
var viewer = document.getElementById('viewer');
viewer.classList.add('textLayer-' + hashParams['textLayer']);
break;
}
}
//#if !(FIREFOX || MOZCENTRAL)
if ('pdfBug' in hashParams) {
//#else
//if ('pdfBug' in hashParams && FirefoxCom.requestSync('pdfBugEnabled')) {
//#endif
PDFJS.pdfBug = true;
var pdfBug = hashParams['pdfBug'];
var enabled = pdfBug.split(',');
PDFBug.enable(enabled);
PDFBug.init();
}
if (!PDFView.supportsPrinting) {
document.getElementById('print').classList.add('hidden');
}
if (!PDFView.supportsFullscreen) {
document.getElementById('fullscreen').classList.add('hidden');
}
if (PDFView.supportsIntegratedFind) {
document.querySelector('#viewFind').classList.add('hidden');
}
// Listen for warnings to trigger the fallback UI. Errors should be caught
// and call PDFView.error() so we don't need to listen for those.
PDFJS.LogManager.addLogger({
warn: function () {
PDFView.fallback();
}
});
var mainContainer = document.getElementById('mainContainer');
var outerContainer = document.getElementById('outerContainer');
mainContainer.addEventListener('transitionend', function (e) {
if (e.target == mainContainer) {
var event = document.createEvent('UIEvents');
event.initUIEvent('resize', false, false, window, 0);
window.dispatchEvent(event);
outerContainer.classList.remove('sidebarMoving');
}
}, true);
document.getElementById('sidebarToggle').addEventListener('click',
function () {
this.classList.toggle('toggled');
outerContainer.classList.add('sidebarMoving');
outerContainer.classList.toggle('sidebarOpen');
PDFView.sidebarOpen = outerContainer.classList.contains('sidebarOpen');
PDFView.renderHighestPriority();
});
document.getElementById('viewThumbnail').addEventListener('click',
function () {
PDFView.switchSidebarView('thumbs');
});
document.getElementById('viewOutline').addEventListener('click',
function () {
PDFView.switchSidebarView('outline');
});
document.getElementById('previous').addEventListener('click',
function () {
PDFView.page--;
});
document.getElementById('next').addEventListener('click',
function () {
PDFView.page++;
});
document.querySelector('.zoomIn').addEventListener('click',
function () {
PDFView.zoomIn();
});
document.querySelector('.zoomOut').addEventListener('click',
function () {
PDFView.zoomOut();
});
document.getElementById('fullscreen').addEventListener('click',
function () {
PDFView.fullscreen();
});
document.getElementById('openFile').addEventListener('click',
function () {
document.getElementById('fileInput').click();
});
document.getElementById('print').addEventListener('click',
function () {
window.print();
});
document.getElementById('download').addEventListener('click',
function () {
PDFView.download();
});
document.getElementById('pageNumber').addEventListener('change',
function () {
PDFView.page = this.value;
});
document.getElementById('scaleSelect').addEventListener('change',
function () {
PDFView.parseScale(this.value);
});
document.getElementById('first_page').addEventListener('click',
function () {
PDFView.page = 1;
});
document.getElementById('last_page').addEventListener('click',
function () {
PDFView.page = PDFView.pdfDocument.numPages;
});
document.getElementById('page_rotate_ccw').addEventListener('click',
function () {
PDFView.rotatePages(-90);
});
document.getElementById('page_rotate_cw').addEventListener('click',
function () {
PDFView.rotatePages(90);
});
//#if (FIREFOX || MOZCENTRAL)
//if (FirefoxCom.requestSync('getLoadingType') == 'passive') {
// PDFView.setTitleUsingUrl(file);
// PDFView.initPassiveLoading();
// return;
//}
//#endif
//#if !B2G
PDFView.open(file, 0);
//#endif
});
The system must be initialized first before PDFView.open call! Thanks
In viewer.js I added call to updateViewarea() after the document was downloaded.
... PDFJS.getDocument(parameters).then(
function getDocumentCallback(pdfDocument) {
self.load(pdfDocument, scale);
self.loading = false;
updateViewarea();
}, ...

Categories

Resources