Opcion RD: diciembre 2015

jx

Publicadas por medic a la/s 6:14 p.m. No hay comentarios.:

j

This is the main content. To display a lightbox click here

This is the lightbox content. Close

x

TVNUNDIAL AGRADECE TU VISITA

PRESIONA LA X PARA CERRAR

ESTA VENTANA

Generar ventana javascript

function abrirVentana() { var ventana = window.open("", "ventana1", "width=300, height=200, scrollbars=no"); var strVar = ""; strVar = strVar + ""; strVar = strVar + "Ésta es una nueva ventana<\/title>"; strVar = strVar + "<script type=\"text\/javascript\">"; strVar = strVar + "function cerrarVentana()"; strVar = strVar + "{"; strVar = strVar + "window.close()"; strVar = strVar + "}"; strVar = strVar + "function cerrarVentanaAuto()"; strVar = strVar + "{"; strVar = strVar + "setTimeout(\"window.close()\", 3000)"; strVar = strVar + "}"; strVar = strVar + "<\/script>"; strVar = strVar + "<\/head>"; strVar = strVar + "<body onload=\"cerrarVentanaAuto()\">"; strVar = strVar + "<input type=\"button\" value=\"cerrar ventana\" onclick=\"cerrarVentana()\" />"; strVar = strVar + "<input type=\"button\" value=\"cerrar ventana después de 3 segs\" onclick=\"cerrarVentanaAuto()\" />"; strVar = strVar + "<\/body>"; ventana.document.write(strVar); } <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Publicadas por <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/10236589538099918206' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/10236589538099918206' rel='author' title='author profile'> <span itemprop='name'>medic</span> </a> </span> </span> <span class='post-timestamp'> a la/s <meta content='http://experimentozs.blogspot.com/2015/12/tabl.html' itemprop='url'/> <a class='timestamp-link' href='https://experimentozs.blogspot.com/2015/12/tabl.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2015-12-27T16:44:00-08:00'>4:44 p.m.</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='https://experimentozs.blogspot.com/2015/12/tabl.html#comment-form' onclick=''> No hay comentarios.: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1523003304'> <a href='https://www.blogger.com/post-edit.g?blogID=4708086681757088586&postID=7932269366327084274&from=pencil' title='Editar entrada'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> <a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=7932269366327084274&target=email' target='_blank' title='Enviar esto por correo electrónico'><span class='share-button-link-text'>Enviar esto por correo electrónico</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=7932269366327084274&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=7932269366327084274&target=twitter' target='_blank' title='Compartir en X'><span class='share-button-link-text'>Compartir en X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=7932269366327084274&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Compartir en Facebook'><span class='share-button-link-text'>Compartir en Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=7932269366327084274&target=pinterest' target='_blank' title='Compartir en Pinterest'><span class='share-button-link-text'>Compartir en Pinterest</span></a> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='4708086681757088586' itemprop='blogId'/> <meta content='5327590539825131808' itemprop='postId'/> <a name='5327590539825131808'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='https://experimentozs.blogspot.com/2015/12/ddd.html'>ddd</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-5327590539825131808' itemprop='description articleBody'> function flotante(tipo){ if (tipo==1){ //Si hacemos clic en abrir mostramos el fondo negro y el flotante $('#contenedor').show(); $('#flotante').animate({ marginTop: "-152px" }); } if (tipo==2){ //Si hacemos clic en cerrar, deslizamos el flotante hacia arriba $('#flotante').animate({ marginTop: "-756px" }); //Una vez ocultado el flotante cerramos el fondo negro setTimeout(function(){ $('#contenedor').hide(); },500) } } <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>function flotante(tipo){ if (tipo==1){ //Si hacemos clic en abrir mostramos el fondo negro y el flotante $('#contenedor').show(); $('#flotante').animate({ marginTop: "-152px" }); } if (tipo==2){ //Si hacemos clic en cerrar, deslizamos el flotante hacia arriba $('#flotante').animate({ marginTop: "-756px" }); //Una vez ocultado el flotante cerramos el fondo negro setTimeout(function(){ $('#contenedor').hide(); },500) } } </script><style>body { background:#CCC; font-family: 'Open Sans', sans-serif; } h1,h3 { text-align:center; } a { cursor:pointer; } #fondo { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 990;opacity: 0.8;background:#000; } #flotante { z-index: 999; border: 8px solid #fff; margin-top: -756px; margin-left: -153px; top: 50%; left: 50%; padding: 12px; position: fixed; width: 265px; background-color: #fff; border-radius: 3px; } </style> <h1>Ventana flotante animada con javascript y jquery</h1><h3><a onclick="flotante(1)">Abrir ventana</a></h3> <div id="contenedor" style="display:none"> <div id="flotante"><h1>Ventana flotante</h1><h3><a onclick="flotante(2)">Cerrar ventana</a></h3></div> <div id="fondo"></div> </div> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> Publicadas por <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/10236589538099918206' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/10236589538099918206' rel='author' title='author profile'> <span itemprop='name'>medic</span> </a> </span> </span> <span class='post-timestamp'> a la/s <meta content='http://experimentozs.blogspot.com/2015/12/ddd.html' itemprop='url'/> <a class='timestamp-link' href='https://experimentozs.blogspot.com/2015/12/ddd.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2015-12-27T16:13:00-08:00'>4:13 p.m.</abbr></a> </span> <span class='post-comment-link'> <a class='comment-link' href='https://experimentozs.blogspot.com/2015/12/ddd.html#comment-form' onclick=''> No hay comentarios.: </a> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1523003304'> <a href='https://www.blogger.com/post-edit.g?blogID=4708086681757088586&postID=5327590539825131808&from=pencil' title='Editar entrada'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> <a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=5327590539825131808&target=email' target='_blank' title='Enviar esto por correo electrónico'><span class='share-button-link-text'>Enviar esto por correo electrónico</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=5327590539825131808&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=5327590539825131808&target=twitter' target='_blank' title='Compartir en X'><span class='share-button-link-text'>Compartir en X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=5327590539825131808&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Compartir en Facebook'><span class='share-button-link-text'>Compartir en Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=4708086681757088586&postID=5327590539825131808&target=pinterest' target='_blank' title='Compartir en Pinterest'><span class='share-button-link-text'>Compartir en Pinterest</span></a> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='4708086681757088586' itemprop='blogId'/> <meta content='4434195572301217577' itemprop='postId'/> <a name='4434195572301217577'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='https://experimentozs.blogspot.com/2015/12/xv.html'>xv</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-4434195572301217577' itemprop='description articleBody'> <style type="text/css"> html,body{ margin:0px; height:100%; } </style> Un ejemplo completo, maquetado con CSS, para que funcione el height: 100%: <html> <head> <title>maquetado CSS utilizando todo el height

Por guiarte.com

Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con contendor de todo el alto..

Contenido que tiene que ocupar todo el espacio del navegador.

wwwe

	Primera		Segunda		Tercera
id=tabdiv-0 ... id=tabdiv-1 ... id=tabdiv-2 ...

table.tabs { border-collapse: separate; border-spacing: 0; background-color: transparent; font-size: 0.9em; } th.tabck { border: gray solid 1px; border-bottom: 0; border-radius: 0.5em 0.5em 0 0; background-color: transparent; padding: 0.3em; text-align: center; cursor: pointer; } th.tabcks { border: 0; border-bottom: gray solid 1px; } th.tabcks:first-child { border-left: gray solid 1px; } th.tabcks:last-child { border-right: gray solid 1px; } table.tabs tr:first-child th.tabcks { border-left: none; border-right: none; } table.tabs[data-filas] th.tabck { box-shadow: 0 -0.15em 0.1em 0 white; } table.tabs td { border: gray solid 1px; border-top: 0; } tr.filadiv { background-color: rgb(235, 235, 225); } /* El ancho y alto de los div.tabdiv se configuran en cada aplicación */ div.tabdiv { background-color: rgb(235, 235, 225); border: 0; padding: 0.5em; overflow: auto; display: none; width: 100%; height: auto; }

wew

Pestaña1 Pestaña21 Pestaña3 Pestaña4

Contenido1dddd

Contenido2dd

Contenido3ddd

Contenido4

#contenedor { margin: 40px auto; width: 750px; /* Ancho del contenedor */ box-sizing: border-box; -moz-box-sizing: border-box; } #contenedor input { height: 32px; visibility: hidden; } #contenedor label { float: left; cursor: pointer; font-size: 15px; /* Tamaño del texto de las pestañas */ line-height: 40px; height: 40px; padding: 0 20px; display: block; color: #888; /* Color del texto de las pestañas */ text-align: center; border-radius: 5px 5px 0 0; background: #eee; /* Fondo de las pestañas */ margin-right: 5px; } #contenedor input:hover + label { background: #ddd; /* Fondo de las pestañas al pasar el cursor por encima */ color: #666; /* Color del texto de las pestañas al pasar el cursor por encima */ } #contenedor input:checked + label { background: #FFDA91; /* Fondo de las pestañas al presionar */ color: #444; /* Color de las pestañas al presionar */ z-index: 6; line-height: 45px; height: 45px; position: relative; top: -5px; -webkit-transition: .1s; -moz-transition: .1s; -o-transition: .1s; -ms-transition: .1s; } .content { background: #FFDA91; /* Fondo del contenido */ position: relative; width: 100%; height: 350px; /* Alto del contenido */ padding: 30px; z-index: 5; border-radius: 0 5px 5px 5px; } .content div { position: absolute; z-index: -100; opacity: 0; transition: all linear 0.1s; } #contenedor input.tab-selector-1:checked ~ .content .content-1, #contenedor input.tab-selector-2:checked ~ .content .content-2, #contenedor input.tab-selector-3:checked ~ .content .content-3, #contenedor input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; }