I am not an experienced coder so excuse me if my explanation isn't perfect.
I'm making an html page and I'd like there to be a section that shows some Osu! stats. There's this osu api that spits out all of the information I could possibly need but there's a litle bit too much of it.
https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri
The above returns:
[{"user_id":"6962718","username":"Sceleri","count300":"93129","count100":"15744","count50":"3404","playcount":"776","ranked_score":"184300015","total_score":"258886799","pp_rank":"345687","level":"34.115","pp_raw":"314.239","accuracy":"94.54791259765625","count_rank_ss":"1","count_rank_s":"55","count_rank_a":"74","country":"FI","pp_country_rank":"4112","events":[]}]
I'd like to parse a few numbers from there. Example:
"pp_raw":"314.239" -> <p>;314.239</p>;
The <p> would be inside a div and so on, where I can specify some CSS to it and make it look good. The main problem is extracting the data to separate <p> elements.
I have executed this with regex in Rainmeter before (I had help) but I have no idea how to do it in html.
Use Jquery ajax calls. The url you posted basically gives you a json object.
HTML:
<div id="pp_raw">
</div>
Jquery
$.get( "https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri", function( data ) {
//You can put whatever you want in the style attr to make things pretty
$( "#pp_raw" ).html("<p style='color:red'>"+data[0]['pp_raw']+"</p> ");
});
JSFiddle:
https://jsfiddle.net/rwt5mdyk/8/
Related
I'm working on a website to display some details from another website. Specifically I have an element I wish to display. I can get the elements xpath or css path, and I'd like to use this to display the value of the element in HTML box on a unrelated website.
I'm rather new to this so my question is really this basic, I'm sure it's been asked before but I just don't know what search terms to use. I've looked up what I can but I'm unsure if what I have found can be used in a HTML box (I've tried and failed, but I'm unsure if that's an error on my part or the application of the wrong method).
XPath: //*[#id="box2-server-status"]/div[3]/div[1]/div[1]/img
CSS Path:
#box2-server-status > div.box2-content > div:nth-child(4) > div.server-status-indicator > img
Any help/link with guides welcome!
Take a look at this, if that is what can be of help to you..
I got this page..
https://mkdizajn.github.io/my-colors/
and I'm about to pull the title from this page:
http://mkdizajn.github.io/about/
If you open inspector on that page and enter this code in 'console' (of if I got time and add it there in the source ;)
var content;
jQuery.ajax({
url: 'https://mkdizajn.github.io/about/',
success: function(data){
content = data;
var body = jQuery( content ) ;
alert( body.find('h1').text() ) ;
}
})
you will have to get content from second page in the form of alert.. .. take a note that page is from that same domain, that is very important
https://mkdizajn.github.io/my-colors/
hth, k
I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}
I need to get the date from the server in mm/dd/yyyy without any javascript or asp code. I would prefer to do this as either a link that flows in the current document frame and that also injects the mm/dd/yyyy into the current html web page as css or other non code based solution. I don't want to use any extraneous querying languages like xslt, xquery, or plinq either.
example:
<h3>Date:<date format="mm/dd/yyyy" src="currentdate.asp" /></h3>
output:
Date:06/26/2012
No, this is an impossible task.
HTML is a static language. It is impossible to use a static language without any dynamic element (javascript, php, ssi, etc.) and have it change the page.
You will need to find a way to loosen the constrains for your project as it is currently not only impossible but illogical.
EDIT:
I thought of one potential way but it wouldn't be pretty.
You could use an <iframe src="date.asp"> and if the date.asp only returned the date then it would work. This is the only way possible.
as he others say you cannot achieve this without at least a bit of javascript. what you could do is use jquery to select all your date tags and then post an ajax to get the current date in your preferred format.
like so:
<script type="text/javascript">
$(document).ready(function(){
$("date").each(function(index, element) {
var d = $(this);
$.post("ullu.asp", {
ajax: true,
act: "currentdate",
format: d.attr("format")
}, function(data) {
d.after("<span>" + data + "</span>");
});
});
});
</script>
<h3>Date:<date format="%m/%d/%Y" /></h3>
then on ullu.asp:
<%
if request("ajax") = "true" then
dim d : d = DateTime.FormatDate(request("format"), now)
response.write d
end if
%>
DateTime is here a class of mine for formatting dates you could use your own implementation... Furthermore you could add another attribute to your tag like "src" to send your ajax there.
i know you wanted to do this without "using code" but that is not possible. with this solution you only have to add a bit of javascript which handles all your tags...
You can always make it an img, then use an on the fly img generator which generates text as an image from the server. You can use something like csImageFile for generating text in an image on the fly.
http://www.chestysoft.com/imagefile/default.asp
Your image would look like this:
<img src="date.asp" />
Then your date.asp file would be generating a new image (using response.contenttype="image/jpeg" with the current date on each call.
But your date would be displayed as an image, not text.
Or you can use an iFrame like the secretformula's answer, or Ajax/jQuery for this. But if you're not gathering the data from the server, then your date will from the client.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );