Basically Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
i++;
});
})
</script>
<div id="watch_list"></div>
</html>
But Whenever I Open the HTML it shows the formatting Properly But It is only Showing 1 Result Instead of all of them!!!
I've Done this With nodejs Before (With a CLI Application) Before but It Doesn't Work Now
How can I Fix This?
Should I add a Loop?
Here is the
Output
I Really Don't Have any other words because I am a novice so Please stop saying "It looks like your post is mostly code, please add some more details"
Just remove the line
i++ (6th line from end), your code will run fine. i is not defined so it is creating the error ReferenceError: i is not defined
Code snippet after removing the line i++
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
});
})
</script>
<div id="watch_list"></div>
</html>
Related
I created a skill progress bar for my project using HTML CSS and jquery. All things working fine but the percent counter option is not working when the animation run.
I need to count the percentage from 0 to the value along with the animation bar. Please help me. Thanks.
jQuery(function($){
$(window).scroll(function() {
var top_of_element = $(".work-process").offset().top;
var bottom_of_element = $(".work-process").offset().top + $(".work-process").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('.project-percent').each(function(){
var $this = $(this);
var percent = $this.attr('percent');
$this.css("width",percent+'%');
$({animatedValue: 0}).animate({animatedValue: percent},{
duration: 2000,
step: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
},
complete: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
}
});
});
}
});
});
.nb-progressbar-row {
width: 90%;
margin: 0 auto;
}
.project{
width: 60%;
margin: 0 auto;
}
.work-process h3 {
margin: 30px 0px 10px;
}
.project-bar {
height: 18px;
background: #e0e0e0;
border-radius: 30px;
}
.project-percent {
height: 18px;
background-color: #2196F3;
border-radius: 30px;
position: relative;
width: 0;
transition: 2s linear;
}
.project-percent::before {
content: attr(percent);
position: absolute;
right: 0px;
left: 0px;
padding: 1px 0px;
color: #ffffff;
font-size: 15px;
border-radius: 25px;
font-weight: bold;
width: 20px;
margin: 0px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<section class= " my-5 nb-progressbar-wrapper">
<div class="container my-5 nb-progressbar-conainer">
<div class="row nexnomic-progressbar-row">
<div class=" col work-process">
<h2 class="text-center my-5">SCROLL DOWN</h2>
<div class=" pt-5 project">
<h6>Xyzzz & ABCD</h6>
<div class="project-bar">
<div class="project-percent" percent="95"></div>
</div>
</div>
<div class="project">
<h6>Abcd-xyz</h6>
<div class="project-bar">
<div class="project-percent" percent="80"></div>
</div>
</div>
<div class="project">
<h6>ABCDYZX</h6>
<div class="project-bar">
<div class="project-percent" percent="75"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
The animations work perfectly on shapes. But audio files dont play. What might be the reason?
I added all the html, css, and javascript files for you to see.
It still doesnt let me post it, so i am extending the question. I hope someone can solve this issue. Thank you in advance. I'd be so happy for your help
var buttonColours = ["red","blue","green","yellow"];
var gamePattern = [];
function nextSequence() {
var randomNumber = Math.floor(Math.random()*4); // 0-3
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
//1. Use jQuery to select the button with the same id as the randomChosenColour
$("#"+randomChosenColour).fadeIn().fadeOut().fadeIn();
var audio = new Audio("sounds/" + randomChosenColour + ".mp3");
audio.play();
}
nextSequence();
body {
text-align: center;
background-color: #011F3F;
}
#level-title {
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.container {
display: block;
width: 50%;
margin: auto;
}
.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="game.js"></script>
</body>
</html>
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>
Report designer contains editable, resizable and draggable fields.
Clicking in field places cursor to start of field end editing start alway at beginning of field.
How to place cursor in field to clicked position so that editing start at clicked position ?
jquery, jquery ui, bootstarp, ASP.NET MVC4 are used.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.panel-resizable {
min-height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
.panel {
margin-bottom: 0;
}
.verticalline,
.horizontalline,
.rectangle {
font-size: 1pt;
border: 1px solid #000000;
}
.field {
border: 1px solid #000000;
white-space: pre;
overflow: hidden;
}
.captionfield {
white-space: pre;
overflow: hidden;
}
.field,
.captionfield {
font-family: "Times New Roman";
font-size: 10pt;
}
.verticalline {
border-left-style: none !important;
}
.horizontalline {
border-bottom-style: none !important;
}
</style>
<script>
$(function() {
$(".panel-resizable").resizable({
minWidth: "100%",
maxWidth: "100%",
minHeight: 1
});
$(".verticalline, .horizontalline, .rectangle, .field, .image, .captionfield").draggable();
$(".verticalline, .horizontalline, .rectangle, .field, .image").resizable();
});
</script>
</head>
<body>
<div class='panel'>
<div class='panel-body panel-resizable'>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+iif( isnull(g_server),'',psql('select tasudok from dok x where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+ iif( isnull(g_server), sql('sele tasudok from dok x where doktyyp+str(dokumnr,7)= "G"+str(dok.krdokumnr,7) ',''),psql('select tasudok from dok where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>vnimi+' '+dok.tasudok</div>
<div class='field' contenteditable='true'>DOK.kuupaev</div>
</div>
<div class='bg-warning'>
<div class='panel-footer'>GroupHeader 1: str(dokumnr)+str(koopia,2)</div>
</div>
</div>
</body>
</html>
I'm trying to create a register/login overlay for users although when trying to use the JQuery .toggle() I have no luck. I can't see any obvious issues and any minor tweaks I've made have been unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle(slow);
});
});
</script>
</body>
CSS:
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
Check it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
<style>
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle('slow');
});
});
</script>
</body>
You are calling .toggle() with an undefined variable called slow:
$('.register').toggle(slow);
You need to pass the string "slow":
$('.register').toggle("slow");
And you may need to cancel the default click behaviour and/or change the link's href="" to href="#":
$('#toggle-reg').click(function(e) {
$('.register').toggle("slow");
e.preventDefault();
});
Demo: http://jsfiddle.net/PDaej/1