Ir para conteúdo

washalbano

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    369

  • Registro em

  • Última visita

  • Dias vencidos

    11

Posts postados por washalbano

  2. Postado

    Olá!
    Percebi que seu sistema não define rotas, mas sim executa e sai exit() da execução.

    Dessa forma, sempre será executada apenas e somente a primeira rota.
    Acredito que precisar efetuar 2 procedimentos:

    1) definir as rotas

    2) executar a rota, conforme a REQUEST_URI atual

  5. Postado

     

    Olá!
    Segue sugestão:

    js 

    function Carrega() {
  const fileInput = document.getElementById("arquivo");
  const fData = new FormData();
  for (file of fileInput.files) {
    fData.append('arquivo[]', file);
  }


  $.ajax({
    url: "upload.php",
    method: "POST",
    data: fData,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function () {
      $('#respimg').html("Enviando...");
    },
    success: function (data) {
      $('#msgret').html(data);
    }
  });
}

    php 

    if (isset($_FILES['arquivo'])) {
  for ($i = 0; $i < count($_FILES['arquivo']['name']); $i++) {

    $nomeArquivo    = $_FILES['arquivo']['name'][$i];
    $tamanhoArquivo = $_FILES['arquivo']['size'][$i];
    $nomeTemporario = $_FILES['arquivo']['tmp_name'][$i];

    echo "<pre>Arquivo <b>$i</b>: ";
    print_r([$nomeArquivo, $tamanhoArquivo, $nomeTemporario]);
    echo '</pre>';

  }
}

     

     

  8. Postado

    Imagine que as fotos estão dentro de um container com barra de rolagem oculta
    e ao clicar em prev/next o container será movido Xpx pra esquerda ou para a direita.
    segue sugestão:
      

    <div class="slider">
  <div class="images-container">
    <figure class='active'><img src="https://picsum.photos/400/300?random=1" /></figure>
    <figure><img src="https://picsum.photos/400/300?random=2" /></figure>
    <figure><img src="https://picsum.photos/400/300?random=3" /></figure>
    <figure><img src="https://picsum.photos/400/300?random=4" /></figure>
    <figure><img src="https://picsum.photos/400/300?random=5" /></figure>
  </div>
  <div class="controllers">
    <button id='prev'>&#10094;</button>
    <button id='next'>&#10095;</button>
  </div>
</div>
<div class="log">
  <p></p>
</div>

      

    * {
  box-sizing: border-box;
}

.slider {
  overflow-x: hidden;
  position: relative;
}
.slider .images-container {
  display: flex;
  position: relative;
  width: 100%;
  transition: all 0.2s ease;
}

.slider figure {
  display: flex;
  margin: 0;
  min-width: 100%;
  justify-content: center;
}

.slider .controllers {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.log {
  display: flex;
}
.log > p {
  font-family: monospace;
  white-space: pre;
  margin: 12px;
  padding: 12px;
  border-left: thin solid #eee;
}

      

    const log = document.querySelector("div.log");
const slider = document.querySelector("div.slider");
const imagesContainer = slider.querySelector(".images-container");
const figuresCollection = [...imagesContainer.children];
let activeFigure;
let activeIndex;
let figureWidth;

const setImagesContainerPosition = () => {
  console.log("activeIndex :>> ", activeIndex);
  imagesContainer.style.transform = `translateX(-${
    activeIndex * activeFigure.offsetWidth
  }px)`;
};

const moveSlider = (direction) => {
  // select active figure
  activeFigure = slider.querySelector("figure.active");

  // detect index of active figure
  const prevIndex = figuresCollection.indexOf(activeFigure);

  activeIndex =
    (direction === "right"
      ? prevIndex + 1
      : prevIndex - 1 + figuresCollection.length) % figuresCollection.length;

  setImagesContainerPosition();

  // remove active from
  activeFigure.classList.remove("active");
  figuresCollection[activeIndex].classList.add("active");

  log.querySelector("p").innerHTML = JSON.stringify(
    { prevIndex, activeIndex },
    null,
    2
  );
};

next.onclick = () => {
  moveSlider("right");
};
prev.onclick = () => {
  moveSlider("left");
};

window.onresize = setImagesContainerPosition;

    veja exemplo rodando aqui:
    https://codepen.io/washalbano/pen/ExrKGYZ

  9. Postado 

    <style>
  *{
    font-family: sans-serif;
  }
</style>
<?php

// SCRIPT PARA CALCULAR QUANTAS PLACAS DE Xm² cabem num espaço de Ym²
// e quantas placas adicionais serão necessárias para cobrir o espaço restante, se existir

// plate's size in m²
$platesSize = 5;

// total area to cover in m²
$totalArea = 171;

// calc how many complete plates are needed to cover the area
$completePlatesNeeded = floor($totalArea / $platesSize);

// calc uncovered area
$uncoveredAreaSize = $totalArea % $platesSize;

echo "<p>Área total: <b>{$totalArea}m²</b></p>";
echo "<p>Tamanho de cada placa: <b>{$platesSize}m²</b></p>";
echo "<p>Placas completas necessárias: <b>{$completePlatesNeeded}</b></p>";
echo "<p>Área restante não coberta: <b>{$uncoveredAreaSize}m²</b></p>";

// if unvered area exists, calculate how many plates are needed
if ($uncoveredAreaSize > 0) {
  $adicionalPlatesNeeded = ceil($uncoveredAreaSize / $platesSize);
  echo "<p>Placas adicionais necessárias: <b>{$adicionalPlatesNeeded}</b></p>";
}

    4VmxNJvcTCOx3yTuVnj_6Q.png

     

  10. Postado

    Olá!
    Não fui capaz de entender a questão
     

    On 10/15/2023 at 3:51 PM, gersonab said:

    if ($metros > 5 && $metros <= 10){

    Nesse if, não vai ser considerado o 5, apenas os 6, 7, 8, 9 e 10
    e 6, 7, 8, e 9, não são múltiplos de 5

    Consegue descrever melhor o que precisa ser feito?

  11. Postado

    Olá!
    Segue sugestão:
    VzphdVAASGCvAvx4Tlathw.png

     

    index.php 

    <?php
$ids = [
  'asdf-1234',
  '4312-fasdf',
  '1zxc-3asd',
];
$links = '';
foreach ($ids as $id) {
  $links .= "<a href='pagina.php?id={$id}'> pagina {$id} </a>";
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax Loading HTML</title>
  <style>
    body{
      background-color: #eee;
    }
    nav{
      display: flex;
    }
    nav a{
      padding:12px;
    }
    #conteudo{
      border:thin solid goldenrod;
      border-radius:8px;
      background-color: #fff;
      padding:12px;
      box-shadow:1px 1px 5px rgba(0,0,0,.2);
    }
  </style>
</head>
<body>
<nav><?=$links?></nav>
<main>
  <h3>Conteúdo:</h3>
<div id="conteudo"></div>
</main>

<script>

const anchors = document.querySelectorAll('nav a');

const ajaxLoadHTML = async (e)=>{
  e.preventDefault();
  const link = e.target.getAttribute('href')
  const response = await fetch(`api/${link}`).then(response=>response.text())
  conteudo.innerHTML = response
}

for(const anchor of anchors){
  anchor.addEventListener('click', ajaxLoadHTML)
}
</script>

</body>
</html>

    api/pagina.php
      

    <?php

echo '<pre>Conteúdo da página com id: ';
print_r($_GET);
echo '</pre>';
exit(__FILE__.' at line: '.__LINE__);

    iyLHa-8iTBi6DXyhzb4Wog.png

     

     

  12. Postado

    1 hour ago, clovis.sardinha said:

    const resposta = (await dados).json;

    tente assim:  

    const resposta = await dados.json();

    A função carregar_cidade, não coloca a <ul> criada em lugar algum da página atual.

     

    Um controller que vai devolver um json, não precisa carregar uma view.

    Se estiver extendendo do BaseController, use o $response que ele inicia, assim: 

    return $this->response->setStatusCode(200)
  ->setContentType('application/json')
  ->setJSON($seu_array_de_dados);

     

  13. Postado

    17 minutes ago, gersonab said:

    $valorparcelado = $valent / $parcpg;

    Coloque uma condição para verificar se $parcpg é maior que zero
    Se não for, qual deve ser o valor de $valorparcelado?

    $valorparcelado = $parcpg > 0 ? $valente / $parcpg : $oValorQueDeveSer;

  14. Postado

    Olá!
    Se entendi... não precisa repetir os trechos de js
    Veja se era isso:
      

      <div class="slider-kind first">
    <div class="images-container">
      <a href="link5.php" target="_blank"><img src="https://picsum.photos/600/300?random=1" /></a>
      <a href="link6.php" target="_blank"><img src="https://picsum.photos/600/300?random=2" /></a>
      <a href="link7.php" target="_blank"><img src="https://picsum.photos/600/300?random=3" /></a>
      <a href="link8.php" target="_blank"><img src="https://picsum.photos/600/300?random=4" /></a>
    </div>
  </div>

  <div class="slider-kind second">
    <div class="images-container">
      <a href="link1.php" target="_blank"><img src="https://picsum.photos/400/200?random=5" /></a>
      <a href="link2.php" target="_blank"><img src="https://picsum.photos/400/200?random=6" /></a>
      <a href="link3.php" target="_blank"><img src="https://picsum.photos/400/200?random=7" /></a>
      <a href="link4.php" target="_blank"><img src="https://picsum.photos/400/200?random=8" /></a>
    </div>
  </div>

  <div class="slider-kind third">
    <div class="images-container">
      <a href="link1.php" target="_blank"><img src="https://picsum.photos/700/200?random=9" /></a>
      <a href="link2.php" target="_blank"><img src="https://picsum.photos/700/200?random=10" /></a>
      <a href="link3.php" target="_blank"><img src="https://picsum.photos/700/200?random=11" /></a>
      <a href="link4.php" target="_blank"><img src="https://picsum.photos/700/200?random=12" /></a>
    </div>
  </div>
    .slider-kind {
  display: flex;
  justify-content: center;
  height: 300px;
}

.slider-kind.second {
  height: 200px;
}

.slider-kind .images-container img {
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
  transition: all 0.2s ease;
  opacity: 0;
}
.slider-kind .images-container img[active] {
  z-index: 2;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
    function setActiveSlide(container) {
  const images = container.querySelectorAll('img')

  const removeActiveAttribute = () => images.forEach(image => image.removeAttribute('active'))

  const toggleSlide = indexImageToActivate => {
    removeActiveAttribute()
    images[indexImageToActivate].setAttribute('active', true)
  }

  const indexActive = Math.floor(Math.random() * images.length)

  toggleSlide(indexActive)
}

function makeSliderKind(selector, intervalTime) {
  const imagesContainer = document.querySelector(selector)
  let intervalRef = setInterval(() => setActiveSlide(imagesContainer), intervalTime)
}

makeSliderKind('.first', 1500)
makeSliderKind('.second', 2500)
makeSliderKind('.third', 500)

    https://codepen.io/washalbano/pen/VwqxMvw

  17. Postado

    Não precisa gerar um arquivo .json
    Apenas devolver o array com o resuldado do database, em formato json.

      

    <?php
// treat this as json
header('Content-Type: application/json');
// handle the request
if (!isset($_GET['category']) || !preg_match('/^[A-Z]$/', $_GET['category'])) {
  // clear the old headers
  header_remove();
  // set the actual http response code
  http_response_code(404); // ok, validation error, or failure
  header('Status: 404 Not Found');
  exit();
}
// consider this is a database
$database = [
  'A' => [
    [
      'id' => 'A-123',
      'name' => 'Produtc 01 from Category A'
    ],
    [
      'id' => 'A-234',
      'name' => 'Produtc 02 from Category A'
    ],
    [
      'id' => 'A-345',
      'name' => 'Produtc 03 from Category A'
    ],
    [
      'id' => 'A-456',
      'name' => 'Produtc 04 from Category A'
    ]
  ],
  'B' => [
    [
      'id' => 'B-123',
      'name' => 'Produtc 01 from Category B'
    ],
    [
      'id' => 'B-234',
      'name' => 'Produtc 02 from Category B'
    ],
    [
      'id' => 'B-345',
      'name' => 'Produtc 03 from Category B'
    ],
  ],
  'C' => [
    [
      'id' => 'C-123',
      'name' => 'Produtc 01 from Category C'
    ],
    [
      'id' => 'C-234',
      'name' => 'Produtc 02 from Category C'
    ],
  ],
  'D' => [],
];

die(json_encode($database[$_GET['category']]));


    veja o exemplo em:
    https://github.com/w-studies/ajax-json

  18. Postado

    Não seria mais "econômico", ao invés de trafegar todo esse html, entregar apenas um json?
    E no front, a cada changeEvent, montar o outro select conforme necessário, via js? 

    Econômico, inteligente e reusável, pq com os dados em json, você pode alimentar o que quiser, e não somente um select.

  25. Postado

    Olá!
    Segue sugestão:
    https://codepen.io/washalbano/pen/NWELpbv
      

    let selectedElement
const arrowUp = document.getElementById('id1')
const arrowDown = document.getElementById('id2')

// define o elemento select
const select = document.getElementById('carros')

// quando o select sofrer alteração
select.onchange = (e) => {
  // define o index selecionado
  const selectedIndex = e.target.selectedIndex
  selectedElement = select.options[selectedIndex]
}

function setaPraCima() {
  if ((prevElement = selectedElement.previousElementSibling)) {
    select.insertBefore(selectedElement, prevElement)
  }
}

function setaPraBaixo() {
  if ((nextElement = selectedElement.nextElementSibling)) {
    select.insertBefore(nextElement, selectedElement)
  }
}

arrowUp.onclick = setaPraCima
arrowDown.onclick = setaPraBaixo

     

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito