[HTML][JavaScript][CSS]regula css/js Opcje

[eminiasty]

Jak napisac w css lub js reguly typu:

Np div "ABC"

jesli div "ABC" ma height > 30 to wysokosc =300

jesli w div "ABC" pojawia sie scroll(overflow y) to wyskosc =300

Ten post edytował eminiasty 17.04.2016, 15:39:46

[Comandeer]

W CSS się nie da.

W JS to zabawa z elem.offsetHeight i elem.scrollHeight.

[eminiasty]

Pierwsze udalo mi sie rozwiazac tak:

[PHP] pobierz, plaintext 
var cw = $('.menu').height();
 
 if (cw>100){
$('.menu').css({'width':'300px'});  
} 
[PHP] pobierz, plaintext 

Drugie znalazlem cos takiego ale..:

[PHP] pobierz, plaintext 
 var element = document.querySelector('.menu');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // your element have overflow
  element.style.width = "300px";
   element.style.background = "yellow";
}
else{
  //your element don't have overflow
  element.style.background = "red";
}
 
[PHP] pobierz, plaintext 

może po lekkiej modyfikacji nawet by dzialalo jak chce ale lecz, dziala to dopiero po odswiezeniu strony, otwieram menu jest czerwony
otworze sub menu(pokaze sie scroll z overflow) -powinno byc zolte i nie ma, a nie da sie w tym momencie zamknac odswiezyc strony i wykonac tego wtedy.. jak to obejsc?

Ten post edytował eminiasty 17.04.2016, 18:08:18

[patwoj98]

Zobacz w konsoli co ma element .menu.
W którym miejscu ładujesz skrypt?
Jeśli u góry to proponuję dodać, aby załadowało po załadowaniu strony nasze jquery $(document).ready();

[eminiasty]

Wiec tak wyglada to tak:
http://viamarimar.cba.pl/green/#
(x przesuwa sie tylko przy malej szerokosci okna przegladarki)

-Jeśli zrozumiałem to element .menu ma dokladnie nav.menu

-skrypt uruchamia sie po otworzeniu jednego menu(slide),nastepnie w zaleznosci czy jest scroll czy nie chce by odrazu nastapilo jego "naprawienie" bez momentu przesuniecia

Dodalem to co proponujesz i tak:

1 przypadek - nawet sie nie otwiera slide menu:

[PHP] pobierz, plaintext 
$( document ).ready(function() {	
 var scrolled = false;
 
$('nav.menu').on('scroll', function() {
    scrolled = true;
	$('nav.menu').css('width','280px'); 
});
 });
[PHP] pobierz, plaintext 

2 przypadek - efekt jest ten sam, zmiana wystepuje po przesunieciu scrola w menu dopiero

[PHP] pobierz, plaintext 
$( document ).ready(function() {
var scrolling = false;
 
$('nav.menu').on('scroll', function(e){
if (!scrolling) {
 
    if ($('.menu').scrollTop){
      $('nav.menu').css('width','280px');
	}
	else{
		$('nav.menu').css('width','none');
	}
 
}
 
});
[PHP] pobierz, plaintext 

-nav.menu dalem tylko ze wzgledu bo Pan up tak poradzil

Jakieś pomysły jak to obejść? a moze da się jakoś w CCS?

Ten post edytował eminiasty 18.04.2016, 12:44:54