Testing JavaScript With Firefox – refresh does not seem to always refresh JavaScript

Question 1

KDawg’s Question:

I am testing on a live server and editing JavaScript on the CodeIgniter framework there.
I am testing it in Firefox.

Typically I make some javascript changes and then save my edits via FTP, hit refresh in the browser, look for my changes and carry on.

For some reason – the newly saved javascript is not always showing up when I refresh.
I am sure it is nothing like, I forgot to upload, or did not wait for it to fully save – as I have tested this a number of times – simply adding an alert and refreshing – looking for the alert…. sometimes it is not there… Second refresh… there it is.

Anyone know what gives or how to ensure the refresh picks up the changes?

Thanks all 🙂

Answer

Starx

This particular problem is caused by caching. It is both useful and sometimes pain. JavaScript Library like jQuery uses a simple technique when we add script to the DOM. It appends a random key at the end of file, thus faking the HTTP request as new.

Normally, you would not require the script to change when viewed by the user, but when you are developing it becomes a real pain. So during those time, just add some random text at the end of every file during load or if you are too lazy to do that, send a header saying to clear the cache.

In PHP something like at the top will do it:

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1990 05:00:00 GMT");

Question 2

Question by Trevor Roberts

Trevor Roberts

I can use this in my Opera browser to stop the alert boxes from appearing:

javascript:function alert () {}

However, it does not work whenever I use this in Firefox. What is the command to stop the alerts in Firefox?

Answer

Answer by Starx

Starx

This can be done like this

window.alert = function() { return false; }

But, if you want to stop the alert boxes, best solution is not to use alert() at all.
Disabling the JavaScript functions in not right solution.

Question 3

Question by Kei Izumi

Kei Izumi

I’d like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.

div.hoge {
    width: 500px;
    overflow: auto;
}

I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn’t work either. Need to use some JSs? Any guesses?

Answer

Answer by Starx

Starx

If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll

As per the questions title: You can write mozilla specific styles like this

@-moz-document url-prefix() {

    div.hoge {
        width: 500px;
        overflow: auto;
    }

}

Question 4

Question by Brian Hawk

Brian Hawk

Is there a way to set the cursor at the end in a TEXTAREA tag? I’m using Firefox 3.6 and I don’t need it to work in IE or Chrome. JavaScript is ok but it seems all the related answers in here use onfocus() event, which seems to be useless because when user clicks on anywhere within textarea, Firefox sets cursor position to there. I have a long text to display in a textarea so that it displays the last portion (making it easier to add something at the end).

Answer

Answer by Starx

Starx

Here is a function for that

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

[Demo][Source]

Question 5

Question by Futur Fusionneur

Futur Fusionneur

I was wondering if it is possible to hide the “www” text in the URL bar (only in Firefox) using CSS in Stylish addon or/and Java in Greasemonkey.

I want this to make Firefox even more compact.

This is some CSS code that i found for URL bar in firefox that will modify the text size using Stylish. Hope it can help.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.urlbar-input-box,
.searchbar-textbox {
 font-size: 11px !important;
}

Update

I don’t want to remove the “www”, I just want to hide it from the url bar.

Answer

Answer by Starx

Starx

You have to use .htaccess for this

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

Replace example.com with your domain name.

Question 6

Question by Blowski

Blowski

In Firefox, when I put border-radius on an <a> tag, I’m getting little white lines. appearing between the text and the edge of the element. If I zoom in, they disappear.

I tried putting it on JSFiddle, but it’s not replicating the issue.

Does anyone recognise the issue visually?

The whole page is here: http://www.danblows.com/.

The bit adding the border radius is, but just putting the same code onto JSFiddle doesn’t replicate the issue.

.cta, .cta:visited  {
    background-color:#000000;
    border-radius:5px;
    border:10px solid #000000;
    color:#FFFFFF;
}

Screengrab of issue

Answer

Answer by Starx

Starx

Link cannot display block properties properly. Give your anchor a display: inline-block;

.cta { display: inline-block; }

TESTED 🙂

Question 7

Question by Jared

Jared

I want to know if the element is showing vertical scrollbars or not, and if it is possible to do this with CSS only.

This only needs to work for Firefox by the way.

Answer

Answer by BoltClock

BoltClock

If you mean using selectors to test, no, there isn’t such a selector in standard CSS (because the presence of scrollbars is calculated during rendering), nor can I find any selectors in this list of Mozilla vendor extensions that do what you’re looking for.

Answer

Answer by Starx

Starx

No, CSS cannot accomplish as this requires to be able to monitor the element, not apply styles.

Using jQuery

   var element = $("#yourdiv");
   if(element.get(0).scrollHeight > element.height()) {
       console.log('scroll bar is visible');
   }

Question 8

Question by masato-san

masato-san

I’m using Firefox 10, Windows 7 and not sure older version but when I clicked the button, the blue border appears around the button.

I created the example below.

http://jsfiddle.net/dEvKb/58/

I removed the dotted line with css below but I also do not want blue border. I can’t figure how to remove it or is it even possible to remove?

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner
{
    border: none;
    outline: none;
}

below didn’t work…

input[type="button"]:visited
{
    outline: none;
    border: none;
}

This is evil blue border I’m talking about.

enter image description here

Answer

Answer by Starx

Starx

That is the UI of Firefox, whether themed or none. Not something you got from coding.

If it is troubling you so much you can reset it and define your own style. Here is a reset rule for that.

button { background: none transparent; border: none; }

Check here

And you can add your styling on it later on. Here is a demo for that. You can define custom states for hover, visited , active like the way you want.

Tag: firefox

Testing JavaScript With Firefox – refresh does not seem to always refresh JavaScript

KDawg’s Question:

Prevent alert boxes from appearing in Firefox

Question by Trevor Roberts

Answer by Starx

Showing a scrollbar only in Firefox

Question by Kei Izumi

Answer by Starx

How to set cursor at the end in a TEXTAREA? (by not using jQuery)

Question by Brian Hawk

Answer by Starx

Hide "www" text in URL bar (firefox)

Question by Futur Fusionneur

Update

Answer by Starx

border-radius bug with <a> tag in Firefox on Mac

Question by Blowski

Answer by Starx

TESTED 🙂

Is there a way to test for a scrollbar with just CSS?

Question by Jared

Answer by BoltClock

Answer by Starx

How to remove blue border around the button in Firefox?

Question by masato-san

Answer by Starx

Please fill the form - I will response as fast as I can!