Cambio dell'src del tag script

Allora, io volevo sapere se è possibile cambiare l'url dei tag script...

Per ora nel tag script ho l'url di default, così che funzioni anche se js è disabilitato:

<script type="text/javascript" src="js/desktop.js"></script>

Io poi faccio dei controlli (tramite javascript) per vedere se sono su un pc o su un cellulare, e nel secondo caso voglio cambiare il tag in:

<script type="text/javascript" src="js/mobile.js"></script>

Solo che se cambio l'src mi rimangono le funzioni del file "desktop.js" e il file "mobile.js" non lo carica...
Come posso fare?

EDIT
Scusate, quando ho scritto che funzioni "anche se js è disabilitato" avevo la testa fra le nuvole...

[karl94]

Non devi modificare l'attributo, aggiungi un altro elemento script all'albero del documento.

Ok, però se nei due file ho funzioni con lo stesso nome, poi non succede un gran casino?

[karl94]

Dipende, ad ogni modo, rimuovendo l'elemento script non vai ad annullare le modifiche che questo ha apportato alla pagina. Non puoi più semplicemente caricare l'uno o l'altro, a seconda di quello che ti serve anziché caricare prima l'uno e poi l'altro?

no, non posso perché in realtà ci sono più di due file:
mobile (cellulari + tablet in verticale)
tablet (tablet in orizzontale)
desktop (tutto quello che c'è di più grande)

Quindi il mio problema è quando uno gira il tablet...

Sono riuscito a fare in modo che prima si elimini il vecchio tag script e poi si crei quello nuovo,
ma se metto un alert nel file nuovo non me lo "allerta"...

E' possibile che facendo un preload del file vada tutto a posto?
Se sì, come si fa?

[karl94]

Credo tu stia sbagliando approccio, perché mai dovresti differenziare tutto in quel modo? Sei sicuro che ciò che hai in mente sia il metodo migliore per risolvere il problema?

Hai ragione, mi sto complicando la vita...

Ti spiego bene che cos'ho in mente:
Io ho delle funzioni (ad esempio quella per aprire il menu) che si comportano in modo diverso sui tre tipi di dispositivi.
La mia idea era di scrivere tre file distinti così che se le funzioni diventassero tante non rallenterebbero troppo il caricamento della pagina.

Pensi che il modo migliore sia questo o quello di mettere in ogni funzione un if che verifichi se si è su un cellulare, tablet o pc?

[karl94]

Beh, dipende... In cosa si differenziano esattamente? E perché è necessaria questa differenziazione? Senza dare sguardo a qualcosa di concreto è un po' difficile dare consigli.

Allora, ecco com'è il mio codice (abbreviato)(Con jQuery)

<div id="header">
  <a id="mostra" href="javascript:mostra();">Mostra il menu</a>
  bla bla bla
</div>
<div id="menu">
  <a>link1</a>
  <a>link2</a>
  <a>link3</a>
</div>
<div id="contenitore">
  <div id="contenuto">
    bla bla bla
  </div>
</div>

---

CSS PC

#header {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 0px;
  left: 0px;
}
#mostra {
  display: none;
}
#menu {
  position: absolute;
  height: 450px;
  width: 200px;
  top: 150px;
  left: 0px;
}
#menu a {
  display: block;
  width: 100%;
  height: 30px;
}
#contenitore {
  position: absolute;
  left: 200px;
  right: 0px;
  top: 150px;
}
#contenuto {
  width: 100%;
}

Javascript PC

(Per ora vuoto)

---

CSS Tablet

#header {
  position: fixed;
  width: 100%;
  height: 10%;
  top: 0px;
  left: 0px;
}
#menu {
  position: fixed;
  height: 0%
  width: 100%;
  top: 10%;
  left: 0px;
  overflow-y: hidden;
}
#menu a {
  display: block;
  width: 40px;
  height: 100%;
}
#contenitore {
  margin-top: 10%
}

Javascript Tablet

function mostra() {
  $("#menu").animate({"height": "10%"}, 500);
}

---

CSS Cellulare

#header {
  position: fixed;
  width: 100%;
  height: 10%;
  top: 0px;
  left: 0px;
}
#menu {
  position: fixed;
  height: 100%
  width: 0%;
  top: 10%;
  left: 0px;
  overflow-x: hidden;
}
#menu a {
  display: block;
  width: 100%;
  height: 30px;
}
#contenitore {
  margin-top: 10%
  overflow-x: hidden;
}

Javascript Cellulare

function mostra() {
  $("#menu").animate({"width": "90%"}, 500);
  $("#contenitore").animate({"width": "10%"}, 500);
}

---

Scusa la lunghezza del codice, ho cercato di abbreviare il più possibile...
Il javascript si allungherà un bel po', ho messo solo un esempio di funzione "diversa"

Quando giro il tablet o, ad esempio, tengo il browser piccolo su solo metà schermo e quindi rimpicciolisco la finestra, vado a cambiare css...
Per js è meglio tentare di cambiare file o semplicemente accedere alle funzioni con qualcosa del tipo:

mobile = {
  "f1": function () {
    alert("mobile");
  }
};
tablet = {
  "f1": function () {
    alert("tablet")
  }
};
pc = {
  "f1": function () {
    alert("pc");
  }
};

function switch (funzione) {
  if (dispositivo == "mobile") return mobile.funzione;
  else if (dispositivo == "tablet") return tablet.funzione;
  else if (dispositivo == "pc") return pc.funzione;
}

<a href="javascript:switch('f1')">...</a>

[karl94]

Noto che fai largo uso di posizionamenti assoluti, e di URL javascript. Te li sconsiglio ambedue, sopratutto il secondo è molto fastidioso: io personalmente odio questo tipo di collegamenti che sembrano collegamenti normali ma quando provo ad aprirli in una nuova scheda o in una nuova finestra non mi conducono da nessuna parte. Specialmente in questo caso la funzione che svolge quel collegamento sarebbe più appropriata per un pulsante, ma comunque non vedo l'utilità di avere un pulsante che mostri il menù inizialmente nascosto. L'utente deve poter vedere subito i contenuti che hai da proporre.
Per quanto riguarda il posizionamento assoluto, te lo sconsiglio in quanto rende difficile il mantenimento del layout, ad ogni piccola modifica di dimensioni è necessario andare a ritoccare il codice in diverse parti e poi ti permette di ottenere il risultato che hai in mente solo su specifiche risoluzioni di schermo.
Il mio consiglio è quello di adottare un layout fluido, che si adatti da sé alle varie risoluzioni, con al più qualche piccolo accorgimento per risoluzioni particolarmente piccole o per dispositivi touch.
Per esempio, prova a prendere la pagina principale del portale di AlterVista e ridimensionare la finestra: il tutto si adatta per essere sempre visualizzato al meglio.

I layout fluidi sono quelli che usano i float?

L'idea di mettere il pulsante "mostra il menu" mi è venuta pensando hai cellulari: se uno ce l'ha piccolo il menu diventa un po ingombrante...

[karl94]

I layout fluidi sono quelli che usano i float?

No, generalmente per layout fluido si intende un layout in grado di adattarsi alla larghezza della pagina, con le grandezze quindi espresse in percentuale. Puoi si può fare o meno uso dei float.

L'idea di mettere il pulsante "mostra il menu" mi è venuta pensando hai cellulari: se uno ce l'ha piccolo il menu diventa un po ingombrante...

Per i dispositivi mobili con schermi piccoli potrebbe essere un'idea, ma con schermi più grandi non è comodo per l'utente. Ad ogni modo ricorda che ciò che nascondi non è direttamente visibile all'utente, e potrebbe non notare qualcosa che invece gli interessa.