Info funzionalita scomparsa finestra

mimmo82

Appunto...quindi, non capisco cosa ho installato eheh

fda

Modals è utilissimo, ti mostra una finestra con quello che tu vuoi dentro: immagini, articoli di Joomla, testo, mappe, altre url.
Se però vuoi una cosa identica a quella di "bblacastellana", anche nel design, allora te la devi fare da zero (a meno che non sai già che hanno usato un script disponibile in rete).

fda

Sai come inserire il codice nella pagina?

mimmo82

Ma come li vedo o setto? almeno ho un idea di cosa mi offre Modals prima di iniziare a imprecare sul codice. Magari mi offre quaqlcosa di similare a "bblacastellana". @FDA said:

Modals è utilissimo, ti mostra una finestra con quello che tu vuoi dentro: immagini, articoli di Joomla, testo, mappe, altre url.

Insomma, l ho installato ma non trovo alcuna configurazione da settare. Forse mi sto perdendo qualche pezzo?

PS: perche nn si può modificare il titolo della discussione?

fda

perche nn si può modificare il titolo della discussione?
Il titolo della discussione purtroppo non si può modificare, ma se scegli la "modalità avanzata" puoi inserire un titolo al singolo post.

non trovo alcuna configurazione da settare. Forse mi sto perdendo qualche pezzo?
Peter mette a disposizione una demo con la sintassi: demo.nonumber.nl/index.php/12-modals

Non prendo impegni formali, ma se riesco ti posto il codice. Tu intanto cerca alternative, non basarti solo su di me.

mimmo82

@FDA said:

Sai come inserire il codice nella pagina?

Intendi codice html / php ? Penso in qualche pagina (da trovare) nel FTP.

Oppure intendi qualche altro codice?

Grazie infinite Francesco

mimmo82

Miii mi arrivano le notifiche per mail alla discussione ma nn vedo le risposte ahahaha

fda

Per l'inserimento del codice si può fare in vari modi, te ne segnalo tre:

modificare i file del template nella cartella html (sì, via FTP con un editor): in questo caso c'è un po' da smanettare per fare in modo che quella cosa compaia soltanto su alcune pagine e non in tutte, tra l'altro non è facile e in qualche caso neanche "efficiente";
creare un'estensione;
inseerire il codice in un modulo.

Ciascuna di queste strade nasconde qualche insidia.

Di nulla.

mimmo82

...Ma se trovassi qualcosa di similare ma che lasci sempre il background libero? Esiste?

Altrimenti, son finito, mi so venduto la fontana di trevi non avendocela! Dovrei far cambiare idea al cliente...:?

fda

No, macché cambiare idea ... lo puoi fare come vuoi, è web design.
Cosa intendi per "che lasci sempre il background libero"?

mimmo82

che cmq le foto scorrono ma poi all occorrenza cliccando il "+" si apre questa finestrella con delle foto e descrizioni proprio come quel sito...

Grazie Francesco che mi rinQuori sempre

fda

Non facciamo confusione tra la slideshow sullo sfondo e "la finestrella", cioè l'elemento interessato dall'effetto jQuery seguente: api.jquery.com/fadetoggle/

Immagina di volere applicare questo effetto in una pagina index.html (se .php non cambia nulla). Ti servono almeno 2 immagini per il "+" e il "-", più eventualmente una terza immagine come sfondo della "finestrella", che da adesso in poi chiamo box per non essere tacciato di essere terrone (quale in effetti sono :D).
La pagina avrà certamente un foglio di stile, che però possiamo ignorare. Caricherà il jquery e un secondo file .js con la funzione per il box.
In definitiva avrai queste cartelle e files:

index.html (file);
js (folder con all'interno il file custom.js);
css (folder con il file del foglio di stile custom.css, che per semplicità ignoriamo);
img (folder delle immagini con i tre file: apri.png, chiudi.png, box.png).

File index.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0">
        <title>fadeToggle by jQuery</title>
        <meta name=description content="fadeToggle by jQuery">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <script type="text/javascript" src="js/custom.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <header>
            <h1>fadeToggle by jQuery</h1>
        </header>

        <section>
            <div style="position:absolute;margin:0px 0px 0px 800px;width:60px;height:24px;">
                <a href="#" onclick="return toggle_contenuto();"><img id="img_toggle_contenuto" src="img/chiudi.png" /></a>
            </div>			
            <div id="cont_interno_pagina" style="position:absolute;margin:24px 0px 0px 500px;width:400px;height:400px;background-image:url(img/box.png);">			
                <div style="position:absolute;margin:30px 0px 0px 0px;padding:0px 15px;">
                    <strong>Contenuto</strong>
                    <br/>
                    Questo &egrave; il <strong>contenuto</strong>.
                </div>
            </div> 
        </section>
    </body>
</html>

Per rendere responsive il tutto devi lavorare via css. Ripeto che il link al custom.css è stato inserito per completezza, ma il file non serve per mostrare il funzionamento del box. Se la tua pagina già carica il jQuery puoi eliminare la riga del jquery-latest.js.

File custom.js


var clicked_contenuto = false;


function toggle_contenuto(){
	if(!clicked_contenuto){
		clicked_contenuto = true;
		$('#cont_interno_pagina').fadeToggle('slow',function(){
			if($("#cont_interno_pagina").is(':visible')){
				$('#img_toggle_contenuto').attr('src','img/chiudi.png');
			}else{
				$('#img_toggle_contenuto').attr('src','img/apri.png');
			}
			clicked_contenuto = false;
		});	
	}
	return false;
}

Per le tre immagini puoi ispirarti a quelle del sito che mi hai mostrato.

Puoi seguire le istruzioni sopra e procedere a mano oppure seguire una delle altre due strade suggerite: l'uso dei moduli o la creazione di un'estensione.
Se ho un po' di tempo posto una delle altre due soluzioni, ma le istruzioni sopra già risolvono il problema. Mi raccomando soltanto al discorso mobile-responsive, perché non si può lasciare un box fisso e mandare all'aria il design.

Fammi sapere se hai risolto,
Francesco

mimmo82

[/HR]ASPEEEEE...

mo maj fatt ju doppj pass e magg pers.

PEr chi non è terrone
" Mi hai fatto il doppio passo e mi son perso"

Provo a fare questa prova con 2 file e 3 immagini e ti faccio sapere.

Sei un grande, se ti candidi, ti faccio campagna politica gratis!!!!

fda

Ottimo, così almeno un voto lo prendo ...

mimmo82

Allora, ci sto "SBATTENDO". Non mi ritorna qualcosa:

perche nel html trovo solo l'azione per l'apertura della pop up? Trovo solamente la chiusura.
[HTML] <a href="#" onclick="return toggle_contenuto();"><img id="img_toggle_contenuto" src="img/chiudi.png" /></a>[/HTML]
Come mai al lancio dell'index trovo la pop up aperta? Non dovrebbe caricarsi sull'onlick?

Questo è quanto prodotto:

dropbox com/s/behhmxi6kfauuht/esempio.jpg?dl=0

Grazie

fda

... Trovo solamente la chiusura. Come mai al lancio dell'index trovo la pop up aperta? Non dovrebbe caricarsi sull'onlick?

Oltre all'html c'è il file custom.js che gestisce la condizione aperto/chiuso.
All'apertura la trovi aperta perché è uguale a quella che mi hai segnalato: bblacastellana.com/intro.php?lnk=1
Intervenendo su html e js puoi comunque cambiarla.
Ma ti funziona?

A scopo meramente "didattico":
box: bblacastellana.com/img/castellana/img/box_struttura.png
apri: bblacastellana.com/img/castellana/img/apri.png
chiudi: bblacastellana.com/img/castellana/img/chiudi.png

P.S. Dovremo magari ringraziare i colleghi che hanno realizzato il sito in questione.

mimmo82

Si si, vero lo gestisce il js. Ma nel codice html non trovo la funzionalita apri. Cmq lo pubblico e lo discutiamo.

Come dicono i colleghi IT: "Ao me stai a fa appassiona pure alla programm..."

GRande!

mimmo82

provameny. altervista. org / Provaaa / index . html

Ecco quello che ho prodotto.
Come faccio a invocare ' "Apri" riferito alla pop up nel html?

Grazie Francesco

fda

Mimmo82,
il file custom.js lo devi mettere online, lì dentro ci sono le istruzioni jquery per fare funzionare il box.
Guarda, adesso questo url mi dà 404 (non trova il file):


http://provameny.altervista.org/Provaaa/js/custom.js

Crea un file di testo, fai copia e incolla del codice postato sopra (quello che inizia per "var clicked_contenuto = false; ... "), salva e rinomina il file in custom.js, quindi copialo online in /Provaaa/js .
Riprova e fammi sapere.

mimmo82

avevo sbagliato a non creare la cartella js, quindi non leggeva quanto avevo "bovinamente" percepito...non leggeva il js.

Ora, per inserirlo in una pagina, solo una...diciamo, da dove si inizia. Perche qualche post fa avevamo "accennato" il funzionamento del CMS con un algoritmo...PERSO, e capii cmq che non esisteva un file che si chiamava contattaci (nome della voce di menu) o altro...giusto?