Pozycjonowanie popup-u.

0

Hej,
Robię pewien projekt kalendarza w htmlu. Kalendarz wyświetla 5 elementów 'li' (każdy po 20% szerokości ekranu).
Dni to pionowe kolumny, a każda godzina to kolejny wers.
Po kliknięciu w daną godzinę pojawia się popup umiejscowiony domyślnie nad tą godziną, przesunięty lekko w prawo.
Problem polega na tym, że w ostatniej kolumnie popup zostaję ucięty przez ekran.

Czy jest jakiś łatwy sposób, który pozwoli na uniknięcie takich sytuacji i bedzie wyświetlał popup tab aby mieścił się w ekranie ?

Myślałem może nad stylem css dla ostatniego elementu 'li' który będzie zmieniał to umiejscowienie, ale dni będą się przesuwać w formie slidera i nie bardzo wiem jak to wyliczyć żeby zawsze ten ostatni był wyświetlany inaczej. Innym problemem są węższe ekrany, na których prawdopodobnie popupy i z 4 (przed ostatniej) kolumny będą ucięte.

Znam podstawy js. Może jest gotowiec, którego nie udało mi się odnaleźć ?

1

wyswietl popupa, pobierz szerokość popupa, pobierz szerokość ekranu, pobierz x, y popupa (lewy górny róg), jeżeli x+szerokość >= szerokość ekranu to odejmij od x różnicę o ile Ci za dużo wyszło

0

Napisałem, działa :) i może się komuś przyda, więc proszę.

		$(function() {
		
		
            $('.hour-plan').on('click', function(){
			$('.popup-edit-hour').hide();
			$(this).next('.popup-edit-hour').show();
			
			var popup = $(this).next('.popup-edit-hour');
			
			var width = popup.width();
			var screenWidth = $(document).width();
			var x = popup.offset();
			var roznica = screenWidth - x.left - width; 
			
			if(x.left+width >= screenWidth) {
			
				var pozycja = roznica - 10;
				popup.offsetLeft = pozycja;
				popup.css('left', pozycja);
			}
			
			
			});
			

        });

1 użytkowników online, w tym zalogowanych: 0, gości: 1