Topic: Analfabeta Javascript cerca aiuto

[klades]

Tre cose da provare:

Codice: [Seleziona]

elems[i].removeAttribute("style");
elems[i].setAttribute("style", "max-width: none !important;");
elems[i].style.maxWidth = '2000px !important';


[RNicoletto]

Nessuna delle tre cose ha dato una qualche forma di risultato.

Un metodo alternativo per imporre uno stile ad una classe di elementi via user script alla fine l'ho trovato: utilizzare le API di Greasemonkey. In particolare la funzione GM_addStyle fa al caso nostro:

Codice: [Seleziona]

GM_addStyle (".entry-body, { max-width: none !important; }");
Comunque alla fine ho rinunciato. Modificare gli stili di una pagina via javascript con Greasemonkey è uno sbattimento , molto più semplice utilizzare dei css via Stylish.

Grazie ancora a tutti per la collaborazione.

[RNicoletto]

A-rieccolo!

Questa volta il nostro eroe vuol cimentarsi con il rendere visibile/invisibile un DIV cliccando su apposito link, sempre tramite script Greasemonkey.

Il DIV che voglio gestire in tale modo è 'include'.

Partiamo da questa funzione che permette di rendere visibile/invisibile il DIV.

Codice: [Seleziona]

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
A questo punto avrei la necessità di piazzare all'interno del documento prima del DIV il seguente link:

Codice: [Seleziona]

<a href="#" onclick="toggle_visibility('include');">Show/Hide form</a>
Come si fa?

[gialloporpora]

Prova con una cosa del genere:

Codice: [Seleziona]

function insertLink(id, link, desc){
var a=document.createElement("a");
a.textContent=desc;
a.href=link;
div=document.getElementById(id);
div.parentNode.insertBefore(a,div);
}

con insertLink("include","http://www.mozilla.org","Download Firefox");
Ciao

[RNicoletto]

Aspé... e l'evento "onclick" dove lo piazzo?

[gialloporpora]

Se usi l'ancora l'onClick è incluso di default, per eseguire codice javascript devi  premettere javascript:, tipo:

Codice: [Seleziona]

insertLink("id", "javascript:alert('ciao');", "LINK");

altrimenti se vuoi l'onclick usi un altro elemento (tipo input type=button).

Ciao

[gialloporpora]

Prova così:
Edit: questa funziona bene ed è abbastanza generica:

Codice: [Seleziona]

function addToggleButton(sel){
  sels=document.querySelectorAll(sel);
  for (i in sels){
  bt=document.createElement("input");
  bt.type="button";
  bt.setAttribute("style","cursor:pointer;background-color: #aba;color: yellow;-moz-border-radius: 1em;");
  bt.value="toggle";
  sels[i].parentNode.insertBefore(bt,sels[i]);
  bt.addEventListener("click", function(){
  e=this.nextSibling.style;e.display=='none' ? e.display='block' : e.display='none';
  },
   false);
   }
}

Richiama la funzione passandogli il selettore CSS dell'elemento, esempio:

Codice: [Seleziona]

addToggleButton('#id');
Ciao

[RNicoletto]

 

Ti chiedo un po' di aiuto per "decifrare" il codice proposto.

PREMESSA: nel frattempo una soluzione per fare quello che volevo l'ho trovata e la puoi vedere qui.

Detto questo, veniamo alle domande:

• Perché usi "querySelectorAll" seguito da un ciclo "for"? Il DIV che voglio nascondere (#include) è unico nella pagina; non è meglio usare "getElementById" e morta li?
• Non sono sicuro di aver capito cosa fanno le ultime 3 righe della funzione: cambiano lo stile display da "none" a "block" ad ogni click? E cosa c'entra l'elemento "e"?  

Infine domandona finale .
L'elemento che nascondo/mostro con lo script di cui sopra è una barra contenente un form; tale barra si posiziona in testa alla pagina. L'elemento barra non usa però alcuno stile particolare per "imporsi" sugli altri elementi della pagina. Succede quindi che se qualcuno di questi elementi utilizza "position:absolute" e si posiziona in testa alla pagina, va in conflitto con la barra stessa.
Idealmente tale barra dovrebbe essere in un frame a se stante ma invece è nella pagina stessa.

Idee?

Ciao e grazie ancora per le lezioni di JavaScript.

[gialloporpora]

1) Si ti basta il getElementById, però ho visto che quella funzione poteva tornarmi utile e l'ho fatta più generale possibile, ad esempio se tu volessi aggiungere un pulsante per nascondere tutti i div di una pagina o tutti  gli elementi con una certa classe con quella ci riusciresti scrivendo:

Codice: [Seleziona]

addToggleButton('div');
addToggleButton('.class');

il tuo è un caso particolare, però se in futuro ti servisse di nuovo dovresti riprendere tutto il codice in mano, cos' è più facile.
Ah! Quel querySelectorAll funziona solo su versioni > 3.5

2) (condizione) ? azione1 : azione2 è un modo compatto per scrivere:

Codice: [Seleziona]

if (condizione) azione1; else azione2

era per risparmiare caratteri, comunque fa quello che fa la tua toggle_visibility. (e è lo stile dell'elemento che vuoi nascondere, invece dell'elemento, era per risparmiare qualche lettera).

Domandone finale: bella domanda ma non  so aiutarti, forse cambiare tutti gli attributi position di quegli elementi, però mi sa che è un casotto.

Ciao