Banner espandibile che sposta contenuto

3nrico

Banner espandibile che sposta contenuto

Un saluto a tutti ...

Girando per il web, mi sono imbattuto su ilsole24ore.com poco sotto l'header si trova un banner (Fiera di Rimini) espandibile, che al contrario di quelli più noti che coprono il contenuto sottostante, spostano il contenuto verticalmente verso il basso ...
Qlcn sa come realizzarli?

Saluti
Enrico

giorgiotave

Ciao Enrico e Benvenuto nel Forum GT,

ti sposto in scripting lato client per vedere se qualcuno riesce a darti una mano

3nrico

grazie giorgio ... spero che qlcn abbia qualche idea

digital.daigor

B'è.....

credo sia solo questione di:
display: none;
e
display: block;

se tu hai 3 div/tabelle, a quella al centro, dai "display: none", e fai scatenare il tutto on un link:

[HTML]
<table><tr><td>Tabella 1 </td></tr></table>
<table style="display:none;" id="banner"><tr><td>Tabella 2 </td></tr></table>
<table><tr><td>Tabella 3 </td></tr></table>
<a href="#" onclick="document.getElementById('banner').style.display = 'block';">apri</a>

[/HTML]

3nrico

Digor credo cisei andato vicino ma il banner viene aperto al passaggio del mouse e si richiude quando il puntatore va altrove... questo non riesco a capire come fare ...

digital.daigor

b'è....per fare il bel effetto che hai visto, io ti consiglio jquery, ti verrà molto semplice poi....se ti piace l'idea di jquery....appena ho 5 secondi di tempo libero....ti metto giù un bel esempio!

comunque, il principio è sempre lo stesso....è solo mettere giù diversamente le cose!

digital.daigor

Diciamo che jquery vada bene....

vediamo di mettere giù un po di codice....

[HTML]
<script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>
<script>
//esempio base
$(document).ready(function(){

$("#banner_exp").mouseover(function(){

    $("#banner_exp").animate({height: "300px"}, 1500 );

});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").animate({height: "50px"}, 1500 );
    
});

});

//Esempio con modifica di contenuto
$(document).ready(function(){

$("#banner_exp").mouseover(function(){

    $("#banner_exp").html("Linea 2 in espandione!").animate({height: "300px"}, 1500 );

});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").html("Linea 2").animate({height: "50px"}, 1500 );
    
});

});

</script>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea1
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td id="banner_exp" valign="top" style="height:50px; background-color:#FF0000;">
linea2
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea3
</td>
</tr>
</table>
[/HTML]

3nrico

Prima di tutto ti ringrazio del tuo interessamento ...

però riguardo all'esempio, vedo 3 rettangoli statici 1 verde/ 1 rosso / 1 verde ...

digital.daigor

[html]<script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>[/html]hai messo l'inclusione di jquery???

io l'ho provato prima di postarlo [edit] con FireFox[/edit].....e mi funzionava perfettamente....tanto che ne voglio fare uno standard da utilizzare ovunque!

trasforma quel'inclusione di prima in questo:
[html]<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>[/html]

3nrico

mea cupla! non ero stato attento ed avevo copiato pari pari il tuo esempio senza inclusione... funziona perfettamente!

quindi non mi resta che inserire le immagini in queste tabelle ... giusto?

<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea1
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td id="banner_exp" valign="top" style="height:50px; background-color:#FF0000;">
linea2
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea3
</td>
</tr>
</table>

digital.daigor

b'è....questo è un esempio....ora il limite è la fantasia.....

con il 1° esempio espandi soltanto...con il 2° invece sostituisci anche il contenuto....

se poi hai già qualcosa di fatto....cerca di riadattare il tutto a quello che hai!

lavoraci su un po....se hai dubbi....siamo tutti qui!!!!

3nrico

ho fatto due tentativi ma non riesco ...

ho due rettangoli che ho ritagliato a 300x50px

da quanto ho capito, dovrei inserirli in questo modo:

[HTML]
//Esempio con modifica di contenuto
$(document).ready(function(){
$("#banner_exp").mouseover(function(){

    $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").html("'rectangle_B.jpg'").animate({height: "50px"}, 500 );
    
});

});
[/HTML]

ma non c'è verso ...

digital.daigor

[HTML]//Esempio con modifica di contenuto
$(document).ready(function(){
$("#banner_exp").mouseover(function(){

    $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").html("'<img src='rectangle_B.jpg' />").animate({height: "50px"}, 500 );
    
});

}); [/HTML]

prova così!

3nrico

[html]

    $("#banner_exp").animate({height: "300px"}, 500 );
});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").animate({height: "50px"}, 500 );

});

});
//Esempio con modifica di contenuto
$(document).ready(function(){
$("#banner_exp").mouseover(function(){

    $("#banner_exp").html("<img src='rectangle_A.jpg' />").animate({height: "300px"}, 500 );
});

$("#banner_exp").mouseout(function(){

    $("#banner_exp").html("<img src='rectangle_B.jpg' />").animate({height: "50px"}, 500 );

});

});
</script>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea1
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td id="banner_exp" valign="top" style="height:50px;">
linea2
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td style="height:50px; background-color:#00FF00">
Linea3
</td>
</tr>
</table>
[/html]

ma il risultato non cambia ...

lo puoi vedere in questo link

mecox.com/home7.php

ps. ho omesso il link allo script poichè altrimenti non mi fa inviare il post

digital.daigor

hmmmm.....

questa cosa mi giunge assai strana.....

vedo di capire dov'è il problema....

3nrico

Ciao Daigor ... hai avuto modo di capire che cosa è successo?

digital.daigor

sto ancora cercando di capire, ma credo che il problema stia nel fatto che quando cambia img al'interno, lo interpreti come mouseout...quindi per risolvere bisogna mattere l'immagine come sfondo....al più presto un esempio...

3nrico

Ciao Daigor...

ho navigato un po ma non ho trovato riscontri, tu sei riuscito ad individuare il problema?

Ciao
Enrico

digital.daigor

<script type="text/javascript" src="INCLUSIONE DI JQUERY"></script>
<script>
$(document).ready(function(){

    $("#banner_exp").mouseover(function(){
    
        $("#linea_2").css({background: "url(immagine1.jpg)"});
        $("#banner_exp").animate({height: "300px"}, 1500 );

    });
    
    $("#banner_exp").mouseout(function(){
    
        $("#linea_2").css({background: "url(immagine2.jpg)"});
        $("#banner_exp").animate({height: "50px"}, 1500 );
        
    });

});

</script>
<table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
        <td style="height:50px; background-color:#00FF00">
        Linea1
        </td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
        <td id="linea_2" valign="top" style="height:50px; background-color:#FF0000;">
        <img id="banner_exp" height="50" width="100%" />
        </td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300">
    <tr>
        <td style="height:50px; background-color:#00FF00">
        Linea3
        </td>
    </tr>
</table>
```prova così!

3nrico

nulla!!!... adesso manco si apre