Abbinare a pulsante diversi link da visualizzare nella stessa finestra 
Autor: Antonio D.
Visited 733,
Followers 4,
Udostępniony 0
Ciao a tutti ho una radio ed ho creato la pagina del palinsesto settimanale con pulsante ho creato i 7 giorni della settimana ed abbinato pagine nascoste con i vari programmi quotidiani quello che non riesco a fare e visualizzare i vari link nella stessa sotto i pulsanti esempio clicco su lunedi e mi apre il palinsento del giorno lunedi clicco martedi e mi apre quello del martedi ecc. Grazie
Posted on the
non ho capito...
se hai un pulsante unico avrai un link unico...
se hai più pulsanti , potrai avere altrettanti collegamenti...
ma con cosa hai fatto il pulsante ?
se mettevi il link della pagina era meglio...
Autor
Provo a postare degli screen per farmi capire meglio, vorrei aprire lo sreen3 quando clicco sul pulsante lunedi ma nella stessa finestra in modo che posso cliccare su martedi e vedere la programmazione del martedi e cosi via spero di essere stato più chiaro grazie ancora
Autor
questi sono i pulsanti
Autor
questi sono i pulsanti scusa non riuscivo matterli sullo stesso post
... secondo mie antiche idee, io preferisco l'iframe, ma potresti usale le schede dell'oggetto testo con le etichette per i sette giorni della settimana contenenti le relative programmazioni giornaliere...
... se hai le pagine nascoste già pronte, e possibilmente congrue tra loro, potresti mettere nel contenuto testo delle schede un codice iframe con scheda per scheda il relativo url/src della pagina nascosta, (per esempio lunedì.html, martedì.html, ecc.)....
... oppure, sotto ai pulsanti che avevi postato prima, metti un oggetto html con codice iframe (che preferisco) con (id="programmagiornaliero" name="programmagiornaliero"), (importante l'attributo NAME), ed ai pulsanti assegni il collegamento con opzione File o URL | File su Internet e nel campo di input incolli questo tipo di stringa di mia invenzione così come vedi con apici asimmetrici; per esempio per il pulsante "lunedì" per aprire la pagina "lunedì.html" nell'iframe:
lunedì.html" target = "programmagiornaliero
(...così come vedi, monco di un doppio apice...)
... quelle della programmazione radio l'ho affrontato diverse volte in anni passati in tutte le lingue, abbinato ad un mio semplice codice EXTRA, che automaticamente fa apparire per default nell'iframe (o attiva nella scheda) la programmazione della giornata...
... se per caso ti interessasse questa parte EXTRA, ... avvisami, ...e/o anche per eventuali chiarimenti su quanto ho anticipato...
... più facile e semplice da fare che a dirsi...
... se posti il LINK di quello che hai già fatto online, sarebbe meglio per me per poter valutare...
.
ciao
.
ps: ... intanto che digitavo mi son ricordate di questo vecchissimo Topic, dove l'utente ha applicato il mio metodo:
> https://helpcenter.websitex5.com/pl/post/31878
.
Autor
Cioa scusa ma a parte il secondo metodo del quale scusa per l'ignoranza non ci ho capito niente con ol primo funziona ma apre le pagine nascoste senpre in un altra pagina io vorrei visualizzarla nella stessa tipo cosi:https://www.radio24.ilsole24ore.com/palinsesto grazie
... hai visto il sito dell'utente che ti ho linkato...?... ... che è in versione IFRAME:
>> https://www.radiostellapiemonte.net/
... non ti preoccupare, una volta capito il meccanismo diventa semplicissimo...
... le tue pagine nascoste e senza applicare la grafica le devi chiamare:
domenica.html
lunedì.html
martedì.html
eccetera...
....per la tua struttura postata nei tuoi STAMP precedenti, dopo la riga dei pulsanti metti un Oggetto Codice HTML per tutta la riga con questo codice IFRAME:
<iframe id = "iframeK" name = "iframeK" src = "paginaDefault.html" width = "100%" height = "500" > </iframe>
... al collegamento del pulsante "domenica" assegna l'opzione File o URL | File su Internet, digitando questa stringa per il collegamento:
domenica.html" target = "iframeK ... (esattamente così come la vedi)...
... intanto posta anche il LINK delle pagine nascoste; ... ricorda che il test reale si fa online...
... al posto di "paginaDefault.html" puoi anche mettere il link di una tua immagine della radio che avrai allegato:
"files/img_radio.jpg".
... (...poi e se ti interessa con il mio codice EXTRA, (niente di difficoltoso, un copia/incolla), si vedrà sempre la pagina con il programma del giorno in corso...)...
.
ciao
.
Autor
Ciao e granzie ancora per la disponibilità ho seguito alla lettera quello che hai scritto ma ti rimando gli screen degli errori
Autor
screen2
Autor
Screen3
Autor
Screen4
... non potendo vedere il LINK che ti avevo chiesto, pare che hai fatto tutto correttamente...
.... l'errore 404 di un tuo STAMP indica pagina NON trovata, il che vuol dire che l'URL è errato o pagina nominata in altro modo da quella digitata nel collegamento...
... altra nota che posso dirti non vedendo il LINK, è che il collegamento deve essere composto solo la parte in grassetto, cioè dopo target="iframeK non deve esserci nessun carattere. neanche spazi vuoti, la stringa così come la vedi:
domenica.html" target = "iframeK
... la pagina domenica.html ... devi essere sicuro che si chiami così; ...lo puoi riscontrare nella barra indirizzi del browser...
...
ciao
.
Autor
Grazie del supporto ma non ci sono riuscito comunque il sito è www.radiotalentoitalia.it
... mo ci si può capire meglio, e penso ti stia venendo fuori un buon lavoro...
... i pulsanti della pagina programmi non hanno il collegamento assegnato nel modo che avevo detto prima...
... e poi, magari mi è sfuggito qualcosa, non ho trovato o visto dove hai inserito il codice IFRAME iframeK...
.
ciao
.
... ho voluto approfondire la situazione...
... se tu vuoi provare come dovrebbe funzionare dal vivo, ...avvisami, ... che poi ti posto un mio codice esclusivo con una raccolta delle mie invenzioni adattate al tuo sito...
... per poter provare dal vivo dovrai fare un solo, semplicissimo, immediato ed elementare copia/incolla del mio codice; ... una volta che ti sei reso conto di come dovrebbe essere, poi continueremo con calma la sistemazione del Progetto, senza uso di codici...
...
... il pratica questo mio codice aggiusta dinamicamente quello che avresti dovuto fare tu nel Progetto se seguivi lo schema detto prima...
... caratteristiche principali del codice:
> - aggiustamento del menu per relazionarlo meglio con l'IFRAME, (attualmente scomodo, taglia il testo e nelle risoluzioni ridotte si estende troppo verticalmente non facendo vedere il cambiamento nell'IFRAME);
> - posizionamento dinamico dell'IFRAME "iframeK", che prende il posto dell'attuale "content-slider ";
> - caricamento automatico nell'IFRAME della pagina del palinsesto del giorno corrente; per esempio oggi si aprirebbe automaticamente la pagina "sabato.html";
> - estrapolazione dei collegamenti di origine dei pulsanti, e riassegnazione dinamica dei collegamenti corretti per indirizzare TARGET nell'IFRAME "iframeK";
> - aggiustamento dinamico del layout delle pagine importate con eliminazione del HEADER e del FOOTER, (che avresti dovuto fare tu come da precedenti indicazioni);
> - stoppaggio AUDIO nelle pagine importate nell'IFRAME, essendo doppione del player in HEADER;
> - altro.
... se non ho problemi con il Forum, ti posterò anche gli STAMP della simulazione reale online...
.
... per fartene un'idea, queste le simulazioni automatiche relative alla giornata di oggi, sabato:
.
Autor
ok sono pronto grazie
... OK ... questo è il mio codice esclusivo per la tua pagina "programmi":
<script>
$( document ).ready(function() { //K>;
/** -- Ancoraggio dinamico con controllo DATA - TARGET IFRAME[269967] -- by KolAsim **/
setTimeout(function(){//K1>;
style_K()
menuGiorniK()
iframe_K()
rilevagiornosettimanaK()
style_iframeK()
}, 3000); //K1<<;
}); //K<<;
//-------------------------------
//-----------fK1-------------------
function style_K(){//style_K()>;
styleK = '<style>'+
'#divK1{position:relative;left:0px;width:100%;height:auto;background-color:lavender;padding:5px;'+
'font: normal normal normal \'Audiowide\';text-align:center;border-radius: 5px;border:solid 1px crimson;}'+
'#divK2{position:relative;left:0px;width:100%;height:700px;}'+
'#divK1 a{font-size:28px;text-decoration:none;;color:crimson;padding:0 3px 0 3px}'+
'#divK1 a:hover{background-color:white;border-radius:5px;}'+
'@media (max-width: 720px) {#divK1 a{font-size:22px}}'+
'</style>';
$("head").append(styleK)
};//style_K()<<;
//-----------fK2-------------------
function menuGiorniK(){//menuGiorniK()>;
divK1 = ' <div id="divK1">'+
'<a href = "lunedi.html" target = "iframeK">Lunedi<a/>'+
' <a href = "martedi.html" target = "iframeK">Martedi<a/>'+
' <a href = "mercoledi.html" target = "iframeK">Mercoledi<a/>'+
' <a href = "giovedi.html" target = "iframeK">Giovedi<a/>'+
' <a href = "venerdi.html" target = "iframeK">Venerdi<a/>'+
' <a href = "sabato.html" target = "iframeK">Sabato<a/>'+
' <a href = "domenica.html" target = "iframeK">Domenica<a/>'+
'</div>';
divK2 = ' <div id="divK2">AaBbCcDdEe </div>';
$("#imPgTitle").append(divK1 + divK2);
$("#divK1 a").click(function(){style_iframeK()})
$("#imCell_10,#imCell_11,#imCell_12,#imCell_13,#imCell_14,#imCell_15,#imCell_16").hide();
};//menuGiorniK()<<;
//-----------fK3--------------------
function iframe_K(){//iframe_K()>;
iframeK = ' <iframe id = "iframeK" name = "iframeK" src = "domenica.html" width = "100%" height = "700" '+
' style="position:absolute;left:0px;top:0px;z-index:1000000;overflow:hidden"> </iframe> ';
$("#divK2").append(iframeK);
style_iframeK()
};//iframe_K()<<;
//-----------fK4--------------------
function style_iframeK(){//style_iframeK()>;
setTimeout(function(){//K1>;
styleiframeK = '<style>#imHeaderBg,#imFooterBg,#imHeader,#imStickyBarContainer,#imFooter{display:none!important}'+
'#imContent{top:-200px!important} body{overflow-y:hidden}>/style><base target="_parent" />';
$("#iframeK").contents().find("head").append(styleiframeK)
$("#iframeK").contents().find("body > div").append('<base target="_parent" />')
$("#iframeK").contents().find('div [title="stop"]').click()
$("#iframeK").contents().find('a').attr("target","_top")
}, 2000);//K1<<;
};//style_iframeK()<<;
//-----------fK5-------------------
function rilevagiornosettimanaK(){//rilevagiornosettimanaK()>;
dataK = new Date();
giornoK = dataK.getDay();
if(giornoK == 0) giornoK = "domenica.html";
if(giornoK == 1) giornoK = "lunedi.html";
if(giornoK == 2) giornoK = "martedi.html";
if(giornoK == 3) giornoK = "mercoledi.html";
if(giornoK == 4) giornoK = "giovedi.html";
if(giornoK == 5) giornoK = "venerdi.html";
if(giornoK == 6) giornoK = "sabato.html";
linkK = giornoK;
$("#iframeK").attr("src",linkK)
};//rilevagiornosettimanaK()<<;
// ---------------- END - K -------<<<<<
</script>
.
... nel Passo_3 selezionare la pagina "programmi" ed aprire le Proprietà della Pagijna, ed incollare il codice in questa sezione:
>> Passo 3 - Mappa > Finestra 'Proprietà Pagina' > Le opzioni della Sezione Esperto >
> ▪Codice personalizzato: > 3^opzione > Prima della chiusura del tag HEAD
.
... ovviamente come detto prima invece di home Page selezionerai la pagina programmi:
.
Autor
Ciao grazie per l'aiuto ho inserito lo sript che mi hai inviato dagli un occhiata, inserendolo anche nelle proprietà di programmi come nel passo3 ho notato che mi raddoppia la visualizzazionedei giorni settimanali adesso l'ho cancellato ma ti invio lo screen per verificare se fosse possibile cambiare il colore dei giorni settimali in nero con sfondo trasparente grazie ancora
Autor
Screen2
Autor
Se cambio giorno esce sempre fuori l'intestazione del sito con quel colore orribile si può eliminare? grazie
... vedo che funziona, anche se non hai seguito le istruzioni, avendo applicato il codice nella sezione body e non nel Passo_3; ...comunque il codice era per avere un'idea di come dovrebbe funzionare, ...e funziona molto bene anche così...
... non trovo riscontro con i tuoi STAMP, nè vedo doppioni...
... il menu l'ho fatto io, come vedi in modo elastico annullando il tuo, ed ovviamente si possono cambiare tutti i colori...
.
... adesso che hai capito di cosa si tratta e come funziona, devi applicare la struttura al tuo Progetto, seguendo le istruzioni che ti avevo dato, e che ti ripeterò passo-passo:
... adesso la prima cosa che devi fare è:
1) ... togliere il mio codice;
2) ... realizzare il menu come il mio, magari in un oggetto testo esteso per tutta larghezza, senza usare pulsanti, ed eliminando i tuoi attuali pulsanti;
3) ... alle voci del nuovo menu dell'oggetto testo assegni il collegamento esattamente in questo modo che vedi in grassetto, per esempio per la voce lunedi, collegamento con opzione File o URL | File su Internet:
lunedi.html" target = "iframeK
... e via di seguito per gli altri giorni...
4) ... sotto alla riga dell'oggetto testo per il menu, metti un Oggetto Codice HTML esteso per tutta larghezza, e per ora con altezza 700 pixel;
5) ... dentro questo Oggetto HTML incolla questo codice:
<iframe id = "iframeK" name = "iframeK" src = "domenica.html" width = "100%" height = "700" style="position:absolute;left:0px;top:0px;z-index:1000000;overflow:hidden"> </iframe>
6) ... IMPORTANTE ... seleziona una ad una le pagine NASCOSTE dei giorni, ...seleziona le Proprietà della Pagina, e nella Sezione Grafica applica l'opzione:
▪Crea la Pagina senza applicare il Modello
...
... esegui ed applica con calma un punto alla volta...
... pubblica in rete ed avvisami, così posso verificare eventuali incongruenze...
... se tutto funziona, poi ti dirò cosa fare per per inserire il mio codice per il controllo per la programmazione del giorno corrente...
... non ti preoccupare, per eventuali problemi ne verremo a capo...
.
Autor
fatto passo passo come mi hai detto ma come vedi non va
... appena ho un attimo di tempo andrò a controllare e poi ti farò sapere...
.
... intanto che ero ancora qui, prima di uscire sono andato a controllare...
1) ... bene, adesso hai assegnato correttamente il collegamento alle voci dei giorni della settimana del palinsesto...
2) ... (!) ...anche se non mi piace la disposizione verticale del menu a risoluzioni ridotte, per me(!) troppo estesa verticalmente; ,... forse penso che non hai usato l'oggetto testo in unica cella come detto prima, o hai usato celle separate con dei divisori;
3) ... non hai fatto il passo del precedente punto 6) - IMPORTANTE, quindi come detto lì applica alle pagine nascoste dei relativi giorni l'opzione tramite la relativa finestra delle Proprietà Pagina, pagina per pagina l'opzione:
▪Crea la Pagina senza applicare il Modello
... quindi intanto portati avanti ottemperando a questo punto 3), (ex p.6) importante, ...e possibilmente se riesci a sistemare meglio il menu dei giorni in modo che magari possa essere elastico come lo era il mio...
... .avvisami quando fatto, e poi se tutto funziona passeremo al mio piccolo codice EXTRA...
.
Autor
Ho controllato e ho applicato a tutte le pagine nascoste la spunta creala pagina senza applicare il modello
... no! ... non risulta applicata l'opzione; ... nessuna modifica online per tutte le pagine nascoste; per esempio questa del lunedì è ancora con HEADER e FOOTER, ed a risoluzioni ridotte vedi il fuxia in testa:
https://www.radiotalentoitalia.it/lunedi.html
... provvedi, aziona Ctrl+Anteprima, controlla, e riesporta...
.
.
Autor
Controllato è tutto ok ti mando gli screen
Autor
quando esporto per la pubblicazione mi da questo errore potrebbe centrare?
... no! ... se tu provi il LINK di lunedì postato prima vedi che è ancora come all'origine...
... però ho scoperto una cosa STRANA che non so come puoi averlo fatto...
... in pratica hai applicato SI' l'opzione, ma hai anche in qualche modo rinominato le pagine nascoste con doppia estensione, il che è inspiegabile come possa essere avvenuto...
... questa è la pagina lunedì attuale:
...!... https://www.radiotalentoitalia.it/lunedi.html.html
... forse hai cambiato il nome nella MAPPA al Passo_3...
... controlla, correggi, verifica in anteprima, e riesporta...
.
... forse ho capito dov'è l'errore guardando il tuo STAMP...
... la casella in basso "Collegamento" deve essere vuota...
.
Autor
fatto ma il risultato non cambia per la doppia estensione probabilmente perchè ho rinominato le pagine nascoste con.html invio creen spero di non essere troioppo stressante
Autor
secondo screen
... si sì, ... l'estensione l'assegna automaticamente il programma...
..in MAPPA devi mettere i nomi di pagina come avevi fatto prima, lunedi, martedi, eccetera...
.
... son passato a dare un'occhiata e controllare, e vedo che sei quasi (*) a buon punto, e volendo potrebbe anche rimanere così...
... il menu adesso è come avevo detto di fare, è elastico, e funziona come dovrebbe con l'IFRAME
(*) ... nelle pagine nascoste manca il titolo della pagina, che prima c'era, e che è importante per avere la certezza che si sia attivata la pagina relativa, Domenica, Lunedì, Martedì, ecc, ...altrimenti senza riferimenti non si sa che pagine è attiva in quel momento...
...
... alla fine con l'aggiunta del mio piccolo codice EXTRA, se poi ti interessa, potresti implementare:
1) ... ad apertura della pagina "programmi" vedere per default nell'IFRAME la pagina relativa al giorno corrente della settimana;
2) ... evidenziazione della voce del menu attiva del giorno cliccata;
3) ... controllo anti-cache delle pagine in IFRAME;:
4) ... varie ed eventuali, se necessario o come utilità, anche l'IFRAME elastico, che comunque va già bene così.
.
Autor
Grazie dell'aiuto non pensavo di riuscirci se pensi che ci siano altre modifiche sono ben disposto a provarle grazie ancora
... OK ... hai messo il titolo, ottimo, ... ed in più hai adottato la tabella, ottimo...
... con questo mio codice con funzioni esclusive di mia invenzione ottieni:
... finalmente il codice parte del quale già lo conosci, ...ed hai finito
:
<script>
$( document ).ready(function() { //K>;
/** -- Ancoraggio + controllo DATA + TARGET IFRAME[269967] by KolAsim -- **/
anticacheK="?" + new Date().getTime();
objectK = "#imTextObject_15_19";
rilevagiornosettimanaK();
eventomenuK();
controlloIframeK();
}); //K<<;
//-----------fK-------------------------------
function eventomenuK(){//eventomenuK()>;
$(objectK + " .imCssLink" ).each( function() {//K1>;
var hrefK = $(this).attr("href");
$(this).attr("href", hrefK + anticacheK);
$(this).click(function(){//K2>;
linkattivoK();
$(this).css({"background":"lemonchiffon","border-radius":"5px","text-decoration":"underline"})
$("#iframeK").css("opacity",0)
});//K2<<;
});//K1<<;
};//eventomenuK()<<;
//-----------fK-------------------------------
function linkattivoK(){//linkattivoK()>;
$(objectK + " .imCssLink" ).css({"background":"","text-decoration":"none"})
controlloIframeK()
};//linkattivoK()<<;
//-----------fK-------------------------------
function controlloIframeK(){//controlloIframeK()>;
setTimeout(function(){ //K1>;
$("#iframeK").contents().find("table").css("width","100%")
hK=$("#iframeK").contents().find("#imContentGraphics").height();
$("#iframeK").height(hK)
$("#iframeK").parent().parent().height(hK);
$("#iframeK").css("opacity",1)
}, 600); //K1<<;
};//controlloIframeK()<<;
//-----------fK-------------------------------
function rilevagiornosettimanaK(){//rilevagiornosettimanaK()>;
dataK = new Date();
giornoK = dataK.getDay();
if(giornoK == 0) giornoK = "domenica.html";
if(giornoK == 1) giornoK = "lunedi.html";
if(giornoK == 2) giornoK = "martedi.html";
if(giornoK == 3) giornoK = "mercoledi.html";
if(giornoK == 4) giornoK = "giovedi.html";
if(giornoK == 5) giornoK = "venerdi.html";
if(giornoK == 6) giornoK = "sabato.html";
linkK = giornoK;
$("#iframeK").attr("src",linkK+anticacheK);
linkattivoK();
};//rilevagiornosettimanaK()<<;
// ---------------- END - K -------<<<<<
</script>
......................
.
... il codice lo incolli dove detto prima che già sai come fare, e comunque riporto nuovamente le schede, ovviamente invece di Home Page selezionerai la pagina programmi:
.
ciao
.
.
Autor
Ok fatto tutto perfetto posso solo chiederti come posso rendere più fluida la visualizzazione su mobile? Grazie
ot: occhio che alle basse risoluzioni hai degli oggetti che fuoriescono verso destra...
vai a correggere
... ho visto, ... ottimo ... funziona molto bene...
... cosa intendi per "rendere più fluida la visualizzazione su mobile?" ...?...
... ho controllato e tutto è perfetto anche sul mio cellulare...
... l'unica cosa storta che noto è che devi far rientrare i contenuti eccedenti il layout dell'intestazione (header) nelle risoluzioni inferiori...
... controlla i contenuti dell'header e del footer in tutti i breakpoint a falli stare dentro il layout...
.
... esattamente come evidenziato da Claudio che mi ha anticipato...
.
Autor
Credo di avere messo a posto tutto grazie ancora
se la pagina è sempre quella "programmi" a me non pare...
... ancora no! ... ... come dai due STAMP di Claudio, in intestazione hai ancora l'Oggetto Titolo "Italia" che nelle risoluzioni sotto 1150px e sotto 720px esce fuori layout...
... devi andare in questa sezione dove vedi lo schema:
> Passo 2 - Modello > Contenuto del Modello
... selezionare il primo breakpoint 1150 e poi il secondo breakpoint 720px, e far rientrare in ambedue "Italia" all'interno del layout in HEADER...
... e dovresti essere a posto...
.
ciao
.
Autor
A me da questo
Autor
E questo spero anche a te
... no! ... il problema sta nei due breakpoint che ti ho indicato prima...
... se ridimensioni la finestra del browser lo potrai notare...
.
Autor
Ok fatto dimmi cosa ne pensi grazie
... quasi; ... per HEADER sì ...
... all'IFRAME che sta in testa sotto a questa immagine assegna width="100%" invece del valore attuale width="1200" ...
.
.
Autor
Fatto
.... da parte mia apparentemente mi sembra a buon punto...
... mi sembra che hai attivato lo slideshow dello sfondo della riga_1, ma non si vede perchè hai inserito un divisore con sfondo contenente questa immagine opaca che scherma la riga sottostante...

.