I know this is likely very easy however I have been bashing my head for little over an hour and I am stuck.
I am trying to use Google Feed API to show a list of recent houses, It works just fine until it comes to pulling the image. I am struggling to get it to pull the image. I am sure there is a way because the slideshow script that google released can get the images...
Here's my code taken from a basic example I am absolutely clueless as to where to go to even try and figure out how to retrieve the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Feed Loader Example #1</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=#"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.trulia.com/rss2/San_Francisco,CA/3p_baths/3p_beds/800000-2000000_price/date;d_sort/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var bmfx = result.feed.entries[i].mediaGroups[0].contents[0].url;
var li = document.createElement("li");
li.innerHTML = '<h3>' + entry.title + ' <cite>by ' + entry.mediaGroup + '</cite></h3>';
li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(li);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Ooops It Failed';
}
});
}
</script>
</head>
<body>
<h1>Google Feed Loader Example</h1>
<ul id="headlines"></ul>
</body>
</html>
According to your case, you should use:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;
Related
I am working on an dynamic HTML document that has to change its styling based on Google Sheets entries. So far it loads the JSON data just fine. I have been looking for a way to style the CSS so I can change it on the fly. Is there anyone that can point me in the right direction?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1d3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function () {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML = adTekst + " " + achtergrondKleur + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<body>
<div id="testoutput"></div>
</body>
</html>
You can do that by toggling classes using javascript.
document.getElementById('testoutput').classList.toggle('myClass');
Other way is to change individual CSS properties
document.getElementById('testoutput').style.backgroundColor = 'RED';
Yes you can, you also give specific css to all columns with using html tags. See snippet below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Sheets</title>
<style>
</style>
<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1dLbBxSuyGxbG3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;
console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);
document.getElementById('testoutput').innerHTML ='<span>'+adTekst+'</span>'+ " " + '<span>'+achtergrondKleur+'</span>' + " " + tekstKleur;
};
ourRequest.send();
</script>
</head>
<style>
div#testoutput { color: red;}
div#testoutput span { color: blue;}
div#testoutput span:first-child {color: aqua;}
</style>
<body>
<div id="testoutput"></div>
</body>
</html>
You can give color or design as per your requirement.
I'm trying to work it out where a js script will pull the price (var) for different items (Id)'s on multiple html pages but what I'm working with only works if all the var's and in the same order as all of the Id's:
function similarfunction() {
var A1307 = 5.54;
document.getElementById('A1307').innerHTML = A1307;
var G2200 = 6.33;
document.getElementById('G2200').innerHTML = G2200;
var G5200 = 5.51;
document.getElementById('G5200').innerHTML = G5200;
var N3633 = 6.31;
document.getElementById('N3633').innerHTML = N3633;
var TS105 = 5.54;
document.getElementById('TS105').innerHTML = TS105;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
</head>
<body onLoad="similarfunction()">
A1307 is $<span id="A1307"></span><br><br>
G2200 is $<span id="G2200"></span><br><br>
G5200 is $<span id="G5200"></span><br><br>
N3633 is $<span id="N3633"></span><br><br>
TS105 is $<span id="TS105"></span><br><br>
</body>
</html>
If I change the 1st Id in the html page to something else, the rest doesn't work...
I'm a novice at best - just trying to find a way to update one js document that can apply site wide the Id is found
Thanks for any help.
The rest doesn't work, because there is no element with the id you've searched for. getElementById fails and the rest of your code was not executed, a classic runtime exception.
Change the name of your variables as well, because there could be a conflict between these variables and corresponding element id's. Use for modern browsers the textContent attribute, instead of innerHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<script type="text/javascript">
function similarfunction(){
var price_A1307 = 5.54;
var span_A1307 = document.getElementById('A1307');
if (span_A1307) span_A1307.textContent = price_A1307;
var price_G2200 = 6.33;
var span_G2200 = document.getElementById('G2200');
if (span_G2200) span_G2200.textContent = price_G2200;
var price_G5200 = 5.51;
var span_G5200 = document.getElementById('G5200');
if (span_G5200) span_G5200.textContent = price_G5200;
var price_N3633 = 6.31;
var span_N3633 = document.getElementById('N3633');
if (span_N3633) span_N3633.textContent = price_N3633;
var price_TS105 = 5.54;
var span_TS105 = document.getElementById('TS105');
if (span_TS105) span_TS105.textContent = price_TS105;
}
</script>
</head>
<body onLoad="similarfunction()">
A1307 is $<span id="A1307"></span><br><br>
G2200 is $<span id="G2200"></span><br><br>
G5200 is $<span id="G5200"></span><br><br>
N3633 is $<span id="N3633"></span><br><br>
TS105 is $<span id="TS105"></span><br><br>
</body>
</html>
So I'm trying to display the results of a few function calls in a JavaScript file that uses benchmark.js in a separate HTML file.
My js file looks something like this (disregard the names of methods and classes):
class.init(function(context) {
Benchmark("function description", {
'defer': true,
fn': function(deferred) {
var x = context.ones([100, 100]);
var y = x.repeat(2, 0);
context.barrier(function (){
deferred.resolve();
});
},
'onComplete': function(event) {
//This is what I'd like to print out
console.log(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms");
//
}
}).run();
There are multiple function calls similar to this.
My HTML just looks something lile:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Sublime Webpage </title>
</head>
<body>
<div class="main">
<div class="head">
<h1>Hello</h1>
</div>
<script src="filename.js"></script>
</div>
</body>
</html>
At the moment, it just prints the results to the console, which is better than nothing, but obviously not what I want. I talked to someone briefly and they suggested I use jQuery. I looked into it, and tried using document.write(this.name + ": " + (this.stats.mean * 1000).toFixed(2) + " ms") in the place of console.log(), but this didn't seem to work. Does anyone have suggestions?
Use document.createTextNode:
// add an output div to your html
<div id='output'></div>
// in your benchmark code
var output = document.getElementById('output');
output.appendChild(document.createTextNode('some result'));
Fiddle
okay, I have been pulling my hair out for hours with this one and now that I'm completely bald I'm throwing in the towel and seeing if anyone can point to the (I'm sure very simple) mistake that is turning my code into useless junk.
I have two pages, the first one the user enters 3 inputs and they are saved as cookies:
<script type="text/javascript">
function CC()
{
var V1Box = document.getElementById("V1");
var V2Box = document.getElementById("V2");
var V3Box = document.getElementById("V3");
var V1 = V1Box.value;
var V2 = V2Box.value;
var V3 = V3Box.value;
document.cookie = "V1 = " + V1 + "; path=/";
document.cookie = "V2 = " + V2 + "; path=/";
document.cookie = "V3 = " + V3 + "; path=/";
window.location = "pg2.html";
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>db2</title>
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Artistic-Body-C
{
font-family:"Verdana", sans-serif; font-size:27.0px; line-height:1.19em;
}
</style>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:900px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin
right:auto;position:relative;width:375px;height:900px;">
<form id="form_1" action="" method="post" target="_self" style="margin:0px;">
<input type="button" style="position:absolute; left:271px; top:12px; width:81px;
height:22px;" value="Submit" onClick="CC()">
<input type="text" id="V1" name="V1" value="" style="position:absolute; left:23px;
top:12px; width:227px;">
<input type="text" id="V2" name="V2" value="" style="position:absolute; left:23px;
top:46px; width:227px;">
<input type="text" id="V3" name="V3" value="" style="position:absolute; left:23px;
top:80px; width:227px;">
</form>
</div>
</body>
</html>
The second page is supposed to get the cookies previously set and isolate there values:
<script type="text/javascript">
window.onload = function getCookie(){
var allcookies = document.cookie;
cookiearray = allcookies.split(';');
for(var i=0; i < cookiearray.length; i++){
var name = cookiearray[i].split('=')[0];
var value = cookiearray[i].split('=')[1];
if(name == 'V1'){var V1 = value;}
if(name == 'V2'){var V2 = value;}
if(name == 'V3'){var V3 = value;}
}
document.getElementById("V1").innerHTML += V2;
document.getElementById("V2").innerHTML += V1;
document.getElementById("V3").innerHTML += V3;
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>db2</title>
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Artistic-Body-C
{
font-family:"Verdana", sans-serif; font-size:27.0px; line-height:1.19em;
}
</style>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:900px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin
right:auto;position:relative;width:375px;height:900px;">
<div style="position:absolute;left:23px;top:12px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C" id="V1">V1: </span></br>
<span class="Artistic-Body-C" id="V2">V2: </span></br>
<span class="Artistic-Body-C" id="V3">V3: </span></br></div>
</div>
</div>
</body>
</html>
The issue I have is that the code does not recognize any of the names in these if statements -- even if I echo the name and value; it will echo "V3" and the corresponding value, but the V3 variable is never set and will echo as "undefined". I am losing my mind trying to figure out how it can have the name set as "V3" but then not recognize "if(name == 'V3'){var V3 = value)" and keep var V3 undefined. I have even tested "if(name != 'V3'){var V3 = value)" and, even when echoing the name and getting "V3" it will interpret name not equaling V3 in the if statement and actually set the appropriate V3 variable value. I don't understand how it can name everything properly, retrieve everything properly, and then not recognize the name in an if statement to set the variable properly -- doesn't matter if I'm calling V1 or V2 or V3; it just doesn't see those names inside of the if statements.
I'm sure this is something stupid in my syntax or there's a typo or something, but after three hours of trying to fix it myself I'm clearly blind to it. I recognize that there are other, simpler ways to manipulate user inputs, but my project as a whole requires that I use cookies and that I am able to retrieve them by name on different pages; if you have any suggestions for how I can accomplish this criteria in a better way I would be very much appreciative, however just getting my current code to work properly would be a big help and my scalp (which as I continue to claw for any remaining strands of hair has begun bleeding profusely) will very much thank you for it.
Look at where V1, V2, V3 are declared!
if(name == 'V1'){var V1 = value;} <-- what happens if not true
if(name == 'V2'){var V2 = value;} <-- what happens if not true
if(name == 'V3'){var V3 = value;} <-- what happens if not true
They will not be defined.
You need to have
var v1 = "";
var v2 = "";
var v3 = "";
declared and drop the var inside the ifs.
JSLint/JSHint would have pointed out this error.
Third issue is innerHTML can not have +=
document.getElementById("V1").innerHTML = document.getElementById("V1").innerHTML + V1;
Other issue is whitespace in the names. Cookies have a space after the ; which you do not account for in the name.
<script type="text/javascript">
function getCookie(){
var allcookies = document.cookie;
cookiearray = allcookies.split(';');
for(var i=0; i < cookiearray.length; i++){
var name = cookiearray[i].split('=')[0];
var value = cookiearray[i].split('=')[1];
if(name == 'V1'){var V1 = value;}
if(name == 'V2'){var V2 = value;}
if(name == 'V3'){var V3 = value;}
}
document.getElementById("V1").innerHTML += V2;
document.getElementById("V2").innerHTML += V1;
document.getElementById("V3").innerHTML += V3;
}
window.onload = getCookie;
</script>
I don't believe the getCookie function was ever run.
I am trying to use a query string which I can successfully do unless it is a mobile page. What I am doing is checking if it is mobile and redirecting. Is there a way to attach the query string to the redirect url?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "http://www.xxxxxxx.com/mobile";
}
// ]]></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxxxx</title>
<script type="text/javascript">
window.onload = function(){
var total = 0;
for(var x = 0; x < parameters.length; x++){
document.getElementById("customerID").value = parameters[x].value;
}
document.forms[0].onsubmit = validate;
}
</script>
I think this might be what you want..
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
window.location = "http://www.xxxxxxx.com/mobile" + window.location.search + window.location.hash;
}
I simplified this as window.location.search is either a blank string or starts with ?. Same goes for .hash
If your starting URL was http://www.some.com/entry?id=10 the redirect would be http://www.some.com/mobile?entry?id=10
Same goes for hashes
http://www.some.com/entry?id=10#paragraph2
would redirect to
http://www.some.com/mobile?id=10#paragraph2
If the current URL does not contain either the redirect URL will remain as is.