Turn button into scroll if statement

Turn button into scroll if statement - javascript

The following code initially loads more content when the bottom button is clicked but I need it to work when the scroll reach the bottom of the page... I've tried the code under the words //HERE IS THE PROBLEM// but it seems not to work.... any idea?
var lazyload = lazyload || {};
(function($, lazyload) {
"use strict";
var page = 2,
buttonId = "#button-more",
loadingId = "#loading-div",
container = "#container";
//HERE IS THE PROBLEM
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
lazyload.load = function() {
var url = "./" + page + ".html";
$(buttonId).hide();
$(loadingId).show();
$.ajax({
url: url,
success: function(response) {
if (!response || response.trim() == "NONE") {
$(buttonId).fadeOut();
$(loadingId).text("No more entries to load!");
return;
}
appendContests(response);
},
error: function(response) {
$(loadingId).text("Sorry, there was some error with the request. Please refresh the page.");
}
});
};
}
});
var appendContests = function(response) {
var id = $(buttonId);
$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;
};
})(jQuery, lazyload);
body{
background-color: #ccc;
margin: 0;
}
#wrapper{
width:100%;
margin: 0 auto;
min-height: 500px;
background-color: #e9e9e9;
color: #333;
padding: 10px;
text-align: center;
}
#data-container{
margin: 10px;
}
#data-container .data-item{
background-color: #444444;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 105px;
margin: 5px;
color: #fff;
}
#loading-div{
display: none;
}
#button-more{
cursor: pointer;
margin: 0 auto;
background-color: #aeaeae;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
}
.child{
width:100%;
height:1000px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<h1>Lazy Load Demo</h1>
<div id="container">
<div class="child">
</div>
</div>
<div id="button-more" onclick="lazyload.load()">
Load more items
</div>
<div id="loading-div">
loading more items
</div>
</div>

let more = document.querySelector("button");
let show = document.querySelector(".show");
let loading = document.querySelector(".loading");
let bottom = document.querySelector(".bottom");
let allowAjax = true;
function getAjax(){
loading.classList.add("show");
if(allowAjax === true){
allowAjax = false;
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let back = xhttp.response;
back = JSON.parse(back);
let imgSrc = back.results[0].picture.large;
let imgEl = document.createElement("img");
imgEl.src = imgSrc;
show.appendChild(imgEl);
loading.classList.remove("show");
allowAjax = true;
}
};
xhttp.open("GET", "https://randomuser.me/api/", true);
xhttp.send();
}
}
window.addEventListener("scroll",function(){
let scrollPos = window.pageYOffset;
let bottomPos = bottom.offsetTop;
if(bottomPos / 1.5 <= scrollPos){
// Almost to the bottom of the page
getAjax();
}
});
more.addEventListener("click",function(){
getAjax();
});
img{
display: block;
width: 30em;
height: 30em;
}
.more{
position: fixed;
top: 1em;
right: 5em;
background: skyblue;
color: #FFF;
padding: 0.5em;
border: none;
cursor: pointer;
outline: none;
}
.loading{
width: 10em;
height: 10em;
display: none;
position: fixed;
top: 5em;
right: 1em;
background: #212323;
padding: 0.5em;
}
.loading.show{
display: block;
}
.show img{
display: block;
width: 30em;
height: 30em;
}
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />
<div class="show"></div>
<div class="bottom"></div>
<button class="more">More</button>
<img src="http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_metal/ajax_loader_metal_512.gif"class="loading">
initially loads

Related

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

Div changes size once another div is loaded?

So, i am having an issue with a div, when another div is generated (via javascript) below it, it is changing the size of the div.
// for the side nav message list
const chatList = function(list) {
let br = document.createElement("br")
for (let index in list) {
try {
let chat = list[index]
let chatBodyParent = document.createElement("div")
chatBodyParent.onclick = function() {
$("#message-list").empty()
api.listMessages(chat.chat.id)
document.getElementById("message-list").channelId = chat.chat.id
}
chatBodyParent.id = `chat-body-${chat.chat.id}`
let chatBody = document.createElement("div")
chatBody.className = "chat-body"
let chatImg = document.createElement("img")
chatImg.src = chat.chat.cover
if (!chat.chat.cover && chat.chat.type == 1) {
chatImg.src = "/dump/pfp.svg"
}
if (!chat.chat.cover && chat.chat.type == 3) {
chatImg.src = "/dump/public.png"
}
chatImg.className = "chat-img"
chatImg.setAttribute("align", "left")
chatBody.appendChild(chatImg)
let chatInfoContainer = document.createElement("div")
chatInfoContainer.className = "chat-info-container"
let chatName = document.createElement("span")
chatName.className = "chat-name"
chatName.innerText = chat.chat.title
chatInfoContainer.appendChild(chatName)
chatInfoContainer.appendChild(br.cloneNode(true))
let chatMessageContent = document.createElement("span")
chatMessageContent.className = "chat-message-content"
chatMessageContent.id = `chat-message-content-${chat.chat.id}`
let messageContent
if (chat.message) {
let long = false;
if (chat.message.text.length >= 30) {
long = true
}
messageContent = chat.message.text.substring(0, 30)
if (long) {
messageContent += "..."
}
} else if (chat.type == "file") {
messageContent = chat.user.nick + " sent a file"
}
chatMessageContent.innerText = messageContent
chatInfoContainer.appendChild(chatMessageContent)
chatBody.appendChild(chatInfoContainer)
chatBodyParent.appendChild(chatBody)
document.getElementById("chat-list").appendChild(chatBodyParent)
} catch {
console.log(list[index])
}
}
}
.sidenav {
height: 100%;
width: 15%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--lightish-grey);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 15%;
padding: 0px 10px;
overflow-x: hidden;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
::-webkit-scrollbar {
color: var(--grey);
}
::-webkit-scrollbar-corner {
color: var(--grey);
}
::-webkit-scrollbar-track {
color: var(--grey);
}
.menu {
width: 90%;
min-width: 90%;
height: 200px;
margin-left: 5%;
margin-right: 5%;
background-color: var(--menu-grey);
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-bar {
position: fixed;
bottom: 1%;
width: 50%;
height: 3.5%;
padding: 0px 5px;
margin: 8px 0;
display: inline-block;
border-top: hidden;
border-left: hidden;
border-right: hidden;
border-bottom: solid var(--light-grey);
box-sizing: border-box;
background-color: var(--grey);
color: var(--light-grey);
font-family: "FontRegular";
}
.chat-bar:focus {
outline-width: 0;
}
.chat-body {
width: 90%;
height: 50px;
margin-left: 5%;
border: 3px;
border-top: hidden;
border-left: hidden;
border-right: hidden;
/*border-bottom: solid var(--light-grey);*/
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-body:hover {
opacity: 0.8;
cursor:pointer;
}
.chat-body:focus {
opacity: 0.8;
}
.chat-img {
height: 50px;
width: auto;
border-radius: 50%;
}
.chat-info-container {
position:relative;
top: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>iFChat - Dashboard</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/dashboard.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/api.js"></script>
<script type="text/javascript" src="/js/dashboard.js"></script>
</head>
<div class="sidenav">
<div id="menu" class="menu">
</div>
<div>
</div> <br><br>
<div id="chat-list">
</div>
</div>
<div class="main" id="main">
<div id="message-list" class="message-list">
</div>
<input type="text" name="chat..." id="chat-bar" class="chat-bar" placeholder="chat..." maxlength="500">
</div>
</html>
Here is an image before the chat list is loaded
Then menu is loaded with the correct size and margin
pre-load
after the chat list loads, it changes the width or margin of the div above some how, and im not sure how or why its doing that, but i cant figure it out, heres an image of after the chat list is loaded post-load
i have tried different margins and positioning settings but cant seem to get it to work, any help is greatly appreciated :)
edit: One possible solution may be to change the css with javascript every time the chat list is loaded, but i would like to avoid that if at all possible.

OK, so i figured out the issue, the issue occurs when enough elements pop up to trigger the scrollbar, so the fix for me was this
::-webkit-scrollbar {
display: none;
}
Because i want a user to beable to scroll, but i dont want there to be a scrollbar, My next plan is to make this static, so that it doesnt move on scroll at all. Still the issue was arising when my (invisible scroll bar, that still had a width) was appearing. Gotta watch out for hidden elements.

How do I make an extension's html background invisible?

I´m trying to do a test extension for chrome for a university project but I can´t find a way to make the background or body of the extension´s html completely invisible, just for a clean interface. The problems I´m having are those white corners on the background.
This is the code of the extension:
// Define variables
let audio, playbtn, title, poster, artists, mutebtn, seekslider, volumeslider,
seeking = false, seekto, curtimetext, durtimetext, playlist_status, dir, playlist,
ext, agent, playlist_artist, repeat, randomSong;
// Initialization of YouTube Api
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var id = '5_385OOZlIg';
var url = 'https://www.youtube.com/watch?v=' + id;
// Initialization of Array of Music, Tittle, Poster Image, Artists
dir = "music/";
playlist = ["Cartoon-On-_-On","Elektronomia","Johnning","Popsicle","Fearless"];
title = ["Cartoon - On & On","Elektronomia","Janji-Heroes Tonight","Popsicle","Lost Sky - Fearless"];
artists = ["(feat. Daniel Levi) [NSC Release]","Elektronomia - Sky High [NCS Release]","(feat. Johnning) [NCS Release]",
"LFZ - [NCS Release]","(feat. Chris Linton)[NCS Release]"];
poster = ["images/ncs1.jpeg","images/ncs2.jpg","images/ncs3.jpg","images/ncs4.jpg","images/ncs5.jpg"];
// Used to run on every browser
ext = ".mp3";
agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1){
ext = ".ogg";
}
// Set object references
playbtn = document.getElementById("playpausebtn");
nextbtn = document.getElementById("nextbtn");
prevbtn = document.getElementById("prevbtn");
mutebtn = document.getElementById("mutebtn");
visibilitybtn = document.getElementById("visibility");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
playlist_status = document.getElementById("playlist_status");
playlist_artist = document.getElementById("playlist_artist");
repeat = document.getElementById("repeat");
randomSong = document.getElementById("random");
playlist_index = 0;
// Audio Object
audio = new Audio();
audio.src = dir + playlist[0] + ext; // music/musicname.mp3
audio.loop = false;
// First song title and artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Add event handling
playbtn.addEventListener("click", playPause);
nextbtn.addEventListener("click", nextSong);
prevbtn.addEventListener("click", prevSong);
mutebtn.addEventListener("click", mute);
visibilitybtn.addEventListener("click", toggle);
seekslider.addEventListener("mousedown", function(event){seeking = true; seek(event);});
seekslider.addEventListener("mousemove", function(event){seek(event);});
seekslider.addEventListener("mouseup", function(){seeking = false;});
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){seektimeupdate();});
audio.addEventListener("ended",function(){switchTrack();});
repeat.addEventListener("click", loop);
randomSong.addEventListener("click", random);
// Functions
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: id,
playerVars: {'autoplay': 0, 'controls': 0, 'loop': 1},
events: {
'onStateChange': onPlayerStateChange
}
});
}
/*
function onPlayerReady(event) {
let pgd = player.getDuration();
let vpb = document.getElementById("video_progress_bar");
vpb.setAttribute("max",pgd);
}*/
//Intento de que la barra de progreso avance con forme al video onPlayerStateChange(event) y onPlay()
var testThread;
function onPlayerStateChange(event) {
if(event.data == 1)
{
testThread = setInterval(seektimeupdate,500);
}else{
clearInterval(testThread);
}
}
// Oculta o hace visible el video de YouTube en la interfaz
function toggle(element){
let ventana = document.getElementById("player");
if(ventana.style.display != 'none'){
ventana.style.display = 'none';
}else{
ventana.style.display = '';
}
}
function fetchMusicDetails(){
// Poster Image, Pause/Play Image
$("#playpausebtn img").attr("src", "images/pause-red.png");
$("#bgImage").attr("src", poster[playlist_index]);
$("#image").attr("src",poster[playlist_index]);
// Title and Artist
playlist_status.innerHTML = title[playlist_index];
playlist_artist.innerHTML = artists[playlist_index];
// Audio
audio.src = dir + playlist[playlist_index] + ext;
audio.play();
}
function playPause(element){
let playButton = document.getElementById("playpausebtn");
if(playButton.value == "play"){
playButton.setAttribute("value","pause");
player.playVideo()
$("#playpausebtn img").attr("src","images/pause-red.png");
}else{
playButton.setAttribute("value","play");
player.pauseVideo();
$("#playpausebtn img").attr("src","images/play-red.png");
}
}
function nextSong(){
playlist_index++;
if(playlist_index > playlist.length - 1){
playlist_index = 0;
}
fetchMusicDetails();
}
function prevSong(){
playlist_index--;
if(playlist_index < 0){
playlist_index = playlist.length - 1;
}
fetchMusicDetails();
}
function mute(){
if(player.isMuted()){
player.unMute();
$("#mutebtn img").attr("src","images/speaker.png");
}else{
player.mute();
$("#mutebtn img").attr("src","images/mute.png");
}
}
function seek(event){
if(player.getDuration() == 0){
null;
}else{
if(seeking){
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = player.getDuration() * (seekslider.value / 100);
player.seekTo(seekto);
}
}
}
function setvolume(){
player.setVolume(volumeslider.value);
}
function seektimeupdate(){
if(player.getDuration()){
let nt = player.getCurrentTime() * (100 / player.getDuration());
seekslider.value = nt;
var curmins = Math.floor(player.getCurrentTime() / 60);
var cursecs = Math.floor(player.getCurrentTime() - curmins * 60);
var durmins = Math.floor(player.getDuration() / 60);
var dursecs = Math.floor(player.getDuration() - durmins * 60);
if(cursecs < 10){cursecs = "0" + cursecs}
if(dursecs < 10){dursecs = "0" + dursecs}
if(curmins < 10){curmins = "0" + curmins}
if(durmins < 10){durmins = "0" + durmins}
curtimetext.innerHTML = curmins + ":" + cursecs;
durtimetext.innerHTML = durmins + ":" + dursecs;
}else{
curtimetext.innerHTML = "00" + ":" + "00";
durtimetext.innerHTML = "00" + ":" + "00";
}
}
function switchTrack(){
if(playlist_index == (playlist.length -1)){
playlist_index = 0;
}else{
playlist_index++;
}
fetchMusicDetails();
}
function loop(){
if(audio.loop){
audio.loop = false;
$("#repeat img").attr("src", "images/rep.png");
}else{
audio.loop = true;
$("#repeat img").attr("src", "images/rep1.png");
}
}
function getRandomNumber(min, max){
let step1 = max - min + 1;
let step2 = Math.random() * step1;
let result = Math.floor(step2) + min;
return result;
}
function random(){
let randomIndex = getRandomNumber(0 , playlist.length - 1);
playlist_index = randomIndex;
fetchMusicDetails();
}
body{
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background-color: rgba(0,0,0,0);
font-family: 'Poppins', sans-serif;
}
button{
border: none;
outline: none;
background: none;
cursor: pointer;
}
.music-container{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.music-content{
position: relative;
width: 245px;
height: 450px;
background-color: #000;
border-width: 8px 4px !important;
border: solid;
border-radius: 20px;
overflow: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .52);
}
#bg-image img{
width: 110%;
height: 110%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
filter: blur(6px);
-webkit-filter: blur(5px);
}
#blacklayer{
height: 450px;
width: 100%;
background-color: rgba(0,0,0,.404);
position: absolute;
z-index: 2;
}
#menu{
position: relative;
z-index: 3;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
#menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#volume-container{
position: relative;
width: 100%;
height: 15px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
#volume-container img{
width: 16px;
height: 16px;
margin: 0 5px;
}
.slider{
width: 110px;
height: 1px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 100;
outline: none;
position: relative;
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.slider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#music-image{
position: relative;
width: 100%;
height: 215px;
z-index: 3;
}
#circle-image{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,50%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-image img{
width: 100%;
height: 100%;
}
#player{
position: absolute;
top: -33%;
left: 50%;
transform: translate(-50%,27%);
width: 120px;
height: 120px;
background-color: #000;
border-radius: 50%;
border: 5px solid rgba(221,221,221,0.897);
overflow: hidden;
}
#music-title{
position: relative;
padding: 0 25px;
top: 65%;
color: #fff;
}
#music-title h5{
color: #fff;
font-size: 20px;
margin: 20px 0 5px;
font-weight: 300;
text-align: center;
line-height: 1.2;
}
#music-title h6{
margin: 0;
font-size: 12.5px;
text-align: center;
font-weight: 400;
}
#music-menu{
width: 90%;
height: 40px;
position: relative;
z-index: 3;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
#music-menu img{
width: 15px;
height: 15px;
cursor: pointer;
}
#visibility{
width: 20px;
height: 20px;
cursor: pointer;
}
#currentTime{
position: relative;
z-index: 3;
padding: 0 12px 5px;
color: #fff;
display: flex;
justify-content: space-between;
margin-top: 8px;
}
#currentTime span{
font-size: 12px;
}
.seekslider{
width: 100px;
height: 2px !important;
-webkit-appearance: none;
border-radius: 10px;
background-color: #fff;
z-index: 3;
outline: none;
position: fixed;
margin-left: 70px;
}
.seekslider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 10px;
height: 10px;
background-color: #e62c2f;
border-radius: 50%;
cursor: pointer;
outline: none;
transform: scale(1);
}
.seekslider:active::-webkit-slider-thumb{
transform: scale(1.2);
}
#buttons{
position: relative;
width: 100%;
height: 50px;
z-index: 3;
margin-top: 20px;
}
#buttons div{
display: flex;
justify-content: center;
align-items: center;
}
.play{
width: 60px;
height: 50px;
margin: 0 5px;
}
.play img{
width: 100%;
height: 100%;
}
.prev img,
.next img{
width: 20px;
height: 20px;
}
#buttons .like{
position: absolute;
top: 25%;
right: 8%;
cursor: pointer;
}
#buttons .like i{
color: rgba(255,255,255,0.883);
}
#buttons .repeat{
position: absolute;
top: 30%;
left: 6%;
font-size: 15px;
cursor: pointer;
}
#repeat img{
width: 16px;
height: 16px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="music-container">
<div class="music-content">
<div id="bg-image">
<div id="blackLayer"></div>
<img src="images/ncs1.jpeg" alt="" id="bgImage">
</div>
<div id="menu">
<img src="images/menu.png" alt="">
<img src="images/search.png" alt="">
</div>
<div id="volume-container">
<img src="images/volume-low.png" alt="" id="volumn-down">
<input type="range" class="slider" id="volumeslider" min="0" max="100" value="100" step="1">
<img src="images/volumn-high.png" alt="" id="volumn-up">
</div>
<div id="music-image">
<div id="circle-image">
<div id="player"></div>
<img src="images/ncs1.jpeg" alt="" id="image">
</div>
<div id="music-title">
<h5 id="playlist_status"></h5>
<h6 id="playlist_artist"></h6>
</div>
</div>
<div id="music-menu">
<button id="random"><img src="images/random.png" alt=""></button>
<button id="visibility"><img src="images/video-on.png" alt=""></button>
<button id="mutebtn"><img src="images/speaker.png" alt=""></button>
</div>
<div id="currentTime">
<span id="curtimetext">00:00</span>
<span id="durtimetext">00:00</span>
</div>
<input type="range" class="seekslider" id="seekslider" min="0" max="100" value="0" step="1">
<div id="buttons">
<button class="repeat" id="repeat"><img src="images/rep.png" alt=""></button>
<div>
<button class="prev" id="prevbtn"><img src="images/backward.png" alt=""></button>
<button class="play" id="playpausebtn" value="play"><img src="images/play-red.png" alt=""></button>
<button class="next" id="nextbtn"><img src="images/forward.png" alt=""></button>
</div>
<span class="like">
<i class="far fa-heart" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
// Manifest.json
{
"manifest_version" : 2,
"name" : "OdisseyChromeExtension",
"description" : "Reproductor de musica youtube",
"version" : "0.3",
"browser_action" : {
"default_popup" : "index.html",
"default_title" : "odissey"
},
"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://www.youtube.com/s/player/9f996d3e/www-widgetapi.vflset/www-widgetapi.js https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'",
"permissions": [
"activeTab",
"storage",
"tabs",
"http://*/*" , "https://*/*",
"cookies",
"identity",
"identity.email"
]
}
This is the extension appearance

Okey this might actually solve your problem.
As the background is there because of the iframe, embed a player into an <object> or <video> tag..
<object width={ width } height={ height }>
<video src={ playlists['mylist'].JSON[index].source } type="video/webp" width="100%" height="333" objectFit="cover" />
</object>
Then just get a JSON of the playlist. If you want higher functionality like search or managment of user created playlists you need to go through Googles Data API. It can be finicky in the beggining but well worth the time.
here are some code examples:
https://developers.google.com/youtube/v3/docs/playlists/list?apix=true
Otherwise if you have set playlists in the player, you can just datamine separately and create your own JSON arrays, even manually its really simple and won't even take a minute per list when you have your mining snippet. A small upside here is you can dynamically create custom playlists outside of youtube.
then you can have three players and have them preload the previous and next video for a smoother switching experience ( an option for a fade inbetween can also be nice )
I have snippets of code somewhere for this kind of setup, if this sounds like something you care to do I can try to dig them up for you.
happy coding! :)

Javascript Todolist category if else statement

Hello I'm stuck on how to add category for my to do list. When you click on Button of category need change class name. I don't understand how to correctly write if/else statement when button is clicked.
plan how it need to work
Write task name
Choose Category
Add new task
May be somebody can help me out ore give some advice how to solve this problem!
Sorry for my english and if my question is to badly explained!
var toDoList = function() {
var addNewTask = function() {
var input = document.getElementById("taks-input").value,
itemTexts = input,
colA = document.getElementById('task-col-a').children.length,
colB = document.getElementById('task-col-b').children.length,
taskBoks = document.createElement("div"),
work = document.getElementById("work"),
Category = "color-2",
taskCount = 1;
if (work.onclick === true) {
var Category = "color";
}
taskBoks.className = "min-box";
taskBoks.innerHTML = '<div class="col-3 chack" id="task_' + (taskCount++) + '"><i class="fa fa-star"></i></div><div class="col-8 task-text" id="taskContent"><p>' + itemTexts + '</p><span id="time-now"></span></div><div class="col-1 ' + (Category) + '"></div>'
if (colB < colA) {
var todolist = document.getElementById("task-col-b");
} else {
var todolist = document.getElementById("task-col-a");
}
//todolist.appendChild(taskBoks);
todolist.insertBefore(taskBoks, todolist.childNodes[0]);
},
addButton = function() {
var btn2 = document.getElementById("add-task-box");
btn2.onclick = addNewTask;
};
addButton()
}
toDoList();
p {
padding: 20px 20px 20px 45px;
}
.chack {
background-color: #4c4b62;
height: 100%;
width: 40px;
}
.task-text {
background-color: #55566e;
height: 100%;
width: 255px;
}
.color {
width: 5px;
height: 100%;
background-color: #fdcd63;
float: right;
}
.color-2 {
width: 5px;
height: 100%;
background-color: red;
float: right;
}
.color-3 {
width: 5px;
height: 100%;
background-color: purple;
float: right;
}
.task {
height: 100px;
width: 300px;
border: 1px solid #fff;
float: left;
}
.chack,
.task-text {
float: left;
}
.add-new-task {
margin-bottom: 50px;
height: 80px;
width: 588px;
background-color: rgb(85, 86, 110);
padding-top: 30px;
padding-left: 15px;
}
.min-box {
height: 100px;
border-bottom: 1px solid #fff;
}
.center {
padding-top: 20px;
padding-left: 50px;
}
.fa-star {
padding-left: 14px;
padding-top: 100%;
}
#add-task-box {
float: right;
margin-right: 10px;
margin-top: -7px;
border: none;
background-color: rgb(255, 198, 94);
padding: 10px;
}
#taks-input {
height: 30px;
width: 350px;
margin-top: -7px;
}
.category {
margin-top: 10px;
}
<div class="container">
<div class="add-new-task">
<input type="text" id="taks-input">
<button id="add-task-box">Add New Task box</button>
<div class="category">
<button class="catBtn" id="work">Work</button>
<button class="catBtn" id="home">Home</button>
<button class="catBtn" id="other">Other</button>
</div>
</div>
<div class="lg-task" id="bigTask"></div>
<div class="task" id="task-col-a"></div>
<div class="task" id="task-col-b"></div>
</div>

you need to bind click event to your buttons and store that value in Category, so in you js add this
var toDoList = function() {
// set to default
var Category = "color-3";
// attach event to buttons
var catButtons = document.getElementsByClassName("catBtn");
// assign value based on event
var myCatEventFunc = function() {
var attribute = this.getAttribute("id");
if (attribute === 'work') {
Category = 'color';
} else if (attribute === 'home') {
Category = 'color-2';
}
};
for (var i = 0; i < catButtons.length; i++) {
catButtons[i].addEventListener('click', myCatEventFunc, false);
}
Demo: Fiddle
and remove this code from addNewTask function
if (work.onclick === true) {
var Category = "color";
}

It is a bit hard to understand what you are doing, what you are going for (a module of some kind?). You were not that far away from a working state.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Task</title>
<style>
p {
padding: 20px 20px 20px 45px;
}
.chack {
background-color: #4c4b62;
height: 100%;
width: 40px;
}
.task-text {
background-color: #55566e;
height: 100%;
width: 255px;
}
.color {
width: 5px;
height: 100%;
background-color: #fdcd63;
float: right;
}
.color-2 {
width: 5px;
height: 100%;
background-color: red;
float: right;
}
.color-3 {
width: 5px;
height: 100%;
background-color: purple;
float: right;
}
.task {
height: 100px;
width: 300px;
border: 1px solid #fff;
float: left;
}
.chack,
.task-text {
float: left;
}
.add-new-task {
margin-bottom: 50px;
height: 80px;
width: 588px;
background-color: rgb(85, 86, 110);
padding-top: 30px;
padding-left: 15px;
}
.min-box {
height: 100px;
border-bottom: 1px solid #fff;
}
.center {
padding-top: 20px;
padding-left: 50px;
}
.fa-star {
padding-left: 14px;
padding-top: 100%;
}
#add-task-box {
float: right;
margin-right: 10px;
margin-top: -7px;
border: none;
background-color: rgb(255, 198, 94);
padding: 10px;
}
#taks-input {
height: 30px;
width: 350px;
margin-top: -7px;
}
.category {
margin-top: 10px;
}
</style>
<script>
var toDoList = function() {
var addNewTask = function() {
var input = document.getElementById("taks-input").value,
itemTexts = input,
colA = document.getElementById('task-col-a').children.length,
colB = document.getElementById('task-col-b').children.length,
taskBoks = document.createElement("div"),
work = document.getElementById("work"),
Category = "color-2",
taskCount = 1;
if (work.onclick === true) {
Category = "color";
}
taskBoks.className = "min-box";
taskBoks.innerHTML = '<div class="col-3 chack" id="task_'
+ (taskCount++) +
'"><i class="fa fa-star"></i></div><div class="col-8 task-text" id="taskContent"><p>'
+ itemTexts +
'</p><span id="time-now"></span></div><div class="col-1 '
+ (Category) + '"></div>'
if (colB < colA) {
var todolist = document.getElementById("task-col-b");
} else {
var todolist = document.getElementById("task-col-a");
}
//todolist.appendChild(taskBoks);
todolist.insertBefore(taskBoks, todolist.childNodes[0]);
},
// I don't know what to do with that?
addButton = function() {
var btn2 = document.getElementById("add-task-box");
btn2.onclick = addNewTask();
};
// return the stuff you want to have public
return {
addNewTask:addNewTask
};
}
var f;
// wait until all HTML is loaded and put the stuff from above into the variable `f`
// you can call it with f.someFunction() in your case f.addNewTask()
window.onload = function(){
f = toDoList();
}
</script>
</head>
<body>
<div class="container">
<div class="add-new-task">
<input type="text" id="taks-input">
<button id="add-task-box" onclick="f.addNewTask()">Add New Task box</button>
<div class="category">
<button class="catBtn" id="work" >Work</button>
<button class="catBtn" id="home">Home</button>
<button class="catBtn" id="other">Other</button>
</div>
</div>
<div class="lg-task" id="bigTask"></div>
<div class="task" id="task-col-a"></div>
<div class="task" id="task-col-b"></div>
</div>
</body>
</html
I hope you understood what I did?

A javascript slider array issue

Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>

On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>

It seems you've got getElementById() when you meant getElementsByClassName()

We Keep Coding

JavaScript is the programming language of the Web.

Turn button into scroll if statement - javascript

Related

javascript on a webpage displaying text wrongly

Div changes size once another div is loaded?

How do I make an extension's html background invisible?

Javascript Todolist category if else statement

A javascript slider array issue

Categories

Resources