Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662

    Creare nodo in cima al body

    Ciao a tutti!! ...e BUON ANNO!!

    Ho un problema che mi porto avanti dall'anno scorso!

    Grazie a qusto codice java script è possibile creare la ormai classica tendina di suggerimento su campo input, in stile Google per intenderci.

    Funziona alla grande, l'unico problema è che per calcolare la posizione appena sotto il campo input prende come riferimento la larghezza della pagina tenendo presente anche la scrollbar laterale.
    Cosa succede quindi: la pagina che ho di fronte non ha scrollbar, all'inserimento delle prime lettere mi appare il suggerimento, ma viene spostato un pelo a sinistra.
    Questo perchè questo sistema tiene in considerazione l'altezza della pagina come se il nodo creato fosse in fondo, e quindi andando oltre la risoluzione dello schermo, tenendo in considerazione la presenza dello scrollbar.

    Non so se mi sono ben spiegato.
    Vi prego, se qualcuno ha capito anche solo un 10% di quello che voglio dire risponda che cercherò di essere più chiaro... grazie.
    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  2. #2
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662
    Posto un'immagine per cercare di spiegarmi meglio



    la posizione della tendina viene calcolata tenendo presente la larghezza della pagina come se fosse presente la scollbar.
    Questo perchè (credo) il nodo con i suggerimenti, prima di essere riposizionato sotto il campo input, viene creato in fondo alla pagina.

    Se non venisse riposizionato il nodo la pagina apparirebbe con lo scroll poichè il suggerimento si troverebbe in fondo alla pagina.

    Sapreste come posso risolvere questo problema?
    Grazie 1000
    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  3. #3
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    lascia un link alla tua pagina

    e' vero che il livello viene appeso alla fine del body ma e' anche implicito che si trovi posizionato assolutamente, quindi, se gia' non avviene, via css si puo' spostare in alto fuori viewport ed evitare che allunghi la pagina

    capisci che con queste variabili in gioco non basta vedere lo script

  4. #4
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662
    Hai ragione... il link è questo:
    http://www.pixter.it/magazzino/spost/

    Prova a ridimensionare l'altezza della finestra del browser fino al limite di quando appare la scrollbar, senza farla apparire.
    Ho fatto un elenco in questo modo:
    a1
    b1 b2
    c1 c2 c3
    ...
    l1 l2 3l 4l 5l 6l 7l 8l 9l l10
    questo in modo tale che se digito "e" so che avrò una tendina con 5 campi.

    Fai caso anche ad un'altra cosa, se ti posizioni sul campo e digiti "L" l'elenco di suggerimenti ti appare spostato (il famoso errore), se cancelli e riscrivi "L" l'elenco appare nella posizione corretta.

    Se serve altro sono quì! Non riesco ad arrivare a capo...
    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  5. #5
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    appunto, viene appeso al body, ma e' gia' in posizionamento assoluto,
    quindi ti basta specificare un top e left nella regola css per evitare che l' elemento stesso "allunghi" la pagina
    codice:
    div.suggestions {
    	-moz-box-sizing: border-box;
    	/*box-sizing: border-box;*/
    	border: 1px solid #999;
    	position: absolute;
    	width: 254px;
    	top:0px;
    	left:-999em;
    	}
    nota che cosi' risolvi il problema nell' immediato (la prima volta che viene mostrato si trova a coordinate errate) ma rimane un problema a monte:
    se, con il livello dei suggerimenti aperto, ridimensioni la viewport in orizzontale ti accorgi che il pannello resta dove si trova mentre il resto si centra

    per fare in modo che il pannello segua il relativo campo il primo non va appeso al body, ma quanto meno ad un contenitore comune ai campi (probabilmente homeSearch, avendo cura di posizionare questo elemento in maniera relativa) e andare a rilevare le coordinate del campo non fino al body ma fino a homeSearch...

    ciao

  6. #6
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662
    Wow Xinod!!!
    Ma sai che, sapendo di js poco e niente, avevo pensato alla soluzione che mi descrivi... appendere il div dei suggerimenti a qualcosa che non sia il body.
    ..ma (come dicevo sapendo poco e niente di js) ho provato a cambiare la parola "body" alla stringa document.body.appendChild(this.layer); non sortendo i risultati sperati.

    Come faccio ad appendere il box ad un div con riferimento di classe o id?

    Intanto ti ringrazio moltissimo, già così non è male... un utente in fase di inserimento non credo vada a ridimensionare la pagina, però se "perfetto" è meglio

    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  7. #7
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    diventa
    document.getElementById('homeSearch').appendChild( this.layer);

    poi cambia
    while(oNode.tagName != "BODY") {
    in
    while(oNode.id && oNode.id!='homeSearch') {
    sia in AutoSuggestControl.prototype.getLeft che in AutoSuggestControl.prototype.getTop

    e setta nel css homeSearch a position:relative

    ciao

  8. #8
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662
    wow... fantastico!!

    Non so come ringraziarti.
    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  9. #9
    Utente di HTML.it L'avatar di bANART
    Registrato dal
    Jul 2005
    Messaggi
    662
    Caspita!! Problema!!!
    Il suggerimento del sistema operativo..

    Come faccio a disabilitare il suggerimento "automatico"? (vedi immagine)

    Matteo Coletta - fotografia
    Fotografo Lanciano - Fotografia a Lanciano e Pescara

  10. #10
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,651
    <input type="text" autocomplete="off" />

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.