"display:none" σε css δεν λειτουργει

[slevinkelevra]

Καλησπερα

 

Φτιάχνω μια σελίδα με responsive css και media-queries.

Περιέχει επίσης ένα DIV με έναν χάρτη. Όταν ο browser είναι από 500px και πανω ο χαρτης φαινετε "μεσα" στο container DIV του.  Όταν ο browser είναι από 500px και κάτω όλα τα elements της σελίδας

display:none

εκτός από το DIV του χάρτη, που γίνετε

width :100%; height :100%

ώστε να μοιάζει ότι γίνετε fullscreen. Οπότε στο media queries έχουμε

@media screen and (min-width: 500px){
//all other elements set to display:none
#map {width:100%;height:100% margin :0 ; padding:0;}
#gotopage {display:block;}
#gotomap{display:none;}

}

gotopage και gotomap είναι 2 κουμπιά.

 

To gotopage φαινετε πανω από τον χαρτη και όταν το κλικαρει ο χρηστης , αυτό εξαφανιζετε μαζι με το χαρτη και τον γυρναει στη σελιδα. Οποτε

all other elements, gotomap = display block

map, gotopage = display none

 

Στην σελιδα βρισκει (εκτος από μενου κτλ) και το gotomap κουμπι, που αν το κλικαρει όλα τα elements  της σελίδας εξαφανιζοντε, και εμφανιζετε ο χαρτης μαζι με το gotopage. Οποτε

all other elements , gotomap= display none

map, gotopage = display block

 

Αν αυτό γινει με javascript είναι πανευκολο

document.getElemntById("map").style.display="block"; //or none

αλλα

δεν θα είναι πια responsive το css. (μαλλον γιατι κανει edit η Js την css στο DOM?).

 

Οποτε δοκιμασα κατι λιγο πιο sneaky να προσθαφαιρώ classes στα elements. Δηλαδη

function gotomap(){	

var theDiv = document.getElementById("map");
 theDiv.className = theDiv.className.replace(/\bhidden\b/g, "");
 
var theDiv2 = document.getElementById("headup");
 theDiv2.className = theDiv2.className.replace(/\bnothidden\b/g, "");
}

function gotopage(){	

var theDiv = document.getElementById("map");
 theDiv.className += "hidden";

 var theDiv2 = document.getElementById("headup");
 theDiv2.className += "nothidden";
}

και στη css

.hidden {display:none;}
.nothidden {display:block;}

"headup" είναι το id του header. Δεν δουλευει τιποτα, ουτε το για χαρτη ουτε για header. Δεν υπαρχουν λαθη στη κονσολα, απλα δε δουλευει κατι.

 

Επισης η δομη του αρχειου είναι

<?php
 include_once('header.php');
?>

<script type='text/javascript'>
//other stuff
function gotomap(){//kodikas parapano
function gotopage(){//kodikas parapano
</script>

//html....

μεσα στο header . php εχουμε

<header id="headup">
//menu, metadata etc...
</header>

Καμια εξηγηση/συμβουλη γιατι δε δουλευει? Η καποια εναλλακτικη για togle της css αλλα να παραμενει και responsive?

 

Ευχαριστω πολυ

[defacer]

Γράφεις πολλά ρε συ αλλά δεν είναι ξεκάθαρο το τι περιγράφεις (τουλάχιστον εγώ δεν καταλαβαίνω 100%). Επίσης δε μας δείχνεις και την πλήρη μορφή από HTML/CSS οπότε είναι λίγο δύσκολο να βγει άκρη.

 

Κάτι που παρατήρησα είναι πως όταν προσθέτεις classes δε χρησιμοποιείς κενό -- αν έχουν ήδη classes τα elements θα μπερδευτούν όλα και δε θα δουλεύει τίποτα. Υπάρχει περίπτωση να συμβαίνει αυτό;

[cyclo]

Κάνε ένα κόπο να δείξεις link, και θα δούμε τι γίνεται.

[FlevasGR]

display: none;

visibility: hidden;

[slevinkelevra]

Ευχαριστω για τις απαντήσεις και το χρόνο σας και συγνώμη που αργησα να απαντήσω, πνιγομαι.

 

Λοιπον, και αυτό που είπε ο defacer , για το κενο στα classes αλλα και επίσης

{display:none!important;}
ή
{display:block!important;}

δηλαδή προσθήκη του

!important

οπου χρειάζεται.

 

Προσοχή σε όσους χρησιμοποιείται media queries, όλο και καποιο ανεπιθυμητο overright στα css θα σας κανουν