jQuery Mobile Scroll Events - javascript

Having issues with getting the scroll series of events to function (at all, not just as designed). Have been trawling through all articles, code suggestions and other help topics regarding this, but no-one can explain why this example doesn't work at all:
Basic page html:
<!DOCTYPE html>
<html>
<head>
<title>JQM Test</title>
<script src="/inc/jQuery/jquery-1.11.3.js"></script>
<script src="/inc/jQuery/mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
var scroll = 0;
$(function() {
$(window).on('scroll',function(e) {
console.log("Scrolled - "+scroll);
scroll++;
});
});
</script>
</head>
<body>
Contents blah blah.
</body>
</html>
Ok so the inclusion files need substituting if you copy paste, and version may be differnet. Anwyays onto the behaviour. When I take out the jquery.mobile inclusion the script works as expected, logging scroll notes into the console whenever scroll position is altered.
When I include the jquery.mobile it fires once when the page loads and thats it. Have tried document/window changes in the jquery script section, scrollstart and scrollstop events. Even tried explicitly binding an even to the scroll using native javascript. Same result, all works fine without jqm inclusion, fails when I include the jqm.
Can someone explain to me why the JQM stuff breaks the scroll functions?
EDIT:
THe following JS functions have been attempted with the EXACT same result (function until JQM inclusion added)
$(document).on("scrollstart",function(){
****
$(document).on("scrollstop",function(){
****
$(window).on("scrollstart",function(){
****
$(window).on("scrollstop",function(){
****
$(document).scrollstart(function(){
****
$(document).scrollstop(function(){
****
$(window).scrollstart(function(){
****
$(window).scrollstop(function(){
****
window.onscroll=myFunction;
document.onscroll=myFunction;
window.attachEvent("scroll",myFunction,false);
document.attachEvent("scroll",myFunction,false);

Try this :
$(function() {
$(window).on('scroll',function(e) {
console.log("Scrolled - "+scroll);
window.scrollBy(100, 0); // for scroll horizontally.
});
});

With help from #FraserCrosbie turns out it was a bit of CSS I was ignoring: https://jsfiddle.net/nzwodyte/4/
The CSS was assigned to a [data-role=page]{ elements and had the height: 100% and position: relative tags.
Didn't realise that JQM was assigning data-role="page" to elements in my HTML without my declaration of said tags.
So for anyone with the same issues, check height and position CSS of your pages (from a debug point of view, not in the original DOM)

Related

IE8 seems to execute js before css is rendered

I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">

Prevent inline scripts loading until Jquery has been loaded

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});

Delay Javascript or div until page load

I've been looking around for a solution, trying a few suggestion but none seem to work for the script I've got or don't understand the solutions properly, so hoping there is someone out there that can help.
In the head tag I've got the javascript script below. It slides the 8th div on the page up from the bottom into the page. However, when you visit the page you get a quick glance of the contents of this div (a block of text) in its end position, before it slides into the page. How do I get rid of this quick preview and get the text block div to slide in when the main image is loaded?
Link to site: http://www.estilosalon.com.au/estilo-salon-philosophy2.html
<script type="text/javascript">
i=-700;
var c;
function f(){
c=setInterval(function(){inv()},5)
}
function inv()
{
if(i!=0)
{
i+=5;
document.getElementsByTagName("div")[8].style.bottom=i+"px";
}
else
{
clearInterval(c);
document.getElementsByTagName("button")[0].parentNode.removeChild(document.getElementsByTagName("button")[0]);
}
}
</script>
Thanks in advance!
You could try the following:
Add a class to your <html> tag as a fallback when there is no js:
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">
Replace the no-js class with js class by placing this code before i=-700; line
var html = document.documentElement;
html.className=html.className.replace(/\bno-js\b/,'') + 'js';
Add this to your style sheet
html.js #text_box_philosophy{
bottom: -700px;
}
You can attach a function to the body's load event <body onload="f()"> and set div[8] to display: none in your css and then set it to document.getElementsByTagName("div")[8].style.display = "block" in f().
However, I would strongly consider using jQuery and the $().animate function to animate the div, assigning the div an id (if you add more div elements before it, your code will break), and using jQuery's $(document).ready() function to fire the initial code rather than using <body onload="">. Taking these steps will help your code perform uniformly across multiple browsers.

Show an element... unless the user has javascript turned on, then fade it in nice and pretty?

I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
$('#messagecenter').hide();
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head>
<style type="text/css">
body.withjs #messagecenter { visibility: hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
</head>
<body>
<script type="text/javascript">
$(document.body).addClass('withjs');
</script>
...
<div id="messagecenter">Albatross!</div>
You can go with your second option of using display: none;, and include your text again inside a noscript tag.
Not exactly the cleanest thing though, since you'll be duplicating your element/text.
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.
Be sure to chain your queries too.
$('#messagecenter').hide().fadeIn('slow');
Always use the <noscript>...</nosript> tag for those 1% users.
And keep the code for the normal users untouched.

Need help with Cross Browser Inconsistencies in overlay

RESOLVED
I found the issue and am sorry to say it is quite idiotic. On some pages there was an extra closing bracket after the script type=javascript. Apparently Chrome and Firefox ignore the issue but Safari and IE threw up display errors. Thank you to everybody for the excellent support and guidance on the matter. of note, i decided to go with the .show() method as it seemed most logical.
I have the following javascript snippet at the top of my page which validates 2 fields within a login form:
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
$('#login_form span').hide();
if ($("input#user").val() == "") {
$("span#user").show();
$("input#user").focus();
return false;
}
if ($("input#pw").val() == "") {
$("span#pw").show();
$("input#pw").focus();
return false;
}
var overlay = $('<div id="overlay">');
$('body').append(overlay);
});
});
</script>
When a form is submitted (submit is clicked) the function is run which checks to make sure the 2 fields: pw and user have some content. If they do, it opens an overlay script to cover the screen. The function above sits at the top of my screen (in the head)
The CSS for the overlay is:
#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }
In Chrome:
The function works well but the 'loading' image within the overlay does not show.
In Firefox:
Nearly the same as Chrome but the loading image DOES work if the javascript call is made at the bottom of the page.
In IE:
if the function stays in the head, my page is completely blank (though no server errors). Once I move to the bottom of the page, the loading image appears randomly and if it does, it is VERY slow in its animation.
perhaps I am doing something wrong but trying to build for all three browsers on something this simple is making me bonkers.
Any suggestions for improvement?
Thanks ahead of time.
UPDATE
First off thank you all for your suggestions so far. I have tried and number and get various results from each (as well as different results when run locally versus on our apache server).
One page in particular that seems to be of fury is this one:
https://www.nacdbenefits.com/myadmin/password-reset
In IE, the page just opens to a grey screen. I have updated the code to imbed the div id in the page itself and simply 'show' on a submit but apparently something else is catching a long the way.
UPDATE 2
Something else must be causing this to malfunction. When i strip the code even to:
<script type="text/javascript">
$(function() {
});
</script>
unless I move the code to the bottom of the page, IE just shows a dark screen with nothing there (no server errors again and no JS errors at page bottom).
I would have the overlay already existant in the page's HTML but hidden (display: none;), so that the background image is preloaded. Then, once my button is clicked, I would .show() it.
I think your code has a bug. I'm suprised Firefox manages to make something out of it. According to .append() you should pass it a string or an element. You're attempting to pass it a jQuery selector result (and a broken one at that). Remember, in jQuery $() is a function call! Compare your code (condensed):
$('body').append($('<div id="overlay">'));
with this (no $() call):
$('body').append('<div id="overlay" />');
or this (note closing the div tag):
$('body').append($('<div id="overlay" />'));
Have you considered having the overlay as part of your page's code, but simply display: none by default, and then simply .show()ing it when you want it to appear?
The head/bottom-of-page inconsistency can be fixed by running your binding when the DOM is ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
// code omitted for brevity
});
});
</script>

Categories

Resources