I want to add a variable to a css class. Is it possile? I mean I want to do something like the following:
#box[i]
{
padding: [i]px;
}
(for example: div which is name "box10" is supposed to get padding of 10px.)
I understand this may not be the right syntax, but I hope you can help me achieve the concept setting my class' properties up to a variable value.
It's currently not possible to use variables within CSS, however there are a number of other options available.
The simplest option would be to create a CSS style for each of your box IDs.
You could use JavaScript to add padding to the box, but it is not sensible to include presentation within logic. In jQuery, a loop to do this would look like (assuming your boxes are ):
$('div[id^=box]').each(function() {
$(this).css('padding',this.id.substr(3)+'px');
});
You could use a pre-processor tool, such as LESS to set variables in your CSS; but you would still need to specify each selector.
Setting padding based on different box ID values seems like an odd problem to have. It may be worth taking a look at whether your approach to building this page is correct. Don't forget every ID on the page should be unique. If you wish to use the same ID on multiple elements, you should use CSS classes.
If you are trying to create a box sized based on a number of results (such as poll results), then it would be easier to use the style attribute and set a width/padding on each element rather than create an ID for every possible outcome. For example:
<div style="width:10px"></div>
No, you can't do that with pure CSS, but you can use less for that.
CSS variables are introduced only in W3C draft at this point and didn't supported by browsers yet.
u could just use javascript, to detect the "name" and then get the substring so u have the number. then just make something like this:
var box = document.getElementByName("box10");
box.style.padding = box.name.substr(3) + "px";
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'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.
I need to find a way to implement the concept of "scoped IDs" in HTML/XML.
I know that the id attribute of an element must hold a unique value for the entire document, but I'm wondering if there's a workaround ('hack', 'cheat', whatever) that I can do to create scoped IDs. That is, for any particular sectioning/containing element, IDs would be unique, but outside of the container, those IDs would be hidden and couldn't be referenced. With nested sections, inner sections will still be able to access their parent section's element's IDs but not the other way around.
I thought about using <iframe>s, but those are just icky.
Maybe there's a solution using JavaScript/jQuery?
Not possible.
This is exactly what classes are for though. Give unique IDs to each "section" or container element and then use classes for the common descendant elements you wanted to use recurring IDs for, then target them with #unique-container .common-element selectors.
I find it hard to imagine a situation in which you would want to do what you described anyway. You are basically just asking if you can use IDs as classes, but that's why classes exist in the first place.
I suppose you could make some kind of psuedo-scoped-ID by adding custom HTML5 attributes to the elements and processing them / doing whatever you want to do with them in Javascript but again without any context as to why you want to do this it's hard to really recommend anything here.
Is it possible to set Colspan/Rowspan for elements whose display is set to table-cell. If it is how can you do this? I'm trying to write a JavaScript function which will make my layout. The function will take number of cells, rows and colspan/rowspan properties to make a layout.
I'm trying to achieve functionalities like here: http://www.youtube.com/watch?v=KRyEL-T_wRU&feature=player_embedded
Nope, there is no css alternative for col/row-span attributes.
Use real tables or grid systems (e.g. 960gs) for tasks like this.
If I have a flowing layout (position: static / relative), does the browser store the calculated coordinates (x,y) of a div in properties which can be accessed?
Further, it would suffice if the solution worked with Firefox only. JQuery is unfortunately, not an option.
In 'native' JavaScript you can do it like that:
document.getElementById('yourElement').offsetLeft
document.getElementById('yourElement').offsetTop
but you'd probably need to add up few offsets of parent elements depends what position is applied.
It does indeed. Unfortunately it's pretty difficult to get that information out reliably due to browser inconsistencies and general ugliness of raw DOM access.
I suggest jQuery, where you might have code like:
$('#some_div').offset().top
Which will give you the y position of the div from the top left of the document.
No, however using mootools (and probably jquery) you can say $(element).getLeft() or $(element).getTop().
or you could use something like this:
function getLeft(obj) {
return (obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft + getLeft(obj.offsetParent));
}
function getTop(obj) {
return (obj.offsetParent==null ? obj.offsetTop : obj.offsetTop + getTop(obj.offsetParent));
}