I'm trying to use an open source HTML5 file uploader snippet in one of my pages, and have put (I believe) all the correct javascript in place.
However, when the page loads I see the 'choose file..' button along with the text box that shows the path to the file on my hard drive, and they're both greyed out.
In looking through the Google and FireFox development tools I can't see why this would be; the CSS involved is quite involved and I can't tell easily whether there's a block display of hidden in there, or whether something else is disabled.
Nothing's jumping out. Are there HTML or CSS inspectors that can help figure out why HTML element X is disabled?
There should be a disabled attribute set. You can try two things:
Check the HTML by viewing the source code. This is the HTML rendered before JavaScript.
Check the Dev Tools and look for a disabled attribute. Then check your JavaScript.
It is hard to debug this remotely but this should send you on your way.
Related
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
I would like to implement the application where user can include the different CSS files when clicked on different buttons. Please let me know how this can be achieved. I don't want to use the theme feature.
I am trying to change the CSS but I have noticed the ungly behaviour as follows:
When using mozilla i see the source
code for page i see code for latest
CSS.
But its not getting downloaded/ tried using the tamper data request to download CSS is not getting sent.
When I inspect the elements style is still the old file
Any idea what could be causing this? Please let me know how to get this working. Desperately looking for a solution.
Can this be done nicely using the ScriptManager control ?
To change styles on the client-side, you need to programmably change the reference to the stylesheet, which would work. However, you wouldn't see this changed in the view source... view source isn't a running document, inspecting all the changes made by JavaScript... so that can be a pain.
Firebug is pretty good, but again, even with Firefox/FireBug, IE dev tools, certain things don't get updated, depending on what you are doing.
So did you write some code and you are not seeing the changes directly, or you see the changes but you can't verify them?
HTH.
In this case I would use xmlHttpRequest with GET verb in order to obtain the needed CSS file from a dedicated handler. Pass the name of the style sheet that you need to request as a query string argument. I suggest that you fire the request dynamically, on click of the button who should download the respective CSS file.
Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.
I'm working on an app that's sort of a bastardization of old and new tech (ASP/ASP.NET). It's all running in IE7. I'd like to be able to right click, View Source and actually see all the html that I'm seeing with my eyes. For example, I have a bit of text in the middle of the page that's in a table. I right click directly on that bit of text and "View Source" and the text isn't in the HTML that I'm looking at. There's no line break or special characters. It's a single piece of text like ABC123. Yet ABC123 isn't in the HTML that I see when I view source.
Is this just something that I'm stuck with? If not, how can I get to the HTML that I want? The app won't run in FF so Firebug is out of the question. I've tried a few developer toolbars for IE but have found them to be flawed at best, not working at worst. It's just very frustrating; I want to make a little change to a style of a TD and I have to go through way too much work just to see if I like it (because of the complex way that the HTML is generated).
When developing in IE I use the IE developers toolbar:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
It will allow you to see rendered HTML on the page, and allow you to drill down and select specific elements that you want to see. There are various highlighting functions, and you can trace styles back to their source.
It's not the be-all and end-all of developer toolbars, but for those times I can't use Firefox / Firebug it does the job over other solutions I have tried
IE7 Pro gives a right click and "View Generated Source" option.
Some ideas:
Firebug Lite
Use IE8 (with its developer tools) in compatibility mode.
MS created a developer toolbar for IE7 (sort of like Web Developer FF extension): http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Temporarily add a link with an onclick handler to dump document.outerHtml into a <pre>