I have a page in magento which has some dynamically created elements but the problem is the classes are named the same. I would like to change the styling of the second class but not the first.
How would I go about this? I was thinking possibly jQuery but wasn't 100% sure where I should be looking for that.
Use the nth-child selector:
$(".YourClassName:nth-child(2)").css("PropertyToChange", "ValueOfProperty");
Here's a working fiddle to illustrate.
Related
I was wondering about hiding elements with DOM, the person in the course is doing this by setting the display to none
document.getElementById("id-name-1").style.display = "none";
document.getElementById("id-name-2").style.display="none";
We are hiding two elements here, now both elements have the same class. I have been converting what the course is showing me into jQuery as well for added challenge. The jQuery code that I used is as follows, the name of the class they both has is say dice.
$(".dice").hide();
This hides both elements at the same time, which way would be better? I know that if I had other elements with class dice it would also hide them. So maybe that is why the other way is better? Thank you for your thoughts -- I am new to this.
Stephen
If you use vanilla javascript, can do something like
document.getElementsByClassName('className').forEach(el => el.style.display = "none")
I recommend you use vanilla javascript instead of JQuery because is most probably that you will use javascript than jquery in a new project. and on the other hand, will be more easy for you use libraries like react if you have a good vanilla javascript foundation.
Your question is open ended. No right or wrong answer.
$(".dice").hide();
As mentioned, this will hide all elements with Class "dice". If you want to be more specific, you can be:
$("#id-name-1", "#id-name-2").hide();
This selector uses IDs and selects both elements.
Your selector can be more vague or more precise as needed.
See More: https://api.jquery.com/category/selectors/basic-css-selectors/
Document.querySelectorAll(".dice") would also be able to the above based on the style using purely javascript. So it all comes down to preference since it works the same way with display:none;.
Also,.hide() takes in optional arguments/callback functions which can help with hiding the element(s).
I'm editing jsp files which uses struts1.
<html:select property="someProperty"
style="width:110;height:110" styleClass="someClass">
However upon opening it in Microsoft Edge. The drop down already makes use of the fixed in line height which totally ruins the design.
To try resolving this minute problem, I have tried 2 ways.
First Solution:
Created a javascript to remove the "style" attribute when class is "someClass"
The problem with this one is that many jsp files are calling this class. So a lot will be affected.
Second Solution:
-Delete style manually for all jsp files
This actually works but requires changing 50+ files.
I was wondering if there is any other workaround for this one?
Thanks.
I'm going to take a shot at this answer because I don't know anything about struts but you don't have any units defined in your CSS. That is, you have height:110 which is invalid. Set this to height:110px. Same with width.
The px, or other unit such as em, are required.
Looks like you have CSS related issue. I suggest you to remove style attribute and try to create a CSS class and add your CSS code for select drop down there. than you can use that CSS class for all select dropdowns.
I am trying to figure out how to remove css attributes using Jquery. The issue is that it seems like this can only be done if a style is inline. For instance, when I use this approach:
('.hero').css('background-image', '').css('background-color', '');
It does nothing, although if it has those attributes set using the STYLE property, than it works great. The same can be said for:
('.hero').css('background-image', 'none').css('background-color', 'transparent');
Can anyone assist me in removing attributes that are added via stylesheet and not inline?
You can do this, but it is very convoluted. The only way to accomplish this is to load the stylesheet into a string in javascript, grep out the rules you want to remove (using String.replace() or similar), then remove the current css tag from the page (using $.remove()), and then adding a new css tag with the grepped contents of the file/text you loaded.
This is very very convoluted. I think you need to rethink why you are trying to do this to begin with. Or maybe just stick with setting the values back to their defaults using jQuery, which can be found on w3schools. Or maybe create a style in the stylesheet that sets the values to their defaults, and give the element that style. OR just give us a little more info, and we may be able to suggest a better way around your problem.
I think you may be asking the wrong question.
It looks like you want to be able to restyle an element without removing its existing class. A far easier way to do this is to ADD an additional class to the item you want differently styled, and then handle it in the CSS definition.
For instance:
('.hero').addClass("blank");
with CSS:
.hero.blank { background-color: transparent; }
As .hero.blank is more specific than .hero, it'll be the style applied first.
You have to set a default style for elements. Few default CSS properties from W3C. Most of default properties are listed here.
it looks like to me you're trying to adjust several css attributes in the same function.
if you want to clear the background image and make the background transparent then you just need to change both in the same .css function
try
$('.hero').css("background-image:none; background-color:transparent");
or just set up a 2nd css class that has the style preformatted "heroAlt" and use jQuery to remove old class/add new class
$('.hero').removeClass(function(){
$(this).addClass("heroAlt");
});
hope that helps
First of all, the following will work if used correctly:
$('.hero').css('background-image', 'none').css('background-color', 'transparent');
See: http://jsfiddle.net/Az7VZ/
That being said, there are a few pitfalls to watch out for.
You run your JavaScript before the HTML document containing the .hero div loads. This has the effect of jQuery selecting nothing to apply the CSS to.
Your CSS uses the "!important" modifier. You will not be able to overload that style with jQuery.
Also, don't forget the "$" or "jQuery" in your script.
Note: this DOES NOT override the actual .hero class. Therefore, if you add another element with the "hero" class, then it will have the original CSS styling. You would need to run the jQuery script again to apply the new style to the new element.
A great alternative to this, is creating different classes with the desired styles. Then removing/adding the CSS class via jQuery:
$('.hero').removeClass('hero').addClass('hero2');
See: http://jsfiddle.net/Az7VZ/1/
I need to change the z-index in css with javascript #content>ul {z-index: 100;}.
I tryed this $('content ul').css("z-index", 49); and other similars, but with no good result.
jQuery accepts CSS selectors just fine:
$('#content > ul').css("z-index", 49);
Demo: http://jsfiddle.net/hgt9p/1/
try this..
$('content ul').css("z-index", "49");
To change z-index, the position of the element needs to be other than static. This is the only way I can think of how you're going wrong. The other attributes the position property takes are: absolute, relative, fixed. Sorry if you already knew this, it's the only thing that I can think of which might be going wrong. Also, make sure you're including jQuery and it's working, many a time i've been fooled by an out-of-date jQuery link or for some reason it wasn't working (e.g you weren't including the jQuery Library above the jQuery script).
$('content ul').css("z-index", "49");
should work with JQuery. However are you sure content is a tag name? I'm guessing it's a class name and you should then use
$('.content ul').css("z-index", "49");
Use the inspector to check if the elements are getting the property.
Also the element needs to be absolute, relative or fixed for z-index to work correctly.
That said, using that Jquery selector isn't good for performance. You should look at something like
$('.content').find('ul').css("z-index", "49");
this will give you better performance. As you are now mapping directly to findElementByClassName and findElementByTagName.
How do I expand/collapse an html field in Firefox? I incorporated a few JavaScript examples from the web, but they only worked in IE. (I'm limited to HTML and JS)
Suggestions are appreciated.
Thanks.
Yes, I would like to show/hide divs and such.
If your input field has an ID attribute, you can use CSS to style it as needed. I recommend using a library like jQuery, but I have provided an example without as well:
// hiding without jQuery
document.getElementById('myInput').style.display = 'none'
// showing without jQuery
document.getElementById('myInput').style.display = 'block'
// hiding with jQuery
$('#myInput').hide()
// showing with jQuery
$('#myInput').show()
jQuery: http://jquery.com
What you probably want to do is change css property display of the element to "none" to hide the element and change it back to "block" or "inline" to show it again. It can be done with javascript.
If you want a fancy animation, you could use some kind of javascript library which offers different effects (you may want to check out toggle) or components (for example Accordion).
I'm afraid I don't understand your question entirely.
First off, what do you mean by 'html field'? Do you mean as in form fields (text boxes, radio controls, etc?). If so, do you mean how do you dynamically resize them? ('Expand/collapse' to me is ambiguous).
If you mean you want to show/hide divs and such, that's much easier using css and javascript. See this example.