For example, I want to hilight keywords "add", "mov", etc in code like:
<code>
add 1, 2<br/>
mov 3, 4<br/>
</code>
So can I change style of specific keywords in block using just CSS, not editing HTML?
Update.
Ok, for workaround I attach to page script like:
window.onload = function()
{
var list = document.getElementsByTagName("code");
for (var i = 0; i < list.length; i++)
{
list[i].innerHTML = list[i].innerHTML
.replace(/mov/g, '<span id="keyword">mov</span>')
.replace(/set/g, '<span id="keyword">set</span>');
}
}
But, I still would be glad to find a solution in just css.
I think you'd have to wrap the words in a tag to be styled e.g.
<code>
<span class="func">add</span> 1, 2<br/>
<span class="func">mov</span> 3, 4<br/>
</code>
Then use the class added in your CSS file to style the words
.func
{
color: blue;
}
example can be seen here http://jsfiddle.net/6NAG3/
Edit: to see what a code pretty print looks like under the hood, inspect the above code in dev tools and you can see how they wrap elements
Related
I'm new to html, so sorry if the syntax or something is wrong.
I have a some html code. When I hover over 1, I want the sentence "This is the first match" to change e.g. color later in the document
I can achieve that with this CSS code:
#number1:hover ~ #match1{
color: yellow;
}
#number2:hover ~ #match2{
color: yellow;
}
Please hover over this number to see the respective match
<a id="number1">1</a>
<br>
Or hover over this number to see the respective match
<a id="number2">2</a>
<br>
<a id="match1">This is the first match</a>
<br>
<a id="match2">This is the second match</a>
However, I have multiple connections where I want the same pattern and not just these two. Is there any way I can apply this pattern easy globally in the document?
I don't know if <a> is the right to use, but I though that href might be a solution, but I'm not sure.
Thanks in advance!
You can approach this problem using Javascript with the onmouseover (hover) event. However, to give the same attribute to all of our desired tags, we need to give them all a common class name.
<body>
<a class = "colorchange" id="match1">This is the first match</a>
<br>
<a class = "colorchange" id="match2">This is the second match</a>
<br>
<a class = "colorchange" id="match3">This is the third match</a>
<br>
<a class = "colorchange" id="match4">This is the fourth match</a>
<script>
elements = document.getElementsByClassName("colorchange");
for(var i = 0, length = elements.length; i < length; i++) {
colorChange(elements[i])
}
function colorChange(btn){
btn.onmouseover = function(){
btn.style.color = "yellow"
}
}
</script>
</body>
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
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;
<p style="text-align: center;">
<img src="http://expandingant.com/wp-content/uploads/2013/04/messageusnormal.jpg" alt="messageusnormal" class="ncf_trigger_element" style="cursor: pointer; display:none\9; ">
</p>
I want to use class ncf_trigger_element (ncf_trigger_element used in the img tag) in the p tag without editing the HTML file and it would work same as does in img tag. How can I do this?
"Is it possible add any class or id of a tag to another tag without editing html file?"
Almost yes(?) With javascript you can search and find all the elements you want, and add a class to them, without editing html DOM (you'll have to edit HTML file to add javascript - that's why i say "Almost yes(?)").
var my_elements = document.getElementsByTagName("p");
for (i = 0; i < my_elements.length; i++)
{
my_elements[i].className = my_elements[i].className + " the_class_you_want_to_add";
}
for (i = 0; i < my_elements.length; i++)
{
alert(my_elements[i].className);
}
http://jsfiddle.net/LLra63ky/
"and it would work same as does in img tag." You provide us no information on how the img tag works already for you.
i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?