I'm trying to make a game in HTML5 and i'm trying to load a map level into the game from a text file through JavaScript. I've looked at a few questions already but for some reason the code isn't working. Could someone have a look and tell me if there's anything glaringly obvious?
$.get('js/mapFile.txt',function(data){
alert();
var perLine=data.split('\n');
var myVars=[];
for(i=0;i<perLine.length;i++)
{
var line=perLine[i].split(',');
myVars[i]={
'time':line[0],
'event':line[1],
'color':line[2],
'type':line[3]
}
}
document.getElementById("test").innerHTML = "" + myVars[0].time + "Jimmy";
});
this is just demo code btw, I'm gonna adapt it when I get the principal working
Related
Hello Stack Overflow community,
I am a long time reader, first time poster. Have gotten tons of help from really smart people on this site through other's questions, but I've encountered a problem that has actually compelled me to sign up. Hopefully this post helps somebody else out who's looking for this same information.
I've been trying to figure out the easiest way to display blog information on one of my sites.
I decided to use tumblr and it's API to display this information. This is the code I've come across thats gotten me pretty far along the way:
html
<div id="Posts"><ul></ul></div>
javascript
function loadPosts () {
var key = "api_key=1waQ1OkbKW817GisHWCO0sIRZC4IP7sXeCK7EFulQskOYonz5E";
var api = "https://api.tumblr.com/v2/blog/cantbrooklyn.tumblr.com/";
var retrieve_more = function (offset) {
$.getJSON(api + "posts?callback=?&limit=20&offset=" + offset + "&" + key,function(data) {
$.each(data.response.posts, function(i, item) {
var content = item.body;
$("#Posts ul").append('<li>' + content + '</li>')
});
if (data.response.posts.length == 20) {
retrieve_more(offset + 20);
}
});
};
retrieve_more(0);
}
loadPosts();
jsfiddle
If you check the results of the code in jsfiddle, you will see a long list of my posts, but with many instances of the word "undefined." Each "undefined" is supposed to be one of my media post, showing a photo or a video. What's confusing is that images in my textual posts are showing up fine. So somewhere in the javascript, my code is omitting everything but text posts. If anybody has any idea what's wrong, I would appreciate the advice.
Thanks in advance!
zach
This is my first time posting on stackoverflow, so I apologize if there is any rules or guidelines that I have not followed correctly.
the problem
I am currently working on a school project where we have to create a website and my website is being built with the masonry (from http://masonry.desandro.com/). I want my images to appear differently every time someone goes to the website, so I wanted to create a system where different images would be loaded. I have put together a code from several sources on the web, but it does not return the correct image (or any for that matter).
I am still quite new to coding, but what I have tried to do to achieve this is the following:
the code
<img id="image1" class="grid-item grid-item--width2 grid-item--height3" src="http://placehold.it/200x200">
<script>
var mydate = new date();
var mynumber = mydate.getDate();
document.getElementById("image1").src = "images/" + mynumber +".jpg";
if(mynumber==33)
{
mynumber=1;
}
else
{
var mynumber=mynumber+1;
}
</script>
The idea behind this is that it grabs the date, and then uses this date to start grabbing images in my image folder (the images are named 1,2,3,4... this goes on and will be added to, but for testing purposes I have made sure their are over 31). This means the website will load slightly different from day to day.
However this hasn't worked, and I could not figure out why exactly.
Additional Information
As I am new to much of this I do not know how much information is required to solve this problem so I will now attempt to add as much as I can think of, much of the following may not be needed.
All my testing was done on chrome
All my work was done using brackets
I am using placeholder images for all images to begin with
Every image loaded on to the page is a placholder image starting with 'image1', 'image2', 'image3'... and so on.
If I can get this code to work it would be copied under each image and replace them one by one.
Js file attached:
$(document).ready( function() {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 200
});
var $stamp = $grid.find('.stamp');
var isStamped = false;
$('.stamp-button').on( 'click', function() {
// stamp or unstamp element
if ( isStamped ) {
$grid.masonry( 'unstamp', $stamp );
} else {
$grid.masonry( 'stamp', $stamp );
}
// trigger layout
$grid.masonry('layout');
// set flag
isStamped = !isStamped;
});
});
thank you for your time
Thank you for taking the time to help me with my school project. Any feedback is appreciated, and if you need more information to help please let me know what I can provide you with. Thank you
I am not aware of the masonary.Also I will like to know the image source, Is there any array which is holding the images? or you will get a json response.Just for demo I have put some image in an array .Also not every image has it's extension .jpg. On this day of writing that is 8Dec, I have put only 10 images.You can put some empty ' ' before the images just to match the index of the array with image source
var tDate = new Date();
var getToday = tDate.getDate();
console.log(imgSource[getToday]);
document.getElementById("image1").src=imgSource[getToday];
To see the full code, please visit HERE
Also you have added this part
src="http://placehold.it/200x200"
Do you need to add the source to image at the location?
I'm creating a website that's going to have hundreds of pages. I want each page to be shareable on Facebook and Twitter. I've already created these buttons but I also want to have their respective share counters next to my share buttons. I don't want to use the standard Facebook method they provide because the coding looks bloated.
Right, so after doing some research, I found this example on codepen.
This looks exactly what I want - very simple!
However, I need some clarification and basic help with how this javascript code works:
var permalink = 'http://codepen.io';
var getTwitterCount = function () {
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?
url='+permalink+'&callback=?', function(data){
var twitterShares = data.count;
$('.twitter .share-count').text(twitterShares);
});
};
getTwitterCount();
var getFacebookCount = function () {
$.getJSON('http://graph.facebook.com/?ids='+permalink+'&callback=?',
function(data){
var facebookShares = data[permalink].shares;
$('.facebook .share-count').text(facebookShares);
});
};
getFacebookCount();
This bit of code:
var permalink = 'http://codepen.io';
Does this have to be:
1) the url of the actual page I want shared, eg: http://www.example.com/page-1/
OR
2) Must this be the root of the domain name, eg: http://www.example.com/
?
Or am I missing something else?
If the answer is #1 above, then that means I have to include + edit this line for each page which isn't ideal because I have all my javascript code + plugins in ONE .js file to reduce http requests, so I'd prefer it that I don't have to add this javascript on-page for every page.
It would be the page that you want to share, but you could get around it without using a separate variable for each page by setting it to something like document.location.href for example?
I would like to save the results calculated on html page in a textfile using javascript.
<script type="text/javascript">
window.onload = function () {
var sw : StreamWriter = new StreamWriter("HTML_Results.txt");
sr.Write('xyz");
*** calculations ******
sr.Write (result);
}
</script>
by doing this, my WP8 App is misbehaving and not displaying images as usual. This app is an Image Fader (calculates FPS).
Also tried:
StreamWriter sr;
try {
sr = new StreamWriter("\HTML5\HTMLResults.txt");
sr.Write("xyz");
File.SetAttributes("HTML5\HTMLResults.txt", FileAttributes.Hidden);
} catch(IOException ex) {
console.write ("error writing"); //handling IO
}
The aim is to:
Extract calculated values of several html pages(after getting loaded
one by one) in a single text file.
A Resultant HTML that reads this
text file and displays results in a tabular format.
Is there a better way to this job or the above can be rectified and used? Appreciate help.
Perhaps I've misunderstood your code but it looks like you're trying to write Java within JavaScript scripting tags. You cannot write Java in an HTML document. As far as I know, client-side JavaScript (which given your <script> tags is I guess what you're trying to write) can't perform the kind of file I/O operations you seem to want here.
You need to use Node JS to use JavaScript for something like that and then you're talking server-side. The closest you can get on client-side is using the new localStorage feature in HTML5 (not supported by all browsers).
I'm trying to load a variable from a file using javascript. I've found some examples but I can't seem to make it work and could really use some help on getting my syntax right.
Basically, I want to load a random ad image on a page, but I would like the list of ads to be pulled from a file. Currently I'm loading the images using the following script which I found on the internet:
<script type="text/javascript">
var picPaths = [
'/images/ad-1.jpg',
'/images/ad-2.jpg',
'/images/ad-3.jpg',
'/images/ad-4.jpg'
]
var oPics = [];
for(i=0; i < picPaths.length; i++){
oPics[i] = new Image();
oPics[i].src = picPaths[i];
}
curPic = Math.floor(Math.random()*oPics.length);
window.onload=function(){
document.getElementById('imgRotator').src = oPics[curPic].src;
}
</script>
I have been trying to get the picPath variable value to load from a file (instead of stating it in the code). I found some code here on stackoverflow and tried adjusted it to the following:
var picPaths = new XMLHttpRequest();
picPaths.open('GET', '/images/liveimages.inc');
picPaths.send();
I also created the file /images/liveimages.inc which containts the following:
'/images/ad-1.jpg',
'/images/ad-2.jpg',
'/images/ad-3.jpg',
'/images/ad-4.jpg'
But, alas, it’s not working and I’m not programmer enough to fix it. :-( I'm thinking my syntax is off but my code could be off too since I am not a JavaScript guy.
Any help would be appreciated and thanks for taking the time to read (and respond) to my question! :-D
If you store the data file as JSON you can use AJAX/XMLHTTPRequest to fetch it, and JSON.parse (available in all modern browsers) to read it.
An easier way perhaps is just to have a script that contains just the data, like:
var picPaths = [
'/images/ad-1.jpg',
'/images/ad-2.jpg',
'/images/ad-3.jpg',
'/images/ad-4.jpg'
];
And then include your scripts in the correct order:
<script type="text/javascript" src="picpaths.js"></script>
<script type="text/javascript" src="ad_script.js"></script>
ad_script.js will be able to access picPaths.
You could have some server-side script generate picpaths.js for you, for instance by looking at the contents of a folder or a database and pulling the ad info from that.