In jQueryMobile, on the page load, I would like to scroll to a given position. I know how to do it in classic jQuery, but in jQueryMobile there is an auto scroll top on the page load.
I tried to do :
$( document ).ready(function() {
$.mobile.silentScroll(1000);
});
That doesn't work. My page stay blocked to the top of the page.
While if i click on a link with onclick="$.mobile.silentScroll(1000);" that works perfectly !
I just would like to scroll to a yPosition on the page load :) !
=======EDIT============
After suggestions of White Raven and Omar I've tried to do this :
$( document ).delegate("#pagePkmn", "pageinit", function() {
$.mobile.silentScroll(1000);
});
OR this :
$(document).one("pagecontainershow", function () {
$.mobile.silentScroll(1000);
});
But still no effect ...
Thanks for your attention.
Using $(document).ready() is a bad idea:
http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html
It is recommended to use pageinit
=== EDIT ===
You can always use the ghetto way:
setTimeout(function(){$.mobile.silentScroll(1000);}, 1000); // scroll after 1 second
Use pagecontainershow as it triggers after page is shown and JQM performes a default scroll to page's top.
$(document).one("pagecontainershow", function () {
/* scroll */
});
Related
I have this 2 pieces of code
function fixFooter() {
var wrapper = $('#disqus_wrapper').height();
if ( wrapper > 200 ) {
$(window).trigger('resize');
}
};
var element = $('#disqus_wrapper');
new ResizeSensor(element, function() {
fixFooter();
});
The expected effect is that the window will resize every time the div#disqus_wrapper changes height. (to fix comments and footer overlapping)
Well the code works, but only once after the page loads. I need it to resize each time the div changes in height. I tried switching the trigger('resize') function with an alert and everything works perfectly. Any idea why the trigger('resize') only works once and how can I fix it?
Update ;
The html is just this because I am loading the Disqus comment system
<div id="disqus_wrapper"><div id="disqus_thread"></div></div>
For detecting the div height change I am using this library
https://github.com/marcj/css-element-queries (the ResizeSensor.js)
You need to call your function fixFooter() in window resize event.
$( window ).resize(function() {
fixFooter();
});
I'm using the $.messager from EasyUI, and everytime I click on the button the dialog displays, but the page scrolls down.
Here is the code im using :
$(function () {
var button = $('.form_button');
button.click(function(e) {
var user_id = $(this).attr('user_id');
$.messager.defaults.ok = 'Yes';
$.messager.defaults.cancel = 'No';
$.messager.confirm('Confirm','Are you sure you want to block this user?',function(r){
if (r){
alert(user_id);
}
});
e.preventDefault();
});
});
Update you can get current scroll position by $(window).scrollTop()
var currentPos = $(window).scrollTop();
$(window).animate({scrollTop:currentPos }, '500');
you should use following in your function when you click that button.
scrollTop will take your window at normal position (when the page was loaded)
$(window).animate({scrollTop:0}, '500');
This is a bug in the framework, as the demos on its home page exhibit the same behaviour. You should file a bug.
Fortunately, you can make several workarounds though. Scrolling to the top may be the easiest, but IMHO that's a UX nightmare. You should calculate the center of the current viewport, and show the window there. Maybe this can be done in CSS too, I am not sure.
I am using this plugin here for horizontal scrolling.
http://manos.malihu.gr/horizontal-page-animation-to-id-with-jquery/
Here is the demo link I have created using it. http://aijaz.co/hearing1/
The problem I am facing is, I can scroll the pages when the link to scroll is just below .content. When I put the link in several divs, the page doesn't scroll. Example:
<div>
<div>
<hr />
← Back to start Next section →
</div>
</div>
This is the script it is using.
<script>
(function($) {
$(window).load(function() {
/* Page Scroll to id fn call */
$("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
layout: "horizontal",
highlightSelector: "#navigation-menu a"
});
/* demo functions */
$("a[rel='next']").click(function(e) {
e.preventDefault();
var to = $(this).parent().parent("section").next().attr("id");
$.mPageScroll2id("scrollTo", to);
});
});
})(jQuery);
</script>
Please help me out. Thank you.
Try traversing up through the clicked element's ancestors instead of using .parent() multiple times:
$("a[rel='next']").click(function(e){
e.preventDefault();
var to=$(this).closest("section").next().attr("id");
$.mPageScroll2id("scrollTo",to);
});
You are doing wrong i guess, Use same class for every tag and try sure it will work , go through plugin document .
I have a webpage that contains a bunch of parts, all of which can be scrolled to using hashtag links (e.g. www.marie-charlot.be/#weiss).
I know how to execute javascript functions that trigger after the page loads (using $(document).ready, but these generally trigger before the page is scrolled down to the correct part (the #weiss anchor).
how do I execute scripts after the scrolling?
You should use the JQuery plugin Waypoints for this.
Example:
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
$(document).ready(function() {
var anchorTop = $('#my-anchor').offset().top;
$(document).scroll(function() {
if($(document).scrollTop() >= anchorTop)
yourFunctionHere();
});
});
After a bit of advice. I'm kind of after a tooltip type thing, but not exactly. I've got a site with a number of links all over the place. When these links are click they load an ajax form at the bottom of the page. Once loaded the page scrolls down to the form, which can be way off the bottom of the screen sometimes. All well and good.
When you click a link there is a slight delay, and when I would like to do is have a small "loading" message appear by wherever the cursor is, pinned to the cursor, then remove this once you scroll down to the loaded form.
Any ideas please?
I've answered this for you in the code of this fiddle. It includes the HTML and the javascript to show/hide the tooltip while your ajax call is executing.
Here is the jQuery portion to see how it works.
$("#ajaxLoader").click(function() {
$("#loading").show();
$.ajax({
settings etc.
success: function() {
$("#loading").hide();
}
});
});
$("HTML").mousemove(function(e) {
$("#loading").css({
"top" : e.pageY,
"left" : e.pageX + 15
});
});
at your .ajax() call you can add something in the beforeSend
the rest is in this post: How do you make a picture follow your mouse pointer with jquery?
Let's say u have a common class for all links which is loading-link.
$('.loading-link').click(function(){
$(this).before('<div class="loading">Loading</div>');
// Adjust the position here
// your ajax stuff
$.ajax() ....
....
success:function(){
$('.loading').remove();
// scroll to bottom
}
});