I followed a tutorial for infinite loading. I managed this code, but the background just keeps loading again and again. I want to display my content just once. Can anyone help me please? Here's the code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yHandler(){
// Watch video for line by line explanation of the code
// http://www.youtube.com/watch?v=eziREnZPml4
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
// Ajax call to get more dynamic data goes here
wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}
window.onscroll = yHandler;
</script>
<style type="text/css">
div#status{position:fixed; font-size:24px;}
div#wrap{width:800px; margin:0px auto;}
div.newData{height:1000px; background:#09F; margin:10px 0px;}
</style>
</head>
<body>
<div id="status">0 | 0</div>
<div id="wrap"><img src="http://images.bwwstatic.com/tvnetworklogos/1470470F-930B-5791-2D55F77DC33EBA96.jpg"></div>
</body>
</html>
by setting the window.onscroll to null you essentially have a "fire once" event.
<script type="text/javascript">
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
// Ajax call to get more dynamic data goes here
wrap.innerHTML += '<div class="newData"></div>';
window.onscroll = null;
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}
window.onscroll = yHandler;
</script>
Related
I'm struggling to open my json arranged data in AmCharts4. In my previous charts I used very simple script (chart.data = ;), which unfortunately does not work this time. So I'm using chart.dataSource.url function proposed by AmCharts documentation. When, I load example file found on web everything works fine, as soon as I switch to my file the chart is not able to load file. I'm not able to find a similar problem on web, therefore I would be very grateful for help.
Here is my example with working url and my not working file.
Thanks in advance:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<style>
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create('chartdiv', am4charts.XYChart)
// Modify chart's colors
chart.colors.list = [
am4core.color("#264B29"),
am4core.color("#94B255"),
am4core.color("#456C39"),
am4core.color("#C4D563"),
am4core.color("#698F47"),
am4core.color("#F9F871"),
];
chart.legend = new am4charts.Legend()
chart.legend.position = 'top'
chart.legend.paddingBottom = 20
chart.legend.labels.template.maxWidth = 95
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
xAxis.dataFields.category = 'year'
xAxis.renderer.cellStartLocation = 0.1
xAxis.renderer.cellEndLocation = 0.9
xAxis.renderer.grid.template.location = 0;
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
function createSeries(value, name) {
var series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.valueY = value
series.dataFields.categoryX = 'year'
series.name = name
series.events.on("hidden", arrangeColumns);
series.events.on("shown", arrangeColumns);
var bullet = series.bullets.push(new am4charts.LabelBullet())
bullet.interactionsEnabled = false
bullet.dy = 30;
bullet.label.text = '{valueY}'
bullet.label.fill = am4core.color('#ffffff')
return series;
}
// Add data
//Working url
//chart.dataSource.url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json";
//My SQL produced JSON file is not working
chart.dataSource.url = "data/my-file.php";
chart.dataSource.adapter.add("parsedData", function(data) {
var newData = [];
data.forEach(function(dataItem) {
var newDataItem = {};
Object.keys(dataItem).forEach(function(key) {
if (typeof dataItem[key] === "object") {
newDataItem["_id"] = dataItem[key]["#id"];
dataItem[key]["Column"].forEach(function(dataItem) {
newDataItem[dataItem["#name"]] = dataItem["#id"];
});
} else {
newDataItem[key] = dataItem[key];
}
});
newData.push(newDataItem);
});
data = newData;
return data;
});
createSeries('cars', 'The First');
createSeries('motorcycles', 'The Second');
createSeries('bicycles', 'The Third');
//createSeries('bilanca_lsk_lst', 'T4');
function arrangeColumns() {
var series = chart.series.getIndex(0);
var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
if (series.dataItems.length > 1) {
var x0 = xAxis.getX(series.dataItems.getIndex(0), "yearX");
var x1 = xAxis.getX(series.dataItems.getIndex(1), "yearX");
var delta = ((x1 - x0) / chart.series.length) * w;
if (am4core.isNumber(delta)) {
var middle = chart.series.length / 2;
var newIndex = 0;
chart.series.each(function(series) {
if (!series.isHidden && !series.isHiding) {
series.dummyData = newIndex;
newIndex++;
}
else {
series.dummyData = chart.series.indexOf(series);
}
})
var visibleCount = newIndex;
var newMiddle = visibleCount / 2;
chart.series.each(function(series) {
var trueIndex = chart.series.indexOf(series);
var newIndex = series.dummyData;
var dx = (newIndex - trueIndex + middle - newMiddle) * delta
series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
})
}
}
}
});
// end am4core.ready()
</script>
I found a typing error in my-file.php
Anyhow, after I solved typing issue the chart.dataSource.url function still did not work, but It worked using next php include script.
chart.data = <?php include './data/my-file.php'; ?>;
Been really stressed out for a while, as I'm very new to coding and can't figure out how to transfer some paragraph data across pages.
Here is my code on my first page:
<!DOCTYPE>
<html>
<head>
<h1>z</h1>
</head>
<body>
<p>test</p>
<p id="goalPage"></p>
<script type="text/javascript">
var t = Math.floor((Math.random() * 1) + 1);
if (t === 1) {document.getElementById("goalPage").innerHTML = "Your goal page is Data 1";}
else {alert('Unprecedented failure. Please reload the page and report the bug to me.');}
function testJS() {
var b = document.getElementById('goalPage').value,
url = 'file:///C:/Users/Admin/Desktop/Coding%20Data%20Files/data1.html?name=load' + encodeURIComponent(b);
document.location.href = url;
}
</script>
On my second page, this is my code:
<!DOCTYPE>
<html>
<head>
<h1>w</h1>
</head>
<body>
<p id="goalPage"></p>
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('goalPage').innerHTML = data.load;
}
</script>
</body>
</html>
I used many other forum answers to try to get a working solution, however I could not. Any help would be appreciated.
I am a 3 month beginner. I'm currently working on a simple game, to try different skills I learned recently and I have a problem I couldn't solve with Google.
My JS code generates a grid made out of divs, (coordinates in ID), and appends a child (the player) once they're here, but I can't get to display the player image. I previously just gave the div a #player id but I changed and tried appending the player as a child div, because later it'll be easier to move a div around rather than removing and adding IDs (when making player controls).
Here's my code:
The CSS
.tile{
margin:2px;
height:50px;
width:50px;
border:1px solid black;
display: inline-block;
}
#map{
height:482px;
width:730px;
background-image:url(bg.png);
}
#player{
background-image:url(player.png);
}
#monster{
background-image:url(monster.png);
}
#start{
margin:auto;
color:white;
background-color:grey;
border:2px solid black;
}
The JavaScript
var game = function(){
$("#hgrass").hide()
$("#htile").hide()
$("#hmnstr").hide()
$("#hplayr").hide()
$("#start").click(function(){startGame();
});
var genMap = function(){
var map = document.createElement("div");
document.body.appendChild(map);
map.setAttribute("id","map")
for(c=0;c<8;c++){
for(r = 0;r<13;r++){
var tile = document.createElement("div");
var tileId = c+"/"+r;
tile.setAttribute("id",tileId);
tile.setAttribute("class","tile");
map.appendChild(tile);
}
}
}
var spawnPlayer = function(){
var rrow = (Math.floor((Math.random() * 8)));
var rcol = (Math.floor((Math.random() * 13)));
var prow = rrow.toString();
var pcol = rcol.toString();
var coord = document.getElementById(prow+"/"+pcol)
var player = document.createElement("div")
player.setAttribute("id","player")
coord.appendChild(player)
}
var spawnMonster = function(){
var rrow = (Math.floor((Math.random() * 8)));
var rcol = (Math.floor((Math.random() * 13)));
var prow = rrow.toString();
var pcol = rcol.toString();
var monster = document.getElementById(prow+"/"+pcol)
monster.setAttribute("id","monster")
}
/*var turns = function(){
var pturn = true
$(document).keypress(function(event){
var pla = document.getElementById("player")
if (event.which == 37){
pla.removeAttribute("id","player");
pturn = false;
}
});
};*/
var startGame = function(){
genMap();
spawnPlayer();
spawnMonster();
// turns();
$("#start").hide()
$("#hgrass").show()
$("#htile").show()
$("#hmnstr").show()
$("#hplayr").show()
}
};
And the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="test.css"/>
<script src="test.js"></script>
<script src="jquery-3.1.0.js"></script>
</head>
<body onload="game()">
<button type="button" id="start">Click to start</button>
<button type="button" id="hgrass">Click to hide grass
<button type="button" id="htile">Click to hide tiles</button>
<button type="button" id="hmnstr">Click to hide monster</button>
<button type="button" id="hplayr">Click to hide player</button>
</body>
</html>
I'm trying to figure out how to switch from one image to another after 500 ms. What I have currently keeps switching between images, but I want each image to display for 500 ms and to have the second image disappear after that 500 ms instead of having it loop. This is what I have right now:
<html>
<head>
<title>loop</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 500);
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>
Can anyone help me fix this? Thank you!
This should do what you want it to do:
<html>
<head>
<title>loop</title>
<script type = "text/javascript">
var images = [];
var x = 0;
var $img = document.getElementById("img");
images[0] = "image1.jpg";
images[1] = "image2.jpg";
function displayNextImage() {
if (++x < images.length) {
$img.src = images[x];
setInterval(displayNextImage, 500);
}
else {
$img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>
I am trying to create dynamically generated elements when the user clicks on a button. The should slide in from the right, and when the button is clicked again, another should slide in from the right. For some reason, it is not doing exactly what I need it to do. Here's the code:
<html>
<head>
<title>Chat Head</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
screenWidth = $(window).width();
screenHeight = $(window).height();
msgWidth = 0.7*screenWidth;
msgHeight = 0.7*screenHeight;
$("#note").css("width", msgWidth);
$("#note").css("height", msgHeight);
$("#slide").click(function(){
var textArea = '<textarea class = form-control rows = "3" id = "text"></textarea>';
$(textArea).appendTo('.note');
var effect = 'slide';
var duration = 1000;
$(".note").toggle(effect, {direction: 'right'}, duration);
});
});
</script>
</head>
<style type="text/css">
.note{
display: none;
}
</style>
<body>
<div class="row">
<div class="col-md-12">
<button class = "button" id = "slide">Slide</button>
<hr />
<div class="note">
<!-- <textarea class = "form-control" rows = "2" id = "note"></textarea> -->
</div>
</div>
</div>
</body>
</html>
Here's the JS Fiddle that goes with the code:
http://jsfiddle.net/ma6Jq/2/
Here is an implementation I came up with. http://jsfiddle.net/Ar7qw/1/
<script>
$(document).ready(function(){
var count = 0;
$("#slide").click(function(){
count = count + 1;
screenWidth = $(window).width();
screenHeight = $(window).height();
msgWidth = 0.7*screenWidth;
msgHeight = 0.7*screenHeight;
$("#note"+ count).css("width", msgWidth);
$("#note"+ count).css("height", msgHeight);
var newnote = '<div class="note' + count +'"></div>';
$(newnote).appendTo('.col-md-12');
var textArea = '<textarea class="form-control" rows = "3" id = "text"></textarea>';
$(textArea).appendTo('.note' + count);
$('.note' + count).effect('slide', {direction: 'right'}, 1000);
});
});
</script>
This gets you close. I'm out of time for now.
http://jsfiddle.net/isherwood/ma6Jq/10
.note-box {
margin-left: 150%;
}
.done {
margin-left: 10px;
transition: all 1s;
}
$("#slide").click(function () {
var textArea = '<textarea class="form-control note-box" rows="3"></textarea>';
var duration = 1000;
$(textArea).appendTo('#note').addClass('done', duration);
});
Another implementation for anybody needing one(or a couple different choices of solutions)
http://jsfiddle.net/ma6Jq/13/
var counter = 0;
$("#slide").click(function () {
counter ++;
var textArea = '<div class="note' + counter + '"><textarea class ="form-control" rows = "3" id = "text">'+ counter +'yo</textarea></div>';
$(textArea).appendTo('.note');
var effect = 'slide';
var duration = 1000;
var stringhere = ".note" + counter;
$(stringhere).effect('slide',
{
direction:'right'
}, duration);
/*
$(stringhere).animate({
marginLeft: parseInt($(stringhere).css('marginLeft'),1000) == 0 ?
$(stringhere).outerWidth() :
100
});
*/
/*
$(stringhere).toggle(effect, {
direction: 'left'
}, duration);
*/
});
});