Mappa magica

Mappa magica postato il 21/07/2015 09:16:25 nel forum programmazione, open source e hosting

Salve a tutti,

Un titolo simpatico per un argomento forse difficile, vorrei far in modo(visto che sto sviluppando anche per mobile ) che la mappa nella versione pc va bene quella fornita da voi, ma poi nella versione mobile ( che è semplicemente un riadattamento a codice e non lato server ) una lista stile menu invece che a punti come la mappa. è possibile distinguere con un if magari ? 👋

21/07/2015 09:50:02

Un if si potrebbe usare certo. Dicendogli che ad una determinata risoluzione carica qualcosa di diverso dalla mappa. Oppure lo si può fare anche da css. Potresti mettere una classe alla quale assegni display:none e con una mediaquery porti quella che ti interessa ad inherit o block o quel che ti serve. L'unica cosa è che con questo metodo penso si sprechi un pochino di banda in più, anche se non eccessivamente (si tratta di un'immagine dopotutto)

21/07/2015 09:59:29

Hai sott'occhio il codice per darmi qualche indicazione ?

21/07/2015 10:06:44

Una media query come detto, o ancora meglio identificare lato server se l'utente sta usando un dispositivo mobile o un pc differenziando l'html su due template diversi in base al tipo di supporto utilizzato

21/07/2015 10:12:21

Ho capito fin a far @media ecc ho capito,

però non capisco come faccio a "comunicare" il fatto di mettere la lista dei paesaggi in fila e la mappa farla sparire ( background-image = none ?)

21/07/2015 11:38:27

resetti le proprietà della mappa che ti servono nella media query:
quelle relative al background per togliere la mappa e mettre i colori che vuoi tu, la posizione e le dimensioni della stessa,
mentre per i div della mappa cambi il tipo di posizione da absolute a relative, ne resetti la posizione e poi ti assicuri che il display sia in block in maniera che siano uno sotto l'altro.

21/07/2015 20:27:08

Credo sia meglio usare un clear per incolonnare un'elemento comunque, con il block potrebbe creare problemi

22/07/2015 11:15:40

Il problema è questo essendo che è settato div map e ha dei valori e li non ce problema, ma poi il resto dei valori e settato in loco con uno style . come faccio a modificare quei valori da css?
e l'altro problema che le varie location son settate cosi

<div style="position:absolute; margin:80px 0 0 300px;"><a href="main.php?page=location" target="_top" onmouseover="show_desc(event, 'location');" onmouseout="hide_desc();">Location </a></div>

....
🆘🆘🆘

22/07/2015 11:39:27

in questo caso la direttiva:

!important

dei css può esserti molto utile

http://www.html.it/pag/18947/la-keyword-important/ http://www.html.it/pag/18947/la-keyword-important/ ↗


In questo esempio che ho fatto io pupi vedere come funziona applicata ad un esempio simile al tuo dove lo stile definito nell'inline viene sovrascritto da quello nel css quando ricadono le condizioni della media query (per farlo basta che riduci o aumenti le dimensioni del riquadro in basso a destra facendo scorrere a destra e sinistra la barra verticale che divide i riquadri).

Quando il riquadro è largo meno di 600 px la media query e la direttiva important all'interno della stessa resettano i div all'interno del riquadro.

https://jsfiddle.net/cszqwm3o/ https://jsfiddle.net/cszqwm3o/ ↗

23/07/2015 17:28:41

Non sono molto esperto di come funzioni gdronline ma sarebbe consigliabile eliminare tutto lo stile inline dal codice, applicandolo a delle classi. Proprio per non insorgere in questi problemi.

23/07/2015 19:28:46

non puoi applicare delle classi per parte del codice della mappa, perchè
le posizioni delle locazioni vengono prese da delle coordinate salvate nel database.

al massimo potresti generare dentro la pagina il codice per ogni locazione assegnando un id ad ogni div con la locazione e poi mettendo comunque un foglio di stile inline tra i tag <style></style> nella pagina.

E' stato scelto da chi ha programmato il gdrcd di mettere inline le coordinate della locazione perchè non dovrebbe dare problemi la cosa.