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.
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'm downloading a template with embedded javascript and CSS that's encoded in base64 and showing it in a modal. However, for some reason almost none of the styles are showing, despite the chrome inspector/devtools showing they are being applied without issues (and the computed section shows they aren't being overriden by anything). I've never seen this before, any ideas?
Edit: I'm suspecting this has something to do with the browser not rendering it correctly. Is there someway to trigger a render with javascript, or something like that?
Here is what the template looks like:
<div class="template">
<p id="myparagraph">Some text</p>
</div>
<style>
#myparagraph {
color: red
}
</style>
I've seen this once or twice before, I would say try the !important to see if that makes a difference (though I strongly advise against using !important, it can lead to complex style issues later on). I would also trying pressing Shift + F5 and doing a hard refresh, in order to make sure the browser isn't caching anything in an odd way.
Try adding the stylesheet before your html and add !important at the end of your css value to override any other css style on that element.
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.
Firebug is probably the best debugging tool that makes the life easy for developers. But one thing that I am not able to find out is how do you locate the function that changed the CSS values. In the Right Panel, when you click on any CSS rule, it will select the HTML node in the left and you get to know that these values belong to this HTML element.
Is there any way that lets you find which javascript function modified the CSS. This is shown in firebug as
element.style{
color:#898980;
top:78px;
bottom:121px;
}
I need to find which JS function changed the above values as it is not in my CSS.
The one highlighted in below Image
In the HTML panel, on the element whose style is changed : Right-click => break on attribute change.
This will break every time an attribute of this element is changed.
See also: http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/
Florent
I'm dealing with a complex page with a lot of different scripts going on, some ASP.NET AJAX and some jQuery.
For some reason when the page loads one of the elements has its visibility set to hidden.
Is there anything out there that can tell me what it is that's causing this element to be invisible? Or even something that would stop everything that's happening in whatever script is doing this so I can see what it is?
Use a DOM inspector (like the one built in to Chrome) to first determine if it's set to hidden because of a CSS rule or because it was programmatically set to hidden with a direct inline style setting.
If it was programmatically set to hidden, then the only thing I know of is to search all the javascript code for anything that could be changing the visibility.
Then, when you find some candidate lines of code, use a javascript debugger (my favorite is the one built into Chrome) and set breakpoints on each of those lines. Then, reload the page after the breakpoints are set and when one of those breakpoints is hit, you can step through that part of the code and see who is doing it. At that point, you can even look at the call stack and see what code called this and so on. Or, you can step through and out of this code into the higher levels that called it and see why they are doing it.
If it is CSS rules that are making it hidden, then you need to look at what triggers those CSS rules (classes, IDs, etc...) and figure out how to change one or the other so that your desired object isn't hidden by that CSS rule. Remember that classes can be added/removed from objects in the DOM via javascript so that could also be part of the cause.
using Firebug you can set breakpoints throughout your scripts and watch variables as they change at different points. Set a watch on your variable and set breakpoints in your scripts to try and figure out when it is being set. Good luck I've had this problem before it can be a pain
you could try and debug.. or you could override it with something like this:
CSS
#element, .elements{
visibility: visible !important;
}
Modifying the script could break other things.
Sometimes in production environments you're not allowed to modify other pre-exisiting scripts.
Sometimes it's just not worth all the time trying to figure out what script it is. Especially if there are 10-20 scripts on the page that could be updated or changed whenever.