Problem z Google Maps w ukrytym DIVie

Przy próbie wyświetlenia mapy Google znajdującej się w ukrytym divie (stosując np. zakładki na stronie) często pojawia się problem z prawidłowym ładowaniem mapy.
Mapa wygląda np. tak:
google

Wyeliminować go możemy resizując mapę już po załadowaniu/wyświetleniu ukrytego diva. Zrobimy to wywołując polecenie
google.maps.event.trigger(mapa, 'resize');

Dla przykładu – jeżeli ukrytego diva wyświetlamy funkcją wywoływaną przez onClick, po jej wywołaniu doklejamy powyższy kod.

Jeżeli po resizie mapa wyświetla się w całym zadanym obszarze, ale nie jest wyśrodkowana możemy użyć funkcji
mapa.setCenter(getCen);
gdzie getCen jest aktualnym środkiem mapy
getCen = mapa.getCenter();
Powyższą funkcję można wywołać wewnątrz funkcji initialize(), pamiętając jednak żeby przed ta drugą zadeklarować globalność zmiennej getCen (jeżeli zamierzamy ją użyć w onClick przełączanego taba).

Cały kod dla powyższego przykładu może mieć postać


<script type="\"text/javascript\"">// <![CDATA[
var getCen;
var mapa;
function initialize() {
var myLatlng = new google.maps.LatLng($szerokosc, $dlugosc);
var mapOptions = {
center: myLatlng,
zoom: $zoom
};
mapa = new google.maps.Map(document.getElementById(\"mapa\"),
mapOptions);
getCen = mapa.getCenter();
}
google.maps.event.addDomListener(window, 'load', initialize);
// ]]></script>

Zmianę taba z resizem i centrowaniem mapy wywołujemy wtedy np. tak:
<a onclick="tabShow('lokalizacja');google.maps.event.trigger(mapa, 'resize');mapa.setCenter(getCen);" href="#">lokalizacja</a>

Lightbox nie działa na nowszych IE

Jeżeli masz problem z działaniem lightboxa na nowszych wersjach IE (od 9 w górę) wystarczy zaktualizować bibliotekę Prototype.
Najnowszą można pobrać stąd.

JQuery vs Prototype – konflikt

Kiedy chcesz na swojej stronie jednocześnie użyć JQuery oraz Prototype (np. Lightbox) spotyka Cię niemiła niespodzianka.

Biblioteki te “gryzą” się ze sobą. Przy załączeniu do kodu obydwu, działała będzie tylko jedna z nich.

Problemem jest używanie przez obydwie biblioteki $ jako nazwy funkcji.

Rozwiązanie problemu jest bardzo proste.

1. Includujemy najpierw Prototype

<script type="text/javascript" src="prototype.js"></script>

2. Includujemy JQuery

<script type="text/javascript" src="jquery.js"></script>

3. Załączmy plik z biblioteką JQuery którą chcemy użyć, w tym przypadku jest to JQuery slide

<script type="text/javascript" src="jquery.slide.js"></script>

4. Następnie edytujemy plik  jquery.slide.js. Na początku kodu dodajemy

var j = jQuery.noConflict();

5. Wszystkie funkcje $() i zmienne $ zmieniamy odpowiednio na  j() i j

W powyższym przykładzie będzie to wyglądało następująco:

$.fn.infiniteCarousel = function() {

zmieniamy na

j.fn.infiniteCarousel = function() {

Dalej

var $wrapper = $(’> div’, this).css(’overflow’, ‘hidden’),

zmieniamy na

var $wrapper = j(’> div’, this).css(’overflow’, ‘hidden’),

itd.

Po wprowadzeniu zmian we wszystkich nazwach, które powodowały konflikt, skrypty powinny działać jednocześnie bez żadnych problemów.

1. Includujemy najpierw prototype