Info funzionalita scomparsa finestra

mimmo82

Info funzionalita scomparsa finestra

Ciao a tutti,

come si chiama la funzionalità presenti su alcuni siti che da la possibilità di nascondere informazioni al solo click del classico "+"?

Per far capire, allego 2 print:

prima: dropbox . com / s / vydvxqs42ucjk0v / prima . jpg?dl=0
dopo: dropbox . com / s / kdggc0g03ryxm05 / dopo . jpg?dl=0

Grazie e scusate per la descrizione poco chiara.

fda

Ciao Mimmo82,
non so come si chiami ma è una specie di finestra modale, penso che si possa fare in css o jquery. Se cerchi in giro potresti anche trovare script già pronti.

mimmo82

non ce un qualcosa gia bello e pronto da settaRE?

mimmo82

Potrebbe esser un Hide/show windows... ?

fda

Prova *Modals *di NoNumber, estensione Joomla! anche in versione free: nonumber.nl/extensions/modals

mimmo82

installato...ma non trovo alcuna configurazione back end e ne settaggi. Forse si agisce da codice perche stavo leggendo che crea anche un tag {modal ...}...{/modal}

ahahahah...

mimmo82

Cmq non penso che abbia la funzionalita sopra descritta, penso che abbia come funzionalità di ingrandire un immagine oscurando il resto, infatti qui è chiaro:
nonumber . nl / extensions / modals

oppure mi sto perdendo tra le funzionalita che offre il service.

Cercavo questo: bblacastellana. com / intro. php?lnk=1 (dalla home--> struttura)

Grassiee

fda

Quello lo fai come ti ho detto con jquery e css, senza estensioni.

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