Dziwny problem ze schowaniem czesci DIV-a box-menu za pomoca .js - konflikt div-a Id z class?

0

Witam,

mam taki problem, ze schowaniem czesci DIV-a za pomoca .js ..., ktory odpowiada za wazny BOX z menu na stronie...

tzn. Musze go schowac po czesci tylko dla mobile - w okreslonym rozmiarze min. 420px- max767px , i tylko w poziomie/ landscape

dokladnie w taki styl ma sie pokazywac:

@media screen and (min-width: 420px) and (max-width: 767px) and (orientation: landscape) {
  #div_czysty_doczepiony_dla_js {
      display: block;	
  }	
}

pozostale wartosci:

html:


<div class="div_z_regula_boxa" id="div_czysty_doczepiony_dla_js">

      <div id="menu">
      
  <a href="#1">Dzial 1</a>
  <a href="#2">Dzial 2</a>
  <a href="#3">Dzial 3</a>
  
          </div>

  </div>

css:


.div_z_regula_boxa  { 
	background-color: green;
	width: 100%; 
	height: 190px;
	margin: 0 ;
	padding: 0;
}

 /*    **ustawienie  display: none;  dla calosci rozmiarow w .css - nr1 glowny obejmujacy wszystkie  rozmiary**  */ 
 #div_czysty_doczepiony_dla_js {
	  display: none;
}

i .js

document.getElementById("**div_czysty_doczepiony_dla_js**").style.margin = "-100px";

to
Prawie wszystko dziala, poza jednym 🙃
tzn

Ustwwiajac jak w calosci wpisu - a dokladnie display: none; dla #div_czysty_doczepiony_dla_js

ktory
jest nr1 - obejmuje wszystkie rozmiary urzadz. - to znika-wylacza mi zawartosc
tak jakby z <div class="div_z_regula_boxa" - zamiast #div_czysty_doczepiony_dla_js - ktory powinien dzialac tylko, ale dla (min-width: 420px) and (max-width: 767px)...

o co chodzi? - bez dodatkowego kodu w .js da sie to ogarnac? Chyba, ze bez tego ciezko bedzie uzyskac efekt –

do tego jak ustawiam visibility: hidden; zamiast display: none; w nr1 glowny obejmujacy wszystkie rozmiary to ta wartosc dziala na wszystkie rozmiary urzadzen tzn. z RWD i bez...

#div_czysty_doczepiony_dla_js - ten div za nic nie odpowiada – jego tylko dla funkcji .js

a nr 1 na wszystkie rozmiary urzadzen b. Wazny jest ten: class="div_z_regula_boxa"

Wg mnie tak na szybko mysle, ze z racji div z #ID - przejmuje kontrole z powodu praworzadnosci - kto jest nr 1 - ale, ze az tak? majac, gdzies wartosci z class="div_z_regula_boxa" jak i w .css-ie ustawione reguly?

Pozdrawiam...

0

Raczej chodzi o kolejność: najpierw należy podać wartości domyślne, a później specyficzne. Ponieważ szablony są interpretowane po kolei. Tutaj działa.

0
overcq napisał(a):

Raczej chodzi o kolejność: najpierw należy podać wartości domyślne, a później specyficzne. Ponieważ szablony są interpretowane po kolei. Tutaj działa.

Witam dzieki z gory za odp. - poza tym to raczej nie jest jednak tego powodem... tzn. kolejnosc ktora jest b. wazna tym bardziej, gdy projekt jest zlozony... choc moge byc nadal w bledzie 😛

wazna tez kwestia css-y mam odizolowane jak ponizej i poukladane reguly w nich tak, aby uniknac wlasnie byka-ow -

tylko
href="css/css_desktop.css"

tylko
href="css/css_responsive.css"

ale zrobilem grubsze testy na juz pliku jednym /index.html podpinajac tylko istotne kody, a wyglada on tak:


<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- desktop nr1 glowny -->    		 
<link rel="stylesheet" type="text/css" href="css/css_desktop.css" media="all">
		<!--  responsive nr2 -->
<link rel="stylesheet" type="text/css" href="css/css_responsive.css" media="all">


<style>

/*   ustawienie  display: none;  dla calosci rozmiarow w .css - nr1 glowny obejmujacy wszystkie  rozmiary */ 

#div_czysty_doczepiony_dla_js {
	  display: none;
}

/*  div class-a wyciagniety z /css_desktop.css do pliku /index - aby byl priorytetem */

.div_z_regula_boxa  { 
	background-color: green;
	width: 100%; 
	height: 190px;
	margin: 0 ;
	padding: 0;
}


@media screen and (min-width: 420px) and (max-width: 767px) and (orientation: landscape) {

#div_czysty_doczepiony_dla_js {
		display: block;	
	}	

}

/*   dodalem jeszcze pod test inny rozmiar dla 2-orientacji - viewport */ 

@media screen and (min-width: 767px) and (max-width: 991px)  {

#div_czysty_doczepiony_dla_js {
		display: block;	
	}	

}

<style>


<div id="div_czysty_doczepiony_dla_js"  class="div_z_regula_boxa">

      <div id="menu">
      
  <a href="#1">Dzial 1</a>
  <a href="#2">Dzial 2</a>
  <a href="#3">Dzial 3</a>
  
          </div>

  </div>


<script>
// .js sprawnie dzialajacy
document.getElementById("div_czysty_doczepiony_dla_js").style.margin = "-100px";
</script>

</body>
</html>

Wg mnie wyglada na to, ze #ID div_czysty_doczepiony_dla_js - uzyty do .js pod "-100px"
dziala tak jakby nic sobie z tego nie robil, ze jest tez class .div_z_regula_boxa przejmowal pod nim od ktorej zalezy wyswietlanie
sie menu w oryginale wszedzie poza @media screen and jak wyzej z display: block;

i tym bardziej nawet jak ma dla innych rozmiarow-ekranow #div_czysty_doczepiony_dla_js regule:

#div_czysty_doczepiony_dla_js {
	  display: none;
}

tzn. ten #div goruje nad .div_z_regula_boxa wylaczajac tak jakby 2div-y
+ tez .js z style.margin = "-100px" nie dziala... efekt pustego pola

jesli dobrze ulozenie jest pod odp. czytanie przez parser kodu
to moze problemem jest w tym moim przypadku uzycie diva #ID pod .js zamiast div Class i ktory powinien byc odp. za style.margin = "-100px"? - a #ID glownym dla div_z_regula_boxa ???

0

@Hern Przedmówcy chodziło o kolejność wpisania reguł CSS w kodzie źródłowym, bo ona ma wpływ na finalny efekt (nie o kolejność elementów na stronie).

Dla przykładu:

div.button {
  color: red;
}
div.button {
  color: blue;
}

Taka reguła sprawi, że div.button będzie niebieski (bo ustawienie color:blue jest niżej).

Jeśli dodasz media-query, to one również muszą to respektować:

@media screen and (min-width: 420px) {
  div.button {
    color: red;
  }
}

div.button {
  color: blue;
}

Ten przycisk będzie zawsze niebieski - mimo tego media-query, bo owszem dodałeś go; ale niższa reguła go nadpisze.

To miał na myśli przedmówca, pisząc:

overcq napisał(a):

Raczej chodzi o kolejność: najpierw należy podać wartości domyślne, a później specyficzne. Ponieważ szablony są interpretowane po kolei.

Należałoby to zrobić tak:

div.button {
  color: blue;             /* ustawienie koloru */
}

@media screen and (min-width: 420px) {
  div.button {
    color: red;           /* dla media-query, nadpisz kolor */
  }
}

Natomiast Twój JS:

<script>
// .js sprawnie dzialajacy
document.getElementById("div_czysty_doczepiony_dla_js").style.margin = "-100px";
</script>

to samo możesz zrobić dopisując style="margin:-100px;" do elementu:

<div id="div_czysty_doczepiony_dla_js"  class="div_z_regula_boxa" style="margin:-100px;">
0

@Hern Przedmówcy chodziło o kolejność wpisania reguł CSS w kodzie źródłowym, bo ona ma wpływ na finalny efekt (nie o kolejność elementów na stronie).

Witam, skad ta mysl u ciebie, ze na sporo % nie zrozumialem przekazu?

przeciez dowodem jest na to w ostatnim wpisie - to co ukazalem w kodzie?

  • do tego jest to nowa wersja / nowy plik testowy - wyrzucajac wrecz sporo innego kodu z niego dla klarownosci testu, ktory moglby powodowac konflikt-y

do tego zauwaz tez, ze jest w nim kolejnosc zachowana dobrze? - chyba, ze cos zauwyles blednego 😛
... hmmm ale tez dziwne, ze jesli tak to czemu nie odwolales sie do tego, co ukazalem wczesniej we wpisie/kodu?

dla jasnosci jeszcze idac od gory:

.css-y ponizsze, ktore wstawilem tez nie bez kozery 😉
pracuja prawidlowo tzn. zgodnie z zasadamy dla kolejnosci- pod parser-y - tzn. poza tym problemem czego dotyczy post/wpis...

responsive nr2 -> jest z innym kodem na dole, a nad nim desktop nr1 glowny
co powoduje, ze .css css_responsive.css
pracuje wg zasad parsera - przejmujac z racji rangi priorytet - w od-czytaniu kodu jak ponizej:


<!-- desktop nr1 glowny -->  
<link rel="stylesheet" type="text/css" href="css/css_desktop.css" media="all">

<!--  responsive nr2 -->
<link rel="stylesheet" type="text/css" href="css/css_responsive.css" media="all">

do tego ten najbardziej wazny kod z racji problemu/wpisu - zauwaz tez, ze wyciagnalem specialnie wrecz z 2 plikow wyzej .css do pliku glownego /index.html pod <style>... </style> , aby juz totalnie byl nr1 - w kolejce do odczytu przejmujac glowne stery/ stajac sie priorytetem...

oraz zauwaz tez, ze calosc jest wprowadzona w pliku /index.html ,
i zgodnie z tym, co tez pisal overcq z czym sie jak najbardziej zgadzam...

czyli zaczynamy od: ID #div_czysty_doczepiony_dla_js {
potem class-a .div_z_regula_boxa { konczac na PRIORYTECIE dla responsive

tzn. glownie, aby uzyskac w tym przypadku wg funkcji .js style.margin = "-100px" pod tylko poziom: @media screen and (min-width: 420px) and (max-width: 767px) and (orientation: landscape) {

i nie tylko tzn. chodzi tez o @media screen and (min-width: 767px) and (max-width: 991px)

a po tych kodach z pliku /index.html wskakują / maja pierwszenstwo wg zasad wc3 - Parsowania (kierujac sie oczywiscie zasada dolnego odczytu)

href="css/css_desktop.css"
href="css/css_responsive.css"

przy zalozeniu tez istotnym u mnie, ze

</p>

nie wystepuja juz nigdzie / glownie .css poza miejscem jak wyzej to ukazalem w kodzie-pliku /index.html (tzn. tylko bezposrednio w <style>... </style> od linii 14.

Co do tego:

to samo możesz zrobić dopisując style="margin:-100px;" do elementu:

niestety, ale nie w tym przypadku... dlatego, ze inna funkcja tez bierze udzial w tym divie - z 2 atrybutami (a jest jeszcze inny div ID, ktory trzyma to w rydzy dla innego pozycjonowania) - wykonywanych jest wiecej niz tylko ten "margin:-100px;" operacji w .js...

i jest on wrecz tu MEGA ratunkiem, aby wlasnie nie tworzyc min. 3-4 razy wiecej div-ow, a przy tym kodu... i kontenerow stosujac potem z racji roznych rozmiarow ekranow - dla RWD wiecej display: none / block itp. - do tego dodam tez, ze w projektach nie uzywam zadnych gotowcow na styl Frameworki .css...

Poza tym sam jestem zaskoczony, ze w przypadku tym taki wynikl problem 😯 tym bardziej, ze chodzi o dosc prosta rzecz - i zakladajac, ze ta funkcja .js jest bezposrednio w <script>...</script> w pliku /index.html - a nie w innym-ych plikach .js
tzn.

<script> // .js sprawnie dzialajacy document.getElementById("div_czysty_doczepiony_dla_js").style.margin = "-100px"; </script> </body> </html>

Reasumujac w tym przypadku atrybut div# id="div_czysty_doczepiony_dla_js" i w takim ulozeniu dziala jak pisalem wczesniej - czyli nie tak jak zaklada cel-plan...

a moze problemem jest DOM? - np. hierarchia - w strukturze DOM? co powoduje ze .js z ID bedzie zawsze nr1 - nie pozwalajac wejsc atrybutowi z class-a w tego typu przypadku... +wrecz wylaczajac display: block;, gdy powinno to byc odwrotnie?

do tego nic sobie nie robi z tego, ze wchodzi tez prawidlowo MQ: @media screen and (min-width: 420px) and (max-width: 767px) and (orientation: landscape)...

0

Nie pozostaje nic innego jak sprawdzenie na oryginalnym kodzie, ponieważ tam musi coś być nie tak. Czy możesz go gdzieś udostępnić?

0
overcq napisał(a):

Nie pozostaje nic innego jak sprawdzenie na oryginalnym kodzie, ponieważ tam musi coś być nie tak. Czy możesz go gdzieś udostępnić?

Witam ponownie, faktycznie ukazanie tego na calosciowym pliku wiecej powinno pomoc - do tego dodam jeszcze inna funkcje wazna do obecnej... tylko musze czas wygospodarowac na to poza tym, co juz ukazalem... odezwe sie ponownie - pozdr.

0
overcq napisał(a):

Czy możesz go gdzieś udostępnić?

Witam ponownie,

tak to wygląda na szybko url do calosci: https://jsfiddle.net/2qdr9hsg/

przesuwajac szerokosc okna widac w czym rzecz. kod css jest teraz osobno poza html i wg zasad parsowania powinno wszystko dzialac dobrze,

dodalem tez do klasy .div_clas { tak dla asekuracji display: block; jesli nie wykryje po samym DIV-ie tego block - dla globalnego wczytywania css-a... lecz dziala to nadal tak jak opisyalem to na poczatku

Poza tym jeszcze myslalem nad tym czy moze nie rozpoznaje tej class-y .div_clas pod global wg tego schematu u mnie?

i zeby szukac moze rozwiazania pod taki zapis z display: block;:

#div_id, .div_clas {

  background-color: #ffff96; 

padding: 0;
width: 100%; 
height: 200px;

position: fixed; 

display: block;
z-index: 10; 

}

i cos tam ruszylo-zadzialalo, lecz i nie... tzn. ze #div_id dziala jednak globalnie (chyba przez display: block;)

i .css wskakuje z paramtrami `.div_clas

lecz nadal nie o to chodzi... wiec jeszcze zrobilem tak (czego nie ma w wyzej w linku calego kodu) -

usunalem to display: block; poza reszta w #div_id, .div_clas { display: block; }

i wyglada na to, ze zadzialalo, ale tylko dla od 860px tzn.

@media screen and (min-width: 860px) and (max-width: 961px) {

a dla

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {

blokada 😃 - sadze, ze chyba klania sie to fakt ze parser od dolu pociagnal tylko jeden ID #div_id ktory jest b. wazny, a wyzej dla

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {

chyba potraktowal jako drugi - ID #div_id` ??? uwazajac go za duplikat? i mamy zero reakcji na niego tzn.

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
  #div_id { 
     display: block;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -o-transition: top 0.5s;
    -ms-transition: top 0.5s;
  }
}

czyzby w tym byl problem-rozwiazanie? i dla roznych @media tym przypadku moim parser traktuje ID jako to samo?

0

parser traktuje ID jako to samo?

A używasz dev toolsów? W dev toolsach możesz zobaczyć, jak przeglądarka to faktycznie parsuje i co dokładnie aplikuje do czego.

No i szczerze mówiąc nie bardzo rozumiem istoty problemu. Nie rozumiem, co dokładnie nie działa. Wchodzę na stronę i faktycznie ten obrazek się pojawia i znika przy różnych szerokościach.

Aha, no i nie wiem, co chcesz osiągnąć (widzę, jak to działa, ale czytam posty w tym wątku i nie rozumiem, jaki ma być efekt docelowy), ale czy przypadkiem część twojego problemu nie rozwiązałaby się, gdybyś użył position: sticky? https://developer.mozilla.org/en-US/docs/Web/CSS/position

0

U mnie w przeglądarce Chromium na fiddle wszystko działa, co jest zapisane w kodzie. Nie wiem, skąd takie przypuszczenia o tym, że

  1. ‘id’ jest ważniejszy niż ‘class’
  2. druga definicja styli jest traktowana jako odrębna według ‘id’

Czy może chcesz osiągnąć co innego niż opisałeś?

0

Witam, i dzieki z gory za obecna odp.

A używasz dev toolsów? W dev toolsach możesz zobaczyć, jak przeglądarka to faktycznie parsuje i co dokładnie aplikuje do czego.

Tak uzywam - tzn. Co masz dokladnie na mysli? Moglbys pokazac to na screenie? - lub o ktorym module i sekcji piszesz?

  • jest tego tam tak duzo ;P

Nie rozumiem, co dokładnie nie dział.

  • NIE dziala wyswietlanie tego co zawiera class-a class="div_clas" :

czyli ten caly div:



<div id="div_id" class="div_clas">

	<div class="imgyah">
	
<img src="https://e7.pngegg.com/pngimages/552/302/png-clipart-yahoo-mail-logo-yahoo-games-yahoo-search-search-for-purple-text-thumbnail.png"  width="250" height="80" alt="xxx">

	</div>

</div>

– tzn. Gdy funkcja .js i id="div_id" zostaja wylaczone-dezktywoane – dla css-a
dla kodu - z wymiarow:

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) @media screen and (min-width: 860px) and (max-width: 961px)

a dokladniej class="div_clas" tak jakby przegrywal z id="div_id" lub nie dzialal display: block; ? :(

nawet jak ma jeszcze dodatkowo dopisane display: block;

Wiec efekt docelowy ma byc taki, ze dla wymiarow ponizszych + dla jednego orientation: landscape ma tylko dzialac obecna funkcja .js – a poza tymi wymiarami @media screen ma dzialac wyswietlanie tego diva plywwjacaego zoltego z zawartoscia (czyli to co pokazuje sie przy ponizszych wymiarach)

@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) @media screen and (min-width: 860px) and (max-width: 961px)

chcialbym, aby to uzyskac za pomoca kodu css – chyba ze sie nie da w tym przypadku to ok i pewnie zostaje mi tylko osiagnac to w .JS?

Pozdr.

0
overcq napisał(a):

U mnie w przeglądarce Chromium na fiddle wszystko działa, co jest zapisane w kodzie. Nie wiem, skąd takie przypuszczenia o tym, że

  1. ‘id’ jest ważniejszy niż ‘class’
  2. druga definicja styli jest traktowana jako odrębna według ‘id’

Czy może chcesz osiągnąć co innego niż opisałeś?

Witam ponownie,

  1. bo np. nie dziala div_clas , a dokladnie <div id="div_id" class="div_clas">...<div> , gdy wymiary sa inne niz te dla ktorych dziala div_id z funkcja .JS

  2. podobnie sadzilem - ale... napisalem o tym bo moze jednak nie bo np. cos .js miesza, i wtedy #div_id { musi miec inna nazwe ID,
    ale raczej jest jak piszesz...

Pozdr.

0

Rozumiem, co chciałeś zawrzeć w kodzie: zamiast #div_id miały być .div_clas, ale tylko w @media.
Na MDN ten problem jest opisany:

No­te: The ID sele­c­tor has high specificity. This me­ans styles ap­plied ba­sed on ma­tching an ID sele­c­tor will ove­r­rule styles ap­plied ba­sed on other sele­c­tor, in­clu­ding cla­ss and ty­pe sele­c­to­rs. Be­ca­u­se an ID can on­ly oc­cur on­ce on a pa­ge and be­ca­u­se of the high spe­ci­fi­ci­ty of ID sele­c­to­rs, it is pre­fe­ra­b­le to add a cla­ss to an ele­ment in­ste­ad of an ID. If using the ID is the on­ly way to ta­r­get the ele­ment — pe­r­ha­ps be­ca­u­se you do not ha­ve ac­ce­ss to the ma­r­kup and can­not edit it — con­si­der using the ID wi­thin an at­tri­bu­te sele­c­tor, such as p[id="header"].

I tutaj masz opisane dokładnie to, co może spowodować przemyślenie projektu: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity .

I tak, da się oczywiście to rozwiązać w CSS. Tak przy okazji dodam, że ja definiuję w plikach selektory kolejno od mającego najmniejszą wagę.

0

Wiedzialem, ze div z #ID to nr1 - w plikach .css... poza wstawieniem go na sztywno w plik <style>...<style> tzn. ten wtedy jest nr 1

ale myslalem, ze jesli jest taki przypadek jak u mnie tzn. div_id - ma display: none;
a div_clas dodatkowo display: block to przejmie kontrole... i bedzie to dzialac wg zalozenia

co tez wazne display: none; dla div_id nie wzial sie bez kozery - ma wlasnie tez za zadanie wylaczyc funkcje .JS-a, i wyswietlic zawartosc div_clas - bez .JS- czyli sam baner... a tu nic z tego bo div z #ID goruje nad caloscia i jest jak jest 😦

Ok, a zobacz na ta wersje nowa https://jsfiddle.net/8br4oum5/2/ w ktorej zrobilem kilka zmian pod div z .CLASS + .js tez zmieniajac na z ID na document.getElementsByClassName("div_id")

i tak zapisalem teraz div glowny czyli: <div class="div_clas div_id"> ...</div>

i tez nie dziala - zachowuje sie podobnie jak wczesniej przy div z #ID https://jsfiddle.net/2qdr9hsg/

czyzbym walnal teraz Byka??? 😜

0

Wyświetlanie baneru w zależności od @media działa. Natomiast żeby działało ustawianie marginesu potrzeba wybrać konkretny/e element/y z listy: document.getElementsByClassName("div_id")[0].style.margin albo for( const e of document.getElementsByClassName("div_id")).

0
overcq napisał(a):

Wyświetlanie baneru w zależności od @media działa.

Witam, jak dziala? u mnie nie dziala 🤪

nie-dzialaaa-829px.jpg

pokazuje Ci pod tym np. wymiarem 829px baner?

co do document.getElementsByClassName("div_id")[0]...

faktycznie zapomnialem dodac [0] - waznego elementu dla class- aby okreslic dana class-e dla kodu .js -

poprawilem teraz jest wersja z dzialajacym .js-em margin - https://jsfiddle.net/hjwcqz5g/

ale jak tu juz jestesmy to:

sek w tym, ze pod global .css - inny niz wg warunku ma nie dzialac margin - funkcja .js (tzn. ona raczej dziala dalej, lecz jest ukryta- niby wylaczona dla div_id) wiec na ponizszym screenie...

  • a ma dzialac/wyswetlac sie zawartosc / samego banera z diva <div class="div_clas div_id"> ...</div>
    bez deklaracji class="div_id"

nie-dzialaaa-829px2.jpg

Teraz wyglada na to, ze dzialaja jednoczesnie class="div_clas div_id" ok...
ale to da sie z tymi class-mi uzyskac to co oczkuje?, i czego nie bylo szans uzyskac przez #ID

problem jest tylko w tym jak na screenie wyzej z :none

hmmm, a moze inaczej do tego nalezy jednak podejsc?

0

W kodzie jest

@media screen and (min-width: 860px) and (max-width: 961px)
{ .div_id
  { display: block
  }
}

Czyli dla szerokości 829 pikseli ma zastosowanie ogólne display: none.

Nie wiem, jaki jest projekt strony, co chcesz osiągnąć poza uporczywym trzymaniem się tej konstrukcji, która jest użyta. Może można by to prościej zrobić, ale nie wiem, co chcesz osiągnąć tak naprawdę. Natomiast jeśli w @media, w stylach klasy umieścić margin: 30px 35px, to wtedy można użyć też następującego kodu JavaScript:

function scrollFunction(
){	const e = document.getElementsByClassName( "div_id" )[0];
  	if( getComputedStyle(e).display === "none" )
        return;
  	if( document.body.scrollTop > 100
    || document.documentElement.scrollTop > 100
    )
        e.style.margin = "90px 15px";
    else
        e.style.margin = "";
}
addEventListener( "scroll", scrollFunction );

I wtedy dla niewidocznego elementu o klasie div_id nie ma ustawianego margin.
Ustawiany margines też można by przenieść do CSS.

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