Topic: Analfabeta Javascript cerca aiuto

[RNicoletto]

C'è qualcuno che può perdere 5 minuti per scrivere un bookmarklet o uno user script che faccia una ed una cosa sola: eliminare il

Codice: [Seleziona]

div id="viewer-details-toggle" da Google Reader?

Facendo una ricerca veloce ho trovato questo ma qui spiega come rimuovere un div connotata da un certo stile e non con un certo id.

Attenzione: a me interessa eliminare tale div, non nasconderlo.

Grazie a chiunque troverà il tempo di darci un'occhiata.

[A35G]

Ciao RNicoletto,
intendi una cosa del genere:

Codice: [Seleziona]

document.body.removeChild(document.getElementById("viewer-details-toggle"));
Hai una pagina di riferimento?

[RNicoletto]

La pagina di riferimento è Google Reader.

La soluzioni che ho trovato io sono queste:

SOLUZIONE 1

Codice: [Seleziona]

var deldiv = document.getElementById('viewer-details-toggle');
deldiv.parentNode.removeChild(deldiv);che elimina il DIV in questione.

SOLUZIONE 2

Codice: [Seleziona]

var deldiv = document.getElementById('viewer-details-toggle');
deldiv.style.display = 'none';che nasconde il DIV in questione.

La tua soluzione mi sembra però più semplice e diretta (però è solo un'impressione... dopotutto sono sempre un'analfabeta di JavaScript ).

[klades]

La soluzione esatta è la prima.
Se vuoi, puoi mettere tutto in una linea (senza a capo)

Codice: [Seleziona]

document.getElementById('viewer-details-toggle').parentNode.removeChild(document.getElementById('viewer-details-toggle'));
ma lo sostanza è la stessa.

Se vuoi fare un bookmarklet ed evitare errori, dovresti scrivere qualcosa del genere (tutto su una riga)

Codice: [Seleziona]

javascript:var d=document.getElementById('viewer-details-toggle');if(d) d.parentNode.removeChild(deldiv);void(0);


[RNicoletto]

Grazie infinite per la consulenza.

Giusto per informazione, alla fine ho deciso di utilizzare un approccio completamento diverso per fare quello che avevo in mente all'inizio e cioè rendere più leggibile Google Reader. Anziché utilizzare uno script con Greasemonkey ho creato un CSS per Stylish; anziché eliminare gli elementi che non voglio vedere, li nascondo.

[RNicoletto]

Ri-uppo il thread per chiedere: esiste un modo, attraverso javascript o css, per spostare un elemento DIV?

In particolare io vorrei riuscire a spostare il tasto "Add a subscription" presente in Google News Reader per metterlo a fianco della funzione di ricerca.

Giusto per capirci, Google Reader adesso si presenta così:

Io vorrei si presentasse così:

Grazie!

[gialloporpora]

Prova con:

Codice: [Seleziona]

javascript:(function(){b=document.getElementById("lhn-add-subscription");b.parentNode.removeChild(b);bar=document.getElementById("search");bar.appendChild(b);})();

Ciao

[RNicoletto]

gialloporpora sei un fenomeno!

Ed allora ne approfitto : perché il pulsante mi risulta sfalsato di circa 1px rispetto agli altri? (vedi immagine qui sotto)

Grazie ancora!

[A35G]

Potrebbe essere fuori dal div che ha determinate caratteristiche di margin e padding oppure essere all'interno ma senza aver ereditato particolari impostazioni.

Questo potrebbe essere uno dei tanti motivi

[gialloporpora]

Credo che la cosa migliore sarebbe mettere quel pulsante dopo il div di ricerca (e non appenderlo come ho fatto io), però avevo provato e così facendo a me veniva mostrato sotto e non affiancato (sicuramente per qualche attributo CSS), prova così:

Codice: [Seleziona]

javascript:(function(){b=document.getElementById("lhn-add-subscription");b.parentNode.removeChild(b);bar=document.getElementById("search");nuovo=bar.appendChild(b);nuovo.setAttribute("style","margin:0 0 0 0;padding: 0 0px 0 0px;");})();

dovrebbe funzionare, probabilmente si può fare meglio però.
Ciao

[RNicoletto]

Con lo script di cui sopra il pulsante "Add a subscription" risulta agganciato al pulsante "Search". La cosa si risolve riproponendo le caratteristiche di margin e padding degli altri pulsanti.

Codice: [Seleziona]

javascript:(function(){b=document.getElementById("lhn-add-subscription");b.parentNode.removeChild(b);bar=document.getElementById("search");nuovo=bar.appendChild(b);nuovo.setAttribute("style","margin:0 1px;padding:0 0.461em;");})();
Grazie ancora!

[RNicoletto]

Sono ancora qui...

Altro problema su cui sto sbattendo la testa senza successo è quello di modificare lo stile di una classe all'interno di una pagina.

Mi spiego meglio: in Google Reader esiste la classe entry-body che va a settare max-width:650px;. Io vorrei semplicemente eliminare tale setting.

Fatto con i fogli di stile (tramite UserStyle) è un sciocchezza:

Codice: [Seleziona]

/* make entry content use full screen width */
#entries .entry-body, {
max-width: none !important;
Fare la stessa cosa via javascript sembra un'impresa impossibile.

Ho visto che Firefox, dalla versione 3 in su, mette a disposizione la funzione document.getElementsByClassName ma tutti i miei tentativi di usarla si sono rivelati fallimentari.

Utilizzando il seguente codice:

Codice: [Seleziona]

var elems = document.getElementsByClassName("entry-body");
elems[0].style.maxWidth ='none';ottengo come risposta dalla Console del browser "Error: elems[0] is undefined".

Qualcuno ha idea del perché?

[RNicoletto]

AGGIORNAMENTO!

Ho fatto un piccolo passo in avanti. Ho visto che getElementsByClassName restituisce un array di valori e quindi non posso applicare direttamente il nuovo style sull'array. Utilizzando la funzione qui sotto ho risolto il problema del "Error: elems[0] is undefined".

Codice: [Seleziona]

var elems = document.getElementsByClassName("entry-body");
for ( i=0;i<elems.length;i++ ) {
elems.style.maxWidth = 'none';
}Peccato che tale funzione... non sortisca alcun effetto!

Agli elementi appartenenti alla classe entry-body non succede nulla. Stessa cosa se utilizzo la sintassi

Codice: [Seleziona]

elems[i].style.maxWidth = 'none';

[gialloporpora]

Prova con:

Codice: [Seleziona]

elem.setAttribute("style", "max-width: none;");

Ciao

[RNicoletto]

Provato, nessun cambiamento.