Updated HTML and Javascript in HTML

Question

WoodMath OP

Created Sep ’15

Replies 15

Boosts 0

Participants 2

I'm using the most recent Version of Safar (9.0)

I'm using Xcode to edit some local JavaScript and HTML that is being viewed in Safari (Please let me know if there is a better way of doing what I'm describing, I'm all ears).

My problem is that when I make the changes to the Javascript in Xcode then save, even when reloading the HTML and associated Javascript files (both using the reload button in the address bar and the Reload [Ignoring Cache and Generic Options] on the Resources Panel, the changes to the underlying files do not become visible (even after the refreshes)

Even when I'm not running with breaks I have to do one of two things to get the changes to become visible

a) close out the page completley by closing the tab

b) under resources clicking the source file in question so the javascript pops up in a new tab, then clicking the refresh button on the Resources panel.

Is there an easier way to get the changes to become visible in Safari as soon as I save them in xCode?

Is there a better way to do this that involves either Only Safari or Only xCode thanks, Jeff

Boost

Answer 1

alb3rtobq OP

Mar ’24

Check this...

0

Answer 2

alb3rtobq OP

Mar ’24

Same problem I guess... I don't know much about it

0

Answer 3

alb3rtobq OP

Mar ’24

  Also this in special where the function is called:

            <div style="width: 100%; margin-top: -15px;">
                <button id="btnCopiar" class="botonMenu" style="color: #18274e; width: 33%; margin-right: -4px; font-size: 20px;" onclick="btnCopiar()"><i class="fa fa-clone" aria-hidden="true"></i></button>
                <button id="btnCopiar" class="botonMenu" style="color: #18274e; width: 33%; margin-right: -4px; font-size: 20px;" onclick="btnCopiar()"><i class="fa fa-stack-overflow" aria-hidden="true"></i></button>
                <button class="botonMenu" style="color: #18274e; width: 33%; font-size: 20px;" onclick="Max()"><i class="fa fa-external-link" aria-hidden="true"></i></button>
            </div>
        </div>
        <ul class="mini-menu" style="margin-top: 10px;">
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-user" aria-hidden="true"></i></button></li>
            </a>                              
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-cloud" aria-hidden="true"></i></button></li>
            </a>
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-credit-card" aria-hidden="true"></i></button></li>
            </a>
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')">&nbsp;<i class="fa fa-mobile" aria-hidden="true">&nbsp;</i></button></li>
            </a>
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-clock-o" aria-hidden="true"></i></button></li>
            </a>
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Borrar()"><i class="fa fa-info-circle" aria-hidden="true"></i></button></li>
            </a>
        </ul>
        <ul class="mini-menu" style="margin-top: -15px;">
            <a href="#" onclick="window.scrollTo(0,0)">                    
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 16px; width: 14%;" onclick="Read()"><i class="fa fa-download" aria-hidden="true"></i></button></li>
            </a>                
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" id="Leer" style="color: #18274e; font-size: 16px; width: 67%;" onclick="btnLeer()"></button></li>
            </a>
            <a href="#" onclick="window.scrollTo(0,0)">
                <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 16px; width: 14%;" onclick="Borrar()"><i class="fa fa-times" aria-hidden="true"></i></button></li>
            </a>
        </ul>
        <textarea id="areaLeer"></textarea>
    </div>        
</div>
<marquee style="color: #6d2f30;" behavior="scroll" direction="left" scrollamount="15"
    onmouseover="this.stop();"
    onmouseout="this.start();">Caso Previo - Verificar Cx - Articulo relacionados </marquee>
<marquee  style="font-size: 14px;color: #02008b;" behavior="scroll" direction="left" scrollamount="15"
    onmouseover="this.stop();"
    onmouseout="this.start();"> Reportar - Marcar estart</marquee>

<div id="Template">
<div id="tarjetas" style="overflow-y: scroll; overflow-x:hidden; height:500px; float: center;">
<table id="tabla" class="tabla"> <tr class="buscador"> </tr> <tr class="head"> <th class="head" style="background-color: #2f3030; color: white; height: 30px; "> <input style="color: white; width: 400px;" type="text" id="tfBuscar" class="Buscador" placeholder="Buscar..." /> </th> </tr> <tr> <td class="tarjeta"><button class="art boton">HT202020</button><button class="boton">IOS 17 - Verificar Cx - Articulo relacionad - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados-os- Verificar Cx - Cx - Articulo relacionados</button> </td> </tr> <tr> <td class="tarjeta"><button class="boton">Manzana</button> </td> </tr> <tr class="resultados"> <th><span class="resultados"></span></th> </tr> </table> </div>  <div id="Footer">
<div id="contenedor_reloj"> <div class="fecha"> <p id="diaSemana" class="diaSemana"></p> <p id="dia" class="dia"></p> <p id="mes" class="mes"></p> <p id="anio" class="anio"></p> </div> <div class="reloj"> <p id="horas" class="horas"></p> <p>:</p> <p id="minutos" class="minutos"></p> <p>:</p> <p id="segundos" class="segundos"></p> <p id="ampm" class="ampm"></p> </div>
</div>
</div> </div>

0

Answer 4

alb3rtobq OP

Mar ’24

I don't understand Jeff. The script is fine but doesn't work

#descripcion_caso .tab:hover{ border-left:1px solid #003597; border-right:1px solid #003597; } .mini-menu { margin-left: -50px; } .mini-menu li { margin-left: 9px; display: inline; font-size: 20px; align-items: center; list-style: none; } </style> </head>

<body onmousedown="elemento(event);" onLoad="Inicio()">
<input type="checkbox" id="check" onClick="menuOpcion()"> <header>
<nav id="menu_full"> <ul>
<li id="logoMenu"><i class="fa fa-apple" aria-hidden="true" style="font-size: 25px;"></i></li> <a href="#" onclick="window.scrollTo(0,0)"> <li onclick="Matriz()"><i class="fa fa-laptop" aria-hidden="true"></i></li> </a>
<a href="#" onclick="window.scrollTo(0,0)">
<li onclick="Scripts()"><i class="fa fa-list" aria-hidden="true"></i></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li onclick="Casos()"><i class="fa fa-search-plus" aria-hidden="true"></i></li> </a>
<a href="#" onclick="window.scrollTo(0,0)"> <li onclick=""><i class="fa fa-th" aria-hidden="true"></i></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li onclick=""><i class="fa fa-bell-o" aria-hidden="true"></i></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li onclick="" style="background-color: #515151; color: rgb(255, 255, 255); margin-left:10px"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 13px;" onclick="Copiar('BB')">bb</button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 13px;" onclick="Copiar('SSO')">sso</button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')"><i class="fa fa-envelope-o" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')"><i class="fa fa-history" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')"><i class="fa fa-line-chart" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')"><i class="fa fa-underline" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li onclick="" style="background-color: #515151; color: rgb(255, 255, 255); margin-left:10px"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></li> </a>
</ul> </nav> </header> <div id="Panel"> <div id="descripcion_caso" style="overflow-y: scroll; overflow-x:hidden; height: 400px; float: left; position: relative;"> <br><br> <div class="wrapper"> <div style="margin: 3px 0 0 65px; color:#005FE0; font-size: 12px; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Quick <i class="fa fa-apple" aria-hidden="true"></i> Center</div>
<div class="half"> <button id="botonX" onclick="Cerrar()">X</button>
<div class="tab"> <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one"><span class="titulo"><i class="fa fa-apple" aria-hidden="true" style="font-size: 16px;"></i> ID </span><button class="boton" style="margin: -10px 0 5px;" onclick="Copiar()">New</button><button id="PassID" class="boton" style="margin-top: -5px;" onclick="Copiar('PasswordID')">PassID</button><button class="boton" style="margin-top: -5px;" onclick="Copiar('Account Recovery')">AccRec</button></label> <div class="tab-content"> <ul id="FIS"> <li><button class="botonP" onclick="Copiar('...')">— <i class="fa fa-apple" aria-hidden="true"></i> —</button>      <button class="boton" onclick="Copiar()">Inactive</button><button class="botonP" onclick="Copiar('Migrar<br/>...')"><i class="fa fa-apple" aria-hidden="true"></i></button></li> <li><button class="boton" onclick="Copiar()">ID</button><button class="botonP" onclick="Copiar('Forgot ID step or article')"><i class="fa fa-apple" aria-hidden="true"></i></button></li>
</ul> </div>
</div> <div class="tab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two"><span class="titulo">iPhone </span><button class="boton" style="margin: -10px 0 5px;" onclick="Copiar()">SetUp</button><button class="boton" style="margin-top: -5px;" onclick="Copiar()">Update</button><button class="boton" style="margin-top: -5px;" onclick="Copiar()">Restore</button></label> <div class="tab-content"> <ul id="iPhone"> <li><button class="botonP" onclick="Copiar('steps')">— <i class="fa fa-apple" aria-hidden="true"></i> —</button>      <button class="boton" onclick="Copiar()">Reset</button><button class="botonP" onclick="Copiar('Restore')"><i class="fa fa-apple" aria-hidden="true"></i></button></li> </ul> </div>
</div>

            </div>
        </div>
    </div>

0

Answer 5

alb3rtobq OP

Mar ’24

CSS code is as designed

#contenedor_reloj p { font-size: 12px; color: #fff;
} #contenedor_reloj p { display: inline-block; line-height: 1em; box-sizing: border-box;
} .fecha { font-family: arial; text-align: center;
width: 30%; float: left;
} .reloj { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; width: 25%; text-align: left;
float: left;
} .reloj, .ampm, .reloj, .segundos { display: block; } #contenedor {
opacity: 0.1;
float: left; } .crono { margin-top: 7px; float: left; font-size: 18px; font-family: Courier, sans-serif; color: #363431; } #parar, #continuar, #reinicio { display: none; }
.boton { margin-top: 8px; outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 11px; height: auto; border-radius: 5px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; cursor: pointer; background-color: #2f3030; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(‪255 255 255‬ / 90%) inset, 0 40px 20px -20px rgb(‪255 255 255‬ / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(‪31 84 245‬ / 20%); opacity: 0.95; } .art { float: right; width: 75px; margin: -5px 0px -5px 0px; } .art:hover { background-color: #005FA5; } .botonMenu { margin-right: -12px; outline: none; border: 1px solid #363431; color: white;
font-size: 15px; height: auto; border-radius: 0px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; cursor: pointer; background-color: #2f3030; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(‪255 255 255‬ / 90%) inset, 0 40px 20px -20px rgb(‪255 255 255‬ / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(‪31 84 245‬ / 20%); opacity: 0.95; } .botonMenu rect { fill: none; stroke: #fff; stroke-width: 1; stroke-dasharray: 422, 0; } .botonMenu:hover { background: rgba(225, 51, 45, 0); letter-spacing: 0.5px;
} .botonMenu:hover rect { stroke-width: 5; stroke-dasharray: 15, 310; stroke-dashoffset: 48; -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .botonP { margin-top: 8px; outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 12px; height: 25px; border-radius: 5px; font-family: Helvetica; cursor: pointer; background-color: #008BE0; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(‪255 255 255‬ / 90%) inset, 0 40px 20px -20px rgb(‪255 255 255‬ / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(‪31 84 245‬ / 20%); opacity: 0.95; border-color: transparent; background-color: transparent; } .botonP:active { background-image: linear-gradient(#FF0004, #FF4D4F); } .botonP:hover { box-shadow: 0px 0px 10px #F01F45; }
#botonX { outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 7px; height: 14px; width: 170px; margin-bottom: 2px; border-radius: 5px; font-family: Helvetica; cursor: pointer; background-image: linear-gradient(#688CF8, #2f3030); } .boton:active { background-image: linear-gradient(#2f3030, #5901B0); } .boton:hover { box-shadow: 0px 0px 14px #5E85F7; } #tarjetas { margin-top: 20px; display: block; } ::-webkit-input-placeholder { color: #FFF; } ::-moz-placeholder { color: #FFF; } .Buscador { background: url("../img/search.png") no-repeat 9px center; color: #000; border: 1px solid #DDDDDD; border-radius: 3px; padding: 9px 10px 9px 32px; width: 20%; transition: 1s all ease; } .tabla, tr, th, td { width: 100%; max-width: 900px; padding: 9px; border: 1px solid #ddd; border-collapse: collapse; margin: 5% auto; font-family: Helvetica; } #tabla { position: relative; } tr.buscador, td.buscador, tr.head, th.head { border: 0; } td.buscador { padding: 0; } th.head { border-bottom: 1px solid #ddd; } header { position: fixed; border-bottom: 3px rgba(0,0,0,0.09) inset; background-color: #515151; height: 55px; z-index: 108; width: 100%; margin-top: -30px; } .header2 { position: fixed; border-bottom: 3px rgba(0,0,0,0.09) inset; background-color: #515151; height: 55px; margin-top: -30px; z-index: 108; opacity: 0.8; } textarea[type=text]{ width:100%; border:2px solid #aaa; border-radius:4px; margin:8px 0; outline:none; padding:8px; box-sizing:border-box; transition:.3s; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px; } textarea[type=text]:focus{ border-color:dodgerBlue; box-shadow:0 0 8px 0 dodgerBlue; } #areaLeer { display: none; } #descripcion_caso .tab{ border:1px solid transparent; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1); } #descripcion_caso .tab::before { content: ''; position: absolute; left: 0px; bottom:0px; z-index:-1; width: 0%; height:1px; background: #003597;
display: block; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1) } #descripcion_caso .tab:hover::before { width:100%; } #descripcion_caso .tab::after { content: ''; position: absolute; right: 0px; top:0px; z-index:-1; width: 0%; height:1px; background: #003597; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1) } #descripcion_caso .tab:hover::after { width:100%; } #descripcion_caso .tab:hover{ border-left:1px solid #003597; border-right:1px solid #003597; }

0

Answer 6

alb3rtobq OP

Mar ’24

This is other section where the query is not clear

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

#descripcion_caso .boton { border-color: transparent; background-color: transparent; color: white; cursor: pointer; } #descripcion_caso .botonExt { margin-top: -10px; } #Pass { height: 300px; width: 200px; background-color: rgb(71, 71, 51); color: #FFF;
} #contenedor_reloj { width: 100%; height: 100%;
}

0

Answer 7

alb3rtobq OP

Mar ’24

And finally the header. Something is wrong and the issue is similar

<!doctype html> <html><head> <meta http-equiv="X-UA-Compatible" content="IE=11"><meta charset="utf-8"> <script type="text/javascript" ></script> <script type="text/javascript" ></script>
<link href="imagenes/icono.jpg" rel="shortcut icon" type="image/png">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

0

Answer 8

alb3rtobq OP

Mar ’24

This is the new version

<!doctype html>

<style>

html, body {

height: 100%;

margin: 0;

}

#header {

position: fixed;

border-bottom: 3px rgba(0,0,0,0.09) inset;

background-color: #515151;

height: 55px;

z-index: 108;

width: 100%;

margin-top: -30px;

}

#menu_full {

width: 100%;

margin-left: -30px;

}

#menu_full ul {

display: flex;

font-family: sans-serif;

font-size: 12px;

align-items: center;

list-style: none;

}

#menu_full li {

text-align: center;

padding: 8px;

background-color: #6d7988;

border: 1px solid #515151;

border-radius: 1px;

}

#menu_full li a {

color: #515151;

}

#menu_full li {

color: #ffffff;

cursor: pointer;

font-size: 12px;

}

#menu_full li:hover {

color: #0e32fd;

cursor: pointer;

font-size: 15px;

background-color: #bad0eb;

}

#menu_full #logoMenu {

background-color: #515151;

color:#ffffff;

font-family:cursive;

font-size: 15px;

vertical-align: middle;

}

.fa-apple:hover {

color: #2c57e7;

}

#Panel {

margin-top: 0px;

width: 100%;

}

marquee {

background-color: #E6EBFF;

padding: 5px;

color: blue;

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-weight: bold;

font-size: 22px;

}

#Template {

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.09) inset;

width: 100%;

min-height: 85%;

}

#Footer {

height: 30px;

background: rgba(0, 0, 0, .5);

align-items: center;

display: flex;

justify-content: center;

}

#tarjetas::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px;

background-color: #a5aaad;

}

#tarjetas::-webkit-scrollbar {

width: 12px;

background-color: #a5aaad;

}

#tarjetas::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #a5aaad;

}

.titulo {

font-size: 11px;

}

#Pass {

height: 300px;

width: 200px;

background-color: rgb(71, 71, 51);

color: #FFF;

}

#areaLeer {

display: none;

}

textarea[type=text]{

width:100%;

border:2px solid #aaa;

border-radius:4px;

margin:8px 0;

outline:none;

padding:8px;

box-sizing:border-box;

transition:.3s;

font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

font-size: 12px;

}

textarea[type=text]:focus{

border-color:dodgerBlue;

box-shadow:0 0 8px 0 dodgerBlue;

}

.mini-menu {

margin-left: -50px;

}

.mini-menu li {

margin-left: 9px;

display: inline;

font-size: 20px;

align-items: center;

list-style: none;

}

.boton {

margin-top: 8px;

outline: none;

border: 1px solid #363431;

color: white;

text-shadow: 0px -1px 1px black;

font-size: 11px;

height: auto;

border-radius: 5px;

font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";

cursor: pointer;

background-color: #2f3030;

color: #E6EAEF;

border-color: #0939c8;

border-bottom-color: #072ea1;

box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);

opacity: 0.95;

}

.art {

float: right;

width: 75px;

margin: -5px 0px -5px 0px;

}

.art:hover {

background-color: #005FA5;

}

.botonMenu {

margin-right: -12px;

outline: none;

border: 1px solid #363431;

color: white;

font-size: 15px;

height: auto;

border-radius: 0px;

font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";

cursor: pointer;

background-color: #2f3030;

color: #E6EAEF;

border-color: #0939c8;

border-bottom-color: #072ea1;

box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);

opacity: 0.95;

}

.botonMenu rect {

fill: none;

stroke: #fff;

stroke-width: 1;

stroke-dasharray: 422, 0;

}

.botonMenu:hover {

background: rgba(225, 51, 45, 0);

letter-spacing: 0.5px;

}

.botonMenu:hover rect {

stroke-width: 5;

stroke-dasharray: 15, 310;

stroke-dashoffset: 48;

-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);

transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);

}

#Leer:hover {

background-color: rgb(17, 17, 224);

}

.btnLeer:hover {

color:#005FA5;

}

.botonP:hover {

box-shadow: 0px 0px 10px #F01F45;

}

#botonX {

outline: none;

border: 1px solid #363431;

color: white;

text-shadow: 0px -1px 1px black;

font-size: 7px;

height: 14px;

width: 170px;

margin-bottom: 2px;

border-radius: 5px;

font-family: Helvetica;

cursor: pointer;

background-image: linear-gradient(#688CF8, #2f3030);

}

.boton:active {

background-image: linear-gradient(#2f3030, #5901B0);

}

.boton:hover {

box-shadow: 0px 0px 14px #5E85F7;

} ::-webkit-input-placeholder {

color: #FFF;

}

::-moz-placeholder {

color: #FFF;

}

.Buscador {

background: url("../img/search.png") no-repeat 9px center;

color: #000;

border: 1px solid #DDDDDD;

border-radius: 3px;

padding: 9px 10px 9px 32px;

width: 20%;

transition: 1s all ease;

}

.filtro{

display: none;

}

.tarjeta {

background-color: #a5aaad;

color: white;

border: 2px solid #FFF;

padding: 20px; }

.tarjeta .boton {

font-size: 14px;

}

.busca {

width: 100%;

max-width: 900px;

padding: 12px;

border: 1px solid #ddd;

border-collapse: collapse;

margin: 5% auto;

font-family: Helvetica;

}

</style>

0

Answer 9

alb3rtobq OP

Mar ’24

Here the other part

head>

<ul>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</ul>

</nav>

</header>

<div style="margin: 3px 0 0 65px; color:#005FE0; font-size: 12px; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Quick <i class="fa fa-apple" aria-hidden="true"></i> Center</div>

<label for="tab-one"><span class="titulo"><i class="fa fa-apple" aria-hidden="true" style="font-size: 16px;"></i> ID </span><button class="boton" style="margin: -10px 0 5px;" onclick="Copiar()">New</button><button id="PassID" class="boton" style="margin-top: -5px;" onclick="Copiar('PasswordID')">PassID</button><button class="boton" style="margin-top: -5px;" onclick="Copiar('Account Recovery')">AccRec</button></label>

<li><button class="botonP" onclick="Copiar('...')">— <i class="fa fa-apple" aria-hidden="true"></i> —</button>      <button class="boton" onclick="Copiar()">Inactive</button><button class="botonP" onclick="Copiar('Migrar<br/>...')"><i class="fa fa-apple" aria-hidden="true"></i></button></li>

</ul>

</div>

<label for="tab-two"><span class="titulo">iPhone </span><button class="boton" style="margin: -10px 0 5px;" onclick="Copiar()">SetUp</button><button class="boton" style="margin-top: -5px;" onclick="Copiar()">Update</button><button class="boton" style="margin-top: -5px;" onclick="Copiar()">Restore</button></label>

<li><button class="botonP" onclick="Copiar('steps')">— <i class="fa fa-apple" aria-hidden="true"></i> —</button>      <button class="boton" onclick="Copiar()">Reset</button><button class="botonP" onclick="Copiar('Restore')"><i class="fa fa-apple" aria-hidden="true"></i></button></li>

</ul>

</div>

<div>

0

Answer 10

alb3rtobq OP

Mar ’24

Css is not working. Why?

<div style="float: left; margin: 50px 0px 0px 20px; border-color: #FFF;"> <div> <textarea type="text" id="Pass" value=""></textarea>
<div style="width: 100%; margin-top: -15px;"> <button id="btnCopiar" class="botonMenu" style="color: #18274e; width: 33%; margin-right: -4px; font-size: 20px;" onclick="btnCopiar()"><i class="fa fa-clone" aria-hidden="true"></i></button> <button id="btnCopiar" class="botonMenu" style="color: #18274e; width: 33%; margin-right: -4px; font-size: 20px;" onclick="btnCopiar()"><i class="fa fa-stack-overflow" aria-hidden="true"></i></button> <button class="botonMenu" style="color: #18274e; width: 33%; font-size: 20px;" onclick="Max()"><i class="fa fa-external-link" aria-hidden="true"></i></button> </div> </div> <ul class="mini-menu" style="margin-top: 10px;"> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-user" aria-hidden="true"></i></button></li> </a>
<a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')">☁</button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-credit-card" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"> <i class="fa fa-mobile" aria-hidden="true"> </i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Copiar('SSO')"><i class="fa fa-clock-o" aria-hidden="true"></i></button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 20px;" onclick="Borrar()"><i class="fa fa-info-circle" aria-hidden="true"></i></button></li> </a> </ul> <ul class="mini-menu" style="margin-top: -15px;"> <a href="#" onclick="window.scrollTo(0,0)">
<li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 16px; width: 14%;" onclick="Read()"><i class="fa fa-download" aria-hidden="true"></i></button></li> </a>
<a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" id="Leer" style="color: #ece6e6; font-size: 18px; width: 67%;" onclick="btnLeer()">_</button></li> </a> <a href="#" onclick="window.scrollTo(0,0)"> <li style="background-color: #FFF;"><button class="botonMenu" style="color: #18274e; font-size: 16px; width: 14%;" onclick="Borrar()"><i class="fa fa-times" aria-hidden="true"></i></button></li> </a> </ul> <textarea id="areaLeer"></textarea> </div>
</div> <marquee style="color: #6d2f30;" behavior="scroll" direction="left" scrollamount="15" onmouseover="this.stop();" onmouseout="this.start();">Caso Previo - Verificar Cx - Articulo relacionados </marquee> <marquee style="font-size: 14px;color: #02008b;" behavior="scroll" direction="left" scrollamount="15" onmouseover="this.stop();" onmouseout="this.start();"> Reportar - Marcar estart</marquee> <div id="Template"> <div id="tarjetas" style="overflow-y: scroll; overflow-x:hidden; height:500px; float: center;">
<div class="busca" style="background-color: #2f3030; color: white; height: 30px;"> <input style="display: block; margin : 0 auto; color: white; width: 400px;" type="text" id="buscador" class="Buscador" placeholder="Buscar..." /> </div> <ul style="margin:0; padding:0; list-style: none;"> <li class="tarjeta"><button class="art boton">HT202020</button><button class="boton">IOS 17 - Verificar Cx - Articulo relacionad - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo </button></li> <li class="tarjeta"><button class="art boton">HT202020</button><button class="boton">Icuatro cinco seis</button></li> <li class="tarjeta"><button class="art boton">HT202020</button><button class="boton">IOS siete ocho neuves</button></li> <li class="tarjeta"><button class="art boton">HT202020</button><button class="boton">IIOS 17 - Verificar Cx - Articulo relacionad - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo iez</button></li> <li class="articulo">⌚</li> </ul> </div>  <div id="Footer">
<div id="Externo"> <div class="Uno">
</div> <div class="Dos">
</div>
</div>
</div> </div>

        /* Mozilla */
        -moz-appearance

0

Answer 11

alb3rtobq OP

Mar ’24

Nothing is working. Javascript is having issues as well. Please check this...

function Read() {
navigator.clipboard.readText().then( clipText => document.getElementById("Leer").value = clipText); navigator.clipboard.readText().then( clipText => document.getElementById("Leer").innerHTML = clipText.substring(0, 12)); }

const botones = document.querySelectorAll(".boton"); const cuandoSeHaceClick = function (evento) { this.style.borderColor = "blue"; Pass.value = this.innerHTML;
var copyText = document.getElementById("Pass"); copyText.select(); document.execCommand("copy"); document.getElementById('Pass').blur(); } botones.forEach(boton => {
boton.addEventListener("click", cuandoSeHaceClick); });

document.addEventListener("scroll", function() { if (window.pageYOffset > 100) document.getElementById("header").style.opacity = "0.5";

if (window.pageYOffset < 100) document.getElementById("header").style.opacity = "1"; });

function Copiar(pass) { document.getElementById('Pass').value = pass; var copyText = document.getElementById("Pass"); copyText.select(); document.execCommand("copy"); document.getElementById('Pass').blur(); }

function btnCopiar() { var copyText = document.getElementById("Pass"); copyText.select(); document.execCommand("copy"); document.getElementById('Pass').blur(); document.getElementById('descripcion_caso').style.display = 'block'; document.getElementById("Pass").style.height = "300px"; document.getElementById("Pass").style.width = "200px"; $(window).scrollTop(0); }

function btnLeer() {
document.getElementById("areaLeer").style.display = 'block'; document.getElementById("areaLeer").value = document.getElementById("Leer").value; var copyText = document.getElementById("areaLeer"); copyText.select(); document.execCommand("copy"); document.getElementById("areaLeer").style.display = 'none'; document.getElementById("Pass").value = document.getElementById("Leer").value; }

function Cerrar() { document.getElementById("tab-one").checked=false; document.getElementById("tab-two").checked=false; document.getElementById("tab-three").checked=false; document.getElementById("tab-four").checked=false; document.getElementById("tab-five").checked=false; document.getElementById("tab-six").checked=false; document.getElementById("tab-seven").checked=false; document.getElementById("tab-eight").checked=false; document.getElementById("tab-nine").checked=false; document.getElementById("tab-ten").checked=false; document.getElementById("tab-eleven").checked=false;
}

function Borrar() { document.getElementById("Pass").value = ''; }

</script> </body> </html>

0

Answer 12

alb3rtobq OP

Apr ’24

Hi apparently it works doing this : please try it

<input

type="checkbox" id="check" onClick="menuOpcion()">

<header

id="header" style="position: fixed; border-bottom: 3px rgba(0,0,0,0.09) inset; background-color: #515151; height: 55px; z-index: 108; width: 100%; margin-top: -30px;">

<nav

id="menu_full" style="width: 100%; margin-left: -35px;">

<ul

style="display: flex; font-family: sans-serif; font-size: 12px; align-items: center; list-style: none;">

<li

id="logoMenu" style="background-color: #515151; color:#ffffff; font-family:cursive; font-size: 15px; vertical-align: middle; padding: 8px;"><i class="fa fa-apple" aria-hidden="true" style="font-size: 25px;" onmouseover="this.style.color='#2c57e7';" onmouseout="this.style.color='gray';"></i></li>

<a

href="#" onclick="window.scrollTo(0,0)">

<li

onclick="Matriz()" style="text-align: center; padding: 5px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 18px;"><i class="fa fa-user" aria-hidden="true"></i></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

onclick="Casos()" style="text-align: center; padding: 5px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 18px;"><i class="fa fa-search-plus" aria-hidden="true"></i></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

onclick="" style="text-align: center; padding: 5px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 18px;" onclick="Borrar()"><i class="fa fa-info-circle" aria-hidden="true"></i></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

onclick="" style="text-align: center; padding: 4px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151; color: rgb(255, 255, 255); margin-left:10px;"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></li>

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 18px;" onclick="Copiar('SSO')"><i class="fa fa-envelope-o" aria-hidden="true"></i></button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 18px;" onclick="Copiar('SSO')"><i class="fa fa-history" aria-hidden="true"></i></button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 18px;" onclick="Copiar('SSO')">⏲</button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 18px;" onclick="Copiar('SSO')"><i class="fa fa-line-chart" aria-hidden="true"></i></button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255); font-size: 18px;" onclick="Copiar('SSO')"><i class="fa fa-underline" aria-hidden="true"></i></button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

onclick="" style="text-align: center; padding: 4px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151; color: rgb(255, 255, 255); margin-left:10px"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></li>

        </a>  

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')">☁</button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')">💳</button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')">📱</button></li>

        </a>

        <a

href="#" onclick="window.scrollTo(0,0)">

<li

style="text-align: center; padding: 8px; background-color: #6d7988; border: 1px solid #515151; border-radius: 1px; color: #ffffff; cursor: pointer; font-size: 12px; background-color: #515151;"><button class="botonMenu" style="color: rgb(255, 255, 255);" onclick="Copiar('SSO')">⌚</button></li>

        </a>

    </ul>

</nav>

</header>

<div

id="Top" style="margin-top: 0px; width: 100%; ">

    <div

id="descripcion_caso" style="overflow-y: scroll; overflow-x:hidden; height: 400px; float: left; position: relative; padding-top: 50px; scrollbar-color: #818181 #818181; scrollbar-width: thin;">

        <div

style="position: fixed; z-index: 1000;">

0

Answer 13

alb3rtobq OP

Apr ’24

This is the other part. It seems it is not working with embedded css

            <button

id="btnStack" class="botonMenu" style="color: #18274e; background-color: #515151; width: 250px; height: 50px; font-size: 20px;" onmouseover="this.style.backgroundColor='#FFF';" onmouseout="this.style.backgroundColor='#515151';" onclick="btnStack()"><i class="fa fa-stack-overflow" aria-hidden="true"></i></button>

        </div>

        <textarea

type="text" id="Stack" value="" style="height: 1000px; width: 250px; background-color: rgb(71, 71, 51); color: #FFF; border:2px solid #aaa; border-radius:4px; margin:40px 0 0 0; outline:none; padding:8px; box-sizing:border-box; transition:.3s; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px;"></textarea>

    </div>

    <div

id="Panel" style="float: left; margin: 50px 0px 0px 20px; border-color: #FFF;">

        <div>

            <textarea

type="text" id="Pass" value="" style="height: 300px; width: 200px; background-color: rgb(71, 71, 51); color: #FFF; border:2px solid #aaa; border-radius:4px; margin:8px 0; outline:none; padding:8px; box-sizing:border-box; transition:.3s; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px;"></textarea>

            <div

style="margin-top: -30px; margin-left: 43%;"><button class="botonMenu" style="color: #18274e; font-size: 15px; width: 25%; border-radius: 7px; background-color: #f5675d;" onclick="Borrar()">.</button></div>

            <div

style="width: 100%; margin-top: -10px; background-color: #2f3030;">

                <button

id="btnCopiar" class="botonMenu" style="color: #18274e; width:50%; margin-right: -4px; font-size: 20px;" onclick="btnCopiar()"><i class="fa fa-clone" aria-hidden="true"></i></button>

                <button

class="botonMenu" style="color: #18274e; width: 50%; font-size: 20px; float: right; margin-right: 1px;" onclick="Max()"><i class="fa fa-external-link" aria-hidden="true"></i></button>

            </div>

        </div>      
  

        <ul

class="mini-menu" style="margin-top: 15px; margin-left: -50px;">

<a

href="#" onclick="window.scrollTo(0,0)">

<li

style="background-color: #FFF; margin-left: 9px; display: inline; font-size: 16px; align-items: center; list-style: none;"><button class="botonMenu" style="color: #18274e; font-size: 16px; width: 25%;" onclick="Read()"><i class="fa fa-download" aria-hidden="true"></i></button></li>

href="#" onclick="window.scrollTo(0,0)">

<li

style="background-color: #FFF; margin-left: 9px; display: inline; font-size: 16px; align-items: center; list-style: none;"><button class="botonMenu" id="Leer" style="color: #ece6e6; font-size: 18px; width: 75%;" onmouseover="this.style.backgroundColor='#005FA5';" onmouseout="this.style.backgroundColor='#2f3030';" onclick="btnLeer()">_</button></li>

            </a>

            

        </ul>

        <textarea

id="areaLeer" style="display: none;"></textarea>

    </div>          

</div>

<marquee

style="color: #1a0d0d; background-color: #E6EBFF; padding: 5px; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bold; font-size: 24px;" behavior="scroll" direction="left" scrollamount="15"

    onmouseover="this.stop();"

    onmouseout="this.start();">Caso

Previo - Verificar Cx - Articulo relacionados </marquee>

<div

id="tarjetas" style="overflow-y: scroll; overflow-x:hidden; height:500px; float: center; scrollbar-color: #818181 #818181; scrollbar-width: thin;">

    <div

class="busca" style="background-color: #2f3030; color: white; width: 100%; height: 30px; max-width: 900px; padding: 12px; border: 1px solid #ddd; border-collapse: collapse; margin: 5% auto; font-family: Helvetica;">

        <input

style="display: block; margin : 0 auto; color: rgb(36, 36, 36); width: 400px; border: 1px solid #DDDDDD; border-radius: 3px; padding: 9px 12px 9px 12px; transition: 1s all ease;" type="text" id="buscador" class="Buscador" placeholder="Buscar..." />

    </div>        

    <ul

style="margin:0; padding:0; list-style: none;">

<li

class="tarjeta" style="background-color: #a5aaad; color: white; border: 2px solid #FFF; padding: 20px;" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"><button class="boton" style="font-size: 14px; margin-top: 8px; outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 11px; height: auto; border-radius: 5px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(‪255 255 255‬ / 90%) inset, 0 40px 20px -20px rgb(‪255 255 255‬ / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(‪31 84 245‬ / 20%); opacity: 0.95;" onmouseover="this.style.borderColor='blue';" onmouseout="this.style.borderColor='#0939c8';">IOS 17 - Verificar Cx - Articulo relacion</button><button class="art boton" style="float: right; width: 75px; margin: -5px 0px -5px 0px; outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 11px; height: auto; border-radius: 5px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(‪255 255 255‬ / 90%) inset, 0 40px 20px -20px rgb(‪255 255 255‬ / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(‪31 84 245‬ / 20%); opacity: 0.95;" onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='#2f3030';">HT202020</button></li>

    </ul>

</div>

<div

id="Externo">

        <div

class="Uno">

        </div>

        <div

class="Dos">

        </div>    

</div>

</div>

0

Answer 14

alb3rtobq OP

Apr ’24

Please look this...some CSS that fix these issues:

background-color: #515151; color:#ffffff; font-size: 15px; vertical-align: middle; padding: 8px;logo 3foll "padding: 5px; background-color: #6d7988; border: 1px solid #515151; color: #ffffff; cursor: pointer; font-size: 18px; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);">

style="padding: 4px; color: #ffffff; font-size: 12px; margin-left:10px" elip 9foll style="padding: 8px;"><button class="botonMenu" style="margin-right: -12px; outline: none; border: 1px solid #0939c8; color: white; font-size: 15px; height: auto; cursor: pointer; background-color: #2f3030; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);" onmouseover="this.style.color='blue'; this.style.fontSize='17px'" onmouseout="this.style.color='white'; this.style.fontSize='15px'"

<li class="tarjeta" style="background-color: #a5aaad; color: white; border: 2px solid #FFF; padding: 20px;" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"><button class="boton" style="font-size: 13px; margin-top: 8px; outline: none; color: white; text-shadow: 0px -1px 1px black; height: auto; border-radius: 5px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; border: 1px solid #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);" onmouseover="this.style.borderColor='blue';" onmouseout="this.style.borderColor='#0939c8';">IOS 17 - Verificar Cx - Articulo relacionad - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo relacionados- - Verificar Cx - Articulo</button><button class="art boton" style="float: right; width: 75px; margin: -5px 0px -5px 0px; outline: none; border: 1px solid #363431; color: white; text-shadow: 0px -1px 1px black; font-size: 11px; height: auto; border-radius: 5px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; color: #E6EAEF; border-color: #0939c8; border-bottom-color: #072ea1; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%); opacity: 0.95;" onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='#2f3030';">HT202020</button></li>

<div style="margin-top: -25px; margin-left: 43%;"><button class="botonMenu" style="color: #18274e; font-size: 15px; width: 25%; border-top-left-radius: 7px; border-top-right-radius: 7px; background-color: #f5675d; outline: none; border: 1px solid #0939c8; height: auto; cursor: pointer; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);" onclick="Borrar()">.</button></div> <div style="width: 100%; margin-top: -10px;"> <button id="btnCopiar" class="botonMenu" style="color: #18274e; width: 50%; margin-right: -4px; font-size: 20px; outline: none; border: 1px solid #0939c8; height: auto; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);" onmouseover="this.style.backgroundColor='#515151';" onmouseout="this.style.backgroundColor='#2f3030';" onclick="btnCopiar()"><i class="fa fa-clone" aria-hidden="true"></i></button> <button class="botonMenu" style="color: #18274e; width: 50%; font-size: 20px; outline: none; border: 1px solid #0939c8; height: auto; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, sans-serif; cursor: pointer; background-color: #2f3030; box-shadow: 0 1px 1px -1px rgb(255 255 255 / 90%) inset, 0 40px 20px -20px rgb(255 255 255 / 15%) inset, 0 -1px 1px -1px rgb(0 0 0 / 70%) inset, 0 -40px 20px -20px rgb(0 0 0 / 6%) inset, 0 9px 8px -4px rgb(0 0 0 / 40%), 0 2px 1px -1px rgb(0 0 0 / 30%), 7px 7px 8px -4px rgb(0 0 0 / 10%), -7px 7px 8px -4px rgb(0 0 0 / 10%), 0 -4px 12px 2px rgb(31 84 245 / 20%);" onmouseover="this.style.backgroundColor='#515151';" onmouseout="this.style.backgroundColor='#2f3030';" onclick="Max()"><i class="fa fa-external-link" aria-hidden="true"></i></button> </div> document.addEventListener("scroll", function() { if (window.pageYOffset > 350) document.getElementById("btnStack").style.width = "30px";

if (window.pageYOffset < 350) document.getElementById("btnStack").style.width = "250px"; });

function Read() {
navigator.clipboard.readText().then( clipText => document.getElementById("Leer").value = clipText); navigator.clipboard.readText().then( clipText => document.getElementById("Stack").value = clipText + "\n" + "\n" + document.getElementById("Stack").value); navigator.clipboard.readText().then( clipText => document.getElementById("Leer").innerHTML = clipText.substring(0, 12));
} function btnStack() { navigator.clipboard.readText().then( clipText => document.getElementById("Stack").value = clipText + "\n" + "\n" + document.getElementById("Stack").value);
} 25%...margin-right: -12px; outline: none; border: 1px solid #0939c8; height: auto; cursor: pointer; background-color: #2f3030...box shadow onclick 75%... same

0

Answer 15

alb3rtobq OP

19h

const onClick = evt => { const link = document.querySelector('a'); const range = document.createRange(); range.selectNode(link); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range);

const successful = document.execCommand('copy'); };

document.querySelector('button').addEventListener('click', onClick); This is an <a href="https://example.com%22%3EExample%3C/a>.

0