Desplegar venta desde un lateral, con un video incrustrado

Tucocheytu · #1 (**permalink**) 30/01/2012, 09:52

lo que quiero es básicamente esto, una ventana oculta en el lateral, que al pinchar sobre la pestaña se desplegué y en esa ventana se reproduzca un video alojado en la web

memoadian · #2 (**permalink**) 30/01/2012, 13:12

javascript + flash.

quizas algo de css

andreshenao · #3 (**permalink**) 30/01/2012, 13:34

hola, la pestaña con css position fixed css y que despliegue con jquery

Tucocheytu · #4 (**permalink**) 30/01/2012, 17:09

os pongo lo que he logrado, he sacado el código de un menú desplegable y lo he modificado un poco para dejarlo con lo justo y necesario, os pongo lo que me hace falta

Código:

http://www.tucocheytu.com/prueba/

1- incrustar el video dentro de la ventana
2- que se mantenga abierto mientras se reproduce el video, y si es posible ponerle una x de cerrar
3- escribir algo en la pestaña antes de abrirse, si es posible

html

Código:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
    </head>
    <body>
        <div class="header"></div>
        <div class="scroll"></div>

        <ul id="navigation">
            <li class="home"><a href="" title="Home"></a></li>
        </ul>

        <script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-515px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-515px'},200);
                    }
                );
            });
        </script>
    </body>
</html>

el css

Código:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 525px;
    height: 297px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(../images/home.png);

Tucocheytu · #5 (**permalink**) 31/01/2012, 08:54

a alguien se le ocurre algo que hacer estoy bloqueado y no se mucho de programacion, me las apañao pero ahi veces que no doy mas jeje

memoadian · #6 (**permalink**) 31/01/2012, 12:56

Mostrar y ocultar div con javascript

de ese modo el div se ve como en esta web que tiene un chat flash dentro.

http://manganimemas.com/foro

de ahi controlas la posicion con css, y el video debe ir dentro del div con un <object>

lo del video pues tendrias que asociar alguna funcion en flash (no se flash) que al terminar de reproducir mande alguna orden pero creo que eso es secundario en cuento el usuario termine de verlo seguro cierra el div.

Tucocheytu · #7 (**permalink**) 31/01/2012, 18:34

nada no logro implantar el video si lo implanto donde esta el codigo <ul> quitandolo no se muestra si lo meto entre <div> se muestra pero no dentro de la pantalla sino se queda fijo pero no se esconde ni va al son de la ventana

Tucocheytu · #8 (**permalink**) 01/02/2012, 19:13

lo subo por si alguien sabe algo

Tucocheytu · #9 (**permalink**) 14/02/2012, 18:41

lo vuelvo a subir por que despues de un tiempo retomo el asunto pero sigo en el mismo sitio