window.scroll event does't work on android web view - javascript

I've created a web view recently & everything seems to be working fine except the window.scroll event. I'm loading content in my mobile website once user reaches the end of the screen, unfortunately that doesn't work in Android Webview.
I've enabled javascript in Android Webview.
Here is the simple code I'm using in PHP:
$(window).scroll(function(){
alert('H'); //This never happens
});
In main_activity.java, this line is included:
webSettings.setJavaScriptEnabled(true);
What could be the possible reason behind this? Any solution?

make sure jQuery loaded finish, then your code can work fine
put the code after </html> :
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
if alert "Yeah!", just replace alert("Yeah!") to your code.

Related

Script works only on homepage

I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.
Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.

JQuery: Script is working in console but not in attached file

I'm working on a custom Wordpress site that has a lot of javascript (all developed by another developer)
I'm trying to add a script to the bottom of the scripts.js file and it's not working everywhere. It works in the console. It works in firefox.
It's inside it's own document ready function.
The document ready is working (I used an alert to test this), however my alert, console log and script inside this doc ready function will only work inside of the console (or firefox), but not from the scripts.js file in chrome and safari.
Here is my code (it's to make a video play and pause on click of the video window, not just the play controls)
jQuery(document).ready(function () {
// alert('working')
/**
* This module controls the video players
*/
jQuery('video').click(function(){
//alert('working');
this.paused?this.play():
this.pause();
//console.log(this);
});
});
Any help is greatly appreciated.
I'm assuming this is because your video element is not actually present, or is being switched out, after the ready event fires.
It's possible that firefox happens to be loading the video element before your ready event fires, but this would likely vary on how fast the javascript and html are intepreted.
Instead of putting the event directly on the 'video' elements, put it on the document with a 'video' filter.
http://jsfiddle.net/2kmxL1h4/1/
jQuery(document).on('click', 'video', function () {
//alert('working');
this.paused ? this.play() : this.pause();
//console.log(this);
});
Maybe it is a problem with the different JS-Engines !
Did you try what happens, if you move jQuery('video').click(function(){console.log(this);}); within the ready part of the old source of the file ?

Using a window.load function in Internet Explorer

I want to run some code after everything on the target page is done loading AND rendering. It was suggested to me to use the Window.load function and it is working perfectly in Firefox and Chrome. I just can't get it to work in IE. Is there another way of doing this?
Edit: Ok so here is what I have:
appAPI.ready(function($) {
if (appAPI.isMatchPages("192.168.1.156/test/*"))
{
$("body").css("display","none");
if ( $('.welcome p').text().indexOf("user") >= 0 )
{
if ( $('h1').text().indexOf("header") >= 0 )
{
//alert("Found data");
$('td:contains("testdata")').text("newdata");
}
}
$(window).load(function () {
$("body").css("display","block");
});
}
});
Basically before there was code flickering, I could see the data being changed as the page loaded so I asked for some advice and the solution I got was to set the body style to display:none and use window.load to set it back to block once everything is loaded. This works perfectly in Firefox and Chrome but not in IE. The actual code that changes the data works in IE tho.
You should have no issue with this in IE, I use it frequently when I need to ensure all resources have been downloaded:
$( window ).load(function() {
// Run code
});
"Run a function when the page is fully loaded including graphics." ref: http://api.jquery.com/load-event/

$(document).ready only firing once in IE but works in Firefox

this is driving me nutz. Just another issue that works fine in everything but IE -aaargh. Anyway, I have some script that should run everytime the page is loaded. Works fine in Firefox but in IE it only executes the first time I go the page. If I leave the page and then go back it will not execute.
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajaxSetup({ async: false });
var leftHeight = $('#Interface_Content').height();
$('#Interface_Nav').css({ 'height': leftHeight });
//This line calls the Controller and populates the corresponding MEssageDesc Drop down
$.get('#Url.Action("GetCompanyName","Company")', {}, function (data) {
$('#Interface_Header_CONAME').replaceWith(data);
});
$.get('#Url.Action("GetLoginStatus", "Company")', {}, function (data) {
if (data == 'True') {
$('#Nav_Links').show();
}
else {
$('#Nav_Links').hide();
}
});
});
</script>
If there is no compulsion on using JQuery-1.4.4, I suggest you replace it with JQuery-1.8.2 the least. With JQuery 1.8.2, I wrote a sample app and ran it on IE 8,9 and it worked fine.
P.S - Before you jump and download the latest JQuery 1.9, fair warning there are quite a few major changes they have made like replacing $.browser with feature detection, etc which might create an issue if you are using it.

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.

Categories