In the scenario where the HTML look as follows:
<div>Text</div>
How can I get the value from between these tags ("Text", in this case) to be added as a value of CSS content attribute?
This how I would do it using React's term of that value:
div {
content: attr(children)
}
I don't know why you would need to do this but, you can in a way. I've included an example below but, it would help to know what your objective is.
var elem = document.getElementsByTagName("DIV");
elem[0].setAttribute('children',elem[0].textContent);
div:after {
content: attr(children)
}
<div>Text</div>
div:before{content:attr(data-text)}
<div data-text="text"></div>
i think you want to get that text using css so here is the way to get text via data attribute and css
<div>text</div>
TO
<div data-text="text">
If you want to place same text as data attr then put it
</div>
Now you can simpel put the css like
div:before {
content: attr(data-text)
}
Hope you this will helps you
Thanks
Related
I trying to tune up an internal site only with CSS (company policy: it's short of working, so server will not be touch, indeed it will be done with a CSS extension)
And we need to include a value existing in a property in the HTML into the view (seen by user)
HTML looks like:
<div class="card card-employe" employid="a453">
<a href=... target="_blank">
...
</a>
</div>
so with a CSS selector I can insert text on the cards with:
.card-employe::before {
content: "_ #EmployeID:";
}
but I dream for something like more advance like
.card-employe::before {
content: "#EmployeID:" + this.employid;
}
so the text will show:
#EmployeID:a453
is that possible with just CSS ??
Yes, it is possible, use this:
.card-employe::before {
content: "#EmployeID:" attr(employid);
}
for more info about attr, visit https://developer.mozilla.org/en-US/docs/Web/CSS/attr
Hi everyone,
I am stuck at one point while rendering the data from django views.
I want to use the CSS data produced in views to be used in the template.
I did all I could do,
i) inserted the element into the RequestContext, sent it to template
ii) From here, I tried to insert that CSS style data into div tag
This is my css data in VIEW( they are "left:xx px top: xx px" positions)
coords = {'usa':['usamap.png',['635px','322px'],['592px','381px'],['541px','398px'],['115px','582px']],
'canada':['canadamap.png',['201px','336px'],['377px','565px'],['420px','600px'],['441px','648px']]
}
template = loader.get_template('polls/phasex.html')
context = RequestContext(request,{'id_list':id_list,'country':country,'coords':coords[key],'temp':temp,})
return HttpResponse(template.render(context))
On template I am trying to access the data:
<div style={{'left: '|add:coords.1.0|add:'; top: '|add:coords.1.1|add:';'}} >
<text>{{'left: '|add:coords.1.0|add:'; top: '|add:coords.1.1|add:';'}}</text>
actually i should get this when i run:
<div style = 'left: 635px; top: 322px'>
But i am getting this on the webpage:
<div style="left:" 635px;="" top:="" 322px;="">
<text>left: 635px; top: 322px;</text>
</div>
I can't understand where's the problem? The text box was for debugging. It's printing properly, but i'm not getting the same inside css styles.
Thanks in Advance
You have to place variables inside quotes, like this:
<div style="left:{{ variable }}"></div>
And not like this
<div style={{ "left: variable" }}></div>
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I can't figure out how to get Nitrogen to generate an actual id attribute of an html element. For example, In index.erl:
#panel { id = "test" } or #panel { id = test }
the generated html element looks like this:
<div class="wfid_test"></div>.
but what I want is:
<div id="test"></div>
so I can use an anchor link like Scroll Down to Test to reference the id.
This is basic HTML that has been around forever, so I'm sure Nitrogen must have some way of doing it, right?
Use 'html_id' element instead of 'id':
#panel{ html_id=test, body="Test target" }
it will render as:
<div id="test" class="wfid_temp990008">Test target</div>
you can include both 'id' and 'html_id' elements if you need the class for CSS as well:
#panel{ id=test, html_id=test, body="Test target" }
renders as:
<div id="test" class="wfid_temp990008 wfid_test">Test target</div>
#panel { id = test } should work fine. Just use atom instead of sting.
I want to assign a div to the tooltip content. One way is to have a inline div as given in the example in website:
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
});
});
However what I want is to have div seperately define like:
<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span>
and then define content as
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $($('#abc').html())
});
});
The reason I want to do this is because I am making dynamic css changes to '#abc' and everytime the tooltipster shows I want recent css changed to be incorporated.
thanks
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.children().html());
continueTooltip();
}
});
For me worked that improved version :)
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.next().contents());
continueTooltip();
}
});
That is even better! :) But make sure your tooltip content is just after your selector here .tip follows after div#my-tooltip and also is its child.
In addition to having the content be separately defined, I wanted the content for the tooltip to be nested inside the element that is clicked/hovered. I found the functionBefore option worked for me.
The markup might be:
<div id="my-tooltip">
click/hover me to show a tooltip
<div class="tip" style="display:none">
tooltip<br>content
</div>
</div>
And the js:
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.find('.tip'));
continueTooltip();
}
});