Rafael Hernández's questions

hello I want to activate many animations of a web with javascript when they appear on the screen but I am using if else and when there are several if else some animations do not work. I've tried to use a switch but I can't. animations are activated by adding the .animated class

(function($){

	/**
	 * Copyright 2012, Digital Fusion
	 * Licensed under the MIT license.
	 * http://teamdf.com/jquery-plugins/license/
	 *
	 * @author Sam Sehnert
	 * @desc A small plugin that checks whether elements are within
	 *		 the user visible viewport of a web browser.
	 *		 only accounts for vertical position, not horizontal.
	 */
	$.fn.visible = function(partial){

	    var $t				= $(this),
	    	$w				= $(window),
	    	viewTop			= $w.scrollTop(),
	    	viewBottom		= viewTop + $w.height(),
	    	_top			= $t.offset().top,
	    	_bottom			= _top + $t.height(),
	    	compareTop		= partial === true ? _bottom : _top,
	    	compareBottom	= partial === true ? _top : _bottom;

		return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    };

})(jQuery);

$(window).scroll(function(){



 	if( $('.revealOnScroll-red').visible(true) ) {
			 $('.revealOnScroll-red').addClass('animated text-animation');
			 $('.revealOnScroll-p').addClass('animated text-animation-2');
 	}
	else {
			 $('.revealOnScroll-red').removeClass('animated text-animation');
			 $('.revealOnScroll-p').removeClass('animated text-animation-2');

  }


	 if( $('#red-lista').visible(true) ) {
		$('.revealOnScroll-icon').addClass('animated icon-size');
 		$('.revealOnScroll-list').addClass('animated text-animation');
}
 else {

 		$('.revealOnScroll-icon').removeClass('animated icon-size');
		$('.revealOnScroll-list').removeClass('animated text-animation-list');
 }


 if( $('.revealOnScroll-icon-soc').visible(true) ) {

  $('.revealOnScroll-icon-soc').addClass('animated icon-size-soc');
 //$('.revealOnScroll-list').addClass('animated text-animation');
 }
 else {
  $('.revealOnScroll-icon-soc').removeClass('animated icon-size-soc');
 // $('.revealOnScroll-list').removeClass('animated text-animation-list');
 }


if( $('.revealOnScroll-meto').visible(true) ) {

 $('.revealOnScroll-meto').addClass('animated text-animation');
}
else {

 $('.revealOnScroll-meto').removeClass('animated text-animation');

}

if( $('.revealOnScroll-icon2').visible(true) ) {

  $('.revealOnScroll-icon2').addClass('animated icon-size');
   $('.revealOnScroll-etapa').addClass('animated text-animation');
}
else {

  $('.revealOnScroll-icon2').removeClass('animated icon-size');
  $('.revealOnScroll-etapa').removeClass('animated text-animation');

 }

});

/*********CSS animations**********/

.animatable {

  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}



/* show objects being animated */
.animated {
  visibility: visible;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}


@-webkit-keyframes movimiento-diagonal {
   from {
      left: -800px;
   }

   to {
      left: 10px;
   }
}

.text-animation {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 1s;
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

   position: relative;
   padding: 2px;
}


@-webkit-keyframes movimiento-diagonal-list {
   from {
      left: -800px;
   }

   to {
      left: 10px;
   }
}

.text-animation-list {
   -webkit-animation-name: movimiento-diagonal-list;
   -webkit-animation-duration: 1s;
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

}



@-webkit-keyframes movimiento-diagonal-2 {
   from {
      right: -200px;
   }

   to {
      right: 10px;
   }
}


.text-animation-2 {
   -webkit-animation-name: movimiento-diagonal-2;
   -webkit-animation-duration: 1s;

   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */
   position: relative;
   padding: 2px;
}

/* increase size fontawesome icons with keyframes*/

@-webkit-keyframes size-icons {
   0% {
      font-size: 0;
   }

   100% {
      font-size: 2.1em;
   }
}


.icon-size{
   -webkit-animation-name: size-icons;
   -webkit-animation-duration: 1s;
   /*-webkit-animation-iteration-count:1 ;*/
   -webkit-animation-direction: normal;/*para que vuelva a su posicion inicial */

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="malla-img">
      <div class="container">


    <div  class="row space-img">
     <div class="col-md-6">
       <h1 class="animatable text-animation revealOnScroll-red">Mejora la seguridad de tu empresa con una prueba de penetración de Red Team.</h1>
       <ul class="mx-auto animatable text-animation revealOnScroll-red">
         <li class="list-style"><i class="fa fa-envelope-o pr-3 fa-2x vertical-icon" aria-hidden="true"></i>[email protected] </li>
         <li class="list-style"><i class="fa fa-phone pr-3 fa-2x vertical-icon" aria-hidden="true"></i> +506 4033-9973 </li>

       </ul>
     </div>
     <div class="col-md-6">
       <p class="revealOnScroll-p text-animation-2 animatable">La Simulación un adversario también conocido como Red Team Operations, consiste en realizar ataques de precisión contra una organización para probar la efectividad y la capacidad de respuesta de diferentes partes de un programa de seguridad de la información sin afectar la integridad, disponibilidad y confidencialidad de la información. </p>
       <p class="revealOnScroll-p text-animation-2 animatable">Las pruebas de penetración tradicionales a menudo excluyen algunas vías de ataque y tácticas que los adversarios reales están usando actualmente, utilizan herramientas automáticas las cuales únicamente identifican vulnerabilidades. </p>
       <p class="revealOnScroll-p text-animation-2 animatable">A diferencia de las pruebas tradicionales de penetración, una Simulación de un adversario o un Red Team Operation adopta un enfoque integrado para evaluar las defensas de Seguridad de la Información combinando múltiples estrategias militares de prueba en un compromiso ofensivo integral con el único objetivo de obtener acceso a los activos del cliente o cumplir los objetivos y misiones previamente establecidos</p>
     </div>
   </div>
     </div>
       </div>
   <div id="red-lista" class="benefics">
     <h2 class="text-center  text-animation-list animatable revealOnScroll-list">¿Qué incluye los servicios de Red Team Operations?</h2>
     <ul class="mx-auto">
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3  vertical-icon" aria-hidden="true"></i> Spear Phishing. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Custom Malware. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Open Source Reconnaissance. </li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ingeniería social.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques a la seguridad física.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques wireless.</li>
       <li class="list-style"><i class="fa fa-check-circle icon-size  animatable revealOnScroll-icon pr-3 fa-2x vertical-icon" aria-hidden="true"></i> Ataques a aplicaciones y sitios web.</li>
     </ul>
   </div>

I am already implementing the api and it works for me but it only executes the animation once I need that when I scroll down or up and the element comes out again, for example an h1, the animation is executed again.

const images = document.querySelectorAll('.revealOnScroll-red');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('animated');
    } else {
      entry.target.classList.remove('animated');
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

I have made the animations to be activated by adding the animated class.

in app.js I want to display an image.

import React, { Component } from 'react';
import './App.css';

import Image from './components/Image';
import Input from './components/Image';

class App extends Component {
  render() {
    return (
      <div>
        <Image
          id={1}
          src="./components/indice.png"
        />
       <img src={require('/components/indice.png')}/>

        <Input
         id={2}
         type="text"
        />

      </div>
    );
  }
}

export default App;

in some posts I have read that you have to put the images in the public folder in others use src={require(path-image.jpg) how is it done? I'm just starting with reactjs.

I have scanned my network with nmap.

Host is up (0.000047s latency).
Not shown: 1995 closed ports
PORT     STATE         SERVICE
25/tcp   open          smtp
68/udp   open|filtered dhcpc
631/udp  open|filtered ipp
5353/udp open|filtered zeroconf
5355/udp open|filtered llmnr

with sudo /etc/init.d/zeroconf disable I don't get anything.

With gufw I have created the rules to close ports 5353 and 5355 but they are still open.

What I can do?

I have a menu that in mobile resolution the logo sticks to the top of the screen. I've tried several things and I can't get it to center vertically or put it at the bottom.

<nav class="navbar navbar-custom-1 navbar-fixed-top container col-xs-12" role="navigation">
<!-- El logotipo y el icono que despliega el menú se agrupan
     para mostrarlos mejor en los dispositivos móviles -->
<div class="container">

  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse"
          data-target=".navbar-ex1-collapse">
    <span class="sr-only">Desplegar navegación</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <span id="logo">lorem lorem upse</span>
</div>

<!-- Agrupar los enlaces de navegación, los formularios y cualquier
     otro elemento que se pueda ocultar al minimizar la barra -->
<div id="main-nav" class="collapse navbar-collapse navbar-ex1-collapse">
 <!--  <ul id="main-nav" class="nav navbar-nav  navbar-right"> -->
  <ul  class="nav navbar-nav  navbar-right">
    <li><a  href="#about">BIOGRAFÍA</a></li>
    <li><a  href="#discography">DISCOGRAFÍA</a></li>
    <li><a  href="#videos">VIDEOS</a></li>
    <li><a  href="#contact">CONTACTO</a></li>

  </ul>

</div>
</div>

</nav>


<span id="logo">lorem lorem upse</span>

i am using bootstrap .
I have tried with vertical-align:middle, padding-topand with class = "align-bottom"but nothing.

I have several buttons in a foreach in php

 <table class="table-mp3 center-block" data-directorio-album="ideas" id="reproductor">

<?php foreach($canciones as $id => $cancion):?>
 <tr class="fila">
     <td>

<!-- <span class="icon-play">
  <i class="fa fa-play fa-1x icon start" data-directorio-album="ideas" data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo']; ?>"></i>

 </span> -->



  <button type="button" class="btn btn-ttc start" data-directorio-album="ideas" 
   data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo']; ?>">
   <i class="fa fa-play fa-1x icon"></i>
  </button>

this is the code to change the icon

  $('#reproductor').find('[data-id-cancion="' + songId + '"]').removeClass( "fa-play" ).addClass( "fa-pause" );

the icon changes but wrong as seen in the image.

I want to install reactjs and in the step of installing webpack the problems start.

executednpm install webpack -g

and then I get these warnings

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/webpack/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

I use xubuntu 16.04 x64.

What I can do????

from the wordpress admin panel. In an entry using the "html" tab I have the css code like this.

<h3 style="text-align: center;color: #4517c6;">3. Reconciliación</h3>

and it does not take the color, the h3 does not appear directly. I have updated the post to save the changes, on a test page the css code works for me, it centers the h3 and gives it the blue color but it does not work on the blog.

Now with the code that I have put, leaving the fields blank does not put the red border of the input and when I write in a field the error messages in the other fields disappear...

jQuery.noConflict();
var nombre = document.getElementById("nombre");
var correo = document.getElementById("correo");
var mensaje = document.getElementById("mensaje");


jQuery(document).on('click', '#enviar', function($) 
{
	


	jQuery("#nombre").on("input", function() 
	{ 
		if(jQuery("#nombre").val().length < 4)
		{
		    jQuery("#nombre").css("border", "3px solid red");
		    jQuery(".msgerror1").css("visibility", "visible");
		   
		}
		else
		{
			jQuery("#nombre").css("border", "1px solid ");
			jQuery(".msgerror1").css("visibility", "hidden");
		}
});

	jQuery("#correo").on("input", function() 
	{ 
		if(jQuery("#correo").val().length < 4)
		{
		    
		    jQuery("#correo").css("border", "3px solid red");
		    jQuery(".msgerror1").css("visibility", "visible");

		}
		else
		{
			jQuery("#correo").css("border", "1px solid ");
			jQuery(".msgerror1").css("visibility", "hidden");
		}
});

	jQuery("#mensaje").on("input", function() 
	{ 

		if(jQuery("#mensaje").val().length == 0)
		{
		    
		 
		    jQuery("#mensaje").css("border", "3px solid red");
		    jQuery(".msgerror1").css("visibility", "visible");
		}
		else
		{
			jQuery("#mensaje").css("border", "1px solid ");
			jQuery(".msgerror1").css("visibility", "hidden");
		}
});
	
	if(jQuery("#privacidad")!== 'acepto')
	{
	    
	 
	  
	    jQuery(".msgerror1").css("visibility", "visible");
	}
	else
	{
		
		jQuery(".msgerror1").css("visibility", "hidden");
	}
});

.msgerror1
{
	color: red;
	visibility: hidden;
	font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myform" ><!-- onsubmit="return enviarform();"> -->
			<ul class="ulformu">
				<li  class="liformu">	
					<label for="nombre"></label>
					
						
			      	  <input name="nombre" id="nombre" type="text" placeholder="Nombre*" autofocus=""  >
					<p class="msgerror1">el campo nombre es obligatorio</p>
				</li>
				<li class="tlf liformu">
					<label for="correo"></label>
						
			      	  <input name="correo" id="correo" type="email" placeholder="Correo*" >
			      	  	<p class="msgerror1">El campo correo es obligatorio</p>
			      	  	


					
				</li>
				<li>
					
				</li>
				<li class="liformu">
					<textarea name="mensaje" id="mensaje"  placeholder="¿En que te puedo ayudar?*"></textarea>
						<p class="msgerror1">el mensaje es obligatorio</p>
				</li>

				<li>
					<input type="checkbox" name="checkbox" id="privacidad" value="acepto"> <label for="cbox2">He leído y acepto la <a target="_blank" class="po" href="http://localhost/adela/politica-de-privacidad/">política de uso de datos</a></label>
					<p class="msgerror1">Tienes que aceptar la política de uso de datos</p>
				</li>
				
				<li class="liformu boton">
					 <input id="enviar" type="submit" value="Enviar" />
				</li>
			</ul>	
		</form>

if(jQuery("#mensaje").val().length < 6)
    {


        jQuery("#mensaje").css("border", "3px solid red");
        jQuery(".msgerror1").css("visibility", "visible");
    }
    else
    {
        jQuery("#mensaje").css("border", "1px solid ");
        jQuery(".msgerror1").css("visibility", "hidden");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="liformu">
                    <textarea name="mensaje" id="mensaje"  placeholder="¿En que te puedo ayudar?*"></textarea>
                        <p class="msgerror1">el mensaje es obligatorio</p>
                </li>

You can see it here www.adela.insertcoinproducts.com in contact, press send without filling in any field and you will get the message and then fill in the message field and it does not disappear. I've been looking at the code for a while and I can't find the error...

the following checkbox

<input type="checkbox" name="checkbox" id="privacidad" value="acepto"> 

here all the javascript

jQuery.noConflict();
var nombre = document.getElementById("nombre");
var correo = document.getElementById("correo");
var mensaje = document.getElementById("mensaje");


jQuery(document).on('click', '#enviar', function($) 
{



    // If the value is less than 7, add a red border
    if(jQuery("#nombre").val().length < 4)
    {
        jQuery("#nombre").css("border", "3px solid red");
        jQuery(".msgerror1").css("visibility", "visible");

    }
    else
    {
        jQuery("#nombre").css("border", "1px solid ");
        jQuery(".msgerror1").css("visibility", "hidden");
    }

    if(jQuery("#correo").val().length < 4)
    {

        jQuery("#correo").css("border", "3px solid red");
        jQuery(".msgerror2").css("visibility", "visible");

    }
    else
    {
        jQuery("#correo").css("border", "1px solid ");
        jQuery(".msgerror2").css("visibility", "hidden");
    }

    if(jQuery("#mensaje").val().length < 6)
    {


        jQuery("#mensaje").css("border", "3px solid red");
        jQuery(".msgerror3").css("visibility", "visible");
    }
    else
    {
        jQuery("#mensaje").css("border", "1px solid ");
        jQuery(".msgerror3").css("visibility", "hidden");
    }

    if(jQuery("#privacidad")!== 'acepto')
    {



        jQuery(".msgerror3").css("visibility", "visible");
    }
    else
    {

        jQuery(".msgerror3").css("visibility", "hidden");
    }
});

function enviarform()
{
    var nombre = document.getElementById("nombre");
    var correo = document.getElementById("correo");
    var mensaje = document.getElementById("mensaje");
    var checkbox2 = document.getElementById("privacidad");
    var formulario = document.getElementById("myform"); 
    var dato = formulario[0];


    if((nombre.value.length < 4) || (correo.value.length < 4)|| (mensaje.value.length < 6)
        || (!$checkBox.is(':checked')))
    {
        alert("No se envía el formulario");
        return false;
    }
    else 
    {
        alert("Enviando el formulario");
        formulario.submit();
        return true;
    }       
}

I have changed the permalinks in settings. I have created the .htaccess with the code that wordpress has given me, I have also enabled the mod rewrite in apache and I have given 777 permissions to the .htaccess but the links still fail me.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /adela/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /adela/index.php [L]
</IfModule>

I want to open a page with a button, but it doesn't open in another tab but it opens in the same one and I don't get it.

<button type="button" class="btn btn-success btnterapia" onClick="parent.open('http://localhost/adela/contacto/')">PIDA CITA</button>   

<button type="button" class="btn btn-success btnterapia" onClick="window.open('http://localhost/adela/contacto/')">PIDA CITA</button>   

What do I have to put in onclick="........('http....)

In another post I get this code:

( document ).ready(function() {
  $(".nav li").on("click", function(){
    $(".nav").find(".activa").removeClass("activa");
    $(this).addClass("activa");
  });
});

/*CSS*/
.activa{
    background-color:lightblue;
}

but it doesn't work for me, I can't find anything on google to fix this.

So I have the menu with bootstrap.

<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="linkmenu"><a href="index.php">Biografía</a></li>
      <li class="linkmenu"><a href="discografia.php">Discografía</a></li>
      <li class="linkmenu"><a href="videos.php">Videos</a></li>
      <li class="linkmenu"><a href="descargas.php">Descargas</a></li>
    </ul>  
  </div>
</nav>

I have a list of songs. each one with an icon to play, I want that when you click on a song the icon changes (pause icon) and that when you click on another song the previous one changes its icon. but also when you click on a song and click on the same song, the icon also changes, that is, there is only a pause icon in the song that is playing.

<li class="lireproductor">
  <img id="idplay1"  class="play"  data-audio="1" data-img="1" src="images/play.png">Cuando amanece
</li>
<li class="lireproductor">
  <img id="idplay2"  class="play"  data-audio="2" data-img="2" src="images/play.png">animal
</li>
<li class="lireproductor"> 
  <img id="idplay3"  class="play"  data-audio="3" data-img="3" src="images/play.png">animal
</li>

document.addEventListener('play', function(d)
{

    //poner en play.png tdoas las canciones menos la que dispare la funcion
   // var iconos = document.getElementsByTagName('idplay');
    icono = $('#idplay' + $(this).data('img'));

    icono.attr('src','images/pause.png');
    for(var i = 0, len = icono.length; i < len;i++)
    {
        if(icono[i] != d.target)
        {

            icono[i].attr('src','images/play.png');

        }
    }
}, true);

www.jamondemono.com/mono in the discography section on the album the devirtualization of ideas I have the player.

What I want works for me, but if I click on a song, the icon changes to pause and then I click on another song, the icon of the previous one returns to play, but if you click twice on the same song, the icon does not change. (This is the problem)

I got the icon change with this code:

function iconopause1()
{

$("#idplay1").attr('src','images/pause.png');
$("#idplay2").attr('src','images/play.png');
$("#idplay3").attr('src','images/play.png');
$("#idplay4").attr('src','images/play.png');
$("#idplay5").attr('src','images/play.png');
$("#idplay6").attr('src','images/play.png');
$("#idplay7").attr('src','images/play.png');

}

but it is repeating a lot of code and it does not solve the problem well for me.

I have a player with 3 songs. each song has its "play" icon and in another div "controlplayer" I have a "play" icon from where I want to pause or play the song that is playing.

This "controlplayer" div is hidden and when playing a song it is shown. That's why there is already a song playing and I can stop it but I want it to play again when I press the icon again. but how do I indicate to this div which song was being played so that it executes the .play(), that is, how can I know the data-audio that was being played????

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);



	$(document).on('click', '.play', function()
	{
	 
		var whichAudio = $('#audio' + $(this).data('audio'));
		document.getElementById("reproductorcontroles").style.height = "45px";
		whichAudio[0].paused
		? whichAudio[0].play() 
		: whichAudio[0].pause();  



	});



//aqui ejecuto pausar desde el div reproductorcontroles

$(document).on('click', '.playlista', function(e)
{
    var audios = document.getElementsByTagName('audio');
     for(var i = 0, len = audios.length; i < len;i++)
     {
        if(audios[i] != e.target)
        {
        	audios[i].pause();
        	
        }

		 
           
    }
});  

#reproductorcontroles
{
	width: 100%;
	margin:  0 auto;
	height: 0px;
	background-color: #658955 ;
	position: fixed;
	transition: height .4s;
	bottom: 0;
	left:0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="play" data-audio="1">cancion 1</li>

  <li  class="play" data-audio="2">cancion 2</li>
 
  <li  class="play" data-audio="3">cancion 3</li>
</ul>

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>
  
             <div id="reproductorcontroles">
                      
                                   
                                    <ul>
                                        <li class="playlista"> play/pause
                                        
                                        </li>
                                     </ul>
                               </div>
                              
                           
</body>
</html>

I have the following structure of a project.

And I can't get the css styles to load. If header.phpit is inside includes and CSS files inside css, why doesn't it work for me ../css/style.css?

What route do I have to put?

/css/bootstrap.css

I haven't used much jquery and I can't do this:

I have a li with id="play1" on click on it: play a song and on click on "play1" again pause playback. So always, play / stop.

<li id="play1">



$( "#play1" ).click(function() 
{
    //si play1 click ejecutar audio1.play();
    //otro click en play1 ejecutar audio1.pause();
});

use a counter?

This is my code:

.filadisco1 {
  display: flex;
  display: -webkit-flex; 
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content:space-around;
}

.discox {
  width: 250px;
  height: 420px;
  margin-bottom: 15px;
  display: flex;
  display: -webkit-flex;   
  flex-direction: column;     
  -webkit-flex-direction: column;  
  margin-top: 34px;
  /* margin-left: 50px;*/
  background-color: #212f31;
}

<div class="filadisco1"> 

  <div class="discox">
    <a class="ablanco" href="la-desvirtualizacion-de-las-ideas/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco5.jpg">
    </a>
    <p class="parrafodisco">La Desvirtualización de las ideas (2015)</p>
    <p class="parrafodescrip">	La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="bokerones-muertos/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco4.png">
    </a>
    <p class="parrafodisco">Bokerones muertos (2014)</p>
    <p class="parrafodescrip">	Este nuevo disco, musicalmente más tranquilo, es el tercero que hacemos juntos.[...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="la-democracia-ha-muerto-vol2/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco3.jpg">
    </a>
    <p class="parrafodisco">La democracia ha muerto vol 2 (2013)</p>
    <p class="parrafodescrip">Consta de siete temas de rock cannábico y kalimochero. Fernando de la Pola sigue [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="la-democracia-ha-muerto-vol1/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco2.jpg">
    </a>
    <p class="parrafodisco">La democracia ha muerto vol 1 (2012)</p>
    <p class="parrafodescrip">	Ahora Fernando se junta con Dani, que ya había estado en Melilla en Jamón de Mono. Así surge [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="se-busca-banda/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco1.jpg">
    </a>
    <p class="parrafodisco">Se busca banda (2010)</p>
    <p class="parrafodescrip">	Disco grabado durante el verano del 2009. Fernando decide proponerle el proyecto de producción de doce temas [...]</p>				
  </div>

</div> 

I have the parent container and 5 children inside; Since there are 5 children, the bottom 2 at a width of 960px look centered but are not aligned with the top 3 elements.

With justify-content:space-around;I make them have the same separation between the elements and these with the parent container, but the 2 below are centered and break the consistency. The bottom 2 children would have to be below the first 2 top elements.

Why is this happening? What can I do to fix it?

I can't horizontally center a div with flexbox. I have a media query for mobile screens

@media only screen and ( max-width: 479px )
{
.filadisco1
{

display: flex;
width:280px;
justify-content:center;
flex-direction:column;
align-content: center;
padding:0;


}
}

son of .filadisco1 (it is outside the mediaquery)

.discox
{
width: 250px;
height: 420px;
margin-top: 34px;
background-color: #212f31;

}

I am seeing many tutorials but it is not clear to me where to put:

justify-content:center;
flex-direction:column;
align-content: center;

If in the container or in the children, the template I use is purchased and I don't know if there is any code in it that is interfering with centering .discox

html:

<div id="content-area">
<div class="container clearfix">
<div id="main-area">


<h1 class="tituloseccion alineacionh1h2">Discografía</h1>

<div class="filadisco1">

<div class="discox">
<a class="ablanco" href="la-desvirtualizacion-de-las-ideas/"><img     class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco5.jpg"</></a>
<p class="parrafodisco">La Desvirtualización de las ideas(2015)</p>
<p class="parrafodescrip"> La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación [...]</p>
</div><!-- discox->

</div><!-- filadisco1->

</div> <!-- #main-area -->

</div> <!-- .container -->
</div> <!-- #content-area -->

I can't center .discox

I have the permissions to create files in /var/www but in a wordpress template I cannot create the .htaccess file to be able to configure the wordpress permalinks.

I have followed this tutorial:

1. Enable mod_rewrite with the following command:

   sudo a2enmod rewrite
   

2. Open the file:

   sudo nano /etc/apache2/apache2.conf
   

3. Uncomment the line (remove the # symbol)

   AccessFileName .htaccess
   

4. Find the next section

   <Directory /var/www/>
       Options Indexes FollowSymLinks
       AllowOverride None
       Require all granted
   </Directory>
   

   Note: the above section can also be found in the file: /etc/apache2/sites-available/default

5. Replace “None” with “All” :

   AllowOverride All
   

6. Restart the Apache service

   sudo service apache2 restart
   

but when I create the file with sudo nano .htaccess and enter the configuration that wordpress gives me, the file is not created within wordpress.

Log detail:

13:41:13  [main]    Initializing Control Panel
13:41:13  [main]    Windows Version:  Pro  64-bit
13:41:13  [main]    XAMPP Version: 7.0.8
13:41:13  [main]    Control Panel Version: 3.2.2  [ Compiled: Nov 12th 2015 ]
13:41:13  [main]    You are not running with administrator rights! This will work for
13:41:13  [main]    most application stuff but whenever you do something with services
13:41:13  [main]    there will be a security dialogue or things will break! So think 
13:41:13  [main]    about running this application with administrator rights!
13:41:13  [main]    XAMPP Installation Directory: "d:\xampp\"
13:41:13  [main]    Checking for prerequisites
13:41:13  [main]    All prerequisites found
13:41:13  [main]    Initializing Modules
13:41:13  [Apache]  Problem detected!
13:41:13  [Apache]  Port 80 in use by "Unable to open process" with PID 4!
13:41:13  [Apache]  Apache WILL NOT start without the configured ports free!
13:41:13  [Apache]  You need to uninstall/disable/reconfigure the blocking application
13:41:13  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port
13:41:13  [Apache]  Problem detected!
13:41:13  [Apache]  Port 443 in use by "E:\vmware\vmware-hostd.exe -u "C:\ProgramData\VMware\hostd\config.xml"" with PID 4128!
13:41:13  [Apache]  Apache WILL NOT start without the configured ports free!
13:41:13  [Apache]  You need to uninstall/disable/reconfigure the blocking application
13:41:13  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port
13:41:13  [main]    Starting Check-Timer
13:41:13  [main]    Control Panel Ready
13:41:16  [Apache]  Problem detected!
13:41:16  [Apache]  Port 80 in use by "Unable to open process" with PID 4!
13:41:16  [Apache]  Apache WILL NOT start without the configured ports free!
13:41:16  [Apache]  You need to uninstall/disable/reconfigure the blocking application
13:41:16  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port
13:41:16  [Apache]  Problem detected!
13:41:16  [Apache]  Port 443 in use by "E:\vmware\vmware-hostd.exe -u "C:\ProgramData\VMware\hostd\config.xml"" with PID 4128!
13:41:16  [Apache]  Apache WILL NOT start without the configured ports free!
13:41:16  [Apache]  You need to uninstall/disable/reconfigure the blocking application
13:41:16  [Apache]  or reconfigure Apache and the Control Panel to listen on a different port
13:41:16  [Apache]  Attempting to start Apache app...
13:41:16  [Apache]  Status change detected: running
13:41:18  [Apache]  Status change detected: stopped
13:41:18  [Apache]  Error: Apache shutdown unexpectedly.
13:41:18  [Apache]  This may be due to a blocked port, missing dependencies, 
13:41:18  [Apache]  improper privileges, a crash, or a shutdown by another method.
13:41:18  [Apache]  Press the Logs button to view error logs and check
13:41:18  [Apache]  the Windows Event Viewer for more clues
13:41:18  [Apache]  If you need more help, copy and post this
13:41:18  [Apache]  entire log window on the forums

port 80

How can I fix it if it is a system process?