Miguel's questions

I am making some radio inputs with an image, but when it is checked I would like to put an icon (image) as if that option is selected. I don't know very well why the before is not shown, but with inspect element, it does remove or put the before.

/* HIDE RADIO */
.radioCat input[type=radio] { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* IMAGE STYLES */
.radioCat input[type=radio] + img {
    cursor: pointer;
}
  
.radioCat img {
    width: 20%;
}
.radioCat input[type=radio]:checked + img:before {
    width: 20px;
    height: 20px;
    bottom: 0px;
    position: absolute;
    right: 245px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Light_green_check.svg/1200px-Light_green_check.svg.png) no-repeat;
    content: "";
}

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


<div class="radioCat">
    <label style="position: relative;">
        <input type="radio" name="test" value="{{ $ico->slug }}" checked>
        <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
    </label>
    
    <label style="position: relative;">
        <input type="radio" name="test" value="{{ $ico->slug }}">
        <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
    </label>
</div>

Hi, I'm trying to make relationships with the tables in Laravel, but despite the fact that I'm understanding them more, I can't do this.

my table tables

My orders table

As you can see, the table ordershas a field called prepared, so the first thing I want to do is get the tables that have an unprepared order, which is = 0. Then, within each table, I want to get the orders that are unprepared but grouped by ticket. , that is, it can print the ticket number as the title, but iterate the products that the ticket has under the title.

To remove the tables that are with an unprepared order, that is to say that they are active, I do the following.

$mesas = Mesas::with('pedidos')->join('orders', 'mesas.id', '=', 'orders.mesa_id')
        ->select('mesas.mesa', 'mesas.id', 'orders.mesa_id', 'orders.tipo_pedido', 'orders.preparado')
        ->groupBy('mesas.mesa', 'mesas.id', 'orders.mesa_id', 'orders.tipo_pedido', 'orders.preparado')
        ->where('orders.preparado', 0)
        ->where('orders.tipo_pedido', 1)->get();

My model Tables

public function pedidos()
{
    return $this->hasMany(Order::class, 'id', 'mesa_id');  
}

then in my sight

@foreach ($mesas as $item)
  <li>
   {{ $item->mesa }}
  </li>
     @foreach ($item->pedidos as $peds)
       <div>{{ $peds->ticket }}</div>
     @endforeach
@endforeach

If I get the tables that are with prepared = 0 but I have to group them so that they are not duplicated, but I can't get the ticket once and below that, iterate the products that that ticket has.

Good evening, I've been doing tests all day and I can't get this to work well for me. In my successajax I want it to print a ticket on a thermal printer, I get it to print but my biggest problem at the moment is that it always makes a minimum height of the ticket, that is, it seems that it does it by pages instead of the height of the div that contains the information. What I need is that when the text ends, it finishes printing.

searching the internet i found this

<div id="seleccion">Este texto es lo que se imprimirá cuando se pulse el enlace.</div>

<a href="javascript:imprSelec('seleccion')" >Imprimir texto</a>

<script language="Javascript">
    function imprSelec(nombre) {
      var ficha = document.getElementById(nombre);
      var ventimp = window.open(' ', 'popimpr');
      ventimp.document.write( ficha.innerHTML );
      ventimp.document.close();
      ventimp.print( );
      ventimp.close();
    }
</script>

If I do it as indicated there, at the moment the text ends, it cuts the paper of the thermal printer.

Ok but I don't want it in a button, I want that when my AJAX response arrives, it prints the ticket. Well if I do the following in my success:

var ficha = document.getElementById('ticketIMP');
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write(ficha.innerHTML);
ventimp.document.close();
ventimp.print( );
ventimp.close();

It seems that the line var ventimp = window.open(' ', 'popimpr');is not supported for ajax responses in browsers. So if I put it when I click the finish order button before the ajax, it does print the ticket but I can't get it to take styles, not even center the image.

I tried another way, that in this case if it takes the styles but instead it doesn't cut the paper when the text is finished, it always does the same height, as if it were printing by pages.

var printContents = document.getElementById("ticketIMP").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();

At the moment, as I can't get it to work, I print ticketIMPthat it is a simple html, once I get it to work, I will mount the ticket with a variable that brings me the products in the cart.

<div class="ticket ticketIMP text-center contenidoOculto col-12" id="ticketIMP" style="align-content: center; text-align: center; width: 200px;">
    <img src="http://ruta/images/logo.png" style="width:140px;";
</div>

My function for when I press finish order

$('.ejecutarEfectivo').on('click', function(e) {
    var zona_id = document.getElementById('zonas').value;
    var pago = $(this).attr("data-id")
    let url = '/pago-efectivo';

    $.ajax({
     headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
     type: "GET",
     url: url,
     data: {
       'carrito' : carrito,
       'total' : total,
       'zona_id' : zona_id,
       'pago' : pago,
     },
     success: function (result){
       $('#modalEfectivo').modal("hide");
                
                //Aquí es donde en un futuro quiero imprimir el contenido de la variable carrito, de momento aquí es donde ejecuto las pruebas de arriba para que me imprima el contenido de `ticketIMP` 

      total = 0;
      carrito= [];
                
      $('#elPedido').empty();
      estado();
      actulizaTotal();
      $("#formEfectivo")[0].reset();

      window.location.hash = '';
    }
   },
      error: function(e) { alert("Error!") }
  });
});

Good morning, I am iterating some records in a view that are the clients, this iteration is already connected to a relationship that in this case takes me all the products that this client has, these products are real estate and have a Province and a Municipality and here it is where I find the problem.

living place

Province

Municipality

Client

So first I iterate my entire customers table

$clientes = Cliente::with('inmuCliente')->get(); //Aquí ya le estoy añadiendo la relación de las propiedades que tiene este cliente con inmuCliente

@foreach ($clientes as $item)  
   ....
   ....
   //Aquí itero las propiedades que tiene el cliente
   @forelse ($item->inmuCliente as $prop)
      <h5>//Aquí tiene que ir la Provincia y el mmunicipio</h5>
   @empty
      <div class="alert alert-warning editalert" role="alert" style="font-size: 13px;">
         No tiene inmuebles
      </div>
  @endforelse
@endforeach

my client model

protected $primaryKey='id'; 
protected $table = 'cliente';

public function inmuCliente()
{
    return $this->hasMany(Vivienda::class, 'cliente_id');
}

So I don't know how to make me put the name of the Province and the Municipality.

Well, as the title says, I'm trying to remove elements that I add to a div with .appendbut I can't.

The .append

$("#elPedido").append('<div class="lineasComanda">\
                         <div class="row" style="margin: 0px;">\
                            <div class="col-2 center" style="padding: 0px;">\
                               <img src="'+ resultProNormal.productNormal.foto +'" alt="" class="imgComanda">\
                            </div>\
                            <div class="col-5" style="padding: 0px;">\
                               <h2>'+ resultProNormal.productNormal.name +'</h2>\
                               <small>Familiar</small>\
                            </div>\
                            <div class="col-1" style="padding: 0px;">\
                                <h5>x1</h5>\
                            </div>\
                            <div class="col-2 txtRight" style="padding: 0px;">\
                                <h5>'+ resultProNormal.productNormal.precio +'€</h5>\
                            </div>\
                            <div class="col-2 center" style="padding: 0px;">\
                                <div class="deleteFila"><a class="delete"><i class="far fa-trash-alt"></i></a></div>\
                                </div>\
                            </div>\
                         </div>');

The function to remove

$("body").on("click",".deleteFila", function(){
  var indice = $(".deleteFila").index(this);
  console.log(indice);
  //carrito.splice(indice, 1);
  $(this).parent(".lineasComanda").remove();
});

If it brings me the console.log(indice)index correctly, that is, the function is working. If, on the contrary, appendI remove all of .div rowthem and colsleave only one div inside of lineasComandait, it eliminates it without problems.

I don't know how to get me to catch all those divs.

Cheers

Edition

I have solved it like this but I don't know if it is right because I don't understand why it works like that.

$(this).closest(".lineasComanda").remove();

Hi, I'm iterating some results of a query with AJAX and I'm doing a forto iterate all the ones there are.

success: function (resultado){
     $.each(resultado , function(index, productos) { 
        for(i = 0; i < productos.length; i++){
           if(idCategoria == 6) {
               $('#zonaProductos').append('<div class="lasCat seleccionProducto center" data-id="'+ productos[i].id +'">\
                   <a href="#'+ productos[i].slug +'" class="abrModal" data-user="'+ productos[i].slug +'" data-toggle="modal" data-target="#'+ productos[i].slug +'" id="#'+ productos[i].slug +'">\
                   <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
                   <h2>'+ productos[i].name +'</h2>\
                   </a>\
                  </div>');
                                

                  $('.seleccionProducto').on('click',function () {
                     var prod = $(this).data("id");
                     var url = '/ficha-producto-pizza';
                     $.ajax({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        type: "GET",
                        url: url,
                        data: {'prod': prod},
                        success: function (elProducto){
                            $('#zonaProductos').append('<div class="modal left modalLat" id="'+ elProducto.producto.slug +'" tabindex="-1"  role="dialog" aria-labelledby="'+ elProducto.producto.slug +'" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5)";>\
                                <div class="modal-dialog myModal" role="document">\
                                    <div class="modal-content">\
                                        <a class="cerrar_modal_lateral"><i class="fas fa-times"></i></a>\
                                           <h2>'+ elProducto.producto.name +'</h2>\
                                        </div>\
                                     </div>\
                                 </div>')
                                },
                             });
                             abreMenu();
                            });   
                        } 
                    }
                });
            },

And then I have the function abreMenu();to display the side modal.

function abreMenu() {
        var menuLateral = true;
        $('.abrModal').click(function(){
            $('.myModal').animate({ width:'640px' });
            menuLateral=false;
        });
        $('.cerrar_modal_lateral').click(function(){
            $('.myModal').animate({ width:'0px' });
            $('.modalLat').modal('hide');//ocultamos el modal
            $('body').removeClass('modal-open');//eliminamos la clase del body para poder hacer scroll
            menuLateral=true;
        });
    };

But what happens is that it iterates two products the first result of the AJAX, that's fine because there are two, but when I press the product to open the modal, I have to press just twice, as if it were the number of cycles there is, then once to open I have clicked twice on each of the two, it already opens the first time, worse if I open it twice, a long delay is generated in the appearance of the modal, surely I am doing many things wrong.

Good morning as always I have problems with relationships. I have three tables and one of them acts as a pivot. What I want to get an iteration of the categories to which the article belongs, in the iteration of articles.

my tablearticles

my tablecategory_blogs

my tableenlaza_categorias

This is the query in my controller:

$noticias = articles::where('destacado', 0)->where('estado', 1)->orderBy('id', 'desc')->paginate(8);

Then I iterate the items in my view

@foreach ($noticias as $item)
.....
<div>
  //Aquí quiero sacar los nombres de la categoría
  @foreach ($item->categorias as $item2)
     <span>{{ $item2->id_category }}</span>
  @endforeach
</div>
.....
@endforeach

Modelarticles

protected $table = 'articles';
    protected $primaryKey='id';

    public function categorias()
    {
        return $this->hasMany('App\EnlazaCategoria', 'id_article');
    }

ModelcategoryBlog

class categoryBlog extends Model
{
    //Lo tengo vacio
}

ModelEnlazaCategoria

protected $table = 'enlaza_categorias';
    protected $primaryKey='id';

    public function categorias()
    {
        return $this->belongsTo('App\categoryBlog', 'id');
    }

Good, finally the last carousel of the web. This in this case is a timeline but personalized, I have used this library and this example .

I show you the code:

    /*** Timeline Carousel ***/
$('.desktop-owl.timeline').owlCarousel({
    loop: false,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center:false,
    margin:10,
    responsive:{
      0:{
        items:1
      },
      550: {
        items:2
      },
      900:{
        items:3
      },
      1000:{
        items:3
      }
    }
  });
  
  function matchTimelineHeight() {
    /* Add in the height placeholders for the images first */
    var imageHeights = [];
    $('.timeline-container .owl-carousel .owl-item img').each(function() {
      imageHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, imageHeights);
    $('.timeline-container .owl-carousel .owl-item .timeline-image').css("min-height", tallest);
  
    /* Now match heights with the placeholders added */
    var slideHeights = [];
    $('.timeline-container .owl-carousel .owl-item').each(function() {
      slideHeights.push($(this).height());
    });
    var tallest = Math.max.apply(null, slideHeights);
    $('.timeline-container .owl-carousel .owl-item').height(tallest);
    $('.timeline-container .owl-carousel .timeline-slide').css("min-height", tallest);
  }
matchTimelineHeight();
  
  /*** Newsfeed ***/
  $('.desktop-owl').owlCarousel({
    loop: true,
    pagination: true,
    paginationNumbers: false,
    nav:true,
    center: false,
    responsive:{
      0:{
        items:1
      }
    }
  });

.body {
margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #212226;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}
.timeline-container {
    margin-top:30px;
    padding: 10px 80px 30px;
    position: absolute;
    bottom: 0px;
    width: 100%
}
.timeline-container {
    margin-top:0px;
    border-top: 1px #eeeeee solid;
}


.owl-nav {
    position: absolute;
    top: 60px;
    width: 89%;
    left: 83px;
}
/*owl carousel styles*/
.owl-carousel .owl-dots .owl-dot {
    background: #fff;
    border:solid;
    border-width:1px;
    border-color: #bfbfbf;
}
.owl-carousel .owl-dots .owl-dot.active {
    background:#417638;
}

.owl-carousel.owl-loaded {
    display: block;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translate3d(0px, 0, 0);
}
.owl-stage-outer {
    top: -16px;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/*timeline slider styles*/
.timeline-slide {
    max-width: 350px;
    margin: 2.2rem 0 0 0;
    width: 100%;
    background-color: inherit;
    position: relative;
}
.timeline-slide .circle {
    border: 4px #eae100 solid;
    background-color: #e0d806;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-redius: 50%;
    height: 16px;
    width: 16px;
    position: absolute;
    left: 51.6%;
    margin-left: -15px;
    top: -33px;
    z-index: 2000;
    overflow: visible;
}
.timeline-copy {
    font-size: 0.7em;
    color: #fff;
    background-color: inherit;
    margin: 1rem;
    padding-bottom: 5px;
    border: solid 1px #fff;
}
.timeline-slide .vertical-line {
    border-left: 1px #eeeeee solid;
    height: 18px;
    position: absolute;
    left: 50%;
    margin-left: -2.5px;
    top: -18px;
    z-index: 1000;
}
.timeline-slide .timeline-copy h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0px;
}
.timeline-slide .timeline-copy {
    padding: 1rem 0.5rem;
    color: #000;
    text-align: center;
}
.timeline-slide .timeline-copy p {
    margin-bottom: 0px;
    font-size: 13px;
    margin-top: 11px;
    padding: 0px 17px;
}
.timeline-container {
  margin-top:20px;
  padding-top:6px;
}
.timeline-container .owl-stage {
    margin-left:18px;
}
.owl-carousel .owl-dots .owl-dot {
    width: 15px;
    height: 15px;
    background: #e6c996;
    border-radius: 100%;
    display: inline-block;
    margin: 0 5px;
}
.owl-carousel .owl-dots {
    text-align: center;
    margin-top:1em;
    display: none;
}
.owl-carousel .owl-nav .owl-prev {
   width: 55px;
    height: 36px;
    background: url(https://cdn2.iconfinder.com/data/icons/font-awesome/1792/angle-left-512.png) no-repeat center;
    border: solid transparent;
    position: relative;
    left: -14px;
    background-size: cover;
}
.owl-carousel .owl-nav .owl-next {
        width: 36px;
    height: 35px;
    background: url(https://cdn.iconscout.com/icon/free/png-256/chevron-thin-right-1859438-1577834.png) no-repeat center;
    border: solid transparent;
    position: absolute;
    right: 0px;
    background-size: cover;
}
.owl-prev span {
  display:none;
}
.owl-next span {
  display:none;
}
/* .owl-prev, .owl-next {
  
} */

button:focus {outline:0;}

@media screen and (max-width: 560px) {
  .timeline-slide {
    margin-top: 4.2rem;
    margin-left: 3.5rem;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<section class="normalDay opcidadNormaDay" id="modulNormal">

   <!-- <div class="barraNormal"></div>-->
   <div class="timeline-container">
        <div class="clearfix desktop-carousel desktop-owl timeline owl-carousel">
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>09:00 - 13:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>13:00 - 16:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
            <div class="timeline-slide">
                <div class="circle"></div>
                <div class="vertical-line"></div>
                <div class="timeline-copy">
                    <h3>16:00 - 18:00</h3>
                    <p>Preparatory phase with mobility and flexibility exercises, muscle pre-activation protocol and warm-up.</p>
                </div>
            </div>
        </div>
    </div>
</section>

To give you an idea, what I'm looking for is exactly this:

If you realize what makes marking the one you are seeing (the circle) comes out in yellow and the others in gray, then the only text box that is seen is the one you are seeing, the others only see the time and the idea It is as you give it right or left it moves and shows a box and around the hours.

I hope I have explained myself well, is it possible what I say in this way?

Good evening, I am trying to make a query of different connection tables, I have a connection that is the usual one called mysqland I have created another called apolo, I need to do a join with both.

$usuarios = DB::connection('apolo')->table('users')
                    ->join('clientes AS client', 'users.intranet_id', '=', 'client.id')
                    ->select('users.*', 'client.name')
                    ->get();

As you can see I connect to the connection of apoloand I want to do a join with my table of clients of my usual connection mysqlthat I am doing wrong, I have done it like this many times without problem, I don't know what I am doing wrong.

Cheers

It throws me this error:

Base table or view not found: 1146 Table 'apolo2021.clientes' doesn't exist

You are looking for the customers table in the database which is not.

Edition

I'm trying like this but either, I don't know if it's because there is a table in both databases users.

$prueba = DB::Connection('apolo')
             ->table('users')
             ->join(DB::Connection('mysql'))                       
             ->table('clientes', 'users.intranet_id', '=', 'clientes.id')
             ->get();
             dd($prueba);

But it returns me this error:

Too few arguments to function Illuminate\Database\Query\Builder::join(), 1 passed in

Good afternoon and I hope you are all well. I am in a new project and I have to create a slider with dates, to show the customer journey. I have used the bootstrap 4 slider as a template and from there I have started to build, but I have only managed to get the back and next buttons to work and use the dots that are now dates.

The idea is that the dates are used as the typical dots of the slider, and as they go down or up, the following dates appear, taking into account that it will go from 1996 to 2021, I hope to explain myself well, in addition to the fact that when the date changes put the activatein the date you mark.

What I am saying can be done, as I am building it? Thanks.

$('#atras').click(function() {
    $('#myCarousel').carousel('prev');
});

$('#siguiente').click(function() {
    $('#myCarousel').carousel('next');
});

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #212226;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
}
h1{font-family: 'Montserrat', sans-serif;}
h2{font-family: 'Montserrat', sans-serif;}
h3{font-family: 'Montserrat', sans-serif;}
h4{font-family: 'Montserrat', sans-serif;}
h5{font-family: 'Montserrat', sans-serif;}
h6{font-family: 'Montserrat', sans-serif;}

.imgSlider {
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
width: 100%;
height: 100%;
}
.barra-carrousel {
    height: 100vh;
    width: 1px;
    position: absolute;
    background: #fff;
    z-index: 1;
    right: 19%;
}
.fechas {
    position: absolute;
    left: 101%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 99%;
}
.fechas .posicion {
    width: 70px;
    position: relative;
    left: 20px;
}
.posicion li {
    color: #fff!important;
    font-size: 25px;
    font-weight: 700;
    line-height: 60px;
    position: relative;
    cursor: pointer;
}
.posicion li:hover {
    color: #EAE200!important;
}
.posicion .activate {
    color: #EAE200!important;
}
.indicatorsMios {
    padding: 0px;
}
.indicatorsMios li {
    list-style: none;
}
.activate:before {
    width: 15px;
    height: 15px;
    background: #eae100;
    z-index: 1;
    content: '';
    position: absolute;
    left: -59%;
    right: 0;
    border-radius: 100%;
    top: 7px;
}
.posBannerCareer {
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    width: 72%;
}
.posBannerCareer h2 {
    font-size: 8rem;
    font-weight: 700;
    margin-bottom: 0px;
}
.posBannerCareer p {
    font-size: 20px;
    font-weight: 500;
    position: relative;
    left: 36px;
}
.barraCareer {
    width: 20%;
    height: 2px;
    background: #eae100;
    position: relative;
    left: 9px;
    display: inline-block;
}
.myLife {
    display: inline-block;
    font-size: 24px;
    vertical-align: top;
    margin-left: 14px;
    font-weight: 500;
}
.posCareer {
    position: relative;
    top: -14%;
}
.sectionCareer {
    background: url(../images/career/CAREER-09.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100vh;
    padding: 0px;
}
.flechaCareer {
    position: absolute;
    right: 52px;
    bottom: 38px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-interval="false">
    
        <div class="barra-carrousel">
            <div class="fechas">
                <div class="center posicion">
                 <div>
                   <a id="atras"><i class="fas fa-chevron-up"></i></a>
                 </div>
                   <ol class="indicatorsMios">
                     <li data-target="#myCarousel" data-slide-to="0" class="activate">1996</li>
                     <li data-target="#myCarousel" data-slide-to="1">1997</li>
                     <li data-target="#myCarousel" data-slide-to="2">1998</li>
                     <li data-target="#myCarousel" data-slide-to="3">1999</li>
                     <li data-target="#myCarousel" data-slide-to="4">2000</li>
                     <li data-target="#myCarousel" data-slide-to="5">2001</li>
                   </ol>
                <div>
                <a id="siguiente"><i class="fas fa-chevron-down"></i></a>
            </div>
        </div>           
    </div>
</div>
        


        <div class="carousel-item active">
            <img class="imgSlider" src="https://images5.alphacoders.com/317/thumb-1920-317664.jpg" alt="First slide">
            <div class="posBannerCareer">
                <div class="row">
                    <div class="col-6">
                        <div class="posCareer">
                            <h2>Career</h2>
                            <div class="barraCareer"></div>
                            <div class="myLife">My life in Formula One</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <p>Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of.</p>
                        <p>type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged! It has survived not only five centuries industrys standard dummy text ever since the 1500s</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img class="imgSlider" src="https://images5.alphacoders.com/317/thumb-1920-317664.jpg" alt="First slide">
            <div class="posBannerCareer">
                <div class="row">
                    <div class="col-6">
                        <div class="posCareer">
                            <h2>Career</h2>
                            <div class="barraCareer"></div>
                            <div class="myLife">My life in Formula One2</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <p>Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of.</p>
                        <p>type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged! It has survived not only five centuries industrys standard dummy text ever since the 1500s</p
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

In this case I have been able to make the forward and back arrows work, even if you hit 1996 or 1997 it makes me change the slider, the other dates do not work because there really is no more slider, but the idea is that the yellow ball changes to the one that is active, and for example only show 6 dates in the bar and as you go forward or backward, more or less dates appear, is this possible?

Good afternoon, I'm iterating the records of a database in charts.js charts . I take a created field that is called fecha_contactosince it is a database of clients of a company and they may want to add clients with a contact date different from that of created_at.

I manage it as follows:

$result = [];
$fecha = new DateTime("now");
$fecha->modify('first day');
$fecha->modify('-11 months');
  for ($i = 0; $i < 12; $i++) {
   $result[$fecha->format('Y-M')] = 0;
     $fecha->modify('+1 month');
  }

$data = Cliente::select(DB::raw('count(*) as total, fecha_contacto'))->where('marca', 0)->whereIn('tipo_cliente', [0, 3])->groupBy('fecha_contacto')->get();

  foreach($data as $t) {
    $fechas = date('Y-M', strtotime($t->fecha_contacto));
    if (isset($result[$fechas]) === true) {
     $result[$fechas] += $t->total;
    } else {
     $result[$fechas] = $t->total;
   }
  }

return view('clientesPotenciales')->with(["result" => $result]);

Until today I thought it worked fine, but today they have inserted clients who contacted them in 2017 and now it puts January 2017 in front of April 2021 in the graphs. I attached a photo to make it clearer.

What am I doing wrong? In theory, I'm pulling records for the last 12 months, right?

This is what I receive for php at a glance: Actually I send three different queries, but I put only one since they are the same but with different parameters.

array:13 [▼
  "2020-May" => 0
  "2020-Jun" => 22
  "2020-Jul" => 12
  "2020-Aug" => 14
  "2020-Sep" => 19
  "2020-Oct" => 15
  "2020-Nov" => 15
  "2020-Dec" => 4
  "2021-Jan" => 13
  "2021-Feb" => 9
  "2021-Mar" => 1
  "2021-Apr" => 2
  "2017-Jan" => 1
]

As you can see it puts me "2017-Jan" => 1in last position, I don't understand why.

Then in the view:

<div class="card" style="padding-bottom: 0px;padding-top: 0px;">
   <canvas id="clientes"></canvas>
</div>

And the JavaScript:

<script>
        var ctx = document.getElementById('clientes').getContext('2d');
        var clientes = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_keys($result)) !!},
            datasets: [{
                label: 'Depildiodo',
                data: {!! json_encode(array_values($result)) !!},
                backgroundColor: "rgb(85 51 255 / 48%)",
                borderColor: "#53f",
                borderWidth: 1,
                hoverBackgroundColor: "#53f",
                hoverBorderColor: "#53f",
                fill: false,
                pointBorderWidth: 1
            }]
        },
        plugins: [{
            beforeInit: function(chart, options) {
              chart.legend.afterFit = function() {
                this.height = this.height + 30;
              };
            }
        }],
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [
                    {
                    ticks: {
                        fontColor: "#adb0b5",
                        beginAtZero: true,
                        maxTicksLimit: 4,
                        padding: 20
                    },
                    gridLines: {
                        display: true,
                        color: "rgb(173 176 181 / 14%)"
                      }
                    }
                ],
                xAxes: [
                    {
                    ticks: {
                        padding: 20,
                        fontColor: "#adb0b5",
                    },
                    gridLines: {
                        display: true,
                        color: "rgb(173 176 181 / 14%)"
                        }
                    }
                ]
            },
            tooltips: {
                callbacks: {
                    labelColor: function(tooltipItem, chart) {
                        return {
                            borderColor: '#ccc',
                            backgroundColor: '#ccc'
                        };
                    },
                    labelTextColor: function(tooltipItem, chart) {
                        return '#fff';
                    }
                }
            },
            legend: {
                display: true,
                    
                labels: {
                    fontColor: '#a1aab2',
                    padding: 20,
                }
            }
            
        }
    });
  </script>

Hi, good afternoon. Some time ago I did something similar but now it doesn't seem to work. I have two Laravel 5.8 projects. One is the web and the other is an Intranet from where I control various projects. So from the Intranet is where I insert news into the web project database. What I did was once I have my symbolic link on my intranet, I share it with the second project so that it can use them.

ln -s /var/www/intraPruebas/storage /var/www/Depildiodo/public/storage

This is the command I use in the terminal, and when I enter it cd/Depildiodo/public/storage/I enter without problems. The problem is on the web that returns me error 404when loading images.

In the file .conf:

'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

And in the view I print the images like this, as I have been doing normally:

background: url('{{ asset("{$item->foto}") }}

The route that returns the error is the following:

https://domino.com/storage/photos/1/Blog/blog3.jpg

What am I doing wrong? Some time ago I did it with the help of a colleague here, but now I can't find the solution

Hello good afternoon and happy Sunday. As always I have problems between relationships with tables.

My users table

My clients table

my message table

As you can see I have a table with the clients, and a relation to get the messages that I leave in each client, there can be several in the same client. But as you can see in the message table I have a field called admin_idthat is where the administrator inserts the message. So I get the messages with relationships great, I get the messages that a client has without any problem, the problem is getting the photo of the administrator that is in the table users...

Client Model

class Cliente extends Model
{
    //Aquí me conecto a los mensajes del cliente//
    public function mensajes()
    {
        return $this->hasMany('App\Mensaje', 'cliente_id');
    }
    
}

Model Message

class Mensaje extends Model
{
    protected $table = 'mensajes';
    protected $primaryKey='id';

    //Aquí la relación con el cliente//
    public function cliente()
    {
        return $this->belongsTo('App\Cliente', 'id');
    }
    //Aquí intento que saque la foto//
    public function user()
    {
        return $this->hasOne('App\User', 'id');
    }
}

Model User

protected $table = 'users';
protected $primaryKey='id';


public function mensaje()
{
    return $this->belongsTo('App\Mensaje', 'admin_id');
}

That is, a client can have many messages, and the message corresponds to a client and an administrator.

Once I iterate the clients, I iterate the messages like this:

@foreach ($clie->mensajes as $item){

@endforeach

That returns me this:

#original: array:7 [▼
        "id" => 25
        "cliente_id" => 310
        "mensaje" => "mensaje"
        "admin_id" => 10
        "fecha" => "01/03/2021"
        "created_at" => "2021-03-01 11:32:17"
        "updated_at" => "2021-03-01 11:32:17"
      ]

How can I get the photo of the administrator and his name??? Thank you...

The query in the Controller to pull the clients:

$clientes = Cliente::join('tecnologias', 'clientes.interes', '=', 
'tecnologias.id')
->join('interes', 'clientes.interesCliente', '=', 'interes.id')
->select('clientes.*', 'tecnologias.name AS nombreEquipo', 'interes.name as nameInteres', 'interes.fondo', 'interes.color')
->whereIn('clientes.tipo_cliente', [0, 3])->get();

With that I show the clients in a table, then I iterate a modal for each one to see the messages.

Iteration test with @BetaM's answer

@foreach ($clie->mensajesDeUsuarios as $item)
   <div>{{ $item->name }}</div>
     @foreach ($item->pivot as $item2)
        <div class="stiloMensaje">{{ $item2->mensaje }}
          <div class="metadata">
           <span class="time"></span>
          </div>
        </div>
     @endforeach
@endforeach

Also in the message table there is a field fecha que es de donde saco la fecha de publicación del mensaje. From what I saw in the models you created you do this:

(Cliente::class, 'mensajes', 'admin_id', 'cliente_id')
(User::class, 'mensajes', 'cliente_id', 'admin_id')

I added the field there fechabut it seems that the relationship no longer exists.

**The error of not being able to iterate the messages, is because it is already iterating, mensajesDeUsuariosso it is enough to access {{ $item->pivot->mensaje }}and it already iterates the messages correctly. There was no need to iterate twice, well 3 if you count the one you iterate to the client.

I have a news page where I pull all the information from the Database. I print the title with a {{ $item->titulo }}without any problem. The problem comes to me when I put the description, when using textareathe TinyMCE in the database, it saves it in the following way, <p>La idea de <strong>High As</strong> naci&oacute; donde ....so to show it on the page I do like this:

@php echo  Str::limit($item->cuerpo, 150) @endphp

In this way it does not remove them <p>and formats the text well. But the problem comes to me that in those 150 characters if it catches a <b>in the middle, it destroys the following iterations of the news and puts everything in <b>.

Any suggestion??

I have developed a website with PHP, MySQL, CSS, Javascript and HTML. The problem that I find is that when you make the pages dynamic, the URLs are usually like this:

/tests.php?ID=2
/panel.php?ID=7&GENERO=2
/specifies.php?ID=326&GENERO=2&CATEGORY=7

And of course, all this does not like google very much.

I wanted to know if it is possible to remove the extensions .phpand create friendly urls.

I use an NGINX server .

My .conf file that loads the web:

server {
 listen 8360;
 listen [::]:8360;

 root /var/www/laboratorio/;

 # Add index.php to the list if you are using PHP
 index index.html index.htm index.nginx-debian.html index.php;

 server_name 82.223.13.57;

 location ~* \.(jpg|jpeg|png|gif|ico|svg)$ { expires 365d; } location ~* \.(css|js|pdf)$ { expires 30d; }

 location ~ ^/.well-known {
    allow all;
 }

 location / {
 # First attempt to serve request as file, then
 # as directory, then fall back to displaying a 404.
 try_files $uri $uri/ =404;
 error_page 405 = $uri;
 }

 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
 #
 location ~ \.php$ {
 include snippets/fastcgi-php.conf;

 fastcgi_pass unix:/run/php/php7.2-fpm.sock;
 }

 # deny access to .htaccess files, if Apache's document root
 # concurs with nginx's one
 location ~ /\.ht {
  deny all;
 }
}

I've created a blog from scratch and now I'm making them share the news on both Facebook and Twitter.

It is something that I did some time ago in a project and it worked for me , but in this new page that I have set up (on a new server) it does not load neither the image nor the text of the news in what it shares.

I understand that with this code I load the image and the text that the news carries:

<meta property="og:title" content="<?php echo $res['titulo']; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://depildiodo.com/ver-noticia.php?ID=<?php echo $idnot; ?>"/>
<meta property="og:image" content="https://www.depildiodo.com/images/noticias/<?php echo $res['foto']; ?>" />
<meta property="og:description" content="<?php echo $subject; ?>" />

I have this script for the share buttons to do their job:

  $(document).on('click', ".shared", function() {
    var url = window.location.href;
    var title = document.title;

    url = encodeURIComponent(url);
    title = encodeURIComponent(title);

    //Boton Facebook
    if($(this).hasClass('fb')){
      url = 'https://www.facebook.com/sharer/sharer.php?u='+url+'&t='+title;
      window.open(url, '_blank');

    //Boton Twitter
    }else if($(this).hasClass('tt')){
      user = 'Depildiodo';//Nuestro usuario de twitter para mostrar como @user
      url = 'https://twitter.com/intent/tweet?text='+title+'&url='+url+'&via='+user;

      window.open(url, '_blank');

    //Boton WhtsApp
    }else if($(this).hasClass('wa')){
      url = 'whatsapp://send?text="'+document.title+'" - "'+window.location.href+'"';

    //Boton correo electronico
    }else if($(this).hasClass('ce')){
      url = 'mailto:?subject='+title+'&body='+url;


    //Ningun boton valido
    }else return;

    //Abrimos la url

  });

This is the Facebook button:

<div class="shared-panel">
  <a target="_blank" class="shared fb" title="Facebook"></a>
  <a target="_blank" class="shared tt" title="Twitter"></a>
  <a  data-action='share/whatsapp/share' class="shared wa" title="WhatsApp"></a>
  <a class="shared ce" id="sml" title="Email"></a>
</div>

Hi, I'm making a function with scroll.

When the scroll goes down 150 I show a banner at the bottom and when I go up the scroll to the top it hides again.

$(function() {
  // esta parte es la que controla cuando se mueve el scroll y ejecuta una función
  $(document).scroll(function() {
    // aca se pregunta si el scroll se movio de pa bajo.
    if ($(this).scrollTop() < 150) {
      // esta parte cambia el atributo "src" de la etiqueta "img"
      $('.barraTella').css("bottom","-200px");
      $('.barraTella').css("transition","1s");
    }
    if ($(this).scrollTop() > 150) {
      $('.barraTella').css("bottom","0px");
      $('.barraTella').css("transition","1s");
    }
  });
});

But I also added a button to be able to close that banner.

$( "#closeLlama" ).click(function() {
    $('#barraTella').css("bottom","-200px");
    $('#barraTella').css("transition","1s");
  });

The problem is that, if I close it, and I scroll again, it is shown again.

What I need is: that until I go back up all the way and do those 150 down again, it doesn't show up again.

Any suggestion?

I have a foreach where it takes out a kind of CARDS with the token of a center, this token carries the ID="port"to be able to locate it by JavaSCript. The problem is that they are called with the same id and if I go to the first one the others move, but if I go to the second, or third for example, it does nothing.

I guess you have to create a kind of cycle, but automatic, since many records will be created and I can't modify the JS every time a new record is added.

QUERY

<?php
 $results = $mysqli->query("SELECT * FROM centros WHERE estado = 1");
   foreach ($results as $centros){
?>

 <div id="port" class="portfolio valencia center" data-cat="valencia">
    <?php if ($centros['logo']== null) {
       echo "<img src=\"images/centros/cut.svg\" class=\"imgCentro1\">";
       }else {
       echo "<img src=\"images/centros/$logo\"  class=\"imgCentro1\">";
       } ?>
 </div>

<?php } ?>

JAVASCRIPT

  $( "#port" ).mouseenter(function() {
    $('.imgCentro1').css("transform"," rotate(-45deg)");
    $('.imgCentro1').css("transition","1s");
  });
  $( "#port" ).mouseleave(function() {
    $('.imgCentro1').css("transform"," rotate(0deg)");
    $('.imgCentro1').css("transition","1s");
  });

I have done mysql installation with sudo apt-get install mysql-server. By ssh yes I can enter but by navicat it won't let me.

Can someone help me with Mysql configuration? because I do everything I think is necessary, but through ssh I do connect but not through navicat (for example).

I have the need to get the first word of a data from the table. I have searched for information but I only see to get the characters you want.

<?php
    $usuario = $_SESSION['username'];
    $pass = $_SESSION['password'];

    $results = $mysqli->query("SELECT Nombre, SUBSTRING(Nombre, 1,20) AS palabra, 
                              IdUsuario, Username, Password 
                              FROM Usuarios 
                              WHERE Username='$usuario' AND Password ='$pass'");
    mysqli_set_charset("utf8");
    if($res = $results->fetch_array()) {}

    ?>

For example, in column Nombre, the record contains Nombre Apellido 2Apellido. I need to extract the Nombre.