I'm having issues with my noggin... Please help me answer this question:
is it possible to add a single letter to a string in css? (i would assume that it is by storing the original string and adding a letter at a specific position)
Here is my code:
.u_usa{
background-image: url(../images/icons/usa_24.png);
}
What I am looking to do is onclick change the css property to:
.u_usa{
background-image: url(../images/icons/usa_24t.png);
}
then when clicked, change it back (removing the "t")...
the issue is that i have SEVERAL different classes that I want to use the same function on, each having a different location for the background image. The thing that stays the same is that one image has a t and one doesnt...
i need one function that, no matter what class im changing, is able to simply change one letter in the css property (whatever class is calling the function)
thank you in advance, If you couldnt tell by my jibberish posting, I have been working on these issues for a while and have fixed just about everything but this one item.
Thank you again...
edit:
what i am trying to achieve is creating a function that when run does a css switch, but is dynamic as to whatever class is running it. i have 60+ different divs that have backgrounds, when clicked i want to add or remove a "t" from the 4th to last character position of the css background image url.
You should add a second CSS rule for each class with a dual-class selector, e.g.:
.u_usa {
background-image: url(../images/icons/usa_24.png);
}
.u_usa.clicked {
background-image: url(../images/icons/usa_24t.png);
}
and then in your onclick event handler, add or remove the clicked class from the appropriate elements.
There are a number of approaches:
Toggle Classes
Have one background image specified by one class and a different background image by another class. Find all the elements with one class, loop over them, remove one class and add the other. It's reasonably quick for say less than 100 elements with the same class but might be slow where there are more.
Select elements based on background image and change it
Very slow and compute intensive, ok for a small number of elements but that's it.
Change the style rule
Find the style rule in the appropriate style sheet and change the value of the background-image property. It's more code (if you have to write the function from scratch, but I'm sure you can find a suitable function and add it to your code collection). It's very fast, regardless of how many elements you need to modify. The only drawback is that it will change every element with the class, you can't except some based on logic like you can with the toggle method.
Your choice.
we can use addClass function in JQuery to do that when click on a button.course we can not do that without javascript
Firstly you can make the style inline instead of a class.
Then use the code snippets below
from normal to 't' image
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('.png','t.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
and reverse
var img = document.getElementsByClassName('className')[0].style.backgroundImage;
img = img.replace('t.png','.png');
document.getElementsByClassName('className')[0].style.backgroundImage = img;
Or
Make two different classes and change the class everytime you need to change the background-image
document.getElementsByClassName('className')[0].setAttribute('class','newClassName');
That's not possible with CSS I'm afraid. You'll have to use javascript, or more likely a library such as jQuery to create that functionality.
Related
need a kind help from you:
I have this CSS and i want to change the word "ACTIVE" into another word after clicking on a button:
after clicking it should be:
example: body.new.content
My code is:
enter image description here
Could you please help me?
thanks.
Thank you for your answers, my issue is how to perform this:
When i click on the first press button (as you can see in the picture), it will open 2 pop-ups also the second button
enter image description here
enter image description here
This is my html code:
enter image description here
why you need to change css using javascript. It's not a correct way and can't do directly.
For example, if you have a need, try to remove active and add need class in your html content. Keep both type styles in your css. If still having exact need to modify, tell us denarii, let we think through and guide you. Thanks,
I don't think you can interfere in CSS with the way you described it.
you need to add a new class using classList.add("the name of the class you want to add") then append it to the parent div or for example the body with the append() or appendChild() methods then if you want you can style it using .style
I don't recommend you do this, because you'll run into some problems later in the development of your app.
Anyways I can give you a solution for that. Every DOM element has a lots of properties, one of them is classList which is an array of classes that the element has.
You can get it this way: body.classList
So, if you want to remove the class .active from your body you can use the remove() method like this: body.classList.remove('active'). Then if you want to add another class like .new you must use the add method like this: body.classList.add('new'). Make sure there is a 'new' class in css.
OK. I'm trying to get elements in javascript by CSS selector. To get one by custom element I know is like 'element[custom-name="Literal name"]'.
OK. This works. But now I need to get the second one. I mean I have some elements with the exact custom-name, and for everyone I need to apply a diferent rule (tehere are only 5).
How can I select the other ones? Is posibble select them by CSS?
PS: They are located in random positions, so maybe the first one is the 5 element one time and if I refresh the page it can be the 10 element inside the container.
PS2: No, It's not possible to change the HTML in my case :( . The only code I'm alowed to change is CSS and javascript.
Thanks for reading me! :D
Assuming you can't select specific ones by another, non-order-dependent factor, you can use the pseudo-selector :nth-child. In your case, the complete CSS selector would be element[custom-name="Literal name"]:nth-child(2) - substitute the 2 for any other number as you see fit. Generally it's not the best idea to select only by position in the document, as position may change more often than attributes - but in any case, there's a pure CSS solution!
Note that this only works if the elements you're working with are the only children of a common parent element - if you're looking for the second element that matches that query in general across the entire document, there is no way to do that with a CSS selector. Instead, you can make sure to add a unique class or other differentiating attribute to each element, or simply use querySelectorAll - in that case, you could get the second element using this little snippet: document.querySelectorAll('element[custom-name="Literal name"]')[1].
Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.
document.getElementById('someElementId').className = '';
Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");
Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes
If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );
I have created 04 buttons and defined the active states for each button in the CSS. These active states are called in JS, so that it changes the div style property on clicked and then resets the property when the other button is clicked.
But this is not working for me.
I have created a fiddleDIV TAG for this. Kindly help.
Change your code from being called onLoad to be called No wrap - in <head>.
Because the functions were inside the onLoad function scope and not the global scope, they were not readable and no javascript was being called when clicking the buttons.
I didn't change any code, just the option on the left pane:
jsFiddle
Update
You also had a small flaw in logic causing the classes to become intertwined. Here's what you were doing:
When first object is clicked, set it's class to obj1_active. When second object is clicked set obj1's class to obj2 and set obj2's class to obj2_active.
As you can see, we're crossing obj1 and obj2 classes. To solve this, we'll keep track of the last object clicked (role) and the class that it should be when a new object is clicked (cname).
Here is the Demo: jsFiddle
Optimization
The code you have works, but it's not very optimized. We shouldn't need four different functions that all do essentially the same thing just to different elements.
In this demo, I simply add and remove _active from the className of each element when clicked: jsFiddle
Lets take it a step further and use multiple classes. This is useful to be able to generalize our CSS declarations. Lets use the default classes, and only append the active class onto the active element and remove it when a new element is clicked.
We'll also separate the _ in the classNames so that btn is its own class as well as mission. This allows for us to really clean up our CSS code to improve readability as well as not need to update multiple sections when we just need a simple background color update or something of that nature.
Here is the optimized demo: jsFiddle
Link Color
I'm not sure if you meant to do this, but you'll notice that the links sometimes start white then turn to black when clicked. This is because the :link pseudo selector only selects non-visited links. If you want it to select all links, then just use the <a> tag: Final jsFiddle
I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.
If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.
Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);
Get rid of all inline CSS using this regex in your editor:
style="[^"]*"
i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class