I have a <ul></ul>class in which an element.style{} is getting applied from a .js file. Can I know how to know the exact .js file from which it is getting applied and the line of code? Below is the ss attached.
Check for some file name with flexslider or jquery.flexslider.js. If you have it then css is coming from their only search with .slides or with translate3d. If you don't have any then
the only possible way is with cleaver search. 1st search with ".slides" within your project. If you found any normal class not any library thats the place where it is coming. If you found any file like slider, carousel or owl or any other js file just delete the content of those file and refresh the page if the css is still their look for other file. If nothing happen look with parent class or ID.
If you use an IDE you can do a search for the styles applied in question in the javascript files, the IDE will highlight all the occurrences of the keywords that you use to search for. If the JavaScript file has been minified it can make it impossible because you won't have any idea what is what without a lot of analysis work. If you have the original source code just do a search it will allow you to do analysis really quick.
In Microsoft Edge if you click inspect element the CSS of element will appear on the right side of the screen. You can see which CSS style are being applied and use the checkmark interface to apply or remove the style. This will tell exactly where the CSS is coming from. If you want to know where the JavaScript is coming from I will use the search feature in my text editor to find the specific functions, or remove script tag temporary until I locate it.
Related
Ok so Im using a wordpress theme called Athena that uses a camera.js plugin. In the html I have a main page button div that is set to block where after a couple seconds it disappears and changes to display:none. I can change it back to display:block in the console but I can't find the source where this change is happening. I dont want the div to disappear. There is no line number next to it. I think its taking place in a .js file and superseding the css. I tried command+f in the camera.js file as well as the css file and highlighted anything with display: and tried changing anything with none to block but that didn't work. Any helpful suggestions would be greatly appreciated.
I used the browser inspection tools to find out what class was getting the display:none property applied to it.
I then used the information you provided in your question - namely the name of the file camera.js
I searched the file for the class name I mentioned above. I found three different results.
This is the most likely one:
try changing the fadeout value in line 1090 of camera.js Here's what it looks like by default
$('.cameraContent',fakeHover).fadeOut(600);
I've tried for quite some time after passing the codeschools "Shaping up with Angular" course to make it work. The last thing I tried was even to copy their source code to make sure that there were no typos on my side and the results vary quite a lot and I don't know what I'm doing wrong at this point.
This is what my site looks like on GitPages:
http://danieboy.github.io/codeschool-shaping-up-with-angular-master/index.html
This is what it looks like on the course website:
http://i.imgur.com/r3xlCP7.png
Anyone able to shed some light on this problem is my hero.
The actual source can be found here: http://discuss.codeschool.io/t/shaping-up-with-angularjs-source-code-demo/5363
It seems that they have a style.css file that is not included in your code. That file specifies layout and appearance for the body tag, the img-thumbnails, img-wrap, small-image, thumbnail classes and others. Right now, you add these classes to elements in your html files, but there is no css stylesheet to define them.
Check out the plunker they share at the above link. You'll need to create a css file that specifies the appropriate styles for these classes and reference it in your index file header.
I want to reset remove or make initial all the css properties defined in an external css file. I want the solution should also work when I edited/added/removed properties in css file.
So solutions in here don't work.
For example $('div').css('width','');, is not a solution cause it clears the width property in a HARDCODED way.
Also solutions like $('div').attr('style',''); does not work cause I do not use inline styling, also again $('div').removeClass(''); is not a valid solution.
Any answer would be appreciated, thanx.
You can playaround the code here: http://codepen.io/ertugrulmurat/pen/JEhfe
And; How to dynamically remove a stylesheet from the current page is not a solution, another side effect of this is that it removes all styles for all elements, this is not the case wanted
Just use this $('link[rel=stylesheet][href~="external_css_link.css"]').remove(); and remove the link of the css file which you don't want in similar manner you can again add the file
UPDATE
I tested the same in local file system where css is other file and run the same code and found that the style is removed completely and it behave in complete different manner as it working in the online javascript editor jsfiddle or any other because they internally include the css in the page they don't include the an external link thats why
$('link[rel=stylesheet]').remove();
not work here in your sample
in other way it remove the style completely
Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell
hope you can help me, again :)
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag'n'drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can't seem to figure out, how to get it working.
thnx in advance,
dg
In order to edit external stylesheets with JS you'll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities - this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style="...") and then when the page is submitted, enumerate each element's style property to extract the values and use them to build a POST request. Then create the new file on the server.
you want to use jquery... it uses css to select groups of elements and allows you to manipulate the css style on the elements you have selected
lets say you have an div element with the class awesomeDiv:
<div class="awesomeDiv">some content</div>
you can select it using jquery with the following line:
$(".awesomeDiv")
and you can change the css like so:
$(".awesomeDiv").css({'background-color': '#000000', 'width': '250px'});