• User

    jQuery su Explorer - Apple effect

    Buongiorno,
    sto iniziando a (non :bigsmile:) conoscere jQuery e a fare le prime prove per applicare l'effetto "Apple" alle foto.

    Su Firefox funziona perfettamente; su "Exploder" :wink3: invece è un disastro... la foto di overlay mi finisce in fondo alla pagina, mentre il pulsante di chiusura è in alto a destra, e lo sfondo ancora in un'altra parte...

    Ho capito che si chiama "Exploder" ma questo mi sembra un po' troppo...!! :bigsmile:

    Qualcuno sa darmi una buona indicazione su come rendere compatibili gli script per i due browser?
    Grazie mille :smile5:

    Scusate, oso postare tutta la pagina non ho un dominio di prova in questo momento

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>jQuery Apple</title>

    <!--[if lt IE 7]> -->
    <script src="accatitipì: / / ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
    type="text/javascript">
    </script>
    <script src="accatitipì: / / ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js"
    type="text/javascript">
    </script>
    <![endif]-->

    <!-- NOTA: lo script precedente dovrebbe servire a qualcosa, ma mi pare che non faccia un tubo! -->

    <LINK href="stilefile.css" rel="stylesheet" type="text/css">

    <script src="jquery.tools.min.js" type="text/javascript" charset="utf-8"></script>
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function() {

            $("#apple img").overlay({effect: 'apple'});
                $("#content img").overlay({effect: 'apple'});
    

    });

    </script>
    <style>
    .apple_overlay {
    display:none;
    background-image:url(../img/overlay/white.png);
    width:640px;
    padding:35px;
    font-size:11px;
    }

    div.apple_overlay.black {
        background-image:url(accatitipì: / / static.flowplayer.org/tools/img/overlay/transparent.png);        
        color:#fff;
    }
    
    div.apple_overlay h2 {
        margin:10px 0 -9px 0;
        font-weight:bold;
        font-size:14px;
    }
    
    div.black h2 {
        color:#fff;
    }
    
    #apple {
        margin-top:10px;
        text-align:center;
    }
     img {
        background-color:#fff;
        padding:2px;
        border:1px solid #ccc;
        margin:2px 5px;
        cursor:pointer;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
    }
    </style>
    

    </head>
    <body>
    <div id="header">jQuery</div>
    <div id="mainmenu">mainmenu</div>
    <div id="menu">
    Menu di sinistra dove e' possibile inserire le scelte per l'utente. Bla bla bla bla bla bla bla bla bla bla bla bla bla.
    </div>
    <div id="content">
    <img src="Bruce_Lee_Warrior21.jpg" border="0" rel="#bruce"> Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    </div>

    <div id="apple">
    <link rel="stylesheet" type="text/css" href="accatitipì: / / static.flowplayer.org/tools/css/overlay-apple.css"/>
    <img src="accatitipì: / / static.flowplayer.org/tools/img/photos/gustavohouse.jpg" rel="#photo1"/>
    <img src="accatitipì: / / static.flowplayer.org/tools/img/photos/alexanderplatz-station.jpg" rel="#photo2"/>
    <img src="Bruce_Lee_Warrior21.jpg" border="0" rel="#bruce">
    </div>

    <div class="apple_overlay" id="photo2">
    <img src="accatitipì: / / static.flowplayer.org/tools/img/photos/alexanderplatz-station-medium.jpg" />

    <div class="details">
        <h2>Berlin Alexanderplatz Station</h2>
    
        <p>
            Berlin Alexanderplatz is a railway station in the Berlin city centre and is one
            of the city's most important interchange points for local public transport.
        </p>
    
    </div>
    

    </div>

    <div class="apple_overlay black" id="photo1">
    <img src="accatitipì: / / static.flowplayer.org/tools/img/photos/gustavohouse-medium.jpg" />

    <div class="details">
        <h2>Berlin Gustavohouse</h2>
    
        <p>
            The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
            1998 by the Spanish artist Gustavo.
        </p>
    
    </div>
    

    </div>

    <div class="apple_overlay black" id="bruce">
    <img src="Bruce_Lee_Warrior21.jpg" border="0" rel="#bruce">

    <div class="details">
        <h2>El Bruce</h2>
    
        <p>
            L' &egrave; el bruce
        </p>
    
    </div>
    

    </div>

    <div id="footer">Futer</div>
    </body>
    </html>