Home / user-56431

zerokira's questions

Martin Hope
zerokira
Asked: 2022-06-03 11:57:55 +0800 CST
  • 5

I am trying to make the PINK color only apply up to the 7 div element that contains the children class, I had thought of a :nth-child but I have not been able to implement it

.padre .children {
    width: 200px;
    height: auto;
    border: 1px solid;
    margin-bottom: 10px;
    padding: 10px;
    background-color: red;
    
  }

.padre .children *.children:last-of-type {
  background-color: pink;
}
<div class="padre">
  <div class="children">
    <div class="children">
      <div class="children">
        <div class="children">
          <div class="children">
            <div class="children">
              <div class="children">
                <div class="children">
                  <div class="children">
                    <div class="children">
                      <div class="children">
                        <div class="children"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

html
Martin Hope
zerokira
Asked: 2020-09-06 12:42:38 +0800 CST
  • 3

Right now I have 2 divwith different IDones, one is called image with a redcolor background and another is called logo with a blue background .color

I need the blue one not to overlap on top of divthe red one when it has a height of 390px, is there a way to do it without using any ... I know it's because of the , but how can we modify the structure so that this doesn't happen ...color div@media (min-width: 675px)posicion Absolute

.content {
			height: 60%; 
			margin-top: auto; 
			position: relative;
		}

		#image {
			width: 350px;
			height: 112px; 
			background-color: red;
		}

		#content-logo {
			position: absolute;
			bottom: 0; 
			text-align: center; 
			padding-bottom: 20px; 
			width: 100%;
		}

		#logo {
			width: 140px;
			height: 110px;
			background-color: blue;
			display: inline-block;
		}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
		<div class="content-login vh-100 d-flex justify-content-center align-items-center" style="width: 60%;">
			<div class="content">
				<div id="image">
					IMAGE
				</div>
				<div id="content-logo">
					<div id="logo">LOGO</div>
				</div>
			</div>
		</div>
		<div style="width: 40%;">
			<div class="align-items-center justify-content-center d-flex h-100">
				<h1>HOLA</h1>
			</div>
		</div>
	</div>

PS: I need them to divkeep the current position, ie the Blue div should be at the bottom centered and the Red div should stay centered

html
Martin Hope
zerokira
Asked: 2020-09-03 11:45:30 +0800 CST
  • 2

I am trying to show a submenu when it is done clickin an item and that when I give it clickto another Submenu it should be hidden and show the Submenu of the item that I gave clickand in addition to that it should eliminate the class that is added called open and add it to the item that I gave click , in the same way if I give clickan item and I give clickthat same item again, it should hide the submenu , but I have not been able to do it, I have the following code

	$(".subtitle .action").click(function(event){
			 var subtitle = $(this).parents(".subtitle");
			 var submenu = $(subtitle).find(".submenu");
			 
			 $(".submenu").not($(submenu)).slideUp("slow").addClass("opacity");
			 $(".open").not($(subtitle)).removeClass("open");

			 $(subtitle).toggleClass("open");
			 $(submenu).slideToggle("slow").toggleClass("opacity");

			 return false;
			});
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">
		.submenu {
			display: none;
		}
		.opacity {
			opacity: 0;
		}
	</style>
</head>
<body>
	<ul>
		<li class="subtitle">
			<a href="#" class="action">Inicio</a>
			<ul class="submenu">
				<li>
					<a href="#">Inicio 1</a>
				</li>
				<li>
					<a href="#">Inicio 2</a>
				</li>
				<li>
					<a href="#">Inicio 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Nosotros</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Nosotros 1</a>
				</li>
				<li>
					<a href="#">Nosotros 2</a>
				</li>
				<li>
					<a href="#">Nosotros 3</a>
				</li>
			</ul>

		</li>
		<li class="subtitle">
			<a href="#" class="action">Contacto</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Contacto 1</a>
				</li>
				<li>
					<a href="#">Contacto 2</a>
				</li>
				<li>
					<a href="#">Contacto 3</a>
				</li>
			</ul>
		</li>
		<li class="subtitle">
			<a href="#" class="action">Empresa</a>
			<ul class="submenu opacity">
				<li>
					<a href="#">Empresa 1</a>
				</li>
				<li>
					<a href="#">Empresa 2</a>
				</li>
				<li>
					<a href="#">Empresa 3</a>
				</li>
			</ul>
		</li>
	</ul>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</body>
</html>

javascript
Martin Hope
zerokira
Asked: 2020-07-27 05:15:07 +0800 CST
  • 13

I am trying to make a filter but I have no idea how to do it, I can receive suggestions, the filter works as follows:
When you click on one of the tags at the top, you should be able to display the content that has the TAG selected in the upper part, if one of the tags does not have the selected item in the upper part, it must be hidden.

PS: I have 2 items, each item has tags and should be able to filter/display according to the tags at the top

$(document).ready(function(){
  $('.content__item__filter span').on('click', function() {
    $(this).toggleClass('active__tag');
    var value = $(this).text().toLowerCase();
    $(".content__item__tag .content__tags").filter(function() {
      $('.content__item__tag').toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});
.content__item__filter span.active__tag {
  background-color: #c6a067;
}
.content__body {
  padding: 20px;
}
.content__item__filter span {
  padding: 5px 10px;
  display: inline-block;
  margin: 5px;
  background-color: #697084;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="content__body">
  <div class="content__item__filter">
    <span>IoT</span>
    <span>Firmware</span>
    <span>RPI</span>
    <span>Blockchain</span>
    <span>GIMP</span>
  </div>

  <!-- Tag 1 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 1. Lorem ipsum</h3>
    <div class="">
      <div class="tag__date">06 - 2014</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p class="mt-0">
        Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
       
      </div>
      <div class="content__tags">
        <span>Tags: IoT, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 1 -->

  <!-- Tag 2 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 2. Consectetur adipiscing elit.</h3>
    <div class="">
      <div class="tag__date">09 - 2015</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="content__tags">
        <span>Tags: Firmware, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 2 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

javascript
Martin Hope
zerokira
Asked: 2020-06-28 05:23:00 +0800 CST
  • 4

I have a arraywith idand descriptionwhere you have 2 roles , Owner and Tenant , I was trying to separate the role from each descriptionand add it to a arraynew one with its idcorresponding, something like:

{
  id: 1,
  description: "Propietario"
},
{
  id: 2,
  description: "Arrendatario"
}


I have the following code:

var rent = "Arrendatario";
var owner = "Propietario";
var obj = [{
    id: 1,
    description: "1664 - Propietario"
  },
  {
    id: 2,
    description: "1637 - Arrendatario - Finalizado"
  },
  {
    id: 3,
    description: "1735 - Arrendatario"
  },
  {
    id: 4,
    description: "LA6780 - Arrendatario"
  },
  {
    id: 5,
    description: "1638 - Arrendatario - Finalizado"
  }
];
console.log(obj);

The problem is that I need to separate the word Tenant or Owner from the String something with split()

javascript
Martin Hope
zerokira
Asked: 2020-05-29 05:56:30 +0800 CST
  • 1

I have the following situation, 4 buttons with different vehicle routes, when I click a button a class is added activeand it shows the content that belongs to that route and an additional bootstrap class is added to the contentcol-md-6 word . What is the problem? That when several route buttons are given to activate them, the content word has a different behavior than expected, it is expected that if there are active buttons, the content word remains with the bootstrap class and if there are no active buttons, it remains with the class bootstrap . I have the following code:


clickcol-md-6col-md-12


PS: view in full screen to see the behavior, what do you suggest?

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Prueba</title>

        <!-- CDN Bootstrap 4 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>

        <style type="text/css">
            .active {
                background-color: red !important;
            }
        </style>

    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" ng-class="{'active': showRutaBuses}" ng-click="toggleRutas('buses')">
                        Ruta buses
                    </button>
                    
                </div>

                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" ng-class="{'active': showRutaBicicletas}" ng-click="toggleRutas('bicicletas')">
                        Ruta de bicicletas
                    </button>
                </div>

                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" ng-class="{'active': showRutaMotos}" ng-click="toggleRutas('motos')">
                        Ruta de Motos
                    </button>
                </div>

                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" ng-class="{'active': showRutaCarros}" ng-click="toggleRutas('carros')">
                        Ruta de carros
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div ng-if="showRutaBuses">
                        <h1>Rutas de buses</h1>
                        <ul>
                            <li>
                                <a href="">Bus 1</a>
                            </li>
                            <li>
                                <a href="">Bus 2</a>
                            </li>
                            <li>
                                <a href="">Bus 3</a>
                            </li>
                        </ul>
                    </div>
                    <div ng-if="showRutaBicicletas">
                        <h1>Ruta de Bicicletas</h1>
                        <ul>
                            <li>
                                <a href="">Bicileta 1</a>
                            </li>
                            <li>
                                <a href="">Bicileta 2</a>
                            </li>
                            <li>
                                <a href="">Bicileta 3</a>
                            </li>
                        </ul>
                    </div>
                    <div ng-if="showRutaMotos">
                        <h1>Ruta de Moto</h1>
                        <ul>
                            <li>
                                <a href="">Moto 1</a>
                            </li>
                            <li>
                                <a href="">Moto 2</a>
                            </li>
                            <li>
                                <a href="">Moto 3</a>
                            </li>
                        </ul>
                    </div>
                    <div ng-if="showRutaCarros">
                        <h1>Ruta de Carros</h1>
                        <ul>
                            <li>
                                <a href="">Carro 1</a>
                            </li>
                            <li>
                                <a href="">Carro 2</a>
                            </li>
                            <li>
                                <a href="">Carro 3</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div ng-class="{'col-md-6': partContent, 'col-md-12': !partContent }">
                    <h1 class="text-danger">Contenido</h1>
                </div>
            </div>
        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.showRutaBuses = false;
                $scope.showRutaBicicletas = false;
                $scope.showRutaMotos = false;
                $scope.showRutaCarros = false;
                $scope.partContent = false;

                $scope.toggleRutas = function(typeRuoute) {
                    if (typeRuoute == 'buses') {
                        $scope.showRutaBuses = !$scope.showRutaBuses;
                        $scope.partContent = !$scope.partContent;
                    }

                    if (typeRuoute == 'bicicletas') {
                        $scope.showRutaBicicletas = !$scope.showRutaBicicletas;
                        $scope.partContent = !$scope.partContent;
                    }

                    if (typeRuoute == 'motos') {
                        $scope.showRutaMotos = !$scope.showRutaMotos;
                        $scope.partContent = !$scope.partContent;
                    }

                    if (typeRuoute == 'carros') {
                        $scope.showRutaCarros = !$scope.showRutaCarros;
                        $scope.partContent = !$scope.partContent;
                    }
                }
            });
        </script>
    </body>

</html>

javascript
Martin Hope
zerokira
Asked: 2020-05-10 13:24:25 +0800 CST
  • 1

How do I make it so that when I clickgive a itemdel carouselit is located in the center of the carousel, that is, if I give clickthe itemright to be located in the center, as if I were doing a prev or next, I have the following code:
PS: see the example in fullscreen, I'm using this library https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Carousel </title>

    <!-- CDN Bootstrap 4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <!-- Libreria externa -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

  <!-- CDN Jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

  <style type="text/css">
    .section_plans {
  padding: 60px 0;
}

.section_plans .content_detail_plan.plan_basic {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.section_plans .content_detail_plan.plan_plus {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.section_plans .content_detail_plan .content_detail_plan_header {
  padding: 30px 50px;
  border-bottom: 1px solid #7773ae;
  text-align: center;
}

.section_plans .content_detail_plan .content_detail_plan_body {
  padding: 20px 30px;
  text-align: center;
}

.section_plans .content_detail_plan .content_detail_plan_body .item_detail {
  margin: 10px 0;
}

.section_plans .content_detail_plan .content_detail_plan_body .btn_register {
  background-color: #58539b;
  padding: 10px 45px;
  border-radius: 30px;
  color: #fff;
  font-family: 'GoogleSans-Bold', 'MyriadPro-Regular', serif;
}


.section_plans .content_row {
  margin-top: 80px;
}

.section_plans .content_detail_plan.plan_recommended .content_detail_plan_header {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding-top: 75px;
}

.section_plans .content_detail_plan.plan_recommended .content_detail_plan_body {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-bottom: 60px;
}

.owl-item.active.center .item .content_detail_plan {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  position: relative;
  top: -45px;
  z-index: 1;
  background-color: red;
}
  </style>

  </head>
  <body>
    <div class="container">
    <section class="page_section section_plans" id="planes">
      <div class="container">
        <h1 class="c-default f-48 text-center">Nuestros Planes</h1>
        <hr class="line line-white">
        <div class="owl-carousel">
          <div class="item">
            <div class="content_detail_plan plan_plus bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN PLUS</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_testimonial text-center">
              <div class="content_detail_plan plan_recommended">
                <div class="content_detail_plan_header bc-primary">
                  <h6 class="c-default">PLAN RECOMENDADO</h6>
                  <h3 class="m-0 c-default">$15.00</h3>
                </div>
                <div class="content_detail_plan_body bc-default">
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">1ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">2ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">3ra ventaja del paquete</span>
                  </div>
                  <div class="item_detail">
                    <img src="img/icon_check.png">
                    <span class="ml-3">4ra ventaja del paquete</span>
                  </div>
                  <div class="mt-4">
                    <button type="button" class="btn btn_register">Registrar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="content_detail_plan plan_basic bc-default">
              <div class="content_detail_plan_header">
                <h6>PLAN BÁSICO</h6>
                <h3 class="m-0 c-light">$15.00</h3>
              </div>
              <div class="content_detail_plan_body">
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">1ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">2ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">3ra ventaja del paquete</span>
                </div>
                <div class="item_detail">
                  <img src="img/icon_check.png">
                  <span class="ml-3">4ra ventaja del paquete</span>
                </div>
                <div class="mt-4">
                  <button type="button" class="btn btn_register">Registrar</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>

    <script type="text/javascript">
      $( '.owl-carousel' ).owlCarousel({
        autoplay: false,
        margin: 20,
        items: 1,
        loop: true,
        center: true,
        nav: true,
        navText: [""],
        responsive: {
            0: {
               items:1
            },
            200: {
               items:1
            },
            768: {
               items:3
            }
         }
      });
    </script>
  </body>
</html>

javascript
Martin Hope
zerokira
Asked: 2020-02-28 05:06:01 +0800 CST
  • 1

How can I make it so that when the fontawesome icon is clicked , the icon changes and shows the element with id , if the icon is when the click is given, it must change to and show the content with id in this case , and vice versa... This is what I have tried:fa-arrow-leftfa-arrow-downid="primerItem"

$(document).ready(function() {
    var icono1 = $( "#icono1" );
    icono1.click(function() {
      $( "#item1 p" ).toggle();
    });

    var icono2 = $( "#icono2" );
    icono2.click(function() {
      $( "#item2 p" ).toggle();
    });

    var icono3 = $( "#icono3" );
    icono3.click(function() {
      $( "#item3 p" ).toggle();
    });

    var icono4 = $( "#icono4" );
    icono4.click(function() {
      $( "#item4 p" ).toggle();
    });
});
<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .content-items .sub-content {
            display: inline-block;
            width: 100%;
        }
        .content-items .item {
            display: inline;
            float: left;
            color: #fff;
            font-size: 25px;
        }

        .content-items .ico {
            display: inline;
            float: right;
            font-size: 25px;
            margin: 15px;
        }

        .content-items p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-items" style="background-color: pink;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item1" style="padding-top: 20px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt reprehenderit placeat, animi quo perferendis magni doloremque tempore autem ut maiores, molestias vero repellat earum optio similique deleniti explicabo sint?</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items"  style="background-color: #727aa0;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono2">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item2" style="padding-top: 20px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quidem quibusdam sint! Eligendi amet delectus magni molestiae eveniet unde, illo voluptas dolorum dicta distinctio, officia ullam dolore eius soluta voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #bb2e46;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono3">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item3" style="padding-top: 20px;">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #9abb2e;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono4">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item4" style="padding-top: 20px;">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

The expected result is simple, that when the icon is clicked it changes its icon and shows the content.

Otherwise : change icon and hide content.

Update #1
What is happening in this Update is that I have the icon arrow-downbut it doesn't show the content until I click ...

$(document).ready(function(){
  $('body').on('click', '.fa-arrow-left', function(){
    $(this).removeClass('fa-arrow-left').addClass('fa-arrow-down');
    $(this).closest('.content-items').find('.item-contenido').show();
  });
  $('body').on('click', '.fa-arrow-down', function(){
    $(this).removeClass('fa-arrow-down').addClass('fa-arrow-left');
    $(this).closest('.content-items').find('.item-contenido').hide();
  });
});
<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .content-items .sub-content {
            display: inline-block;
            width: 100%;
        }
        .content-items .item {
            display: inline;
            float: left;
            color: #fff;
            font-size: 25px;
        }

        .content-items .ico {
            display: inline;
            float: right;
            font-size: 25px;
            margin: 15px;
        }

        .content-items p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-items" style="background-color: pink;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item1" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt reprehenderit placeat, animi quo perferendis magni doloremque tempore autem ut maiores, molestias vero repellat earum optio similique deleniti explicabo sint?</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items"  style="background-color: #727aa0;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono2">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item2" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quidem quibusdam sint! Eligendi amet delectus magni molestiae eveniet unde, illo voluptas dolorum dicta distinctio, officia ullam dolore eius soluta voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #bb2e46;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono3">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item3" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quos esse quo? Neque, quaerat, exercitationem. Voluptas omnis nesciunt porro veritatis culpa quasi. Repellendus culpa corrupti, fugiat sunt quia magni consequuntur.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #9abb2e;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono4">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item4" class="item-contenido" style="padding-top: 20px; display: none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ratione quo alias fugit maiores enim odio amet, harum provident necessitatibus, error eveniet iste non voluptatibus dolore rem voluptates deleniti quos?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

javascript
Martin Hope
zerokira
Asked: 2020-02-06 09:06:12 +0800 CST
  • 3

I'm trying to change the texts with an animation but I still can't figure out how to do it. I have the following code:

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
	<p>Here is a sentence <span class="blink_me" id="rotate">default</span> is what changes</p>

	<ul style="display:none">
		<li>test1</li>
		<li>bob</li>
		<li>next</li>
		<li>last</li>
		<li>PABLO</li>
		<li>ANDRES</li>
	</ul>

The idea is that the elements of the label are displayed liand change something like this: FadeIn Animation but using onlyCSS

javascript
Martin Hope
zerokira
Asked: 2020-09-26 12:28:32 +0800 CST
  • 2

I am trying to make a console.log()of a arraythat fills when I make the request httpbut prints empty, it is possible to make it execute the entire function of the first http $scope.users();and then output the result to the console.
PS : console.logI can do it within the request httpbut it is not what I want, is there any other way, promises or something similar?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $filter) {

    $scope.users = function() {
        $scope.arrItem = [];
        $http.get('https://jsonplaceholder.typicode.com/todos').then(function(res) {
            $scope.users = res.data;
            $filter('filter')($scope.users, function(value, index, array){
                if (value.userId == 1) {
                    $scope.arrItem.push(value);
                };                
            } , true);
        });
    }

    $scope.test = function() {
        $scope.users();
        console.log($scope.arrItem);

    }
    $scope.test();

});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="user in arrItem">
            {{ user }}
        </div>
    </body>

</html>

javascript
Martin Hope
zerokira
Asked: 2020-09-04 08:55:39 +0800 CST
  • 5

I am trying to place a text that comes in UPPERCASE with the first letter mayúsculaand the others minúsculas, the text cannot be modified by jsor by html.

Is there any way to CSSmake this possible?

.let p {
    text-transform: lowercase;
}
<div class="let">
    <p>ESTO ES UNA INFORMACION QUE NECESITO QUE SEA LA PRIMERA LETRA MAYUSCULA Y LAS OTRAS MINUSCULAS</p>
</div>

html
Martin Hope
zerokira
Asked: 2020-04-11 11:26:48 +0800 CST
  • 3

How can I capture in $scope.personConOfertathe person who hasoferta

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat="person in personas">
     {{ person }}     
  </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
    $scope.personas = [
      {
         "Codigo": 1,
         "Name": "alberto",
         "Offerta": [
            {
              "precio": 10000,
              "lugar": "Medellin"
            },
            {
              "precio": 2000000,
              "lugar": "Bogota"
            }
         ]
      },
      {
         "Codigo": 2,
         "Name": "albertoPalacios",
         "Offerta": []
      }
    ]
    $scope.personConOferta = $filter('filter')($scope.personas, { Offerta.length > 0 }, true);
    $scope.personSinOferta = $filter('filter')($scope.personas, { Offerta.length == 0 }, true);
});
</script>

</body>
</html>

javascript
Martin Hope
zerokira
Asked: 2020-03-09 06:41:58 +0800 CST
  • 1

I need to create a variable that saves the state of the funciónone that I execute in the $interval call $scope.getSignatureCallStatus();that function executes a request that saves the state in a variable $scope.callStatus = res.data;... there
are 3 states:

{
    success
    fail
    hangup
}


So if the variable $scope.callStatus = 'success'that I save in a new variable that value or TRUEsomething like $scope.callStatusSucces = $scope.callStatus == 'success', but since it is in an interval the value changes dynamically, then I want the new variable not to change the value...

$scope.promise = $interval(function() {
    $scope.getSignatureCallStatus();
    $scope.showStatus = true;
}, 2500);


This is the function$scope.getSignatureCallStatus();

$scope.getSignatureCallStatus = function() {
        $http.get('url', {
            params: {
                param: param
            }
        }).then(function(res){
            $scope.callStatus = res.data;
        });
    };
javascript
Martin Hope
zerokira
Asked: 2020-02-27 11:34:32 +0800 CST
  • 1

How do I show the content of a person if at least one of those itemswithin arrayhas the status denied, this is my código.

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Refinanciador</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="app.js" charset="utf-8"></script>
</head>

<body ng-app="app">
      <div class="row" ng-controller="appController">
          <h1> FUTBOLISTAS </h1>
           <ul>
              <li ng-repeat="data in datos">
                  <p>Nombre: {{ data.nombre }} <br /> Apellido: {{ data.apellido }}</p> <br /> Estado: {{ data.status }}
              </li>
          </ul>
          <div ng-if="showPersonDenied" style="width: 100px; height: 100px; background-color: red; text-align: center;">
              Aca va una eprsona con estado denegado
          </div>
       </div>
 </body>
</html>

</body>

</html><br><br>

app.js

var app = angular.module("app", []);

app.controller("appController", function ($scope, $http) {
   //vamos a hacer uso de $http para obtener los datos
   $http.get('data.json').then(function (data) {
   //enviamos los datos a la vista con el objeto $scope
   $scope.datos = data.data;
   $scope.personStatus = $scope.datos;

   if ($scope.personStatus.length){
        for (var i = 0; i < $scope.personStatus.length ; i++) {
            $scope.showPersonDenied = $scope.personStatus[i].status === 'denied';
        }
    }

 });   
})<br><br>

data.json

[
   {
      "nombre": "James",
      "apellido": "Rodrigez",
      "status": "approved"

   },
   {
      "nombre": "Zlatan",
      "apellido": "Ibrahimovic",
      "status": "denied"

   },
   {
      "nombre": "Lionel",
      "apellido": "Messi",
      "status": "approved"

   }
]


the idea is that this variable $scope.showPersonDenied is true if any of the itemsinside arrayhas thestatus == 'denied'

javascript
Martin Hope
zerokira
Asked: 2020-01-25 13:13:35 +0800 CST
  • 4

I am trying to position the box azuldepending on the box I hit click, that is, if I hit clickthe green box, the blue box must go down to where the green box is, it cannot be on top, it must be as if I placed the property top: 500px;of cssor something like that.

<html>
   <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   </head>

   <script>
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) {

        $scope.showFuncion = function() {
          $scope.showDiv = true;
          $scope.fafa = !$scope.fafa
        }
    });
    </script>
   
    <body ng-app="myApp" ng-controller="myCtrl"> 
      <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">
          <div style="height: 150px; background-color: red;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: yellow;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: green;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: pink;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
          <div style="height: 150px; background-color: black;" ng-click="showFuncion()">
            ESTE ES EL LADO DERECHO DE LA PANTALLA
          </div>
        </div>
        <div class="col-sm-6 col-md-6 col-xs-6" ng-cloak ng-if="showDiv && fafa">
          <div style="height: 150px; background-color: blue;">
            ESTE ES EL LADO IZQUEIRDO DE LA PANTALLA
          </div>
        </div>
      </div>
      </div>


   </body>
</html>

This is the error offsetTopthat shows me in 0

javascript
Martin Hope
zerokira
Asked: 2020-11-11 05:42:02 +0800 CST
  • 2

How can I comment out a line in a template Laravelthat contains @include, @section, @endsectionand evenimg src"{{ asset('libs/magnific-popup/magnific-popup.js') }}"

I have tried with

  • <!-- -->
  • //
  • /*

but I still do not try to convince myself that it is well done.

php
Martin Hope
zerokira
Asked: 2020-11-04 07:02:38 +0800 CST
  • 2

How can I hide the word volverand show it when the divone with the class is opened collapseand hide the search word, that is, when he divdoes collapse, "this open" show the word return if it is not openshowing the search word, I have the following code

 <!DOCTYPE html> 
 <html ng-app="myApp"> 
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> 
<body>   
    <div ng-controller="myCtrl">
        <ul id="tab-list" class="nav nav-pills tab-menu tabs nav-search">
            <li>
                <a data-toggle="collapse" data-target="#rent-tab">Busqueda avanzada</a>
                <a data-toggle="collapse" data-target="#rent-tab">Volver</a>
            </li>
        </ul>

        <div id="rent-tab" class="collapse">
            <div class="row">
                <div class="col-sm-12">
                <span>Esto es una prueba</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            
        });
    </script>
</body>
</html>

.

javascript
Martin Hope
zerokira
Asked: 2020-10-27 05:16:01 +0800 CST
  • 2

I'm trying to make a backgroundwith last-childand I don't really understand why it doesn't apply the style I want. I want the last divone that contains the child class to have the background, how can I do it? SOMETHING IS WRONG.

 <!DOCTYPE html> 
 <html> 
 <head>   
    <style type="text/css">
        
        .hijo {
            display: block;
            width: 100px;
            height: 100px;
            border:1px solid red;
        }


        .hijo:last-child {
            background: #ff0000;
        }

        .hermano {
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid green; 
        }

    </style>
</head> 
<body>   
    <div style="width: 100%; height: 100vh; border: 1px solid #000;">
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hermano"></div>
    </div>
</body>
</html>

html
Martin Hope
zerokira
Asked: 2020-09-07 06:59:32 +0800 CST
  • 4

Greetings, I am trying to center the arrow that I make with the pseudo-elements :Beforeand :aftercss but I cannot find how to solve my problem, the idea is that the arrow is centered on the divone that contains it and that the arrow does not change position regardless of the number . I remain attentive to any recommendation to make this type of arrows.

.container1 {
    color: #727176;
    background-color: #fff;
    position: absolute;
    padding: 6px;
    font-style: normal;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.container1::before {
    content: "";
    position: absolute;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    width: 19px;
    height: 19px;
    left: 26px;
    top: 19px;
    z-index: -1;
    transform: rotate(45deg);
    cursor: pointer;
}

.container1::after {
    content: "";
    top: 30px;
    left: 24px;
    position: absolute;
    height: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid white;
    cursor: pointer;
}
<div class="container1" style="top: 60px;">
    <span>$990,000,000,000</span>
</div>
<div class="container1">
    <span>$990,000</span>
</div>

html
Martin Hope
zerokira
Asked: 2020-08-31 11:08:51 +0800 CST
  • 3

I have the following code (an angularjs directive), the problem is that when I am writing any number from my phone, the cursor jumps after the third number entered, also after the sixth number entered, that is, after each 3 numbers makes a jump, I can't find a suitable solution, thank you very much !! :) This is my problem:

angular.module('search').directive('inputCurrency', function($filter) {
    'use strict';

    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) {
                return;
            }

            ctrl.$formatters.unshift(function() {
                if(ctrl.$modelValue != '')
                    return $filter('number')(ctrl.$modelValue);
                else
                    return '';
            });

            ctrl.$parsers.unshift(function(viewValue) {
                var plainNumber = viewValue.replace(/[\,\.]/g, ''),
                    b = $filter('number')(plainNumber);

                elem.val(b);

                return plainNumber;
            });
        }
    };
});
javascript