How define an HTML element on the side and reference it later on? - html

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?

Related

Multiple text-alignments in QLabel

I have a QGridLayout with QLabels in it that are displaying some values and the units to that values. For good readability I want the value to be left-aligned within the QLabel and the unit to be right-aligned.
At first I wanted to do this with QtStyleSheets but the only way I found was to change the text-alignment of the whole widget like this:
myLabel.setStyleSheet("QLabel {qproperty-alignment: AlignRight}")
My second thought was to do it via HTML but there I also encountered several problems. Here is what I tried:
myLabel.setText("<div align=\"left\">Value<\div><div align=\"right\">Unit<\div>")
This does the right thing, after that the value is left-aligned and the unit right-aligned, but they are not on the same line anymore. Nevertheless it appears to me the more promising approach. Unluckily I am not very familiar with HTML.
Can anybody help?
Or if you really just want go on with html in QLabel use table instead of div's. But #saeed is right, better use Qt Layouts and spacer between them.
Example with HTML:
myLabel.setText("<table width=\"100%\"><td width=\"50%\" align=\"left\">Value</td><td width=\"50%\" align=\"right\">Unit</td></table>");
I suggest you to use two Qlabels and a Horizontal spacer like image below , this is fast and you can let Qt handle whole design layout.

Modify single column alignment in nattable

I am kind of a Newbie in nattable, I want change the alignment of first header column in nattable to the left and the rest remain on the right, I know that alignment is generally defined like this:
this.cHeaderHAlign = HorizontalAlignmentEnum.RIGHT;
Is it possible and How can I do it?
From your code snippet it looks like you are referring to theme configurations. But without going into details how this can be done using themes you need to understand how the basics are working.
In general you need to add a custom label to the first column in the column header and then apply a style object with the needed alignment for that label.
Have a look at the NatTable - Getting Started Tutorial to get an idea how this can be achieved.

benefits of "class" vs "id" tags for a single use html element

I'm doing a code academy course and they ask me to use left and right column classes as opposed to id's. I'm not sure why...
It seems to me that I'm only going to have one Div that is left column, and one Div that is right column... so why would I use a class instead of an ID for this?
They probably want you to refer to the element in order to move it somehow to left. It is better to use a class because it is possible that at some point you'll want to move another element to left. If you use id instead of class there may be need to repeat the same CSS rule for two different elements (different IDs). Code repetition is considered a bad practice and should be avoided, if possible at design level (no need to rewrite anything later), hence the suggestion to use class instead of id.
IDs always perform well because they are unique per page, but somehow Code Academy could have the same ID. They might also want to avoid using IDs because of the dynamic application and structure, so we cannot predict how their skeleton is. I think it is as per their application logic.

What is this called, and how do i replicated it in CSS?

I know the title stinks, but as it says i have no idea what the name is for what i want to create.
I want to do a list of links (or rather a menu if you prefer, but with no drop down), that looks like this:
This is just an example so it isnt very pretty. Its having those arrows in each box, and have them "connected" to eachother, but each box is an individual element. I think this type of style has a name, what is it called? Will help greatly searching for help.
I wish to achieve this by making the elements purely by CSS, and the closest i have come is help from this page: http://www.css3shapes.com/ but i just cant combine them to create the menu.
Any and all kinds of help is appreciated.
It's called BreadCrumbs.
It's easier to "paint" it than you think.
Here's a tip:
This is a single arrow:
And the magic:
We used to call it breadcrumbs with arrowboxes. But its up to you. I dont think there is a generic name.
Check out these links
- http://www.red-team-design.com/css3-breadcrumbs
- http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation

Scraping largest block of text from HTML document

I am working on an algorithm that will try to pick out, given an HTML file, what it thinks is the parent element that most likely contains the majority of the page's content text.
For example, it would pick the div "content" in the following HTML:
<html>
<body>
<div id="header">This is the header we don't care about</div>
<div id="content">This is the <b>Main Page</b> content. it is the
longest block of text in this document and should be chosen as
most likely being the important page content.</div>
</body>
</html>
I have come up with a few ideas, such as traversing the HTML document tree to its leaves, adding up the length of the text, and only seeing what other text the parent has if the parent gives us more content than the children do.
Has anyone ever tried something like this, or know of an algorithm that can be applied? It doesn't have to be solid, but as long as it can guess a container that contains most of the page content text (for articles or blog posts, for example), that would be awesome.
One word: Boilerpipe
Here's roughly how I would approach this:
// get array of all elements (body is used as parent here but you could use whatever)
var elms = document.body.getElementsByTagName('*');
var nodes = Array.prototype.slice.call( elms, 0 );
// get inline elements out of the way (incomplete list)
nodes = nodes.filter(function (elm) {
return !/^(a|br?|hr|code|i(ns|mg)?|u|del|em|s(trong|pan))$/i.test( elm.nodeName );
});
// sort elements by most text first
nodes.sort(function(a,b){
if (a.textContent.length == b.textContent.length) return 0;
if (a.textContent.length > b.textContent.length) return -1;
return 1;
});
Using ancestry functions like a.compareDocumentPosition(b), you can also sink elements during sorting (or after), depending on how complex this thing needs to be.
You will also have to formulate a level on which you want to select the node. In your example, the 'body' node has an even larger amount of text in it. So you have to formulate what a 'parent element' exactly is.
You could create an app that looks for contiguous block of text disregarding formatting tags (if required). You could do this by using a DOM parser and walking the tree, keeping track of the immediate parent (because that is your output).
Start form parent nodes and traverse the tree for each node that is just formatting, it would continue the 'count' within that sub block. It would count the characters of the content.
Once you find the most content block, traverse back up the tree to its parent to get your answer.
I think your solution relies on how you traverse the DOM and keep track of the nodes that you are scanning.
What language are you using? Any other details for your project? There may be language specific or package specific tools you could use as well.
I can also say that word banks are a great help. Any lists of common 'advertisey' words like twitter and click and several capitalized nouns in a row. Having a POS tagger can improve accuracy. For news sites, a list of all known major cities in the world can help separate. In fact, you can almost scrape a page without even looking at the HTML.