Info funzionalita scomparsa finestra

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?

fda

capii cmq che non esisteva un file che si chiamava contattaci
Esatto, in Joomla non accade che ogni pagina abbia il suo file. Ci sono però "tipi" di pagine che vengono generate a partire da particolari file che tavolta vengono definiti "template".

Ora, per inserirlo in una pagina, solo una
Esistono molti modi e sicuramente ogni utente del Forum GT che usa Joomla te ne potrebbe suggerire uno che preferisce. Per evitare di consigliarti qualcosa di difficile o inappropriato al caso tuo dovremmo vedere il sito com'è fatto, in particolare interessa:

la struttura di file e cartelle, per capire in quale file andare a scrivere (qui se usi un framework noto già possiamo farci un'idea)
cosa genera il menu "contattaci" (quale tipo di voce di menu)

Attendiamo qualche info in più.

mimmo82

faccio un print screen della struttura presente su Filezilla? Intendi questo giusto?

fda

Devo capire in quale pagina vuoi inserire il box, cioè per quale url e come viene generata la pagina per quell'url.
Per lo screenshot decidi tu, e me basta capire come funziona il template e quindi in quale file scrivere.
Dimmi anche su quale url e quale voce di menu di Joomla, questo è più importante.

mimmo82

allora, siccome mi piacerebbe capire il tuo ragionamento, ora ti linko l URL

provameny. altervista. org / index . php/it/

Nell'URL seguente, ce un menu in alto formato da solo 2 label. Due perche vorrei capire come funziona la logica per capire quale file modificare, in modo tale da poter modificare autonomamente in futuro le prox pagine.

Se vuoi, posso aprire un altro thread in modo tale da non uscire fuori tema, visto che si paralre di "info funzionalità scomparsa finestrella", magari è piu facile trovarlo per i prox utenti.

Grazie infinte come sempre.

fda

Sono andato a guardare le precedenti discussioni sul template Carve (framework Warp) in cui avevamo accennato al problema: http://www.giorgiotave.it/forum/templates-per-joomla/225107-se-templare-e-free-puo-esser-parzialmente-modificato-dal-produttore.html

La tua esigenza è di aggiungere la funzionalità del box alla home? Il *dove *aggiungerai il box è importante per capire quale file modificare.
Nessuno può dirti a priori quale file dovrai modificare in futuro, perché i framework sono diversi e non c'è una soluzione unica.

Fai dunque una scelta:

Se ti vuoi svincolare dalla specifica pagina - se cerchi cioè una modalità per aggiungere il box su una o più pagine a scelta - allora puoi rinunciare a modificare i file del template e operare con un'estensione. Vuoi generalizzare il problema con un'estensione? Apri una nuova discussione in: http://www.giorgiotave.it/forum/componenti-per-joomla/
Nel titolo specifica bene cosa dovrebbe fare questa estensione che cerchi (potrebbe anche già essere disponibile in JED).
Se vuoi aggiungere il box ad una o più pagine specifiche dello stesso tipo (ad esempio in "category blog" oppure nei singoli "articoli" o ancora solo in "home page") allora puoi agire modificando i file del template, che ricordiamo ancora è un Carve su framework Warp Joomla 2.5. In questo caso apri una discussione qui: http://www.giorgiotave.it/forum/templates-per-joomla/
Anche in questo caso presta la massima attenzione al titolo del thread.

fda

P.S. Forse te la puoi cavare anche con un modulo, ma ci devo pensare, non sono sicuro ...

mimmo82

@FDA said:

Se ti vuoi svincolare dalla specifica pagina - se cerchi cioè una modalità per aggiungere il box su una o più pagine a scelta - allora puoi rinunciare a modificare i file del template e operare con un'estensione. Vuoi generalizzare il problema con un'estensione? Apri una nuova discussione in:......
Nel titolo specifica bene cosa dovrebbe fare questa estensione che cerchi (potrebbe anche già essere disponibile in JED).

Lo vorrei generalizzare in modo tale da creare un utility anche in futuro ad altri utenti, o magari gia ce...ma tecnicamente non so come si chiama quella "pop up" che scompare col pulsante.

@FDA said:

Se vuoi aggiungere il box ad una o più pagine specifiche dello stesso tipo (ad esempio in "category blog" oppure nei singoli "articoli" o ancora solo in "home page") allora puoi agire modificando i file del template, che ricordiamo ancora è un Carve su framework Warp Joomla 2.5. In questo caso apri una discussione qui:.....
Anche in questo caso presta la massima attenzione al titolo del thread.

Mi sembra di capire che, non son fissi i file dei template, quindi, variano a seconda dei template stessi. Se volessi modificare l'HOME del template PIPPO non modifichero lo stesso file che mi visualizza la home del template PLUTO, giusto?

Un altra cosa, ho capito che, si possono modificare (sempre da codice) singoli articoli, giusto?
Se si, posso agire tramite editor presente nella composizione degli articoli? Ho nostato che ce un pulsantino HTML, magari esiste anche qualcosa per modificare PHP e CSS, JS...

Grazie per questo mare di info!

fda

Ecco una soluzione che sfrutta i moduli.
Consiste in 2 passi:

Caricare l'html in un modulo.
Caricare il js che occorre.
**
Modulo**
Dal back end crea un nuovo modulo di tipo custom html, quindi fai un copia e incolla dell'html seguente:


<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>

Sul modulo ci sono due decisioni da prendere:
I. Le voci di menu sul quale attivare il modulo: determinano le url per le quali sarà attivo il box.
II. La posizione del modulo, che influirà sul layout della pagina. Potrebbe non essere sufficiente definire la posizione del modulo e in questo caso dovrai intervenire sull'html e lavorare di css.

2. Js
Qui si tratta di inserire due cose:
a. Le librerie che occorrono per fare funzionare il box, ovvero la fadeToggle di jQuery.
b. Lo script che apre e chiude il box.

In Joomla i file js si possono caricare in vari modi (esistono anche estensioni per caricare css e js nella pagina), ma con il template Carve possiamo sfruttare il pannello del template, in particolare il campo destinato a caricare lo script di monitoraggio di Google Analytics. In verità quel campo non fa altro che caricare codice inline, quindi fa al caso nostro.
Procedi così: da back end vai in template manager e scegli Carve, quindi inserisci nel campo tracking code il quando segue:


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
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;
}
</script>

Fammi sapere.

mimmo82

Allora ho 2 dubbi:

Ho creato il modulo e ho inserito il codice nello spazio per gli articoli cliccando l'opzione HTML. Non ho capito come faccio a impostare su quali voci di menu attivare il modulo.
Non ho chiaro la funzionalità del campo "tracking code". Cmq ho incollato quel codice nel trackin code.

Grazie Francesco!!!

mimmo82

...help su come impostare?