We Keep Coding

Android WebView JavaScript onClick Bug

I have some JavaScript which adds some CSS when a button is clicked using the onClick() event. This works perfectly in all the browsers that have tested (Safari, Firefox, Chrome etc), and also works on all mobiles including within the iOS UIWebView object.
However although it works perfectly in the Google Chrome browser on an android phone it does not work within the Android WebView object. Nothing happens at all.
Changing it from an onClick() event to a touchstart() event works.
Also adding alert() inside the onClick() works too, it just seems that the onClick() event is incapable of adding CSS styling inside the Android WebView object
What the hell is going on, is this some kind of bug, it seems to happen on every Android mobile I have test on, all with a different OS version :S
Here is the code I have been using
if (login) {
login.addEvent('click', function(e){
e.stopPropagation();
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
});
}
Can anyone help??

I tried this "duplicate version" in nature JS and it's work for me:
if (login) {
login.onclick = myFunc();
login.addEventListener('click', function() {
myFunc();
});
}
function myFunc() {
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
}

You need to change
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
to
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
or
$('#login_items_wrapper').setStyle('opacity', '0');
$('#loading_content_login').show();
As you are not correctly referencing the elements.

Javascript and target="_top"

I'm working with a legacy frames website that was just moved into an iFrame.
Assuming I have the following function:
<script language = "javascript">
function myFunction(){
<!-- no console.log in IE 7 (my required target browser) -->
alert('sup, yo?');
}
</script>
and the following hyperlink triggering the function:
click me
before the move into an iFrame this worked ok. Once the website was moved into the iframe, clicking the link in IE (not FF or Chrome), I would get the ever-so-helpful error:
Line: 1
Object expected
Once I removed the target="_top" attribute the function would work, so I don't need help solving the problem, but my question is:
What is IE doing with the target attribute when calling a javascript function to invoke this behavior? I don't have other versions of IE installed, is this current behavior in 8+ as well?
Thanks.

It does not make sense to try to understand the behavior. You're using a technique that is not well defined and is not used by developers nowadays.
Instead of href="javascript:myFunction();, just use onclick="myFunction(); return false" or even better, set the handler from JS like the following
<a href="pageForUsersWithoutJs.html" id="my-link" >click me</a>
<script type="text/javascript">
// This is old school, but works for all browsers, you should use a library instead
document.getElementById('my-link').onclick = function() {
// Do your thing
return false; // so the link isn't followed
};
</script>

How do I Programmatically Enable/Disable Firebug Lite at Runtime?

How can I show or hide the entire Firebug panel and its icon at runtime ?
I browsed through Firebug.chrome but could not find anything appropriate.
I tried the following snippet which did not have any apparent effect, Firebug Lite was still there.
Firebug.extend(function (FBL) {
alert('TEST'); // This is run
FBL.Firebug.chrome.deactivate(); // No errors but nothing happens
});
The anonymous callback function is definitely invoked.

Quite an old post, but still popping on google search for such a question.
I'm not even sure which version of Firebug Lite you were using, but the following works well with 1.4.0 (once the page has loaded):
Firebug.chrome.open();
Firebug.chrome.close();
Firebug.chrome.toggle();

Firebug-Lite is enabled through the javascript function in the bookmark, and from there it just loads the javascript hosted at getfirebug.com.
If you control the website you're looking at, and want firebug to pop-up for that website, then you can add this to your code:
<script type="text/javascript">
function bookmarklet(F,i,r,e,b,u,g,L,I,T,E){
if(F.getElementById(b))
return;
E=F[i+'NS']&&F.documentElement.namespaceURI;
E=E?F[i+'NS'](E,'script'):F[i]('script');
E[r]('id',b);
E[r]('src',I+g+T);E[r](b,u);
(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
E=new Image;
E[r]('src',I+L);
}
$(document).ready(function() {
bookmarklet(document,'createElement','setAttribute',
'getElementsByTagName','FirebugLite','4','firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
});
</script>
Or, did you mean that when you're browsing you always want Firebug / Firebug-Lite at the bottom?

Internet Explorer 7 + alert() doesn't work

Can some of you please tell me why a simple alert() isn't working using jQuery 1.4 in Internet Explorer 7, when it's working in all other browsers? It's been driving me crazy now for the last half an hour..!
$(document).ready(function(){
alert("wtf?");
})
This simple example doesn't show an alert in IE7. See for yourself at http://jsfiddle.net/8HQdp/.

Ensure your console doesn't show any errors and correct them if there are any.
Be sure you didn't disable browser prompts on IE
Try using window.alert() - it's possible (though improbable) that another alert() is conflicting with window's.
If you have console support, try console.log(alert); and see what it says. It should be something like:
function alert() {
[native code]
}

I'm using IE8 but with IE7 mode, the alert on http://jsfiddle.net/8HQdp/ still triggers.
Try changing $ to jQuery and host your own jquery.js.
And also try console.log('wtf') before alert so u know whether it's alert or document.ready is broken.

It works in IE 7 mode in IE 8 form me. Takes a while but it does trigger.
I noticed that there is a semi colon missing from the ready function. should be...
$(document).ready(function(){
}); //missing semicolon here
Also, try using the shortcut for the DOM ready function...
$(function(){
// code here
});

Try using window not document.

jQuery $ is not a function in Firefox, works in Chrome and works with $(document).ready()

I'm implementing jQuery in a site and am getting the "$ is not a function" in Firefox when I try to use a selector, but $(document).ready() works perfectly right before it. My code looks like this
<script>
$(document).ready(function(){
alert("hi")
}); // Works fine
function showDiv(){
$("#traditionalCC").hide();
}
//Throws error
</script>
Does anyone know why this happens, and why it works in Chrome and Firefox.

The key difference between your two examples (the working and non working ones) is that the first one is using the document ready event. That happens when the page is fully loaded. Not sure when you're other one is getting invoked, but my guess is that it is being called before your <script> tag include for jquery.js itself.

Try
<script>
$(function() {
alert("hi")
}); // Works fine
function showDiv(){
$("#traditionalCC").hide();
}
//Throws error
</script>

Try to use
$(document).ready(function() {
$ = jQuery.noConflict();
});
Fix your script declaration to <script type="text/javascript">
Verify if your script is after the jQuery lib include.
I hope it help.

I have found that sometimes Firefox gets "hosed" and I have to quit and relaunch.

In case anyone comes across this in the future, the problem was FireBug. I uninstalled and reinstalled and the issue went away.