N elementos HTML trabajando con el mismo codigo javascrip

La cosa es asi.

Código javascrip crea dinámicamente una tabla con información, y la idea es que al seleccionar un campo este active una función común para todos los elementos generados, La idea más simple seria que al crear la tabla a cada elemento se le añada un onclick = “Funcion_comun_para_todos(Id_del_elemento)” pero la estructura ya creada de de la pagina complica esto, ya que esta función requiere además del id del elemento de variables aisladas.

No hay variables globales y los datos están dentro de variables en window.onload = function () y todos los elementos HTML solo tienen su id y dentro de window.onload = function () estan unos cuantos document.getElementById(“Id_X”).onclick = function(), desde ese punto se realizan un par de comprobaciones y se llaman funciones pasándoles los datos ya que las variables hacen parte de todo ese lote de codigo.

Entonces hay dos caminos, el del ejemplo de idea más simple, usar onclick = “Funcion_comun_para_todos(Id_del_elemento)” pero con el problema de que esta función tiene que poder acceder a esos datos que están fuera de su alcance.

O la otra usar document.getElementById(“Id_X”).onclick = function() con el problema de que como son N elementos no puedo crear N “document.getElementById”, pero si se pudiera usar el mismo Id “cosa que claro no se puede” para todos los N elementos HTML, o otra cosa que les pueda agrupar a todos y usar el mismo codigo, como un tag o la class, y de esta forma el document.getElementById este dentro de window.onload y pueda acceder a los datos que están dentro

Acepto cualquier idea, pero la cosa es evitar variables globales. : (

2 POPUPS IRREPETIBLES JAVASCRIPT HTML CSS

auxilio. Estoy trabajando para mi jefe haciendo una web y no sé por qué no me deja usar el mismo popup que utilicé para colocar una info 2 veces. Una vez sí me lo permite pero el segundo popup queda inhabilitado. ¿Alguien podría ayudarme con esta duda?

El Primer botón para mostrar la información está correcto y funcionando, pero si copio el mismo botón y lo pego en otra parte del html, el segundo no funciona.

Por otro lado, desearía saber alguna mejor opción para desarrollar esta idea. Además quisiera recalcar que en el primer popup, cuando se abre tengo problemas para formular una sangria ya que el texto queda muy pegado al margen del popup.

Muchas Gracias por su atención y tiempo. Bendiciones. <3

CSS:

  <!--ETIQUETA POPUP-->   <style> /* Popup container - can be anything you want */ .popup {   position: relative;   display: inline-block;   cursor: pointer;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; }  /* The actual popup */ .popup .popuptext {   visibility: hidden;   width: 1000px;   background-color: #555;   color: #fff;   text-align: left;   border-radius: 10px;  margin-left: 10px;   padding: 8px 0;   position: absolute;   z-index: 1;   bottom: 125%;   left: 50%;   margin: 5px; }  /* Popup arrow  .popup .popuptext::after {   content: "";   position: absolute;   top: 100%;   left: 50%;   margin-left: -5px;   border-width: 5px;   border-style: solid;   border-color: #555 transparent transparent transparent; }   .popup .show {   visibility: visible;   -webkit-animation: fadeIn 1s;   animation: fadeIn 1s; }  @-webkit-keyframes fadeIn {    from {opacity: 0;}    to {opacity: 1;} }  @keyframes fadeIn {   from {opacity: 0;}   to {opacity:1 ;} } </style> 

HTML + JAVASCRIPT:

<div id="perfilegreso"> <h3>Perfíl de egreso</h3>introducir el código aquí <div class="popup" onclick="myFunction()">Click para ver perfíl de egreso. <span class="popuptext" id="myPopup"> <div> El Ingeniero en Administración de Empresas, titulado de la Universidad Tecnológica de Chile INACAP, se desempeña con responsabilidad en la administración de las áreas funcionales, orientando su gestión al logro de las metas , bajo un enfoque sistémico de la organización y su entorno, y dominio integral de su ámbito disciplinar. Asimismo, diseña y propone soluciones integrando tecnologías actualizadas para la mejora continua, la creación de nuevos negocios y desarrollo de emprendimientos en los distintos sectores productivos y de servicios del país.<br><br>Se desempeña competentemente en las siguientes áreas, en concordancia con las requeridas para el ejercicio de su profesión:<br><br>Área de Desempeño I: Gestión de Áreas Funcionales de la Organización.<br><br>1.Administra procesos financieros en coherencia con la estrategia de la organización, fundamentando su actuar, de acuerdo a normativas y legislación vigente.<br><br>2.Administra procesos de marketing, ventas y operaciones comerciales, considerando la situación, tendencias del mercado y las necesidades de los consumidores, trabajando de manera colaborativa para el logro de metas conjuntas.<br><br>3.Administra procesos de gestión de personas, de acuerdo a las necesidades de la organización, normativa interna, legislación vigente y las condiciones del entorno, comunicando y transfiriendo información de manera efectiva.<br><br>Área de Desempeño II: Administración y Emprendimiento.<br><br>4.Diseña soluciones factibles asociadas a la mejora continua en el ámbito de la organización, el desarrollo de nuevos negocios  y proyectos de emprendimiento, fundamentando sus decisiones, bajo un enfoque sistémico y haciendo uso de tecnologías actualizadas.<br><br>5.Fundamenta propuesta de solución asociada a la mejora continua en la organización, el desarrollo de nuevos negocios y proyectos de emprendimiento, logrando la adhesión y comprensión de otros.       </ul>                </div>                                 </span> </div> <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } </script> </div> 

Reproducir video con la etiqueta HTML mediante PHP

estoy haciendo una app web con php, y estoy queriendo seleccionar un video y que me lo reproduzca. Tengo el siguiente codigo y me muestra hasta la interfaz del video pero no se me reproduce el mismo.

Estoy usando netbeans IDE 8.2 y xampp3.2.4 para la ejecucion. Me sale una noticia cuando hago la ejecucion en chrome, sobre la variable THE_FILE que no esta definida, la cual es el name del input en el cual cargo el video seleccionado. ¿como podría quitar ese aviso?

Y lo principal del problema es que se reproduzca el video mediante: echo

<!DOCTYPE html>  <html>     <head>         <meta charset="UTF-8">         <title>Edición de video</title>      </head>     <body>           <div id="main-area">             <div id="header">                 <h1>Please upload your video to edit it!</h1>             </div>             <div>                <form action="Index.php" method="post" enctype="multipart/form-data">                    <input type="hidden" name="MAX_FILE_SIZE" value="20000000" />                    <input type="file" name="the_file" id="the_file" />                     <br>                     <input type="submit" name="submit" value="upload file" />                 </form>             </div>          </div>       <?php         if ($  _FILES['the_file']['error'] > 0)         {             echo 'Problema:';             switch ($  _FILES['the_file']['error'])             {                 case 1:                     echo 'File excede upload_max_filesize';                     break;                 case 2:                     echo 'File excede max_file_size';                     break;                 case 3:                     echo 'File only partially uploaded';                     break;                 case 4:                     echo 'No file uploaded';                     break;                 case 6:                     echo 'No puede subir archivo: no temp directorio especificado';                     break;                 case 7:                     echo 'upload failed: no write to disk';                     break;                 case 8:                     echo 'A PHP extension blocked the file upload';                     break;             }             exit;         }          if ($  _FILES['the_file']['type'] != 'video/mp4')         {             echo 'Problema: fichero no es MP4';             exit;         }          $  uploaded_file = 'C:\Users\juanmi\Desktop\TFG\Proyecto\media\-'.$  _FILES['the_file']['name'];         //$  name = basename($  _FILES['the_file']['name']);          if (is_uploaded_file($  _FILES['the_file']['tmp_name']))         {             if (!move_uploaded_file($  _FILES['the_file']['tmp_name'], $  uploaded_file))             {                 echo 'Problem: no se ha podido copiar al directorio deseado';                 exit;             }             else             {                 echo 'Copiado al directorio deseado. Nombre archivo:';                 echo $  _FILES['the_file']['name'];              }         }          echo '<br>';         echo '<br>';         echo 'File uploaded successfully';         echo '<br>';         //mostrar lo transferido         echo '<div align="center">';         echo '<video width="600" height="300" controls autoplay>';         echo "<source src='$  uploaded_file' type='video/mp4'> ";         echo 'Your browser does not support the video tag.';         echo '</video>';         echo '</div>';          ?>       </body> </html>  

Alinear imágenes seguidas php / html

Hola que tal he estado buscando soluciones para poder alinear imágenes en mi web page, lo que busco es que se alineen seguidas una de otra.

Lo que sucede es que estoy obteniendo los datos incluidas las imágenes de un DB mediante php y json, eso no importa todo funciona de maravilla solamente que al yo traerme los datos en el foreach evidentemente cada imagen me la inserta con un salto de linea, lo que busco es que no me de este salto y yo poder elegir 3 imágenes por linea o 4 ( se que la solución puede estar en css, html o incluso php solo que no se me ocurre como poder lograr esto)

Espero haberme explicado, un saludo colegas!

foreach ( $  obj as $  res ) {  $  n = $  res->nom; $  lk = $  res->img_url; $  p = $  res->precio;  echo "<h1 id='t'> $  n </h1>"; echo "<img src=$  lk id='im2'>";  } 

Extraer segunda ocurrencia del elemento de una expresión html

Tengo la siguiente expresión html

$  text = '<strong>Aqui</strong> tengo el elemento <strong>PRIMERO</strong> y el <strong>SEGUNDO</strong>' 

Necesito extraer de esta expresion el segundo elemento entre las etiquetas <strong>, o sea, el texto PRIMERO

He probado con DOMXPath::evaluate pero me devuelve la primera ocurrencia

$  doc = new DomDocument(); $  doc->loadHTML($  text); $  xpath = new DomXPath($  doc); $  resultado = $  xpath->evaluate("string(//strong)");

El resultado es Aqui

He probado con DOMXPath::query y lo unico que obtengo es el numero de ocurrencias (3)

$  text = '<strong>Aqui</strong> tengo el elemento <strong>PRIMERO</strong> y el <strong>SEGUNDO</strong>'; $  doc = new DomDocument(); $  doc->loadHTML($  text); $  xpath = new DomXPath($  doc); $  resultado = $  xpath->query("//strong");  ----  object(DOMNodeList)#6 (1) {   ["length"]=>   int(3) }

Alguna idea???

¿Cómo poner una condición en HTML para coger una línea de script u otra?

me encuentro desarrollando una aplicación híbrida, en JavaScript, HTML y CSS. He utilizado además cordova para lanzar un apk. Básicamente el index de cordova carga el index.html del cliente web, pero este index del cliente web debe cargar unos u otros en función de si se lanza en Android o un escritorio. Adjunto la cabecera del index.html del cliente web y sigo explicando.

<html>  <head>   <meta charset="utf-8" />   <title>Tecnología</title>   <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="cliente/lib/pixi.js"></script>   <script src="cliente/lib/traviso.dev.js"></script>   <script src="cliente/src/main-traviso.js"></script>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    <link href="cliente/lib/jquery.toast.min.css" rel="stylesheet" type="text/css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>   <script src="cliente/lib/jquery.cookie.js"></script>   <script src="cliente/lib/underscore-min.js"></script>   <script src="cliente/lib/pagination.js"></script>    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">    <link rel="stylesheet" href="cliente/src/main.css">   <link rel="stylesheet" href="cliente/src/sidebar-themes.css">     <link rel="stylesheet" href="cliente/src/estilos.css">   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>   <script src="cliente/src/cliente.js"></script>   <script src="cliente/src/ini.js"></script>    <script src="cliente/src/control.js"></script>    <script src="cliente/src/pantalla-ejer.js"></script>    <script src="cliente/src/com.js"></script>        <!--<script src="cliente/lib/cordova.js"></script>   <script src="cliente/lib/cordova_plugins.js"></script>-->   <!-- Sentencia para conocer si es Android o no -->   <script>    window.mobileAndTabletcheck = function() {    var check = false;    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);    return check;    };   </script>   <script>    if (!window.mobileAndTabletcheck()){     document.write('<!--')    }   </script>      <script src="cliente/lib/cordova.js"></script>   <script src="cliente/lib/cordova_plugins.js"></script>   <script src="cliente/src/index.js"></script>   <script>    if (!window.mobileAndTabletcheck()){     document.write('-->')    }    </script>  </head> 

Los archivos que debo de cargar en el momento en que se lanza desde un cliente Android son cordova.js, cordova_plugins.js e index.js. La forma en la que está actualmente es controlada con el if (!window.mobileAndTabletcheck()). El problema llega a la hora de recargar varias veces la página (en el escritorio del navegador), carga los archivos del cliente android, cuando sólo debería de hacerlo en ese preciso cliente. Mi pregunta, es si existe otra forma de realizar la carga de <script>de forma condicional en base a si se lanza desde un android o no. Gracias de antemano.

Sharepoint 2013 Upload image javascript from html canvas DataURL

I try to upload image from dom element with canvas ( html2canvas.js ). and then i get dataURL() from canvas to upload. Upload is successful but i cant open my file. like a without file extention.

Here my code ;

 html2canvas(document.getElementById("wedding1"), {     letterRendering: 1,     allowTaint: true,     onrendered: function(canvas) {       console.log(canvas);     }   }).then(canvas => {     var imageData = canvas.toDataURL("image/png");     imageData.replace(/^data:image\/(png|jpg);base64,/, "");     let canvasImg = document.getElementById("canvasimg");     canvasImg.appendChild(canvas);       this.uploadFile("selam.png", imageData);    }); uploadFile(name, content) {   var createitem = new SP.RequestExecutor(     _spPageContextInfo.webAbsoluteUrl   );   createitem.executeAsync({     url:       _spPageContextInfo.webAbsoluteUrl +       "/_api/web/GetFolderByServerRelativeUrl('/DuyuruDocument')/Files/Add(url='" +       name +       "',overwrite=true)",     method: "POST",     binaryStringRequestBody: true,     body: content,     success: function(e) {       alert("done");     },     error: function() {       alert("Error");     },     state: "Update"   }); }, 

Descolocados elementos HTML

Tengo un visor de imágenes y quisiera centrarlo verticalmente y horizonalmente (en el centro de la pantalla). ¿Por qué se me descoloca el botón > y por qué no se centra el div si tengo agrado el siguiente código para centrar el div?

Código:

#centrar {     position: fixed;     top: 50%;     left: 50%;     -webkit-transform: translate(-50%, -50%);     transform: translate(-50%, -50%); } 
window.onload = function() {   myIndex = 1;   generar_slider ('centrar', 11, '', 'jpg', 'mySlides'); 	showDivs(myIndex); };  //Función que genera el slider. function generar_slider (id_slider, numero_diapositivas, ruta_imagen, extension_imagen, clase) { 	let carrusel = document.getElementById(id_slider); 	//Recorremos en un for las imágenes. 	for (var i=1; i <= numero_diapositivas; i++) { 		//Creamos en una variable "imagen" el elemento "img" 		let imagen = document.createElement("img"); 		//Al elemento "imagen" le asignamos la propiedad "src" para decir dónde se encuentra la imagen. 		imagen.src = ruta_imagen + i + '.' + extension_imagen; 		//Añadimos la clase CSS "clase" al elemento. 		imagen.classList.add(clase); 		carrusel.appendChild(imagen); 	} } 		 //Evento al hacer click en el bóton < o >. function plusDivs(n) { 	showDivs(myIndex += n); } 		 function showDivs(n) { 	var i; 	var x = document.getElementsByClassName("mySlides"); 	if (n > x.length) { 		myIndex = 1 	}  	if (n < 1) { 		myIndex = x.length 	}  	for (i = 0; i < x.length; i++) { 		x[i].style.display = "none"; 	} 	x[myIndex-1].style.display = "block"; 	}
.mySlides { display: none; } <!-- Centrar contenido vertical y horizontalmente --> #centrar { 	position: fixed; 	top: 50%; 	left: 50%; 	-webkit-transform: translate(-50%, -50%); 	transform: translate(-50%, -50%); }
<!DOCTYPE html> <html> 	<head> 		<meta name="viewport" content="width=device-width, initial-scale=1"> 		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 	</head> 	 	<body> 		<div class="w3-content w3-display-container" id="centrar"> 			<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button> 			<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button> 		</div> 	</body> </html>

introducir la descripción de la imagen aquí