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);
Related
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.
I'm currently working on an issue for my company's webpage, in which one of the customer wanted a certain page, to be text highlight-able. The current setting for that certain page is that, the element block which displays the data cannot be highlighted and copied.
The code for the block looks something like below
<div id="mainpanel">
<div id="datapanel">
<!-- All the data are displayed in here -->
</div>
</div>
Upon my investigation, i found out that datapanel block has disabled highlighting. But the question that i still couldn't find out was, how did they do it.
To my understanding, there are several ways of disabling highlighting text on webpage, and i tried to do opposite of it, in hope of reenabling the text highlighting.
Thru CSS, with this as reference. I tried to do the reverse, by doing -webkit-user-select:text !important, but somehow it doesn't appear on the style attribute of that element which i put this on. I tested this again on Chrome's inspector, adding the css line manually to the said element (in this case the datapanel block), but somehow it got rejected out (it didn't appear inside the inspector's Styles. Usually if the css line is not working or being overridden, Chrome inspector will just slash the css line out). I tried add the css line above to the parent block (the mainpanel) and it appears on the style attribute, but it was slashed.
Using z-index, in case if the datapanel block was under a transparent layer with higher z-index (which i couldn't find any inside the Inspector). I tried to set datapanel block to z-index:10000000 but still didn't work.
Thru javascript, using this as reference, but didn't work too.
Checking all over the html, javascript and css for that page, but nothing suggested that the page is highlight-disabled thru html, css or js.
Somehow i feel lost in here. Anyone here has any idea on why the solutions above wouldn't work.
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'm trying to debug some styling issues on a site that has tons of .js files included. One of those scripts adds some css properties to an input element on click.
Is there an easy way to find which script and which part of it alters those css properties using Chrome Developer Tools?
Chrome Version 34.0.1847.116
In the Elements panel, right-click the element in question, and in the context menu choose Break on... > Attributes Modifications. Next time its style attribute is changed, the debugger will break on the corresponding JS line.
Use the developer tools to delete the element that changes on click. Then click the element that triggers the change. Since it can't be changed it will issue an error. The error will have a link on the right to show you exactly where it broke.
This should produce the exact file and function/script.
So say this is your element <div class="bob">Apple</div> and on click, Js adds style="color:red;" by deleting .bob you will break the script.
Note: Use developer tools to delete it. That way it doesn't permanently mess with your project.
Note2: Before deleting it, try just editing it and changing its id and/or class, like "xxbob", so it will no longer be recognized by the code.
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