As an exercise, I'm trying to display a tarot card picture, the name of the card, and the meaning on a remote page using YQL/xpath/javascript. I've set up the script like the example on Yahoo but can't get it to display in the browser. Any suggestions as to how to improve it so it will display?
<html>
<head>
<title>Example</title>
<script type='text/javascript'>
function tarot(o){
var div = o.query.results.div;
var output = '';
var title = div[0].strong;
var content = div[0].p.content;
var src = div[1].img.src;
output = "<h3>" + title + "</h3></br><p>" + content + "</p><img src='" + src + "' alt="" />";
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<div id='results'></div>
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.tarot.com%2Fdaily%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'cardHolder'%5D%20%7C%20%2F%2Fdiv%5B%40id%3D'cardMeaning'%5D%22&format=json&diagnostics=true&callback=tarot"></script>
</body>
</html>
Any help is greatly appreciated!
~Larys
P.S. - I updated the callback=functionName part of the code to reflect the most current code. Unfortunately, this doesn't seem to fix the problem. Is there something else I seem to be missing?
You have callback=cbfunc but you haven't defined function cbfunc
The problem I see is that you're never calling your tarot() function.
I think you should change your url end to callback=tarot
Hope this helps. Cheers
Related
I would like to know how to add several hundred images in divs but automatically. I have a folder with the images and I want to know if there is a technique to avoid copying and pasting the same code.
For example: <img src="img/01.png">
the idea is to inject this code into the divs and change the names of the images: 01.png, 02.png, 03.png...
Thanks for the help.
You can generate the html using javascript if you run this html page it'll display the tags for the first 99 images.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<p id="my_output"></p>
<script>
let escapeHTML = function (aValue) {
return (
aValue.replace(/>/g, '>').
replace(/</g, '<').
replace(/"/g, '"')
)
}
let myOutput = document.querySelector('#my_output')
for (let i = 1; i < 100; ++i) {
let paddedIndex = ('0' + i).slice(-2)
myOutput.innerHTML += escapeHTML('<img src="img/' + paddedIndex + '.png">') + '<br>'
}
</script>
</body>
</html>
You can then copy paste the output into your code.
Screenshot:
(source: freenetph.yn.lt)
I found this code for a random links on the 3rd party site (I forgot the name) and it looks so helpful to me but my problem is that, I want all those links will open in a new tab when it clicked. Anybody can help me? Im new to web development. Thanks in advance.
Based on the code in the screenshot, do this although using document.write is not recommended:
document.write('' + data[1] + '');
<script>
window.open('http://link.com', '_blank');
</script>
As you are new to development, Instead of putting single line solution, I have added Code in your snippet, please check solution below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var links = ["random/end1.html|Castle 1", "random/end2.html|Castle 2", "random/end3.html|Castle 3"];
function init() {
var r = Math.floor(Math.random() * links.length),
data = links[r].split('|');
var answer = document.getElementById('answer');
//document.write("" + data[1] + "");
answer.innerHTML = "" + data[1] + "";
};
</script>
</head>
<body onload="init()">
<div id="answer"></div>
</body>
</html>
So I have an array in my script.js file. The array contains around 12 different things. I use the array to store divs IDs'. Because I want to load those divs dynamically. I've done that I loaded the divs dynamically but now I want to use that array for loading things inside the first div(a title a picture and so on).
let donorFeatureNames = [
'SpawnVehicle',
'RepairVehicle',
'RocketVoltic',
'MoreVehicle',
'ChatColors',
'Deagle',
'M4',
'Sniper',
'CopFeature',
'CrimFeature',
'Changeskin',
'Cash'
]
function loadFeatures () {
for (i = 0; i < 12; i++) {
$('#featureMenu').append('<div id=' + '"' + donorFeatureNames[i] + '"' + 'class="item notLoaded"></div>')
$("'#" + donorFeatureNames[i] + "'").append(span class="title">' + $(this).data('donorfeature') + '</span>)
}
I hope you understand what I'm asking. Cause I'm not that good at explaining things.
Instead of an array, just use jquery:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index1001</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//credit to https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag
$(function () {
$("#test1").append("Text");
$('#test2').prepend("<img src='../../Images/w.JPG' />")
})
</script>
</head>
<body>
<div id="test1" class="anArray"></div>
<br/>
<div id="test2" class="anArray"></div>
</body>
</html>
You can even do this to make an array: $(".anArray").addClass("aColor");
Huangism answered my question.
$("'#" + donorFeatureNames[i] + "'") isn't correct, but this is: $("#" + donorFeatureNames[i])
That's basically what I asked.
Thanks a lot man!
Am trying to create a facebook share code in just html and javascript
I would want the link to be exactly like this:
share
But the problem now is, how can I get the page title through the help of ONLY javascript and then add it to the link at t=PAGETITLE.
I think you just want to append a "?t=" parameter to the query string passed into the FB share link with the document.title. If that is correct, you can do
var shareURL = fbShareURL + encodeURIComponent(linkURL + "?t=" + document.title));
which will make a URL like
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flmn.9nty.com%2F%3Ft%3DTITLE
which will include the page title as a query string parameter in url-encoded form. It's up to you what you do with that query string parameter, though. Using jQuery, you can update the share link dynamically:
var fbShareURL = "http://www.facebook.com/sharer/sharer.php?u=";
var title = document.title; // The current page
var linkURL = "http://lmn.9nty.com/";
$link = $("<a>");
$link.attr("href", fbShareURL + encodeURIComponent(linkURL + "?t=" + title));
$link.text("Share");
// Add the link to your page
$("body").append($link);
Demo: http://jsfiddle.net/7wst45gq/1/
Here is full, working HTML code as requested:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>How to get current page title and add it to link directly as variable in JavaScript</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Begin demo code
var fbShareURL = "http://www.facebook.com/sharer/sharer.php?u=";
var title = document.title; // The current page
var linkURL = "http://lmn.9nty.com/";
$link = $("<a>");
$link.attr("href", fbShareURL + encodeURIComponent(linkURL + "?t=" + title));
$link.text("Share");
// Add the link to your page
$("body").append($link);
// End demo code
});//]]>
</script>
</head>
<body></body>
</html>
sharer.php only takes the URL as parameter, the rest of the data will come from the Open Graph tags:
a href="http://www.facebook.com/sharer/sharer.php?u=http://lmn.9nty.com/">Share</a>
Btw, you should urlencode the shared URL.
I'm trying to combine some dynamic parameters that are sent through the URL into a frame, but nothing works. Tried them inside the tags, outside, before, after... Can somebody shed a light on this?
URL on the top frame is http://www.someurl.com/someparameters.html?country=EN_US. The first script will get the language (EN) and market (US). Then, the frameset is built with another page and our target page, which should be called with the link "http://www.someurl.com/somefolders?LANGUAGE=EN&MARKET=US&somefixedparameters=123"
This is the source code of the frameset that isn't working.
<!DOCTYPE html>
<html>
<script type="text/javascript"><!--
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
}
</script>
<frameset rows="36px,*" frameborder="0">
<frame id="main" src="header_cgh.html?country=BR_OP" noresize="noresize" scrolling="no" border="1" bordercolor=white>
<frame id="flow" src="">
</frameset>
<script type="text/javascript"><!--
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123";
</script>
</html>
Thanks for your help!
UPDATE: After opening Chrome's Javascript console and inserting the command:
document.getElementById("flow").src = "http://www.someurl.com/somefolders?LANGUAGE=" + language + "&MARKET=" + market + "&somefixedparameters=123"
It returned the expected result. But it won't happen on its own.
Change your script to this:
window.onload = function() {
var url = window.location.href;
var language = url.substr(url.indexOf("country=") + 8,2);
var market = url.substr(url.indexOf("country=") + 11,2);
document.getElementById("flow").src = "/somefolders?language=" + language + "&market=" + market;
}
And put it in a script tag in your head.
Also, as a heads up: if someone requests the main frameset page without a query string, or without the country parameter in there, then indexOf returns -1, and you end up with nonsense in your language and market variables. You'll want to come up with a more robust way of getting that information.
Here is an example using postMessage. See if this handles what you're looking for:
<iframe src="http://a.JavaScript.info/files/tutorial/window/receive.html" id="iframe" style="height:60px"></iframe>
<form name="form">
<input type="text" name="msg" value="Your message"/>
<input type="submit"/>
</form>
<script>
var win = document.getElementById("iframe").contentWindow
document.forms.form.onsubmit = function() {
win.postMessage(
this.elements.msg.value,
"http://a.JavaScript.info"
)
return false
}
</script>
From http://javascript.info/tutorial/cross-window-messaging-with-postmessage