I want to develop a display of data that cannot, for technical reasons, be put into a database, so XML seems to be my only solution so far. I need to display elements on an x/y axis graph, each one to be clickable and open a div containing further information. Imagine a list of fruits, to be displayed based on an x axis of crunchiness (0-100) and a y axis of greenness (0-100), then when clicked you can see nutritional information, photo, etc. (something a little like this)
The XML would be something like this:
<fruit_list>
<fruit>
<name>Orange</name>
<xaxis>7</xaxis>
<yaxis>5</yaxis>
<description>round and orange and not crunchy</description>
</fruit>
<fruit>
<name>Granny Smith apple</name>
<xaxis>85</xaxis>
<yaxis>90</yaxis>
<description>round and green and crunchy</description>
</fruit>
</fruit_list>
I was hoping that there would be a way to use the value of the x and y data in the XML to define the position of the elements in the CSS. I have to admit I haven't had much experience with XML, I have only ever used it to display data in simple tables. Anyone have an idea?
This is just an idea of mine, but you could use different CSS classes for a custom range on the x&y axis.
For example, you could define that Range 90-100 (x) and 90-100 (y) has the class
.x90-100_y90-100{
/*Your CSS comes here...*/
}
Range 90-100 (x) and 80-89 (y) has the class
.x90-100_y80-89{
/*Your CSS comes here...*/
}
...
And so one.
Then you could asign the classes to the HTML elements (JS,PHP,etc) in the function where you create your HTML elements from the XML file.
Maybe this can help you :)
Related
This question already has answers here:
Get element with a randomized class name
(2 answers)
Closed 4 years ago.
In an attempt to make web scraping with a headless browser more resilient to site changes, I'd like to combine technical properties of the elements with their visual characteristics.
E.g. when looking for a search bar, I'd like to look for a "big (>50% width), visible (:visible) text input field (<input type="text">) in the upper half of the screen/rendered page." Then, when looking for the submit button, I'd like to find a button located near the aforementioned search bar.
Is there any way to set up this kind of search criterion?
AFAICS, CSS selectors and XPath can only search by predefined parameters (tag, id, class, attributes), not by calculated ones.
The best idea I currently have is to search by predefined parameters, then filter the result further by getting size, position and such for each result and comparing them to the desired ranges. This is rather slow oftentimes since I have to use expressions like *[text()="visible text"] to not rely on technical details that are subject to change without notice.
Here are a few examples of ways to find your wanted element. All below examples are based on the assumption that you have an element that looks a little like this (can be different type and css elsewhere, but basically that you have an element somewhere with some styling and some attribute).
<div mycustomattribute="login" style="width:calc(5cm - 3cm)"></div>
Note that the below examples aren't necessarily all I the ways I can give you, it's just the ones I could think of on the fly, if your problem isn't resolved using these I can probably think of one or two more ways to solve your problem.
Selecting using a custom attribute
You can set any attribute you want on any element you want. For example, if you want <div mycustomattribute="hello"> and then querySelect that, it's totally valid.
var test = document.querySelect("div[mycustomattribute=login]")
The above script will select only the div that has an attribute name with the value login. I think you already know of this method but figured I'd mention it because it's by far the easiest, least hacky way of finding a specific element, if you can set an attribute on your element that is.
Select using position
Lets say you want to select the nearest element that is 50 px to the right of the element you selected.
var base = document.querySelect("div[name=login]")
// Get Y coordinate of base element
var y = base.getBoundingClientRect().top;
// Get X coordinate of base element on its right side, since we're gonna look to the right of it
var x = base.getBoundingClientRect().right;
// Find the element that is 50 pixels to the right of our base element
var element = document.elementFromPoint(x + 50, y);
Select using CSS values
This is more tricky but certainly possible. You are correct in that you can't just run querySelector to find an element based on a CSS value (calculated or otherwise), but you can run the calculation yourself to get the value your desired element should have and then just loop through them to get the one you want.
So, for example:
var divs = document.querySelectorAll('div');
var element = null;
for (i = 0; i < divs.length; ++i) {
/* We assume you know the result of the calculated value, either because it's
a static result (e.g. `5cm - 3cm`), or because you rerun the calculation in
javascript to find out what its result is.
Note that you can use whatever style you want here to find the div, like
"visible" or "display" or whatever you want, just set up the proper if
statements.
*/
if(div.style.width = "2cm") {
element = div;
break;
}
}
References
This is a little side note but try to use mozilla instead of w3schools, mozilla is way better for references. I was hesitant too at first to make the jump to mozillas documentation but it really is way better once you learn how to use it.
https://developer.mozilla.org/en-US/docs/Web/API/Document
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
I am low level programmer and new to HTML.
I have the html body which has the structure of my page.
one of the elements in this body is a long dropdown list. I was thinking that it makes sense to have this list defined separately, at the bottom of the file or at the top, and only reference it inside the body, so the full structure size stay reasonable and easy to read.
Is this something I can actually do? is this a reasonable request?
I would consider populating this dropdown list with Javascript code if it really is that long.
For example, you can make an array of the values/names of the select options you need to create and then iteratively add options elements to a select element. If you give us an idea of the select you're using, we can help you come up with a way. What have you tried thus far?
I would like to put together a more publication-worthy (and more easily produced) version of the diagram that I've hacked together below:
Basically, it's a two part illustration with an HTML table on the left (showing different cluster assignments from varying parameters) and a modified dengrogram plot on the right.
I'm guessing it's apparent from the snapshot what I'm trying to add to the plot… Basically it could be a set of horizontal, stacked bars that show how the different parameters grouped the observations into different clusters. I used brackets with the cluster numbers when drawing these by hand, but anything that underlines the right observation numbers would be acceptable.
I realize there are two parts to this question: How to get the two-up layout when one of the panels is HTML instead of a figure, and how to modify the plot. [If only one part gets answered here, I can ask for the other in a separate question.]
You can label your plot using line and text. You need to set the clipping property to off in order for lines to show up outside of your axes. Here's an example:
data = [1,3,4,5; 2,6,7,8; 9,3,7,4;3,8,5,2];
tree = linkage(data,'average');
figure()
dendrogram(tree)
set(gca,'Position',[0.13, 0.3,0.775, 0.65])
h1 = line([1,1],[4,4.8],'Color','k');
h2 = line([1,3],[4,4],'Color','k');
h3 = line([3,3],[4,4.8],'Color','k');
set(h1,'Clipping','off')
set(h2,'Clipping','off')
set(h3,'Clipping','off')
ht = text(1.7,3.9,'Label');
I have to implement this grid of divs. It won't change often, but it may at some point (meaning a box may be removed, and another resized). Each black box will eventually contain an image or a word, but that's not important.
How do I pull this off? Is there a more elegant way than by absolutely positioning every single box and manually entering every X/Y/width/height?
A grid based approach would be my recommendation.
Something like: http://960.gs/
EDIT (some more options)
http://developer.yahoo.com/yui/grids/
http://cssgrid.net/
I'm trying to create a gray "frame" (see pic below) around a google map, to try to convey the concept of an area of focus, as oppose to a point (which is usually represented with a marker). Note that this is not an overlay, that is, the gray "frame" should not move when you drag the map.
Edited: image link added
It appears that only option is to "subclass" GControl to create a custom control. I have 3 questions
1) First of all, is GControl subclassing the best course of action?
2) In my example, the canvas (div) where map renders can change its size (i.e is not fixed width). Do I have to delete and add custom control when canvas changes size? See docs http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls on how to create a custom map control.
3) Now, how to do it. Naively, I thought I could create a table with 3 columns and 3 rows, and set display: none for the cell in the middle. But that doesn't work. I've also experimented with clipping, that didn't work either. My css skills are quite lacking, so there must be way to do this more elegantly than adding four rectangular gray divs. If I wanted to add an inner border, with divs, I would need to paint 8 then. In a nutshell, what's the best way to create a "hollow" rectangle?
Thanks
P.S. This is my first entry to StackOverflow. Just discovered it. It's impressive how well SO is put together.