I was wondering, if it was possible to clear a text box with a css code rather than using javascript ?
This isn't possible with CSS, only with JS:
Event handler function:
addEvent(document.getElementById('IDHERE'), "focus",
function() {
clearText('IDHERE');
});
Event listener function:
//addEvent listener
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else {
if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function() {
obj["e" + type + fn](window.event);
};
obj.attachEvent("on" + type, obj[type + fn]);
}
}
}
ClearText function:
//Clear on focus function
function clearText(id) {
document.getElementById(id).value = "";
}
This is pure JS, no libraries needed here, very fast and x-browser compatible :)
You cannot use CSS to manipulate the DOM. In other words: this is not possible.
With CSS one cannot change a document, only the look and behaviour of the document but that's it.
This is impossible. CSS is for presentation only, HTML is for the information and structure and javascript is for DOM manipulation. You will have to use Javascript or one of its libraries to do this :)
can be done, but just in a visual way, it wont actually go, but wont be shown too
there can be many tricks, one can be to set the text color same as the background of your text box, disable selection.
but if you want it to be completely gone you need to use javascript
Related
I'm trying to find the best solution to inject css variables into angular application (currently using Angular 12).
This is the code I'm using:
private injectStyles(data: any) {
const styles = this.document.createElement('STYLE') as HTMLStyleElement;
styles.id = 'dynamic-css';
this.test = `:root {
--main-bg-color: black;
}`;
styles.innerHTML = this.test;
this.renderer.appendChild(this.document.head, styles);
}
This code is being executed on app.component.ts file and this works quite well, i can use this css variable throughout the whole application.
What I'm trying to achieve now is to extend the this.test Object with data that comes from the server and apply these custom css values that were set on my Visual settings module before.
Css variables must not have "" quotes.
"--button-color": "#a86c6c" (this is what I get from the server) and I would like to inject this property without quotes on the this.test Object and I can't do that. Any ideas?
Any help is highly appreciated,
Thanks.
Object.keys is your friend
let dataString = '';
Object.keys(data).forEach(key => {
dataString += `${key}: ${data[key]};`
});
this.test = `:root {
--main-bg-color: black;
${dataString}
}`;
If needed, you may need to add quote to the value like this
`dataString += `${key}: "${data[key]};"`
and if a link is underlined, i want it to get rid of the underline on hover. If a link has no underline, i want it to get one on hover.
Is there a smart way to do this with SASS rather than hard coding it for every link?
As others have stated, to do this within CSS or SASS this is something that requires a default style for links and a class or data attribute that must be applied to alternative links.
The type of auto-smart styling is possible with javascript though if that's an acceptable alternative. I made a quick jQuery Fiddle that would work by checking all links for the text-decoration style. This has performance drawbacks due to scanning the DOM for all links every page load. It also breaks the law of keeping styling with the CSS realm so it's up to you if it's worth it.
var links = $('a');
links.each(function (i) {
var $this = $(this);
// if this has underline
if ($this.css('text-decoration') == 'underline') {
$this.hover(
function() {
$this.css('text-decoration', 'none');
}, function() {
$this.css('text-decoration', 'underline');
});
} else {
$this.hover(
function() {
$this.css('text-decoration', 'underline');
}, function() {
$this.css('text-decoration', 'none');
});
};
});
https://jsfiddle.net/ym8s6Lwh/
I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:
HTML:
<div class="icon ${fileExtension}" rel="${fileURL}"></div>
It would be great if I could do something like this:
CSS:
.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url); }
... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.
I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.
Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.
Using
.icon:after{ content: ""attr(rel)""; }
displays the rel value as text.
A jQuery solution is to add the background-image (taken from the rel value) as inline CSS:
jQuery(function($) {
$('.icon').each(function() {
var $this = $(this);
$this.css('background-image', 'url(' + $this.attr('rel') + ')');
});
});
I've tried to do something using jQuery but i don't exactly understand what you want so i can't go on with my code. So far i've done only this.
EDITED I hope it's exactly what you need
$(function(){
var terms = new Array('png','jpg','jpeg','bmp','gif');
$('.icon').each(function(){
var t = $(this),
rel = t.attr('rel'),
cls = t.attr('class');
cls = cls.split(' ');
for (var i=0; i < terms.length; i++) {
if (terms[i] == cls[1]) {
t.css('background-image','url('+rel+')');
}
}
});
});
if you can give me a better example, to undestand exactly what you want, i hope somebody from here will be able to solve your problem.
Regards,
Stefan
I've decided to go the jQuery route, and used a combination of #ryanve and #stefanz answers. Thanks guys
$(document).ready(function() {
$(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
var bg = 'url(' + $(this).attr("rel") + ')';
$(this).css('background-image', bg);
});
});
I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.
Theres a mistake in my rather large demo where i assume all the divs under the class special will be used to align something. Now i realize i need to add an extra div outside of the part i want to align but inside of .special.
How do i write .special div[NOT someclass] ? or is there no way to do this and i need to rewrite a lot of html?
CSS3 includes the not() selector. The only problem is (you guessed it) no IE compatibility. If you're willing to require Javascript from IE <9 users, you can get IE compatibility with IE9.js.
+1 to both answers above.
I'll add i was able to get away with some things but writing this in the css block to undo the effect
some-type: inherit;
I would go with jQuery or some other Javascript Framework, the selectors just rock and NOT class XY is rather easy to achieve.
As Pekka pointed out I am not sure what brothers you want to target. getElementsByClassName() is implemented by almost all browsers (you know which one doesn't work, don't you?).
I found a rather nifty solution on devshed to also make it work in IE:
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
}
}
All you need to do now is to iterate through all your div classes and negate the one you DON'T want.
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.