<script>
var twitchApi = "https://api.twitch.tv/kraken/streams";
$.getJSON(twitchApi, function (json) {
for (var i = 0; i < 9; i++) {
var streamGame = json.streams[i].game;
var streamThumb = json.streams[i].preview.medium;
var streamVideo = json.streams[i].channel.name;
<!-- var streamViewers = json.streams[i].streamViewers; -->
$('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>');
}
});
</script>
So I've got this code. And I want to make it that onClick on an image or button it fetches 9 more stream previews. How can I do that? Could someone fix the code for me?
Also, how can I edit the Thumbnails which are getting fetched from the JSON?
You can get the data and persist in a variable, then display on demand.
$(function() {
//varianles
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
//Get data from API and store it in variable
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
//Set upon page load
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
<!-- var streamViewers = twitchData[i].streamViewers; -->
$('#twitch').append('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"></img>');
}
}
//Bind click handlers
$('#button').click(function() {
setData();
});
});
Related
I wrote a code in javascript to export the report to excel using html. it works for 1 report but when I run multiple reports at the same place using for loop and try to export it to excel it gives me an SBOX_FATAL_MEMORY_EXCEEDED error.
Please help me with it.
function updateReportHidden(idCount) {
if (idCount > 0) {
var template = "";
for (var a = 0; a <= idCount; a++) {
template[a] = "<html><head><title>Document</title><script>window.chartAnimation = false;<\/script></head><body>" + $("#report" + a).html() + "</body></html>";
}
for (var b = 0; b <= idCount; b++) {
var temp = $(".container div .hide");
temp.remove();
$("table").attr("border", "1");
$(".container div").append(temp);
$('#ReportHidden' + b).val("");
$('#ReportHidden' + b).val(template[b]);
}
} else {
$('#ReportHidden0').val("");
var temp = $(".container div .hide");
temp.remove();
$("table").attr("border", "1");
var template = "<html><head><title>Document</title><script>window.chartAnimation = false;<\/script></head><body>" + $("#report0").html() + "</body></html>";
$('#ReportHidden0').val(template);
$(".container div").append(temp);
}
};
My question is as follows, how could I pass images that are inside an array to a div?
I've multiplied the div#imagem and I need to pass the array images to it.
But I do not know how.. Can someone help me?!
My JavaScript/JQuery
var divBoard = $("<div id='board'></div>");
$("body").after(divBoard);
var titleGame = $("<h1></h1>").text("Memory Game");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#board").append(titleGame);
$("#board").append(btnReset);
(function (){
var images = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$(window).load(function () {
$('#board').html('');
var numCards = 16;
for (var i = 1; i <= numCards; i++) {
$("#board").append("<div class='image" + i + " images'></div>") &&
$(".image" + i).clone().appendTo("#board");
}
var cards = $(".images");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
}
})();
app.start();
});
My HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JavaScript Memory Game</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf8">
var app = { nrComponents:0 };
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
</script>
<script src="script.js" charset="utf8"></script>
</body>
</html>
Here are critical 2 problems I listed. Some line in your code seems not neccecery and hard to debug for it. I would suggest to simplify your code for better debugging.Hope it helps..
$("body").after(divTabuleiro); I think this will insert content after 'body' instead of putting 'divTabuleiro' inside the 'body'.
$("#tabuleiro").append(""); should have tag inside for insert images.
// Create a start function and move you initial code here....
app.start = function(){
var imagens = [
'https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg',
'http://www.pressunion.org/wp-content/uploads/2016/11/1-2.jpg',
'http://www.feixiubook.com/wp-content/uploads/2016/06/01-25.jpg'
];
var divTabuleiro = $("<div id='tabuleiro'></div>");
$("body").append(divTabuleiro);
var titulo = $("<h1></h1>").text("Jogo da Memória");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#tabuleiro").append(titulo);
$("#tabuleiro").append(btnReset);
$('#tabuleiro').html('');
var numCards = 3;
for (var i = 0; i < numCards; i++) {
var img = imagens[i];
$("#tabuleiro").append("<div class='my-image-" + i + " my-image'><img src='" + img + "'></div>") && $(".my-image-" + i).clone().appendTo("#tabuleiro");
}
// randomize cards in stack
var cards = $(".my-image");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
}
};
// Maybe create another function
app.reset = function(){
};
$(window).ready(function() {
// Because you have created a start function above. you can call it when document ready
app.start();
});
.my-image {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
.my-image img {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Create a namespace of app
var app = { nrComponents:0 };
// Add a function 'getComponent' in to it
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
// So There is no start() function inside......
// we can add start function later..
</script>
Hm.. I somehow don't understand your exact request, but for making images based on an array you can use this as a guide :
var imagens = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$.each(imagens,function(index,imageSrc){
$("Parent Element").append('<img src="'+imageSrc+'" />');
});
hope it helps.
I have the following piece of code I am working on. My purpose is to be able to grab information about different users from a specific website, display the name and other info and then have a button that when clicked, prints more information. I am able to get the information and display the name and picture, but when I click the button the information is displayed at the top of the page, not under the specific button that was clicked. I want for the information to be display under each user... I am new to Javascript and learning on my own, any help is appreciated!
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + '<br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'")>Repositories</button></br>'+'<div id="id"></div>';
}
document.getElementById("id01").innerHTML = out;
}
Printing Function
function printF(array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
document.getElementById("id").innerHTML = out;
}
This works fine. I just made div with dynamic ids and passed it to the function
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + ' <br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'","'+i+'")>Repositories</button></br>'+'<div id="'+ 'id' + i +'"></div>';
}
document.getElementById("id01").innerHTML = out;
}
function printRepos(array, id) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
console.log('id' + id);
document.getElementById('id' + id).innerHTML = out;
}
Add the "this" keyword as a parameter to your onclicks, to pass in the button that was clicked:
<button onclick=printRepos(this,"'+user[i].repos_url+'")>Repositories</button>
Then locate the next div after that button in your event handler:
function printF(btn, array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
// find the div
var d = btn; // start with the button
while (d.tagName != "DIV") d = d.nextSibling; // look for the next div
d.innerHTML = out;
}
I'm new to JavaScript.
I've already used Java and C# (and a bit of c++)
So far..
I'm using JavaScript to load pictures from a directory into an Array. After this I want to place this pictures on my page.
This works already.
The next step was to add a fullscreen function, to load the picture in fullscreen resolution.
var myfiles;
var pfad = "./bilder/" //directory of the images
var index = 0;
myfiles = new Array(); //String array with the names of the pictures
myfiles[0] = "01.png";
myfiles[1] = "01.png"; //usw.
myfiles[2] = "03.png";
myfiles[3] = "02.png";
function fullScreen(bild) {
document.write('<img src="'+ pfad + bild + '" border="0" width="100%">');
alert (bild);
}
function start() {
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(string);" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
}
This code only loads the last picture of my array..
The function fullScreen() seems to take only the last value of string.
The HTML part
<script type="text/javascript">
start();
</script>
It is only evaluating string when it is clicked, when the loop has already finished.
You'll need to pass it directly:
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(\''+string+'\');" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
SOLUTION
JS
var myfiles = [];
var pfad = "http://placehold.it/350x250/&text=";
var index = 0;
myfiles[0] = "Image 0";
myfiles[1] = "Image 1";
myfiles[2] = "Image 2";
myfiles[3] = "Image 3";
function fullscreen(){
if(this.className == 'fullscreen') this.className = '';
else this.className = 'fullscreen';
}
function createImage(src){
var img = document.createElement('img');
img.src = pfad + src;
img.addEventListener('click', fullscreen);
document.body.appendChild(img);
return img;
}
function start(){
for(var i=0; i < myfiles.length; i++) {
var img = createImage(myfiles[i]);
}
}
start();
CSS
html, body, .fullscreen {
height: 100%;
}
I am using this tutorial to freeze the header of the GridView. I did everything as explained in the tutorial but I got the following error in IE9 and I don't know why.
Error:
Line: 182
Error: Unable to get value of the property 'offsetWidth': object is
null or undefined
I defined the GridView in the Javascript code as show below:
<script type = "text/javascript">
var GridId = "<%=GridView1 %>";
var ScrollHeight = 300;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if(parseInt(gridHeight) > ScrollHeight){
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
</script>
So how I fix this problem?
You have written code incorrectly
Instead of
var GridId = "<%=GridView1 %>";
Change to
var GridId = "<%=GridView1.ClientID %>"; //<= Check this
When ASP.Net controls are rendered their Id gets mangled and to get the mangled on client side the notation is as shown above.
Hope this solves your problem.