API tools faq
paste
Guest User

Untitled

a guest
Oct 1st, 2013
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.70 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. html, body {
  3.     margin:0px;
  4.     padding:0px;
  5.     height:100%;
  6. }
  7. @font-face {
  8.     font-family: 'Regular';
  9.     src: url('https://liit.com.ar/web/inc/fonts/Regular/Regular.eot');
  10.     src: url('https://liit.com.ar/web/inc/fonts/Regular/Regular.eot?#iefix') format('embedded-opentype'),
  11.          url('https://liit.com.ar/web/inc/fonts/Regular/Regular.woff') format('woff'),
  12.          url('https://liit.com.ar/web/inc/fonts/Regular/Regular.ttf') format('truetype'),
  13.          url('https://liit.com.ar/web/inc/fonts/Regular/Regular.svg#Regular') format('svg');
  14.     font-weight: normal;
  15.     font-style: normal;
  16. }
  17. @font-face {
  18.     font-family: 'Bold';
  19.     src: url('https://liit.com.ar/web/inc/fonts/Bold/Bold.eot');
  20.     src: url('https://liit.com.ar/web/inc/fonts/Bold/Bold.eot?#iefix') format('embedded-opentype'),
  21.          url('https://liit.com.ar/web/inc/fonts/Bold/Bold.woff') format('woff'),
  22.          url('https://liit.com.ar/web/inc/fonts/Bold/Bold.ttf') format('truetype'),
  23.          url('https://liit.com.ar/web/inc/fonts/Bold/Bold.svg#Bold') format('svg');
  24.     font-weight: bold;
  25.     font-style: normal;
  26. }
  27.  
  28. *{
  29.     margin:0px;
  30.     padding:0px;
  31.     font-family: 'Regular', verdana, arial, sans-serif;
  32.     font-weight: normal;
  33.     font-style: normal;
  34. }
  35. #TRheader{
  36.     width:100%;
  37.     height:77px;
  38.    
  39.     background-image: linear-gradient(#fff 34.2%, #d8d8d8 76px, #FFFFFF 77px);
  40.     background-image: -webkit-linear-gradient(#fff 34.2%, #d8d8d8 76px, #FFFFFF 77px);
  41. }
  42. #TDheader{
  43.     width:100%;
  44.     height:77px;
  45.     align: center;
  46.     valign: middle;
  47.     border-bottom: solid 1px hsl(0, 0%, 100%);
  48. }
  49. header {
  50.     width: 994px;
  51.     margin: 0px auto 0px auto;
  52.     padding: 0px;
  53. }
  54. #logo{
  55.     width:121px;
  56.     height:45px;
  57.     position: relative; float: left;
  58.     margin: 0px;
  59.     padding: 0px;
  60.     background: url('ima/logo-liit.png');
  61. }
  62. #hom{
  63.     width:758px;
  64.     height:26px;
  65.     position: relative; float: left;
  66.     margin: 0px;
  67.     padding: 0px;
  68. }
  69.     #hom h1 {
  70.         font-size: .8em;
  71.         color: hsl(328, 85.9%, 45.3%);
  72.         text-align: center;
  73.     }
  74. #ingFlecha{
  75.     width: 90px;
  76.     height:23px;
  77.     position: relative; float: left;
  78.     margin: 0px;
  79.     padding: 0px 25px 0px 0px;
  80.     top:12px;
  81.     background: url('ima/boton-login.png');
  82.     background-repeat: no-repeat;
  83.     background-position: top right;
  84.     text-align: right;
  85. }
  86.     #ingFlecha a{
  87.         color:hsl(200, 85%, 43.7%);
  88.     }
  89. #Didiomas{
  90.     width: 100px;
  91.     height:23px;
  92.     left: 17px;
  93.     position: relative; float: right;
  94.     margin: 0px;
  95.     padding: 5px 0px 0px 25px;
  96.     top:12px;
  97. }
  98. #TRfooter{
  99.     width:100%;
  100.     height:96px;
  101.    
  102.     background-image: linear-gradient(#fff 27.3%, #e0e1e5 71.5%, #dfe1dc 72.6%, #e4dee2 73.6%, #dee0dd 74.7%, #dfdfe1 76.8%, #a8a8a8 76.8%, #c4c2c7 77.8%, #c4c2c7 78.9%, #003f5b 78.9%, #01567b 80%, #016893 86.3%);
  103.     background-image: -webkit-linear-gradient(#fff 27.3%, #e0e1e5 71.5%, #dfe1dc 72.6%, #e4dee2 73.6%, #dee0dd 74.7%, #dfdfe1 76.8%, #a8a8a8 76.8%, #c4c2c7 77.8%, #c4c2c7 78.9%, #003f5b 78.9%, #01567b 80%, #016893 86.3%);
  104. }
  105. #TDfooter{
  106.     width:100%;
  107.     height:96px;
  108.     align: center;
  109.     valign: middle;
  110. }
  111. footer {
  112.     width: 520px;
  113.     height:76px;
  114.     margin: 0px auto 0px auto;
  115.     padding: 20px 0px 0px 0px;
  116. }
  117. footer a {
  118.     color: hsl(328, 81%, 45.3%);
  119.     font-size: .8em;
  120. }
  121. @keyframes AoverNav {
  122.     from{top: -2px;}
  123.     to{top: 23px;}
  124. }
  125. @-webkit-keyframes AoverNav {
  126.     from{top: -2px;}
  127.     to{top: 23px;}
  128. }
  129.  
  130. #TRnav{
  131.     width: 100%;
  132.     height: 43px;
  133.     background-color: hsl(200, 100%, 20.8%);
  134. }
  135. #TDnav{
  136.     width: 100%;
  137.     height: 43px;
  138.     align: center;
  139.     valign: middle;
  140.     border-bottom: solid 1px hsl(204, 100%, 12.9%);
  141. }
  142. nav {
  143.     width: 994px;
  144.     height: 30px;
  145.     margin: 0px auto 0px auto;
  146. }
  147.     nav ul{
  148.         list-style: none;
  149.         position: relative; float: left;
  150.     }
  151.     nav ul li{
  152.         min-width: 80px;
  153.         height: 26px;
  154.         line-height: 15px;
  155.         text-align: center;
  156.         position: relative; float: left;
  157.         margin-right: 4px;
  158.         z-index: 999;
  159.         border-style: solid;
  160.         border-width: 2px;
  161.         -webkit-border-image: url(ima/fondo_botones_nav.png) 2 fill stretch;
  162.         border-image: url('ima/fondo_botones_nav.png') 2 fill stretch;
  163.         -webkit-transition: -webkit-transform .4s .1s linear;
  164.         -webkit-transition: -webkit-transform .4s .1s linear;
  165.         transition: -ms-transform .4s .1s linear;
  166.         transition: -webkit-transform .4s .1s linear;
  167.         transition: transform .4s .1s linear;
  168.     }
  169.     nav ul li:hover{
  170.         -webkit-transform: scale(1.4);
  171.             -ms-transform: scale(1.4);
  172.                 transform: scale(1.4);
  173.         z-index: 9999;
  174.     }
  175.     nav ul li a{
  176.         color: #e6eaed;
  177.         padding: 2px 9px 0px 9px;
  178.         display: block;
  179.         font-size: 0.82em;
  180.         text-decoration: none;
  181.         line-height: 25px ;
  182.         -webkit-transition: color .2s .1s ease-out;
  183.         transition: color .2s .1s ease-out;
  184.     }
  185.     nav ul li a:hover{
  186.         color: hsl(200, 85%, 43.7%);
  187.     }
  188.     nav ul li div{
  189.         position: relative;
  190.         top: -7px;
  191.     }
  192.     nav ul li .luz{
  193.         width: 100%;
  194.         height: 7px;
  195.         position: relative;
  196.         top: -2px;
  197.        
  198.         background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
  199.         background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
  200.     }
  201.     nav ul li .luzhover{
  202.         width: 100%;
  203.         height: 7px;
  204.         position: relative;
  205.         top: -2px;
  206.        
  207.         background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
  208.         background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
  209.         -webkit-animation: AoverNav .8s forwards .2s;
  210.         animation: AoverNav .8s forwards .2s;
  211.     }
  212. #submenu1{
  213.     position: absolute;
  214.     width:100%;
  215.     height:0px;
  216.     z-index: 9999;
  217.     background-image: url("inc/ima/submenuBackground.jpg");
  218.     -webkit-transition: height 1s ease;
  219.        -moz-transition: height 1s ease;
  220.          -o-transition: height 1s ease;
  221.             transition: height 1s ease;
  222. }
  223. #submenu2{
  224.     width:100%;
  225.     height: 0px;
  226.     align: center;
  227.     valign: middle;
  228.     z-index: 9999;
  229.     background: url('inc/ima/fasideLinea.png');
  230.     background-repeat: repeat-x;
  231.     background-position: bottom;
  232.     -webkit-transition: height 1s ease;
  233.        -moz-transition: height 1s ease;
  234.          -o-transition: height 1s ease;
  235.             transition: height 1s ease;
  236. }
  237. #oscuro{
  238.     width: 0;
  239.     height: 0;
  240.     z-index: 1000;
  241.     position: absolute;
  242.     background-color: #000000;
  243.     opacity: 0;
  244.     -webkit-transition: opacity 1s ease;
  245.        -moz-transition: opacity 1s ease;
  246.          -o-transition: opacity 1s ease;
  247.             transition: opacity 1s ease;
  248. }
  249. #options {
  250.     width: 100%;
  251.     height: 100%;
  252.     position: absolute;
  253.     left: 298px;
  254.     top: 150px;
  255.     z-index: 99999999;
  256. }
  257. #DcontenidoSubmenu{
  258.     visibility: hidden;
  259.     width: 100%;
  260.     height: 257px;
  261.     top: 30px;
  262.     position: absolute;
  263.     overflow: hidden;
  264.     z-index: 99999999;
  265.     border: 1px solid red;
  266.     -webkit-perspective: 1200px;
  267.        -moz-perspective: 1200px;
  268.          -o-perspective: 1200px;
  269.             perspective: 1200px;
  270.            
  271. }
  272. #DcontenidoSubmenu2{
  273.     visibility: hidden;
  274.     width: 100%;
  275.     height: 257px;
  276.     top: 30px;
  277.     position: absolute;
  278.     overflow: hidden;
  279.     z-index: 99999999;
  280.     border: 1px solid red;
  281.     -webkit-perspective: 1200px;
  282.        -moz-perspective: 1200px;
  283.          -o-perspective: 1200px;
  284.             perspective: 1200px;
  285.            
  286. }
  287. .boxClass1{
  288.     height: 35px;
  289.     //border: 2px solid red;
  290.     position: absolute;
  291.     float: left;
  292. }
  293. .boxClass2{
  294.     height: 35px;
  295.     //border: 2px solid red;
  296.     position: absolute;
  297.     float: left;
  298.     -webkit-transition: top 3s ease 0s, left 3s ease 0s;
  299.        -moz-transition: top 3s ease 0s, left 3s ease 0s;
  300.          -o-transition: top 3s ease 0s, left 3s ease 0s;
  301.             transition: top 3s ease 0s, left 3s ease 0s;
  302. }
  303. .posicionBox{
  304.     height: 35px;
  305.     border: 2px solid red;
  306.     margin-top: 10px;
  307.     margin-left: 20px;
  308.     position: relative;
  309.     float: left;
  310. }
  311. .boxClass3{
  312.     height: 35px;
  313.     //border: 2px solid red;
  314.     margin-top: 10px;
  315.     margin-left: 20px;
  316.     position: relative;
  317.     float: left;
  318. }
  319. .container{
  320.     width: 220px;
  321.     height: 35px;
  322.     position: relative;
  323.     margin: 50px;
  324.     -webkit-perspective: 1200px;
  325.        -moz-perspective: 1200px;
  326.          -o-perspective: 1200px;
  327.             perspective: 1200px;
  328. }
  329. .boxContenedor{
  330.     width: 100%;
  331.     height: 100%;
  332.     position: absolute;
  333. }
  334. .cuboSubmenu{
  335.     width: 100%;
  336.     height: 100%;
  337.     position: relative;
  338.     -webkit-transform-style: preserve-3d;
  339.        -moz-transform-style: preserve-3d;
  340.          -o-transform-style: preserve-3d;
  341.             transform-style: preserve-3d;
  342.     -webkit-transition: -webkit-transform 1s;
  343.        -moz-transition: -moz-transform 1s;
  344.          -o-transition: -o-transform 1s;
  345.             transition: transform 1s;
  346.     -webkit-transform: translateZ(  -50px );
  347.        -moz-transform: translateZ(  -50px );
  348.          -o-transform: translateZ(  -50px );
  349.             transform: translateZ(  -50px );
  350. }
  351. .cuboSubmenu figure{
  352.     border: 2px solid black;
  353.     color: white;
  354.     display: block;
  355.     font-size: 15px;
  356.     font-weight: bold;
  357.     line-height: 35px;
  358.     margin: 0;
  359.     position: absolute;
  360.     text-align: center;
  361. }
  362. .cuboSubmenu .front, .cuboSubmenu .back{
  363.     width: 220px;
  364.     height: 35px;
  365. }
  366. .cuboSubmenu .right, .cuboSubmenu .left{
  367.     width: 35px;
  368.     height: 35px;
  369.     left: 100px;
  370. }
  371. .cuboSubmenu .top, .cuboSubmenu .bottom{
  372.     width: 220px;
  373.     height: 35px;
  374.     top: 50px;
  375.     line-height: 35px;
  376. }
  377. .cuboSubmenu .front{
  378.     background: hsla( 000, 100%, 50%, 0.7 );
  379. }
  380. .cuboSubmenu .back{
  381.     background: hsla( 160, 100%, 50%, 0.7 );
  382. }
  383. .cuboSubmenu .righ{
  384.     background: hsla( 120, 100%, 50%, 0.7 );
  385. }
  386. .cuboSubmenu .left{
  387.     background: hsla( 180, 100%, 50%, 0.7 );
  388. }
  389. .cuboSubmenu .top{
  390.     background: hsla( 240, 100%, 50%, 0.7 );
  391. }
  392. .cuboSubmenu .bottom{
  393.     background: hsla( 300, 100%, 50%, 0.7 );
  394. }
  395. .cuboSubmenu .front{
  396.     -webkit-transform: translateZ( 19px );
  397.        -moz-transform: translateZ( 19px );
  398.          -o-transform: translateZ( 19px );
  399.             transform: translateZ( 19px );
  400. }
  401. .cuboSubmenu .back{
  402.     -webkit-transform: rotateX( -180deg ) translateZ(  19px );
  403.        -moz-transform: rotateX( -180deg ) translateZ(  19px );
  404.          -o-transform: rotateX( -180deg ) translateZ(  19px );
  405.             transform: rotateX( -180deg ) translateZ(  19px );
  406. }
  407. .cuboSubmenu .right {
  408.     -webkit-transform: rotateY(   90deg ) translateZ( 104px );
  409.        -moz-transform: rotateY(   90deg ) translateZ( 104px );
  410.          -o-transform: rotateY(   90deg ) translateZ( 104px );
  411.             transform: rotateY(   90deg ) translateZ( 104px );
  412. }
  413. .cuboSubmenu .left {
  414.     -webkit-transform: rotateY(  -90deg ) translateZ( 119px );
  415.        -moz-transform: rotateY(  -90deg ) translateZ( 119px );
  416.          -o-transform: rotateY(  -90deg ) translateZ( 119px );
  417.             transform: rotateY(  -90deg ) translateZ( 119px );
  418. }
  419. .cuboSubmenu .top {
  420.     -webkit-transform: rotateX(   90deg ) translateZ( 68px );
  421.        -moz-transform: rotateX(   90deg ) translateZ( 68px );
  422.          -o-transform: rotateX(   90deg ) translateZ( 68px );
  423.             transform: rotateX(   90deg ) translateZ( 68px );
  424. }
  425. .cuboSubmenu .bottom {
  426.     -webkit-transform: rotateX(  -90deg ) translateZ( -31px );
  427.        -moz-transform: rotateX(  -90deg ) translateZ( -31px );
  428.          -o-transform: rotateX(  -90deg ) translateZ( -31px );
  429.             transform: rotateX(  -90deg ) translateZ( -31px );
  430. }
  431.  
  432. </style>
  433. <script type="text/javascript">
  434. var cursorX;
  435. var cursorY;
  436. var checkInterval;
  437. var submenuOpen = false;
  438. var recentMove = false;
  439. var mouseOverMenuItm = false;
  440. var VboxToMove = 0;
  441. var VtimeoutID = 0;
  442. function FabrirMenu(did,nivel){
  443.     if (mouseOverMenuItm){
  444.         document.getElementById('DcontenidoSubmenu').style.visibility = "";
  445.         window.setTimeout("FeffectosAbrirMenu();", 100);
  446.     }
  447. }
  448. function FeffectosAbrirMenu(){
  449.     /*var ediv = document.getElementById("DdivLog");
  450.     ediv.style.top = '0px';
  451.     ediv.style.height = document.getElementById("Tbody").clientHeight+'px';
  452.     ediv.style.left = '0px';
  453.     ediv.style.width = document.getElementById("Tbody").clientWidth+'px';
  454.     ediv.style.visibility = 'visible';*/
  455.     document.getElementById('submenu1').style.height = "260px";
  456.     document.getElementById('submenu2').style.height = "260px";
  457.     document.getElementById('DcontenidoSubmenu').style.visibility = "visible";
  458.     document.getElementById('DcontenidoSubmenu2').style.visibility = "hidden";
  459.     if (!submenuOpen){
  460.         Fordenar('x');
  461.     }
  462.     submenuOpen = true;
  463.     checkInterval = setInterval('FchequeoMovimiento();', 100);
  464. }
  465. function FcerrarMenu(){
  466.     //FreestablecerClassName();
  467.     Fdesordenar(1);
  468.     document.getElementById('submenu1').style.height = "0px";
  469.     document.getElementById('submenu2').style.height = "0px";
  470.     /*var ediv = document.getElementById("DdivLog");
  471.     ediv.style.width = 0+'px';
  472.     ediv.style.height = 0+'px';
  473.     document.getElementById("DdivLog").style.visibility = 'hidden';*/
  474.     submenuOpen = false;
  475.     window.setTimeout("FocultarSubmenu();",10);
  476.     clearInterval(checkInterval);
  477. }
  478. function FocultarSubmenu(){
  479.     document.getElementById('DcontenidoSubmenu').style.visibility = "hidden";
  480.     document.getElementById('DcontenidoSubmenu2').style.visibility = "hidden";
  481. }
  482. function FgetOffset(el){
  483.     var _x = 0;
  484.     var _y = 0;
  485.     while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)){
  486.         _x += el.offsetLeft-el.scrollLeft;
  487.         _y += el.offsetTop-el.scrollTop;
  488.         el = el.offsetParent;
  489.     }
  490.     return {top:_y,left:_x};
  491. }
  492. document.onmousemove = function(e){
  493.     cursorX = e.pageX;
  494.     cursorY = e.pageY;
  495.     //document.getElementById('test').innerHTML = cursorX+' - '+cursorY+' - Cubo: '+cuboActual;
  496.     //if (submenuOpen && (cursorY < 77 || cursorY > 303+77)){
  497.     if (submenuOpen && (cursorY < 0 || cursorY > 294)){
  498.         FcerrarMenu();
  499.     }
  500. }
  501. var rotateY = 0;
  502. var rotateX = 0;
  503. var cuboActual = false;
  504. function FchequeoMovimiento(){
  505.     if (cuboActual){
  506.         FmoverCubito();
  507.     }
  508. }
  509. function FajustarBox(id){
  510.     textElem = document.getElementById('box'+id).children[0].children[0];
  511.     document.getElementById('box'+id).children[0].style.width = textElem.offsetWidth + 15;
  512.     document.getElementById('box'+id).children[1].style.width = textElem.offsetWidth + 15;
  513.     document.getElementById('box'+id).children[4].style.width = textElem.offsetWidth + 15;
  514.     document.getElementById('box'+id).children[5].style.width = textElem.offsetWidth + 15;
  515.     document.getElementById('box'+id).children[2].style.webkitTransform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
  516.     document.getElementById('box'+id).children[2].style.transform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
  517.     document.getElementById('boxContenedor'+id).style.width = textElem.offsetWidth + 18;
  518.     document.getElementById('posicion'+id).style.width = textElem.offsetWidth + 18;
  519.    
  520.     textElem = document.getElementById('2box'+id).children[0].children[0];
  521.     document.getElementById('2box'+id).children[0].style.width = textElem.offsetWidth + 15;
  522.     document.getElementById('2box'+id).children[1].style.width = textElem.offsetWidth + 15;
  523.     document.getElementById('2box'+id).children[4].style.width = textElem.offsetWidth + 15;
  524.     document.getElementById('2box'+id).children[5].style.width = textElem.offsetWidth + 15;
  525.     document.getElementById('2box'+id).children[2].style.webkitTransform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
  526.     document.getElementById('2box'+id).children[2].style.transform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
  527.     document.getElementById('2boxContenedor'+id).style.width = textElem.offsetWidth + 18;
  528. }
  529. function boxLength(id){
  530.     textElem = document.getElementById('box'+id).children[0].children[0];
  531.     bLength = textElem.offsetWidth + 18;
  532.     return bLength;
  533. }
  534. function FmoverCubito(){
  535.     rotateY+=10;
  536.     rotateX+=10;
  537.     document.getElementById('box'+cuboActual).style.webkitTransform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
  538.     document.getElementById('box'+cuboActual).style.transform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
  539.     document.getElementById('2box'+cuboActual).style.webkitTransform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
  540.     document.getElementById('2box'+cuboActual).style.transform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
  541. }
  542. function FreestablecerCubito(id){
  543.     if (id != cuboActual){
  544.         document.getElementById('box'+id).style.webkitTransform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
  545.         document.getElementById('box'+id).style.transform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
  546.         document.getElementById('2box'+id).style.webkitTransform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
  547.         document.getElementById('2box'+id).style.transform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
  548.         rotateY = 0;
  549.         rotateX = 0;
  550.     }
  551. }
  552. function Fordenar(desde){
  553.     document.getElementById('alertas').innerHTML += VboxToMove+'-'+desde+" ";
  554.     document.getElementById('DcontenidoSubmenu').children[VboxToMove].children[0].style.top = "0px";
  555.     document.getElementById('DcontenidoSubmenu').children[VboxToMove].children[0].style.left = "0px";
  556.     if (document.getElementById('DcontenidoSubmenu').children.length-1 != VboxToMove){
  557.         VboxToMove++;
  558.         VtimeoutID = window.setTimeout("Fordenar('H')", 1500);
  559.     } else {
  560.         VboxToMove = 0;
  561.     }
  562. }
  563. function Fdesordenar(arg){
  564.     if (arg == 1){
  565.         VboxToMove = 0;
  566.         VtimeoutID = 0;
  567.         for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
  568.             document.getElementById('DcontenidoSubmenu').children[i-1].style.width = boxLength(i);
  569.             document.getElementById('DcontenidoSubmenu').children[i-1].children[0].style.width = boxLength(i);
  570.             FrandomBoxPos(document.getElementById('DcontenidoSubmenu').children[i-1].children[0]);
  571.             isOutOfFather(document.getElementById('DcontenidoSubmenu').children[i-1].children[0]);
  572.         }
  573.         window.setTimeout('Fdesordenar(2);', 150);
  574.     } else {
  575.         for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
  576.             document.getElementById('DcontenidoSubmenu').children[i-1].children[0].className = 'boxClass2';
  577.         }
  578.     }
  579. }
  580. function FreestablecerClassName(){
  581.     for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
  582.             document.getElementById('DcontenidoSubmenu').children[i-1].children[0].className = 'boxClass1';
  583.         }
  584. }
  585. function rand(from,to){
  586.     return Math.floor(Math.random()*(to-from+1)+from);
  587. }
  588. function FrandomBoxPos(elem){
  589.     cuadrante = rand(1,4);
  590.     if (cuadrante == 1){
  591.         elem.style.top = "-"+rand(100, 200)+"px";
  592.         elem.style.left = rand(1, document.body.offsetWidth)+"px";
  593.     } else if (cuadrante == 2){
  594.         elem.style.top = rand(1, document.body.offsetHeight)+"px";
  595.         elem.style.left = rand(-300, (document.body.offsetWidth*-1)-300)+"px";
  596.     } else if (cuadrante == 3){
  597.         elem.style.top = rand(document.body.offsetHeight, document.getElementById('DcontenidoSubmenu').offsetHeight+100)+"px";
  598.         elem.style.left = rand(1, document.body.offsetWidth)+"px";
  599.     } else if (cuadrante == 4){
  600.         elem.style.top = rand(1, document.body.offsetHeight)+"px";
  601.         elem.style.left = rand(document.body.offsetWidth+400, document.body.offsetWidth+600)+"px";
  602.     }
  603. }
  604. function isOutOfFather(child){
  605.     dad = document.getElementById('DcontenidoSubmenu');
  606.     if((child.posX > dad.posX && child.posX < dad.posX + dad.width) || (child.posX + child.width > dad.posX && child.posX + child.width < dad.posX + dad.width) ) {
  607.         console.log(child.children[0].children[0].children[0].innerHTML+" - 1");
  608.     }
  609.     if((child.posY > dad.posY && child.posY < dad.posY + dad.width) || (child.posY + child.width > dad.posY && child.posY + child.width < dad.posY + dad.width) ) {
  610.         console.log(child.children[0].children[0].children[0].innerHTML+" - 2");
  611.     }
  612. }
  613. function FmostrarTodas(){
  614.     VboxToMove = 0;
  615.     clearTimeout(VtimeoutID);
  616.     VtimeoutID = 0;
  617.     /*for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
  618.         document.getElementById('DcontenidoSubmenu').children[i-1].className = 'boxClass3';
  619.     }
  620.     for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
  621.         document.getElementById('DcontenidoSubmenu').children[i-1].style.marginTop = "10px";
  622.         document.getElementById('DcontenidoSubmenu').children[i-1].style.marginLeft = "20px";
  623.     }*/
  624.    
  625.     document.getElementById('DcontenidoSubmenu').style.visibility = "hidden";
  626.     document.getElementById('DcontenidoSubmenu2').style.visibility = "visible";
  627. }
  628. </script>
  629. <div id="DcontenidoSubmenu" onMouseOver='FmostrarTodas();'>
  630.     <div id='posicion1' class='posicionBox'>
  631.         <div id='boxContenedor1' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(1);', 200);" onMouseOver='cuboActual=1;'>
  632.             <div id='box1' class='cuboSubmenu'>
  633.                 <figure class='front'><a>seccsadsadsadsadon</a></figure>
  634.                 <figure class='back'></figure>
  635.                 <figure class='right'></figure>
  636.                 <figure class='left'></figure>
  637.                 <figure class='top'></figure>
  638.                 <figure class='bottom'></figure>
  639.             </div>
  640.         </div>
  641.     </div>
  642.     <div id='posicion2' class='posicionBox'>
  643.         <div id='boxContenedor2' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(2);', 200);" onMouseOver='cuboActual=2;'>
  644.             <div id='box2' class='cuboSubmenu'>
  645.                 <figure class='front'><a>secciasdsasadsadadsadsadsadsadsadasdon</a></figure>
  646.                 <figure class='back'></figure>
  647.                 <figure class='right'></figure>
  648.                 <figure class='left'></figure>
  649.                 <figure class='top'></figure>
  650.                 <figure class='bottom'></figure>
  651.             </div>
  652.         </div>
  653.     </div>
  654.     <div id='posicion3' class='posicionBox'>
  655.         <div id='boxContenedor3' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(3);', 200);" onMouseOver='cuboActual=3;'>
  656.             <div id='box3' class='cuboSubmenu'>
  657.                 <figure class='front'><a>seccioadsadn</a></figure>
  658.                 <figure class='back'></figure>
  659.                 <figure class='right'></figure>
  660.                 <figure class='left'></figure>
  661.                 <figure class='top'></figure>
  662.                 <figure class='bottom'></figure>
  663.             </div>
  664.         </div>
  665.     </div>
  666.     <div id='posicion4' class='posicionBox'>
  667.         <div id='boxContenedor4' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(4);', 200);" onMouseOver='cuboActual=4;'>
  668.             <div id='box4' class='cuboSubmenu'>
  669.                 <figure class='front'><a>seccisadadsadsadadsadsadon</a></figure>
  670.                 <figure class='back'></figure>
  671.                 <figure class='right'></figure>
  672.                 <figure class='left'></figure>
  673.                 <figure class='top'></figure>
  674.                 <figure class='bottom'></figure>
  675.             </div>
  676.         </div>
  677.     </div>
  678.     <div id='posicion5' class='posicionBox'>
  679.         <div id='boxContenedor5' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(5);', 200);" onMouseOver='cuboActual=5;'>
  680.             <div id='box5' class='cuboSubmenu'>
  681.                 <figure class='front'><a>secciosdadadn</a></figure>
  682.                 <figure class='back'></figure>
  683.                 <figure class='right'></figure>
  684.                 <figure class='left'></figure>
  685.                 <figure class='top'></figure>
  686.                 <figure class='bottom'></figure>
  687.             </div>
  688.         </div>
  689.     </div>
  690.     <div id='posicion6' class='posicionBox'>
  691.         <div id='boxContenedor6' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(6);', 200);" onMouseOver='cuboActual=6;'>
  692.             <div id='box6' class='cuboSubmenu'>
  693.                 <figure class='front'><a>seccgdgfgettetgfjhryeterdfggertertwerewrwion</a></figure>
  694.                 <figure class='back'></figure>
  695.                 <figure class='right'></figure>
  696.                 <figure class='left'></figure>
  697.                 <figure class='top'></figure>
  698.                 <figure class='bottom'></figure>
  699.             </div>
  700.         </div>
  701.     </div>
  702.     <div id='posicion7' class='posicionBox'>
  703.         <div id='boxContenedor7' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(7);', 200);" onMouseOver='cuboActual=7;'>
  704.             <div id='box7' class='cuboSubmenu'>
  705.                 <figure class='front'><a>secsdffsfdsfsfsfsfasdcion</a></figure>
  706.                 <figure class='back'></figure>
  707.                 <figure class='right'></figure>
  708.                 <figure class='left'></figure>
  709.                 <figure class='top'></figure>
  710.                 <figure class='bottom'></figure>
  711.             </div>
  712.         </div>
  713.     </div>
  714.     <div id='posicion8' class='posicionBox'>
  715.         <div id='boxContenedor8' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(8);', 200);" onMouseOver='cuboActual=8;'>
  716.             <div id='box8' class='cuboSubmenu'>
  717.                 <figure class='front'><a>seccasdsadsagertetgvfdgion</a></figure>
  718.                 <figure class='back'></figure>
  719.                 <figure class='right'></figure>
  720.                 <figure class='left'></figure>
  721.                 <figure class='top'></figure>
  722.                 <figure class='bottom'></figure>
  723.             </div>
  724.         </div>
  725.     </div>
  726.     <div id='posicion9' class='posicionBox'>
  727.         <div id='boxContenedor9' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(9);', 200);" onMouseOver='cuboActual=9;'>
  728.             <div id='box9' class='cuboSubmenu'>
  729.                 <figure class='front'><a>seccion</a></figure>
  730.                 <figure class='back'></figure>
  731.                 <figure class='right'></figure>
  732.                 <figure class='left'></figure>
  733.                 <figure class='top'></figure>
  734.                 <figure class='bottom'></figure>
  735.             </div>
  736.         </div>
  737.     </div>
  738.     <div id='posicion10' class='posicionBox'>
  739.         <div id='boxContenedor10' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(10);', 200);" onMouseOver='cuboActual=10;'>
  740.             <div id='box10' class='cuboSubmenu'>
  741.                 <figure class='front'><a>secciqewqeegfddfdsfqerwrewon</a></figure>
  742.                 <figure class='back'></figure>
  743.                 <figure class='right'></figure>
  744.                 <figure class='left'></figure>
  745.                 <figure class='top'></figure>
  746.                 <figure class='bottom'></figure>
  747.             </div>
  748.         </div>
  749.     </div>
  750. </div>
  751. <div id="DcontenidoSubmenu2" onMouseOver='FmostrarTodas();'>
  752.     <div id='2boxContenedor1' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(1);', 200);" onMouseOver='cuboActual=1;'>
  753.         <div id='2box1' class='cuboSubmenu'>
  754.             <figure class='front'><a>seccsadsadsadsadon</a></figure>
  755.             <figure class='back'></figure>
  756.             <figure class='right'></figure>
  757.             <figure class='left'></figure>
  758.             <figure class='top'></figure>
  759.             <figure class='bottom'></figure>
  760.         </div>
  761.     </div>
  762.     <div id='2boxContenedor2' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(2);', 200);" onMouseOver='cuboActual=2;'>
  763.         <div id='2box2' class='cuboSubmenu'>
  764.             <figure class='front'><a>secciasdsasadsadadsadsadsadsadsadasdon</a></figure>
  765.             <figure class='back'></figure>
  766.             <figure class='right'></figure>
  767.             <figure class='left'></figure>
  768.             <figure class='top'></figure>
  769.             <figure class='bottom'></figure>
  770.         </div>
  771.     </div>
  772.     <div id='2boxContenedor3' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(3);', 200);" onMouseOver='cuboActual=3;'>
  773.         <div id='2box3' class='cuboSubmenu'>
  774.             <figure class='front'><a>seccioadsadn</a></figure>
  775.             <figure class='back'></figure>
  776.             <figure class='right'></figure>
  777.             <figure class='left'></figure>
  778.             <figure class='top'></figure>
  779.             <figure class='bottom'></figure>
  780.         </div>
  781.     </div>
  782.     <div id='2boxContenedor4' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(4);', 200);" onMouseOver='cuboActual=4;'>
  783.         <div id='2box4' class='cuboSubmenu'>
  784.             <figure class='front'><a>seccisadadsadsadadsadsadon</a></figure>
  785.             <figure class='back'></figure>
  786.             <figure class='right'></figure>
  787.             <figure class='left'></figure>
  788.             <figure class='top'></figure>
  789.             <figure class='bottom'></figure>
  790.         </div>
  791.     </div>
  792.     <div id='2boxContenedor5' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(5);', 200);" onMouseOver='cuboActual=5;'>
  793.         <div id='2box5' class='cuboSubmenu'>
  794.             <figure class='front'><a>secciosdadadn</a></figure>
  795.             <figure class='back'></figure>
  796.             <figure class='right'></figure>
  797.             <figure class='left'></figure>
  798.             <figure class='top'></figure>
  799.             <figure class='bottom'></figure>
  800.         </div>
  801.     </div>
  802.     <div id='2boxContenedor6' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(6);', 200);" onMouseOver='cuboActual=6;'>
  803.         <div id='2box6' class='cuboSubmenu'>
  804.             <figure class='front'><a>seccgdgfgettetgfjhryeterdfggertertwerewrwion</a></figure>
  805.             <figure class='back'></figure>
  806.             <figure class='right'></figure>
  807.             <figure class='left'></figure>
  808.             <figure class='top'></figure>
  809.             <figure class='bottom'></figure>
  810.         </div>
  811.     </div>
  812.     <div id='2boxContenedor7' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(7);', 200);" onMouseOver='cuboActual=7;'>
  813.         <div id='2box7' class='cuboSubmenu'>
  814.             <figure class='front'><a>secsdffsfdsfsfsfsfasdcion</a></figure>
  815.             <figure class='back'></figure>
  816.             <figure class='right'></figure>
  817.             <figure class='left'></figure>
  818.             <figure class='top'></figure>
  819.             <figure class='bottom'></figure>
  820.         </div>
  821.     </div>
  822.     <div id='2boxContenedor8' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(8);', 200);" onMouseOver='cuboActual=8;'>
  823.         <div id='2box8' class='cuboSubmenu'>
  824.             <figure class='front'><a>seccasdsadsagertetgvfdgion</a></figure>
  825.             <figure class='back'></figure>
  826.             <figure class='right'></figure>
  827.             <figure class='left'></figure>
  828.             <figure class='top'></figure>
  829.             <figure class='bottom'></figure>
  830.         </div>
  831.     </div>
  832.     <div id='2boxContenedor9' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(9);', 200);" onMouseOver='cuboActual=9;'>
  833.         <div id='2box9' class='cuboSubmenu'>
  834.             <figure class='front'><a>seccion</a></figure>
  835.             <figure class='back'></figure>
  836.             <figure class='right'></figure>
  837.             <figure class='left'></figure>
  838.             <figure class='top'></figure>
  839.             <figure class='bottom'></figure>
  840.         </div>
  841.     </div>
  842.     <div id='2boxContenedor10' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(10);', 200);" onMouseOver='cuboActual=10;'>
  843.         <div id='2box10' class='cuboSubmenu'>
  844.             <figure class='front'><a>secciqewqeegfddfdsfqerwrewon</a></figure>
  845.             <figure class='back'></figure>
  846.             <figure class='right'></figure>
  847.             <figure class='left'></figure>
  848.             <figure class='top'></figure>
  849.             <figure class='bottom'></figure>
  850.         </div>
  851.     </div>
  852. </div>
  853. <script>
  854. for (var i=1; i <= 10; i++){
  855.     FajustarBox(i);
  856. }  
  857. Fdesordenar(1);
  858. </script>
  859. <nav>
  860.     <ul>
  861.         <li onMouseOver="window.setTimeout('FabrirMenu(1,0);',600);mouseOverMenuItm=true;" onMouseOut='mouseOverMenuItm=false;'><div class='luz'></div><div style='background-image:url(\"https://liit.com.ar/web/inc/ima/fondo_botones_nav.png\");width:100px;height:30px;background-repeat:no-repeat;background-size: 100px 30px;'><a href=''>seccion</a></div></li>
  862.         <li onMouseOver="children[0].className='luzhover';window.setTimeout('FabrirMenu(1,0);',600);mouseOverMenuItm=true;" onMouseOut="children[0].className='luz';mouseOverMenuItm=false;"><div class='luz'></div><div><a href=''>seccion</a></div></li>
  863.     </ul>
  864. </nav>
  865. <div id='submenu1'>
  866.     <div id='submenu2'></div>
  867. </div>
  868. <div id='alertas' style='position: absolute; top: 300px;'></div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!