am working in a software called (opentripplanner) iam trying to make some changes in the CSS codes, but sometimes the Firebug shows (element.style) for some items CSS, i found some of the items CSS overriden in the JS codes, but for some other items i couldnot find where they are overriden though i looked everywhere..the last option left is to see the Class of the element using the firebug and then try to add it inside the CSS codes with my rules (generating new rules) but i dont really know how to do this ..anyone who can help ?????
I believe the answer you are looking for is here.
Element.style properties are introduced via Javascript and are overriding your CSS settings.
Related
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 just started to work in an existent WordPress project in order to fix some issues, so I am firstly learning about this project. Now, I want to know exactly which javascript code is unexpectedly changing an element's style at the HTML code. Maybe some plugin... I need to find it out!
In a similar question someone has answeared that you can do that in Firefox by right clicking on the element in "HTML panel", than selecting the option "Break on Attribute Change". But I can't see this option, maybe it's an outdated feature...
So, how can I know which javascript is changing the element's style??
In Chrome, right-click on the element in the inspector document and select Break on > attribute modifications.
I'm a beginner developer in Html/Javascript/CSS/Jquery coding
and while working a project, I had to integrate Jquery with previous code.
As soon as I imported Jquery, even simple buttons became styled badly. Jquery worked fine as long as I used its classes to assign styles to objects.
However since the rest of the project is not to change style, I need to know what I'm doing wrong. I've checked the objects for classes, and they have no classes, so it's not a css issue.
I narrowed down the error to the following screenshot, but I still can't figure it out. It seems to be something simple that I missed but I have no idea what it is.
Ignore the class="ui-content" and class="ui-button-text". I was just testing if something would change (nothing changed).
Try to inspect the elements that are styled wrong with your developer tools in the browser. The only styling in your example is in jquery.mobile-1.4.5.min.css, so that's where I'd be looking. Did you mistakenly delete a link tag to your stylesheet?
I have page which has several Button & images inside the <div>. I have such requirement :
On clicking over any image or button a div/page appears which contains all the css property and gives option to change the CSS property of concern element. eg. color, value, font size etc....
Is there any plugin available for that or do i need to create by own. I'd appreciate your suggestion
Thanks
you can refer these plugins and modify the source code according to requirement....
changecss
http://www.bramstein.com/projects/jsizes/
I doubt there will be such plugin which will know the ids/names of all your elements. The only way to have such plugin is if it searches by element type, but that will be really uncleaver, since it may list 100+ html elements, while you need to change only 5 (for example). It will be better and smarter to write it by yourself in my opinion.
jQuery makes such changes trivial, take a look at the .css() function. In order to get all elements you'll probably want to look at DOM traversal.
If you only need this for debugging purposes, you can use Chrom'e developper tools or Mozilla Firebug. They allow you to visualize and change CSS attributes on the fly.
If you need this for a shipping product, then good luck. It seems very hard, notably handling the CSS priority rules. Maybe you can get some reusable code from Firebug's code, which is mostly JS.
Use jquery for setting the desired css properties.
Use selector and google for setting css properties using Jquery.
I’m trying to get the CSS pseudo :nth-child(n) function to work in Internet Explorer and that isn’t an easy task.
I founded some JavaScript in jQuery to get the job done in IE but I can’t seem to get it to work. The examples I’ve tried is with unsorted lists (ul and li’s) but my CSS code (which works well in all other browsers) looks like this:
#portfolio div:nth-child(4) { some styling }
#portfolio div:nth-child(3) { some styling }
#portfolio div:nth-child(2) { some styling }
The javascript I tried to run by appending it to my existing script.js file is:
$('div#portfolio div:nth-child(4)').css({' filter:' : progid:DXImageTransform.Microsoft.Matrix(M11=0.99984770, M12=-0.01745241, M21=0.01745241, M22=0.99984770); ‘});
But that does not work. I’ve tried to remove the “div#portfolio” and retype it but nothing I do will make it work in IE.
Any help would be appreciated.
Sincere
- Mestika
here's sample fiddle I did for an earlier example, link
I would suggest you maybe use the jQuery to add a class to the nth-child (I've done so for the "yellow" class), then add the rules to the CSS with the others, though note that the classed rule can't be grouped with the nth-child original selector which may not be a duplication problem if you're using it for a filter anyway ;)
You could try IE9.js: http://code.google.com/p/ie7-js/
Just include the Javascript file in your page, and your nth-child CSS should work properly in IE.
Someone else has already mentioned Dean Edwards' ie7/ie8/ie9.js, which tries to retro-fit a whole range of broken and missing features into IE.
You could also try Selectivizr, which concentrates on adding advanced CSS selector support to IE. It requires another library such as JQuery to do the heavy lifting of the working with the selectors, but since you specified that in the question anyway, it should be a good fit for you.
Is that the exact code you are using, because the nth-childpart is ok, the syntax for the .css() call is completely wrong.
Drop the space and the colon from the first parameter ('filter') and the second parameter has to be a string to.