I am having an with using the ng-style directive. I want to create add a button to my ng-repeat which is css sprite. If i include the sprite normal way my element inspector has a good old moan. from the information i gather from the Angular documentation
i thought it was as simple as the following:
<button ng-style="{'background-image':'url:('/img/Myimage.png')'}">test</button>
However i am receiving a snytax error message from this line of code. Does anyone know the correct method?
<button ng-style="{'background-image':'url(\'img/MyImage.png\')'}">test</button>
is the correct way to do it. was missing the escape the quotes in url 'url:(\'/img/Myimage.png\')'
Your CSS syntax is incorrect for url, you have extra : and I would remove quotes for the src so the whole property is one string
<button ng-style="{'background-image':'url(/img/Myimage.png)'}">test</button>
I really don't undertsand why you would use ng-style for this. A simple CSS rule and class would make more sense since you aren't evaluating anything
oh,{color:' something',background:'something '}
ng-style="{background:'url(something)'}"
or
ng-style="{'background-image':'url(something)'}"
Related
The question might not be clear, but I shall clear it now. In CSS libraries they use classes such as "bg-blue", "text-red", I am especially talking about TailWind. But these classes are limited, if someone want a new color he / she has to go with CSS. So finally I stuck to an idea. Let's take an example :
HTML :
<h1 class="cbg-008eff"></h1>
/* cbg = Custom Background */
JS :
I dont know what to write here....
Actually I want JavaScript to get every classes in the html document which starts with "cbg-", therefore it should understand that a background is to be placed, and the rest part after "cbg" is the value to set. Can this be done ?
Thanks In Advance
You could split the class ID as a string by the '-' using the Javascript Split function, not sure how you could get the class ID tho but then you can get the Colour ID as Ramon said. Then use this to implement it: https://www.w3schools.com/js/js_htmldom_css.asp
I cant understand why, but my search field doesn't work with Vue.js correctly.
First of all, I need to hide search results if it's not available.
And my second problem is that I can't use variables where I need to.
P.S. Oh, I forgot, I need to delete space between div and 'li':
sorry, I haven't access to post images because my reputation is low.
I'll put my code here: https://jsfiddle.net/4r2oqz2x/
Your line
<a href={{ searchResult.href }}><img src={{ searchResult.img }}>
should be
<a :href="searchResult.href"><img :src="searchResult.img">
See How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2
The platform that I'm currently using does not allow me to change much of the HTML that's been designed, so to get around this, I need to use JQuery to find and replace a div with another div (or perhaps in simpler terms (incase I'm getting something wrong here), find text in the HTML and replace it with other text).
So, the original is:
<div class="title-desc-wrapper has-main-image" data-content-field="main-image">
I need it to be replaced with:
<div class="title-desc-wrapper no-main-image" data-content-field="main-image">
If anyone has any insight into how to do this, or could show me how, I would greatly appreciate it.
Just add the class has-main-image and remove the class no-main-image:
$('.title-desc-wrapper.has-main-image').removeClass('has-main-image').addClass('no-main-image');
..or you could use .toggleClass() to essentially replace the class:
$('.title-desc-wrapper.has-main-image').toggleClass('has-main-image no-main-image');
You can use the jQuery .toggleClass()
$(".has-main-image").toggleClass("has-main-image no-main-image");
Or simply you can remove the "has-main-image" and add the "no-main-image" class
$(".title-desc-wrapper.has-main-image").removeClass("has-main-image").addClass("no-main-image");
Or if you need animation, you can use jQuery UI .switchClass()
$(".title-desc-wrapper.has-main-image").switchClass("has-main-image","no-main-image", duration, easing , complete )
I hope that helps, good luck
I am new to AngularJS and I understand that the ngClass directive can be used to insert classes dynamically into elements like:
<input ng-class="{some-class: condition, another-class: anotherCondition}">
And angular will automatically evaluate which conditions are true and will insert those particular classes in the element.
Now I am trying to do something like:
<div class="form-group" ng-class="{has-success: form.email.$valid}">
Since I have bootstrap, it will automatically color the label and the input green if the email is valid. But it doesn't work and I am getting this particular error in the console:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.27/$parse/syntax?p0=-&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=5&p3=%7Bhas-success%3A%20form.email.%24valid%7D&p4=-success%3A%20form.email.%24valid%7D
z/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:6:450
and so on....
What am I doing wrong? Is it a syntax issue?
Theres a dash in your class name, so use single quotes!
ng-class="{'has-success': form.email.$valid}"
It is clearly a parser error, you have invalid syntax due to the presence of - in the property name # {has-success: form.email.$valid}. You would need to wrap them in quotes.
Try:-
<div class="form-group" ng-class="{'has-success': form.email.$valid}">
If you use '-' in the class name you should cover the class name using single quotes.
[ngClass] = "{'some-class': condition}"
otherwise can be use
[ngClass] = "{someClass : condition}"
This worked for me
[ngClass] = "{ 'color-red': isRed}"
Though its late and the actual reason for this problem was mentioned by #tymeJV, in some cases, ngClass, ngStyle and related directives work if the browser tab's cache is cleared. Clear Cache and Hard reload or opening in a new tab will work, if you feel the directive is properly defined.
I've been trying to use the CSS content property to make somewhat of a "template" for an element of a specific class.
I've tried multiple things. . .
Many places I have seen told me to convert everything to hexadecimal, so I did, until I saw that using hex wrote the litteral characters into the element, instead of evaluating the characters as HTML.
I then tried just litterally entering the characters into the content, and I got the exact same result (this makes it appear as if there is no purpose for the hex, yet thats hard to belive with how many people say there is. . . ).
Is there any way that I can place HTML content into an element using the CSS content attribute?
I've made a JS-Fiddle for this:
And, of course, Stack wants my source:
HTML:
<button id="normal" >Show with normal output</button>
<button id="hex" >Show with Hexadecimal output</button>
<div id="class_changer" ></div>
JS:
function changeClass(evt)
{
class_changer.className = evt.srcElement.id;
}
var class_changer = document.getElementById('class_changer');
var normal = document.getElementById('normal').addEventListener('click', changeClass, true);
var hex = document.getElementById('hex').addEventListener('click', changeClass, true);
And the un-godly long CSS:
.normal::before {
content: '<img alt="Facebook" src="http://cache.addthis.com/icons/v1/thumbs/32x32/facebook.png" />';
}
.hex::before {
content: '\0027\003c\0061\0020\0068\0072\0065\0066\003D\0022\0068\0074\0074\0070\003A\002F\002F\0061\0070\0069\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\006F\0065\0078\0063\0068\0061\006E\0067\0065\002F\0030\002E\0038\002F\0066\006F\0072\0077\0061\0072\0064\002F\0066\0061\0063\0065\0062\006F\006F\006B\002F\006F\0066\0066\0065\0072\003F\0070\0063\006F\003D\0074\0062\0078\0033\0032\006E\006A\002D\0031\002E\0030\0026\0061\006D\0070\003B\0075\0072\006C\003D\0068\0074\0074\0070\0025\0033\0041\0025\0032\0046\0025\0032\0046\0077\0077\0077\002E\0063\0069\006D\0074\0072\0061\006B\002E\0063\006F\006D\0026\0061\006D\0070\003B\0075\0073\0065\0072\006E\0061\006D\0065\003D\0063\0069\006D\0063\006F\0072\0022\0020\0074\0061\0072\0067\0065\0074\003D\0022\005F\0062\006C\0061\006E\006B\0022\003e\003c\0069\006D\0067\0020\0061\006C\0074\003D\0022\0046\0061\0063\0065\0062\006F\006F\006B\0022\0020\0073\0072\0063\003D\0022\0068\0074\0074\0070\003A\002F\002F\0063\0061\0063\0068\0065\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\0069\0063\006F\006E\0073\002F\0076\0031\002F\0074\0068\0075\006D\0062\0073\002F\0033\0032\0078\0033\0032\002F\0066\0061\0063\0065\0062\006F\006F\006B\002E\0070\006E\0067\0022\0020\002F\003e\003c\002F\0061\003e';
}
Check it out at JS-Fiddle and see what you can do! Let me know! Thanks everybody!
UPDATE: SOLVED (ish...)
Yes, wierd question sometimes accept wierd answers (like iterating over the DOM...) but if you have a better solution, I'm all ears.
As it turns out, the accepted answers means of evaluating a "CSS template" may be the best means of performing "templating" without the use of third-party libraries or the new <template> tag (that I'm still not sure of) even though it makes my skin crawl (if anyone has a better solution, please post it). Either way, I've updated my JSFiddle, so check it out!
Although, I guess the best answer would be purely making a template as a string in JavaScript, that is, if we are going to be evaluating it later on and pre-pending it to an element. Yea, that would make more sense...
No, this is not possible with plain CSS. However, if you really want to save these templates in CSS, you could iterate over all elements and use
window.getComputedStyle(element, ':before').content
to fetch the content and then prepend/append it to the element. To parse the HTML, you could either use jQuery.parseHTML, new DOMParser().parseFromString or a dummy DOM element. Alternatively, you could also use .innerHTML directly, but I wouldn't recommend that..