I’m challenging myself to navigate Google Maps (http://maps.google.com) without my mouse and just by entering commands into Chrome Developer Console.
I found that the class name of the main canvas that Google Maps uses is widget-scene-canvas, and I’ve successfully obtained that canvas with
document.getElementsByClassName('widget-scene-canvas')[0]
Hence, I tried to trigger a click event to zoom in with
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 300, 300, 300, 300, false, false, false, false, 0,
document.getElementsByClassName('widget-scene-canvas')[0]);
document.body.dispatchEvent(evt);
evt.initMouseEvent("click", true, true, window,
0, 300, 300, 300, 300, false, false, false, false, 0,
document.getElementsByClassName('widget-scene-canvas')[0]);
document.body.dispatchEvent(evt);
However, it doesn’t even seem like Google Maps is detecting a click.
What am I doing wrong? Anyone other adventurous people want to give this a shot?
Invoking clicks on the zoom buttons in vanilla
function zoom(out) {
document.querySelector('.widget-zoom-' + (out ? 'out' : 'in')).click();
}
zoom();
setTimeout(zoom.bind(null, true), 1e3);
This works for me:
Zoom in: $(".widget-zoom-in").click();
Zoom out: $(".widget-zoom-out").click();
Related
THE CODE
Note: All the functions posted here are inside a same file interface.js.
I added an event listener which is executed every time window resizes:
window.addEventListener("resize",
function(_resize){
_window_resize_handler(_resize);
}
);
When event resize happens the handler function _window_resize_handler() which determines (a) if window is wide enough and (b) if we are on mobile / desktop. Based on this it calls one of the two Gridstack.js initialisation functions (one is for desktop and one for mobile):
function _window_resize_handler(_resize){
// Screen properties
let _dpi = window.devicePixelRatio;
let _sw = screen.width;
let _sh = screen.height;
let _ss = _sw + _sh;
let _ar;
let _sww;
// Window properties
let _ww = window.innerWidth;
// We calculate the aspect ratio in landscape format - this is the only one we need.
if (_sw > _sh){
_ar = _sw / _sh;
}
else{
_ar = _sh / _sw;
}
// We set the longer dimension of the two to be screen width.
if (_sw > _sh){
_sww = _sw;
}
else{
_sww = _sh;
}
// If window width is too narrow we use Gridstack's one-column mode regardless of the device.
// Otherwise we let screen properties decide.
if (_ww < 768){
_gridstack_init_mobile();
}
else if( ((_ar < 1.78) && (_dpi < 2.5 ) && (_sww > 768)) || (_ss > 2000)){
_gridstack_init_desktop();
}
else{
_gridstack_init_mobile();
}
}
The Gridstack.js initialisation functions are like this:
For desktop:
function _gridstack_init_desktop(){
// Create global object "grid" with window.
window.grid = GridStack.init({
acceptWidgets: false,
alwaysShowResizeHandle: true,
animate: false,
auto: true,
// cellHeight: "15.45rem",
// column: 12,
disableDrag: false,
disableOneColumnMode: true,
disableResize: false,
draggable: true,
dragOut: false,
float: true,
handle: '.grid-stack-item-content',
handleClass: 'grid-stack-item-content',
itemClass: 'grid-stack-item',
maxRow: 6,
minRow: 6,
minWidth: 768,
oneColumnDomSort: false,
placeholderClass: 'grid-stack-placeholder',
placeholderText: '',
resizable: {
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false,
removeTimeout: 2000,
//row: 6,
rtl: false,
staticGrid: false,
});
grid.column(12);
grid.cellHeight("15.45rem");
}
For mobile:
function _gridstack_init_mobile(){
// Create global object "grid" with window.
window.grid = GridStack.init({
acceptWidgets: false,
alwaysShowResizeHandle: true,
animate: false,
auto: true,
// cellHeight: "15.45rem",
// column: 12,
disableDrag: false,
disableOneColumnMode: false,
disableResize: false,
draggable: true,
dragOut: false,
float: true,
handle: '.grid-stack-item-content',
handleClass: 'grid-stack-item-content',
itemClass: 'grid-stack-item',
maxRow: 72,
minRow: 6,
minWidth: 768,
oneColumnDomSort: false,
placeholderClass: 'grid-stack-placeholder',
placeholderText: '',
resizable: {
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false,
removeTimeout: 2000,
//row: 6,
rtl: false,
staticGrid: false,
verticalMargin: "0",
});
grid.column(1);
grid.cellHeight("47.15vh");
}
THE RESULTS
This partialy works but only if inside Chrome dev tools I tweak between screens that all trigger the _gridstack_init_mobile(). These are mostly screens for mobile phones:
When I choose e.g. iPad screen that triggers the _gridstack_init_desktop() something goes wrong during the initialisation and I get 1 column instead of 12 (picture on the left). But if I refresh everything is fine and I get 12 columns (picture on the right):
MY SPECULATION
My speculation is that I need to destroy the grid object (if it exists) before I re-initialize it again as a Gridstack object. This is why I tried to put this part of code at the top of _gridstack_init_mobile() and _gridstack_init_mobile():
if (document.getElementsByClassName('grid-stack').length != 0){
grid.destroy();
}
But I get an error:
interface.js:372 Uncaught ReferenceError: grid is not defined
at _gridstack_init_desktop (interface.js:372)
at _window_resize_handler (interface.js:359)
at interface.js:8
Anyone has any idea?
why do you need to destroy if all you need is change the column number ? (for which there is an API). removeAll(removeDOM = true) would remove gridstack info otherwise.
you can change any property even if there isn't an api grid.opts.maxRow=72 , you just won't have any code execute to a change if one was required until the next action happens.
if there is a bug in the lib you should create a minimal reproduceable case and post it as a bug rather than expect someone to read your stack overflow Q... also you fail to say what rev your are using. Try 2.0.0, and from a glance you are using 12 columns but the grid initially comes out with 1 column - also you can't init the same grid multiple times but you can set column(1), removing the dom elements will nuke everything, and you don't even show what your dom starts with. Also don't init with the options in the world, only non default (hard to read otherwise).
I have a wordpress site and on the homepage I have a Header in Elementor and a 360 image plugins, without the active header works perfectly without errors, but when the header I made in Elementor is active the 360 degree image does not work and shows this error in the console Uncaught TypeError: $ (...). ThreeSixty is not a function, how do I fix it? The website is Iwo 12
<!--SPV--><script type="text/javascript">//SPV
(function($) {
var product_192346_houzH5 = $('#threesixty-slider-192346_houzH5').ThreeSixty({
totalFrames: 50,
endFrame: 0,
currentFrame: 50,
imgList: '.threesixty-images-192346_houzH5',
progress: '.threesixty-spinner-192346_houzH5',
preview: '.threesixty-preview-192346_houzH5',
images: ['https://iwo12.com.br/wp-content/uploads/2019/12/1.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/2.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/3.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/4.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/5.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/6.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/7.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/8.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/9.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/10.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/12.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/13.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/14.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/15.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/16.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/17.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/18.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/19.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/20.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/21.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/23.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/24.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/25.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/26.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/27.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/28.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/29.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/30.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/31.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/32.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/34.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/35.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/36.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/37.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/38.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/39.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/40.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/41.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/42.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/43.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/44.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/45.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/46.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/47.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/48.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/49.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/50.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/51.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/52.jpg','https://iwo12.com.br/wp-content/uploads/2019/12/53.jpg'],
height: 0,
width: 1280,
navigation: false,
drag: true,
showCursor: true,
interval: 40,
speedMultiplier: 7,
monitorInt: 10,
onReady: function() {
$("#threesixty-slider-192346_houzH5").removeClass('threesixty-loading');
}
});
}(jQuery));
</script>
I just went to your website, and checked what was up. Your jQuery objects don't have the ThreeSixty method because you never loaded the threesixty.js addon. There is no <script src="https://*somethingsomething*/jquery.threesixty.js"></script> in your webpage. Download the plugin, and add it as a dependency.
Also, another critical thing, it's $(...).threeSixty not it's $(...).ThreeSixty. The first letter is lowercase.
I am using uikit modal on a project. I am also using JS Textillate to animate the text when the modal is opened. However, I want the text to be animated if the modal is closed and opened again continuously. For now, it only animate once when the modal is opened for the first time, when closed and opened again, the animation does not run again.
This is the JavaScript code below:
$(".uk-modal-full").on('show', function(){
var $title = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
var $title = $(".txt2").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: true,
});
});
I am thinking maybe the function can be removed when modal closes so that it can be repeated when it is opened again. I am not sure if that is possible as I am only a Jquery learner.
$(".uk-modal-full").on('hide', function(){
// code here?
});
Full options for Textillate is here https://github.com/jschr/textillate
UPDATE
Thank you! I have created a codepen here to test my full code inside a modal using your example. It seems to be working but with some issues. When I use $element.textillate('in') and $element.textillate('out'), the other options do not work (e.g. initialDelay). It seems to only control the "in" and "out" options. When I used $element.textillate('start') and $element.textillate('stop'), the other options worked but when modal is reopened, the text are briefly loaded first before animating.
Please see codepen here - https://codepen.io/ajaxthemestudios/pen/XWJRBbW
Looking through the readme of Textillate, I think this section is what you need:
$element.textillate('start') - Manually start/restart textillate
$element.textillate('stop') - Manually pause/stop textillate
$element.textillate('in') - Trigger the current text's in animation
$element.textillate('out') - Trigger the current text's out animation
So I would do something like first define the animations (outside the event functions)
var title1 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
var title2 = $(".txt").textillate({
// in animation settings.
in: {
effect: "fadeIn", // set the effect name
},
// out animation settings.
out: {
effect: "fadeOut",
delayScale: 0,
delay: 0,
},
type: "char",
autoStart: false,
});
And then in the event function:
$(".uk-modal-full").on('show', function(){
title1.textillate('in');
title2.textillate('in');
}
EDIT
I got it to work in this codepen: https://codepen.io/thomas-short/pen/zYxdzWY
Test it by clicking on click repeatedly.
EDIT 2
The problem of the text being briefly visible seems to be a limitation of the library. I could not find a way to solve it using the tools they provide. The only way I managed to make it work is by control it myself:
$(".uk-modal-full").on('show', function(){
title1.textillate('start');
$(".txt2").hide();
setTimeout(() => {
$(".txt2").show();
title2.textillate('start');
}, 1500);
})
And remove initialDelay from the options
I have a requirement to create a dragable free-scrolling carousel, which I can do with the likes of http://flickity.metafizzy.co/ or http://idangero.us/swiper/. However neither of these allow me to specify an initial movement. Is it possible to simulate a click-drag on these carousels to 'give them a spin'?
Something like:
$('.home-map-wrapper').trigger('mousedown').trigger('mousemove', { clientX: 0, clientY: 0 }).trigger('mousemove', { clientX: 10, clientY: 0 });
Update 1
I've created a fiddle with Flickety to demonstrate. How do I give this an initial movement?
https://jsfiddle.net/sprintstar/b34w9uec/
Update 2
I want it to move initially like you've grabbed it and given it a gentle spin. But I don't want it to auto advance, like with 'autoPlay'. Unfortunately Flickerty offers no such configuration.
You do not have to use events to launch your carousel using flickity,
You can simply:
Retrieve your Flickity instance
Specify a velocity for your carousel
Specify that you are in freeScrolling mode (and not scrolling toward a specific position)
Launch animation
Code
function initFlickety() {
var flickityElement = $('.home-map-wrapper').flickity({
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
var flickity = flickityElement.data("flickity"); // [1]
flickity.velocity = -1; // [2]
flickity.isFreeScrolling = true; // [3]
flickity.startAnimation(); // [4]
}
Fiddle
https://jsfiddle.net/b34w9uec/6/
If I understood correctly you want to have an initial movement on load.
I have tried setting autoPlay to a specific value on plugin initialization like this:
$('.home-map-wrapper').flickity({
autoPlay: 1000,
freeScroll: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
freeScrollFriction: 0.00
});
Check this Fiddle
Im having a bit of trouble of getting a Royal Slider working in a lightbox - If you take a look at this page: http://www.wearewebstars.dk/frontend/Test/boerneunivers2.html - And then click the arrow, where it says "Hvad er Myanmar" - Then it opens a lightbox with a gallery - However, the container of thumbnails only get a width of 36px - But the if I resize the window, then it gets the full width of all the thumbnails, and places the thumbnails correctly - Any ideas? I've tried resizing the window programmaticly, but cant get it to work:
The script I have is:
$(".toggle-gallery-8").on("click", function(event){
$('#gallery-8').royalSlider({
fullscreen: {
enabled: true,
nativeFS: true
},
controlNavigation: 'thumbnails',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 850,
loop: false,
imageScaleMode: 'fill',
navigateByClick: true,
numImagesToPreload:5,
arrowsNav:true,
arrowsNavAutoHide: true,
arrowsNavHideOnTouch: true,
keyboardNavEnabled: true,
usePreloader: true,
fadeinLoadedSlide: true,
globalCaption: true,
globalCaptionInside: false,
updateSliderSize: true,
thumbs: {
appendSpan: false,
firstMargin: true,
}
});
$('#gallery-8').royalSlider('updateSliderSize', true);
/*if($(".window.fade.in").length() > 0){
$(".window").trigger("resize");
}*/
});
Looking on the developer site I found that it's a known issue that sometimes happens.
If slider size is dynamic: try to resize your browser, if after
resizing layout looks correctly - this is the issue.
If slider size is static: change size of root slider element via
Chrome Web Inspector or Firebug and resize browser window. Or just run
jQuery('.royalSlider').royalSlider('updateSliderSize', true); in
console and see if it fixes your problem.
Doc: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks
You can try to call updateSliderSize method:
setTimeout(function () {
$('.royalSlider').royalSlider('updateSliderSize', true);
}, 500)
after the slider definition, the setTimeout is needed to handle a little timing issue.