Spazio html fisso prima dell'header 
Autor: Michele G.
Visited 850,
Followers 2,
Udostępniony 0
Buon pomeriggio a tutti,
chiedo cortesemente se è possibile da programma inserire una “striscia” fissa a tutto video e che non scrolla, prima che inizi l'header.
Praticamente uno spazio fisso e indipendente alto 50/60 px, dove inserirò un codice HTML o direttamente o tramite i-frame.
Grazie.
Posted on the
Buongiorno Michele,
tramite le impostazioni di Website X5 non è possibile ottenere l'esatto risultato da te descritto.
A seconda dell'esigenza, potresti ampliare di 50-60 pixel l'header, inserendo in cima il riquadro HTML, e creare poi una sticky bar delle stesse dimensioni e contenuto che quindi appaia quando l'utente si sposta verso il basso rispetto all'header.
Eric
Autor
Buon pomeriggio Eric, grazie per il gentile riscontro.
Avevo già pensato e provato questa soluzione che potrebbe andare bene ma vorrei lasciare l’header intatto.
Ho provato anche a prendere spunto da questa soluzione trovata in rete https://www.codingcreativo.it/position-fixed/ che da sola funziona bene ma inserendola in wx5 mi sballa la pagina (sicuramente sbaglio io qualcosa nel modificare e adattare lo script proposto).
Saluti.
... potresti usare il mio storico suggerimento disseminato nel Forum in tutte le possibili applicazioni, il DIV_CUSTOM, oppure il DIV_CUSTOM+IFRAME...
... niente di più semplice ed immediato...
... il codice HTML va incollato nelle Proprietà | Esperto > 5^opzione (BODY)...
... per esempio incolla questo codice e poi capirai da te, ...le prospettive sono infinite...
<div id="divK" style="position:relative;top:0px;left:0px;width:100%;z-index:1000000">
<img src="https://p4.wallpaperbetter.com/wallpaper/867/444/30/3840x1200-px-chicago-city-illinois-multiple-display-reflection-usa-abstract-breaking-bad-hd-art-wallpaper-preview.jpg" width="100%">
</div>
... in pratica è un contenitore che può contenere qualsiasi cosa passi per la mente...
... se ti servissero chiarimenti o suggerimenti, avvisami...
.
ciao
.
ps: ... scorre con la pagina; ...per renderlo fisso basta usare l'attributo position:fixed;
... se posti il LINK della tua pagina online si potrebbe valutare qualcosa di dinamico, sempre semplicissimo...
Autor
Ciao Kol, grazie per il tuo supporto.
Questo è il link su cui sto facendo le prove https://www.wx5test.com/test/index.html dove attualmente utilizzo l’oggetto “codice HTML” – senza l’utilizzo della sticky bar - inserendo uno script che genera un testo scorrevole, però il tutto rimane agganciato all’intero progetto.
Vorrei invece che quel testo scorrevole venisse utilizzato al di fuori del programma per una migliore gestione dello stesso script.
Qui https://www.wx5test.com/test2/index.html invece ho inserito il tuo codice sostituendo l’url della tua immagine con l’url dell’i-frame che mi serve per visualizzare il testo scorrevole del primo link, non producendo però alcun effetto.
Sicuramente il cambio da immagine a i-frame non è compatibile.
Grazie per l’attenzione.
... ho visto adesso i tuoi esempi, con header e marquee fissi.. e mi sembrano funzionare bene...
... se per caso vuoi provare il mio codice dinamico con un click, in un esempio in presenza ed applicata anche la StickyBar con un effetto simile al tuo, avvisami, ...ma comunque va già molto bene così...
.
ciao
.
... dimenticavo sulla tua domanda; il DIV_CUSTOM con applicato il tuo MARQUEE sarebbe questo:
<div id="divK" style="position:fixed;top:0px;left:0px;width:100%;z-index:1000000">
<marquee id="sinistra" direction="left" style="background-color: #ffffec;font:20px verdana; color: navy;border:0px #ffffec" width="1200" height="35"><span style="font-size: 20pt;"><span style="color: #8e0000;"><strong>COMUNICATI:</strong></span> <span style="color: #003c00;">Al momento non ci sono avvisi o comunicati.</span></span></marquee>
</div>
.
Autor
Ciao Kol, lo so che il mio primo esempio funziona ma il mio problema rimane nel senso che avrei bisogno che quel MARQUEE venga estrapolato dal progetto di wx5….
Autor
….sì, è il tuo DIV_CUSTOM pensando di avere applicato correttamente la sostituzione ma sicuramente ho sbagliato in qualcosa….probabilmente il DIV non accetta la sostituzione di una immagine con un i-frame….
... con il codice DIV_CUSTOM postato direttamente con il marquee, e senza frame non si generano problemi...
.... ma forse ho capito, tu hai una pagina esterna, cioè questa:
https://www.wx5test.com/comunicato/index.html
... quindi il codice per il mio DIV_CUSTOM+IFRAME diventa questo:
<div id="divK" style="position:fixed;top:0px;left:0px;width:100%;z-index:1000000">
<iframe src="https://www.wx5test.com/comunicato/index.html" width="100%"> </iframe>
</div>
.
ciao
.
Autor
....sì, esatto .... il link per l'i-frame è quello .... ho aggiornato la pagina con il nuovo tuo DIV però come vedrai non funge...
... hai assegnato all'header un livello superiore a quello del DIV_CUSTOM che è a 1000000...
... l'header dovrebbe essere inferiore, almeno di un livello, 999999
...
... se poi provi ad usare la StickyBar ed escludere tutti gli altri codici extra di header e menu, potrei eventualmente valutare il mio codice EXTRA dimanico...
.
... ps: ... visto che l'iframe per default è alto 150px, nel codice iframe è meglio aggiungere:
height="40"
.
Autor
Ciao Kol,
risolto utilizzando il tuo i-frame togliendo però il tag "position" per tenere il tutto centrato con l'header ... https://www.wx5test.com/test3/index.html
Grazie per aver centrato come al solito la soluzione ......... i tuoi input preziosissimi come sempre!
Buona domenica.
... OK ... grazie anche a te per il riscontro...
---------------------------------
... visto che le hai provate tutte, ti consiglio di fare l'ultima prova in un secondo con la mia invenzione, con un solo copia/incolla, potrebbe stupirti...
1) ... elimina tutti i codici di STYLE e DIV_CUSTOM+IFRAME che hai attualmente usato...
2) ... usa il modello con struttura normale, applicando la StickyBar e controllando il layout in tutti i breakpoint...
3) ... incolla nella sezione Esperto | 3^opzione(/HEAD) questo codice:
<script>
$(document).ready(function () {
/** -- div_custom+iframe sopra intestazione by KolAsim -- **/
styleK='<style> body, #imStickyBar {padding-top:45px !important} </style>';
divK = '<div id="divK" style="position:fixed;top:0px;left:0px;width:100%;height:40px;z-index:1000000;overflow:hidden">'+
'<iframe src="https://www.wx5test.com/comunicato/index.html" width="100%" height="40" scrolling="no"> </iframe></div>';
$("head").append(styleK);
$("body").append(divK)
});
</script>
.
ciao ... e buon lavoro ...
...
.
se sto guardando la pagina giusta...
@Michele, sotto la modalità Desktop ci sono problemi col menu e con la barra fissa...
Ciao Michele, al di sotto della modalità desktop il sito è da rivedere completamente, ci sono tantissimi oggetti con contenuti tagliati un po' dappertutto e che sbordano oltre i limiti del contenuto pagina.
Autor
Buongiorno,
scusaste se riapro qui il post ma volevo rispondere a Kolasim, Claudio e Giuseppe ma sul post originario sono 4 giorni che non mi fa più editare. Ho dovuto aprire un ticket a Incomedia. Qui di seguito il testo che avevo cercato di postare.
Ciao Kol,
la tua ultima idea funziona perfettamente.
Ho abbassato il padding a 36 perché si visualizzava uno spazio di 9 px tra l’i-frame e il menu anche se però, con la sticky attiva, lo spazio rimane sempre.
Con la sticky bar ci sono chiaramente problemi di visualizzazione perché il menu non è il classico di wx5 ma ho utilizzato delle immagini per le voci di menù, quindi l’ho sistemato alla meglio giusto per provare.
In conclusione la tua idea rispecchia quello a cui volevo arrivare.
P.S. farò magari delle prove con un template pulito scaricato dalla libreria di wx5 per provare velocemente…….ti saprò dire.
Qui l’ultima prova fatta: https://www.wx5test.com/test4/index.html
Ancora grazie per il tuo contributo risolutivo.
@Claudio, grazie per la tua segnalazione. È un sito prova che avevo fatto e visto che al 99% utilizziamo solo la visualizzazione per desktop tralasciamo gli accorgimenti per tutte le altre risoluzioni. Penso, se non sbaglio, che il motivo della visualizzazione “sballata” dipenda da quello che ho scritto sopra cioè il non utilizzo del menu classico ma uno … poco ortodosso con sole immagini
@Giuseppe, grazie anche a te per la tua segnalazione; lo so Giuseppe ma come sai utilizziamo, anche per le prove, siti fatti senza curarci delle risoluzioni minori e con immagini non proprio perfettamente calibrate.
Saluti.
ciao, ... sì, è meglio fare così, come ti avevo detto prima:
... il tutto si semplificherà...
... ho voluto fare la prova con un Template qualsiasi del > Marketplace (*), ed il mio codice si è dimostrato universale, subito funzionante con un solo click (cioè un copia/incolla), sia con il menu normale che con l'effetto menu StickyBar ...
... poi, da come vedo dai tuoi pulsanti del menu, se ti interessa il menu normale/StickyBar con dimensioni delle voci relative, c'è un'altra mia storica e semplice invenzione ormai usata da molti; ...puoi valutare da questa sequenza di simulazioni che evidenziano(*):
.
ciao
.
Autor
Buon pomeriggio Kol,
nel menu dell'ultima immagine (che allego) è possibile cambiare colore allo sfondo delle voci del menù?
Se sì, mi interesserebbe provarlo.
Grazie.
Michele.
... sì, ...il colore l'ho messo solo per mettere in evidenza la larghezza relativa dei pulsanti rispetto al primo STAMP, e che nello STAMP precedente a questo ha lo stile normale predefinito...
.
ciao
Autor
Ciao Kol,
quando avrai tempo potresti postare cortesemente il codice per il menù dell'ultima foto che avevi postato?
Come ti avevo accennato nell'ultimo mio messaggio sono interessato a provarlo.
Grazie.
Michele
...!... mi serve il tuo LINK al tuo sito di esempio online realizzato con la struttura detta prima, in modo che io possa valutare...!...
... ogni struttura di sito e menu può avere cartatteristiche completamente diverse l'una dalle altre...
... comunque, se vuoi fare da te, la base del mio codice, in una delle forme possibili, ed in questo caso dedicato proprio per quel template indicato prima, è questo:
<style>
/** menu elastic -- K -- ================== **/
.template-object-wrapper:not(#imHeader_pluginAppObj_05_wrapper):not(#imStickyBar_pluginAppObj_05_wrapper)
> div .label-wrapper {
width: auto !important; min-width:0px;
padding: 0 5px 0 5px; margin:0px !important;background-color:lavender;
}
/** menu elastic -- K -- HEND ================== **/
</style>
.
ciao
.
Autor
Ciao Kol…… FINALE PERFETTO!!! ….questo è il link dei tuoi 2 codici inseriti su un sito che sto ultimando: https://rsm1034.altervista.org/test/index.html
P.S. --> Sull’ultimo tuo codice ho cambiato lo sfondo. E' possibile modificarlo uilteriormente per fare in modo che lo stile delle voci del menù sia come l’immagine allegata?
Michele
... visto, ... ottimo ... ... +
<script>
$(document).ready(function () {//K>;
/** -- x personalizzazione barra menu elastica by KolAsim -- **/
divMK = '<div id="divMK" style="width:auto;height20px;background-color:white;float:left"></div>';
$("#imHeader_imMenuObject_01_container, #imStickyBar_imMenuObject_12_container").wrap(divMK)
$(".label-wrapper").css("height","30px").css("border-radius","5px")
});//K<<;
</script>
.
ciao
.
Autor
Se non ci fossi tu, bisognerebbe inventarti!!!
Tutto OK. Thanks.
... visto ... OK ... ciao
.