Home / user-155688

Narciso Aifuz's questions

Martin Hope
Narciso Aifuz
Asked: 2022-08-31 09:21:53 +0800 CST
  • 2

I am creating a visible and hidden effect of a div fixedby doing scroll. In conjunction with the headerand another div sticky.

Fixed div is hidden when scrolling but when finished displaying the header: using outerHeight.

What I can't do is change the background color of the fixed div while it's visible ( top: 0) but after passing the header. Being on the header, it must have a transparent background (or be able to add other styles).

My problem is not to apply the style with classList.addor style.background = ""but, how to capture the moment when it is visible but outside the header.

For example I want this: if the scroll is greater than the header, then apply background color to the fixed divo (which is visible)

if ( scroll > header ) headland.style.background = "red"

UPDATED

Apart from changing the background color (which I can achieve), I need it to headlandbe visible along with the navigation ( sticky) when scrolling top(up), but not while it headeris visible

document.addEventListener("DOMContentLoaded", () => { 

let scroll = window.pageYOffset,
    headland = document.querySelector(".headland"),
    navegacion = document.querySelector(".navegacion"); 

window.addEventListener("scroll", () => {
    
    let s = window.pageYOffset,
        w = window.outerHeight - 70;
    
    if(scroll < s && s > w) {
        
        headland.classList.add("top");
        //headland.classList.add("fondo");
        navegacion.classList.remove("top"); 
        
    } 
    
    /* else if(scroll > w) {
        headland.classList.add("fondo");
    } */
    
    else {
        
        headland.classList.remove("top");
        headland.classList.remove("fondo");
        navegacion.classList.add("top"); 
        
        
    }
    
    scroll = s;

});

});
* {
box-sizing: border-box
}

:root {
--height: 50px;
--transicion: all 0.3s ease-in-out;
--color: lightblue;
--fondoVerde: rgb(47, 79, 79);
--fondoNegro: rgb(0, 0, 0);
--fondoVerdeTransparente: rgba(47, 79, 79, 0.5);  
}

html {
scroll-behavior: smooth
}

body {
margin: 0;
padding: 0;
font-size: 16px;
background-color: whitesmoke
}

.headland, header, .navegacion {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
padding: 1rem 1rem;
}

.headland {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: var(--height);
transition: var(--transicion);
color: var(--color);
box-shadow: 0 0 7px #ccc;
background-color: transparent;
backdrop-filter: blur(3px)
} .headland.top {
top: -50px;
} .headland.fondo {
background-color: var(--fondoVerde)
}

header {
position: relative;
height: 100vh;
color: var(--color);
background-color: var(--fondoNegro)
}

.navegacion {
position: sticky;
top: 0;
z-index: 1001;
transition: var(--transicion);
background-color: var(--fondoVerdeTransparente); 
backdrop-filter: blur(3px)
} .navegacion.top {
top: var(--height)
}

.navegacion button {
margin: auto
}

main {
min-height: 1000px
}
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
    <title>Scroll</title>  
</head>
<body>
    
    <div class="headland" id="headland">
        <h1>Página de prueba</h1>
    </div>
    
    <header>
        <h1>Header</h1> 
    </header>
    
    <div class="navegacion" id="navegacion">
        <button>Botón</button>
        <button>Botón</button>
        <button>Botón</button>
    </div>
    
    <main></main>
    
</body>
</html>

javascript
Martin Hope
Narciso Aifuz
Asked: 2022-08-01 19:13:38 +0800 CST
  • 1

I have a javascript playlist function that works great with the online audio playlist.

If the list with the tag ais HTTPS:// type address, it works fine.

This is the original that works fine (with URLs on the web).

But when the local hreftag ais of type ../list/audio.mp3 , (or similar) the next track doesn't play. Plays only when selected with click.

I'm not sure why the playlist with a local address in hrefthe playlist in HTML5 doesn't work

init();

function init() { 

var audio = document.getElementById("audio"); 
var playlist = document.getElementById('playlist'); 
var tracks = playlist.getElementsByTagName('a'); 

audio.volume = 0.10; 
audio.play(); 

for(var track in tracks) { 
    
    var link = tracks[track]; 
    
    if(typeof link === "function" || typeof link === "number") continue;            
    
    link.addEventListener("click", function(e) {    
        
        e.preventDefault(); 
        var song = this.getAttribute('href');   
        
        run(song, audio, this); 
    }); 

} 

audio.addEventListener("ended", function(e) { 
    
    for(var track in tracks) {
        
        var link = tracks[track]; 
        var nextTrack = parseInt(track) + 1;    
        
        if(typeof link === "function" || typeof link === "number") continue; 
        
        if(!this.src) this.src = tracks[0]; 
        
        if(track == (tracks.length - 1)) nextTrack = 0; 
        
        console.log(nextTrack);     
        
        if(link.getAttribute("href") === this.src) {    
            
            var nextLink = tracks[nextTrack];   
            run(nextLink.getAttribute('href'), audio, nextLink); 
            break; 
        
        } 
    
    } 

}); 

} 

function run(song, audio, link) { 

var parent = link.parentElement;

//quitar el active de todos los elementos de la lista   
var items = parent.parentElement.getElementsByTagName('li'); 

for(var item in items) { 
    if(items[item].classList) items[item].classList.remove("active"); 
} 

//agregar active a este elemento 
parent.classList.add("active"); 

//tocar la cancion 
audio.src = song; 
audio.load(); 
audio.play(); 
}
audio {
display: block;
width: 100%;
max-width: 300px;
}

#playlist {
display: block;
width: 100%;
max-width: 300px;
padding: 10px 5px;
list-style: none;
}

a { 
text-decoration: none; 
} 

.active a { 
color: #5DB0E6; 
text-decoration: none; 
} 

li a {
color: #eeeedd; 
background: #333; 
padding: 5px; 
display: block; 
}
<audio id="audio" preload="auto" tabindex="0" controls="" > 
  <source src="../audio/uno.mp3"> 
</audio>
    
    <ul id="playlist"> 
        
        <li class="active"> 
            <a href="../audio/uno.mp3">Audio uno</a> 
        </li> 
        
        <li>
            <a href="../audio/dos.mp3">Audio dos</a> 
        </li> 
        
        
    </ul>

javascript
Martin Hope
Narciso Aifuz
Asked: 2022-07-16 13:38:29 +0800 CST
  • 0

I have a large list that I am creating in Javascript and some items have sub items.

My list is something like this:

Let lista = [{
 
 nombre: "Elveramiro",
 direccion: [{
  nombre: "Asunción Paraguay",
  geo: "https://maps.google.com/?-25.282005, -57.635117"
 }]

}]

The way I call the items, and it works fine; it is:

<span>${item.nombre}</span>

But I can't manage to call the item content direccionseparately. Because the name I show as text, and the geo I show in a link:

<span><a href="${item[direccion.lugar]}">${item[direccion.nombre}</a></span>

The complete structure I use is the following:

Let lista = [
{
 nombre: "Elveramiro",
 direccion: [{
  nombre: "Asunción Paraguay",
  geo: "https://maps.google.com/?-25.282005, -57.635117"
 }]
}

]

Let tarjeta = "";

lista.forEach(item => {
 
 tarjeta += `
  
  <section>
   <div class="tarjeta">
    <span><a href="${item[direccion.lugar]}">${item[direccion.nombre}</a></span>
   </div>
  </section>
  
 `;

});

document.getElementById("lista").innerHTML = tarjeta;
javascript
Martin Hope
Narciso Aifuz
Asked: 2022-05-14 12:26:20 +0800 CST
  • 0

Please I need to change or convert this JavaScript to jQuery. I can't do, I don't know JavaScript at this level.

(function() {
 let video = document.querySelector(".video");  
 let bar = document.querySelector(".bar");

 function events() {
  video.addEventListener("timeupdate", updateTime);
} events();

 function updateTime() {
  let curTime = video.currentTime;
  let duration = video.duration;
  let persentage = (curTime * 100) / duration;  
  bar.style.width = persentage + "%";
 };

})();
javascript
Martin Hope
Narciso Aifuz
Asked: 2021-12-10 09:56:32 +0800 CST
  • 1

I have an HTML5 offline (for work at the moment) video site that when the video ends, setInterval, switches to another video page. What I can't do is suspend the setInterval or the counter so that when the page is reloaded, the setting of the button-setInterval is saved in localStorage (which would mean not counting).

Could you help me?

<button id="auto" class="auto" onclick="cancelar()">
en <span class="counter">10</span> <span class="red">ó cancelar</span>  
</button>

This is the code I use:

 var seguir = false;
 var boton = false;

 var c = 

document.querySelector(".auto");  
 c.addEventListener("click", cancelar); 

 function cancelar() { 

  if (!seguir) {

   seguir = false;
   clearInterval(yo);

//$(".auto").css({"background": "#ccc", "color": "#000"});  
localStorage.setItem('boton-mode', false');
} else {

   seguir = true;


localStorage.setItem('boton-mode', true);  

  };

 };

And of course my counter works fine:

// AL FINALIZAR VÍDEO
 var y = $(".yoFin");

 $("#video").on("ended", function() {  

  y.show().css({"display": "flex"});
  var counter = 10;

  yo = window.setInterval( function() {  

   if (counter == 0) {
window.location.href = "yo.html";
   } else {
counter = counter - 1;

document.querySelector(".counter").innerHTML = counter;  
   }

  },1000);

 });

Apparently I'm using pure JavaScript mixed with jQuery.

video
Martin Hope
Narciso Aifuz
Asked: 2020-06-16 16:23:14 +0800 CST
  • 1

I need some help. This orientationchange code for video doesn't work for me at all. Just using it I give Play to the video and turn the mobile shows full screen. Then you can't get out of there.

var vid =  document.querySelector("video");

window.addEventListener("orientationchange", function() {

//(if) Para todos los 
navegadores
if (vid.requestFullscreen) {
vid.requestFullscreen();

} else {
//Solo para Chrome

 vid.webkitRequestFullscreen();
}

}, false);
javascript
Martin Hope
Narciso Aifuz
Asked: 2020-04-10 15:08:49 +0800 CST
  • 0

Create an HTML5 document to watch local videos. I try to make it similar to YouTube, at the end of the video, it shows a similar video suggestion and the next video to play with setInterval. My problem still, failed to stop the setIntervalto replay the video.

  // AL FINAL DEL VIDEO
  var mas = $('.relacionados');
  var fin = $('video');
  var counter=10;

  $("video").on("ended", function() { 
   mas.show();

  //Siguiente vídeo
  setTimeout (function() {
  window.location.href = 'yoVideos.html';  
  },10000);
  //Cuenta regresiva
  var id = setInterval(function(){ 
  if(counter==0) clearInterval(id); 
  else { 
  counter=counter-1; 
  document.querySelector('.counter').innerHTML=counter;  
  } }, 1000);

  });

  // CANCELAR SIGUIENTE VIDEO
  function cancelar() {
    clearTimeout(fin);
    mas.toggle();
    document.getElementById("cancelar"); 
  }

  <div class="detalles">
    <span>Siguente vídeo:</span>
      <h3>Título del siguiente vídeo</h3>   
    <span>En: <b class="counter">10</b>s
      <span class="cancelar" onclick="cancelar()">Cancelar</span>
    </span>     
  </div>
html5