I have tried everything possible.. unminified all javascript, still can't get the map to load properly inside the tab.
Trying to use this custom code too with no success
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
});
}
});
webpage: http://bit.ly/UTHskS
thanks in advance,
Andy
I think you might need to trigger the Resize event to the map when the tab opens.
google.maps.event.trigger(map, "resize");
I didn't try though, this code would solve the problem.
Please try this code.
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
setTimeout(function(){
if (mapp0) {
google.maps.event.trigger(mapp0.getMap(), "resize");
}
}, 1000);
});
}
});
Related
I create tab on Ionic project. When i would access to Google map from another url Tab, it's not working but when i access it directly it works.
First the Ionic part:
The tab showing the map is:
Ionic calls refreshMap() when the user selects the tab.
refreshMap() is:
.controller('MainCtrl', function($scope) {
$scope.refreshMap = function() {
setTimeout(function () {
$scope.refreshMap_();
}, 1); //Need to execute it this way because the DOM may not be ready yet
};
$scope.refreshMap_ = function() {
var div = document.getElementById("map_canvas");
reattachMap(map,div);
};
})
I've implemented reattachMap() looking at the Map.init() method:
function reattachMap(map,div) {
if (!isDom(div)) {
console.log("div is not dom");
return map;
} else {
map.set("div", div);
while(div.parentNode) {
div.style.backgroundColor = 'rgba(0,0,0,0)';
div = div.parentNode;
}
return map;
}
}
function isDom(element) {
return !!element &&
typeof element === "object" &&
"getBoundingClientRect" in element;
}
And that's about it, now when the user switches back to the map tab, it will be there.
Please refer this.
(https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/256/#issuecomment-59784091)
I hope I am clear enough with this request for assistance, as it is hard to explain and I can't post all the code here. I have downloaded code to enable TinyMCE to be used in a NgRepeat with AngularJS:
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
uiTinymceConfig = uiTinymceConfig || {};
var generatedIds = 0;
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var expression, options, tinyInstance;
// generate an ID if not present
if (!attrs.id) {
attrs.$set('id', 'uiTinymce' + generatedIds++);
}
options = {
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.on('init', function (args) {
ngModel.$render();
});
// Update model on button click
ed.on('ExecCommand', function (e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
// Update model on keypress
ed.on('KeyUp', function (e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
},
mode: 'exact',
elements: attrs.id
};
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
} else {
expression = {};
}
angular.extend(options, uiTinymceConfig, expression);
setTimeout(function () {
tinymce.init(options);
});
ngModel.$render = function () {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
}
};
}]);
var gwApp = angular.module('gwApp', ['ui.tinymce']);
I don't really understand this code, but it works fine initially. My page starts with a list of Posts. I click on 'Show Reply' for the first post, and using NgSwitch the multiple replies become visible (nested NgRepeat). I submit a new reply message (the reply text is entered using tinymce) using a RESTful API service and a http call (too much code to post here). Then after clicking the submit button for the new reply message, the NgSwitch kicks in again unexpectedly to make the replies no longer visible. When I expand the replies again, the tinymce is just a regular textarea again, and the proper editor is gone.
I know this is not very clear, but I'm hoping someone can make sense of what I've written and can help me solve this problem..
I was having the same problem using ng-switch and ng-show so i added:
scope.$watch('onHidden()',function(){ tinymce.editors = [] });
after the setTimeout function.
Also replace the
ed.on('init',function(args){ ngModel.$render(); });
with
ed.on('init',function(args){ ed.setContent(ngModel.$viewValue); });
and remove the $render function.
This is the link to the working code in JsFiddle
I changed the entire question because I didn't provide enough info's at the first run: thanks goes to #Sergio.
There are alot of things not working in IE.
When I do addEvent('domReady').... It's even more bad(it doesn't gets executed but if I refresh the page... it works).
Is there a proper way to handle that IE stuff in MooTools?
note:
working on every browser on the whole planet except IE*
edit: added the complete source code of ajax cart.
This code it correct, it's just for understanding purpose only:
ajax_cart.js
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: 'changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct='+(new Date().getTime())
},
var AjaxCart = new Class({
Implements: Options,
cartDiv: null,
options: {
elem_id: 'shopping-cart-icon',
event: 'mouseenter',
url: '/changed_url_but_it's_correct'+(new Date().getTime())
},
initialize: function() {
var cart = this;
this.elem = $(this.options.elem_id);
if (this.elem) {
this.elem.addEvent(this.options.event, function() {
cart.viewCart();
});
}
},
getCart: function() {
var cart = this;
var myHTMLRequest = new Request.HTML({
url: cart.options.url,
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
//console.log(responseHTML);
if (!cart.cartDiv) {
cart.cartDiv = new Element('div', {'class':'ajax-cart'});
cart.cartDiv.fade('hide');
cart.cartDiv.inject(cart.elem);
cart.cartDiv.addEvent('mouseleave',function() {
this.fade('out');
});
}
cart.cartDiv.innerHTML= responseHTML;
cart.cartDiv.fade('in');
},
onFailure: function(xhr) {
console.log(xhr.responseText);
}
}).get();
},
viewCart: function() {
if (this.cartDiv) {
this.cartDiv.fade('in');
} else {
this.getCart();
}
}
});
This code works on every browser except IE, only after refreshing the page, it works.
in index.html
if(Browser.ie) {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
} else {
var ajaxCart;
window.addEvent('load', function() {
ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
});
}
In some versions of Internet Explorer (ie. IE6) a script tag might be executed twice if the content-type meta-tag declaration is put after a script tag.
The content-type should always be declared before any script tags.
See here http://mootools.net/docs/core/Utilities/DOMReady
I guess there is no solution so I had to find a workaround for this.
What I did:
Since my problems were solved by refreshing the page, I did this in meta tag.
<meta http-equiv="Expires" content="-1" />
It might help someone else, when it comes up to fixing IE refreshing bugs.
I have the following problem.
On my google map app I need to distinguish click and doulbe click on the markers.
So when I am creating markers I create two listeners:
google.maps.event.addListener(markerTMP, 'click', (function(routeID) {
return function() {
console.log('click '+routeID);
}
})(pointRoute));
google.maps.event.addListener(markerTMP, 'dblclick', (function(routeID) {
return function() {
p('double click '+routeID);
}
})(pointRoute));
The problem is that when I use double click, click is also used.
My idea how to handle this:
On click - create a timeout, on double click - delete it.
But is there a normal way to handle this?
I was not able to found it in API reference.
Here is my workaround. it uses a global var to work across the two functions. Not the most eloquent, but works.
google.maps.event.addListener(marker, 'click', function() {
x = 0
update_timeout = setTimeout(function(){
if (x == 0) {
// do something ;
};
}, 300);
});
google.maps.event.addListener(marker, 'dblclick', function() {
x=1
// do something ;
});
There is no "official" way to handle this in the API. Creating a timeout seems to be the accepted approach.
Try using a click event and a rightclick event instead of click and dblclick.
I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});