We Keep Coding

Remove "connecting to..." messages from browser/firefox

My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.

As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.

Alert does not trigger, JS is not detected

I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.

(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.

You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.

Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>

Download a file in hidden iframe: Android equivalent in Comet context?

I am currently using the following JS code to trigger a file download without leaving the page I'm on:
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = "/somefile.zip";
It works well pretty much everywhere I tested except on both the stock Android browser and Dolphin, where the download doesn't start at all. So far so good, after some research this hidden iframe trick happens to be known not to work on the Android browser.
But I tried several other methods to trigger the download on the Android browser, including window.open() (not reliable because popup blocking is enabled by default), or <a target="_blank"> with a simulated click() (which from a popup blocker perspective amounts to window.open() and gets blocked), or document.location = ... which downloads the file but breaks my app.
The problem with the latter document.location = ... is that this is a Comet application (server-push / long polling) so I really can't leave the page I'm currently on (and "leaving" includes changing document.location even for a file download, even if apparently the browser stays on the current page) otherwise the long polling connection is stopped and the updates stop, the app breaks. This obviously also applies when clicking normal links, either manually or simulated.
So in order not to break my app I really need to trigger a file download without leaving the page I'm on. Unfortunately I didn't find any viable solution that also works on the stock Android browser.
Any ideas?
Thanks for reading me.

Try using the anchor and simulated click without using a target=blank
I say this because I had a similar download consisting of an iframe and a simple link as fallback. The iframe worked on everything but the android, but the simple link would download successfully without leaving the page.

How do I make a html page printable without reloading/refreshing the data?

I have a small html/css site powered by jQuery, generated with PHP, you can see it in action here.
All the idea about the site is that once loaded, it works without the internet connection, if the browser supports javascript, that is.
You can see it has a PRINT button ready, but it doesn't work yet. I want to make it work, but I'm not sure what is the best approach, or any approach, thereof.
I need to print the content area only, that means the header (song title) and the paragraph (song lyrics). Probably add a header/footer to the paper, so that the site name is printed too.
On other sites it usually works in the way that the PRINT button opens up a new window, which loads for example /print.php?id=40, but I don't really want to do that here, as it requires an active internet connection.
In case the print feature cannot be done without an internet connection, an answer which at least describes on how to best approach this with reloading the site will still be acceptable.

Use a print stylesheet to specify element visibility for printing.
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print">
... and in print.css
#hideThisElementInPrint,
.andThisOneToo {
display: none;
}

How to set breakpoints in inline Javascript in Google Chrome?

When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits, but basic functionality like being able to set breakpoints both in js files and within html and javascript code is missing! I tried to use the javascript console, which itself is buggy - for example, once it encounters a JS error, I cannot get out of it unless I refresh the whole page. Can someone help?

Are you talking about code within <script> tags, or in the HTML tag attributes, like this?
Click
Either way, the debugger keyword like this will work:
Click
N.B. Chrome won't pause at debuggers if the dev tools are not open.
You can also set property breakpoints in JS files and <script> tags:
Click the Sources tab
Click the Show Navigator icon and select the a file
Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).

Use the sources tab, you can set breakpoints in JavaScript there. In the directory tree underneath it (with the up and down arrow in it), you can select the file you want to debug. You can get out of an error by pressing resume on the right-hand side of the same tab.

You also can give a name to your script:
<script>
... (your code here)
//# sourceURL=somename.js
</script>
ofcourse replace "somename" by some name ;) and then you will see it in the chrome debugger at "Sources > top > (no domain) > somename.js" as a normal script and you will be able to debug it like other scripts

Refresh the page containing the script whilst the developer tools are open on the scripts tab. This will add a (program) entry in the file list which shows the html of the page including the script. From here you can add breakpoints.

Another intuitive simple trick to debug especially script inside html returned by ajax, is to temporary put console.log("test") inside the script.
Once you have fired the event, open up the console tab inside the developer tools.
you will see the source file link shown up at the right side of the "test" debug print statement. just click on the source (something like VM4xxx) and you can now set the break point.
P.S.: besides, you can consider to put "debugger" statement if you are using chrome, like what is being suggested by #Matt Ball

My situation and what I did to fix it:
I have a javascript file included on an HTML page as follows:
Page Name: test.html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>
</div>
</body>
</html>
Now entering the Javascript Debugger in Chrome, I click the Scripts Tab, and drop down the list as shown above. I can clearly see scripts/common.js however I could NOT see the current html page test.html in the drop down, therefore I could not debug the embedded javascript:
<script type="text/javascript">
document.write("something");
</script>
That was perplexing. However, when I removed the obsolete type="text/javascript" from the embedded script:
<script>
document.write("something");
</script>
..and refreshed / reloaded the page, voila, it appeared in the drop down list, and all was well again.
I hope this is helpful to anyone who is having issues debugging embedded javascript on an html page.

I was having the same problem too, how to debug JavaScript that is inside <script> tags. But then I found it under the Sources tab, called "(index)", with parenthesis. Click the line number to set breakpoints.
This is Chrome 71.

Adding debugger; on top at my script worked for me.

I know the Q is not about Firefox but I did not want to add a copy of this question to just answer it myself.
For Firefox you need to add debugger; to be able to do what #matt-ball suggested for the script tag.
So on your code, you add debugger above the line you want to debug and then you can add breakpoints. If you just set the breakpoints on the browser it won't stop.
If this is not the place to add a Firefox answer given that the question is about Chrome. Don't :( minus the answer just let me know where I should post it and I'll happily move the post. :)

If you cannot see the "Scripts" tab, make sure you are launching Chrome with the right arguments. I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port=9222. I have no problem if I launch Chrome with no argument.

I came across this issue, however my inline function was withing an angularJS view. Therefore on the load i could not access the inline script to add the debug, as only the index.html was available in the sources tab of the debugger.
This meant that when i was opening the particular view with my inline (had no choice on this) it was not accessible.
The onlly way i was able to hit it was to put an erroneous function or call inside the inline JS function.
My solution included :
function doMyInline(data) {
//Throw my undefined error here.
$("select.Sel").debug();
//This is the real onclick i was passing to
angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
}
This mean when i clicked on my button, i was then prompted in the chrome consolse.
Uncaught TypeError: undefined is not a function
The important thing here was the source of this : VM5658:6 clicking on this allowed me to step through the inline and hold the break point there for later..
Extremely convoluted way of reaching it.. But it worked and might prove useful for when dealing with Single page apps which dynamically load your views.
The VM[n] has no significant value, and the n on equates to the script ID. This info can be found here : Chrome "[VM]"

Using Visual Studio (2012) I had the same issue and switching to IIS Express solved the problem!
The script tag's type attribute did not factor into it.
For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints.

This is an extension of Rian Schmits' answer above. In my case, I had HTML code embedded in my JavaScript code and I couldn't see anything other than the HTML code. Maybe Chrome Debugging has changed over the years but right-clicking the Sources/Sources tab presented me with Add folder to workspace. I was able to add my entire project, which gave me access to all of my JavaScripts. You can find more detail in this link. I hope this helps somebody.

You have to add type="text/javascript" to the script blocks for them to be picked up as script. For example:
<script type="text/javascript"> ...your code here... </script>

for someone like me: just want to
(add breakpoint to) debug normal js code
<script> ... </script> inside/embedded html
Steps:
Sources -> Page -> Top -> find your html -> click -> right side show html and js script -> add breakpoint -> debug