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
}
});
Related
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 */
});
I load my content per $.get and "follow" the new appended data per javascript-auto-scrolling. Now I want to disable autoscrolling if the user "scrolls manually", but the following scroll-to-bottom function also triggers the Jquery .scroll()-function - so it disables itsef.
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
How can I receive a mouse-wheel event or prevent scrollTop to trigger the .scroll()-function? I also tried to set a Timeout to block while scrollTop is working, but this isn't a great solution and has a few drawbacks.
Any suggestions?
EDIT :
My current code:
I use the button #stb (scroll to bottom) and the class .active to to turn it off/on.
$.get("url", function(data){
//do something
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
});
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//$("#stb").parent().removeClass("active");
});
ps: Yes, I know. There are a few quite similar questions. I read them, but they differ in important points.
To stop a scrollTo event on user-interruption mid-scroll try this:
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//jQuery.scrollTo.window().queue([]).stop(); //failing that try this
});
I'm new to Jquery and Ajax and have tried to solve a problem for over 1h now.
You can see the page here: http://smartcreations.se/test/test.html (If you click in the green area it have the effect I want it to have.)
Almost everything works as I want except i can't use the menu at the top to have the boxes to aminate and load the content as it does when you click on the green div.
So what I want from you guys is some input on how I can solve this, another point of view.
$(window).load(function(){
$(".box").click(function(){
$(this).animate({
top: '-50%'
}, 500, function() {
$(this).css('top', '150%');
$(this).appendTo('#container');
$(".loadinghere").load($(this).attr('name'));
});
$(this).next().animate({
top: '50%'
}, 500);
});
});
This is the closest I get, but the links not works at all.
You can just fake the click on the box by using e. g.
$("#box1").click();
but I would do it completely different:
About me!
Portraits
Weddings
Action
<script type='text/javascript'>
$(document).load(function(){
$("a.show").on("click", function(e){
e.preventDefault();
var click=$(this);
var link=click.attr("href")+"#box";
$("#box").after("<div id='box2' />").load(link, function(){
$(this).animate({
// your effect and stuff
});
// Rename the new box and throw out the old one
// Make sure, it is not visible
$("#box").remove();
$("#box2").attr("id","box");
});
});
});
</script>
The idea is, to use full html and extract just the html out of #box and insert it on your current page. You can also use the newer history api or anchors for this. The main advantage is, that you can still use your page if JS is turned of. (Miss)using name or other html attributes for this is a really bad practice. If you need to, use the data attribute.
(The code is untested and the quick and dirty way just to give you an idea.)
I'm building Wordpress website where all content pages are loaded using Ajax. This is causing me a problem with jQuery localScroll plugin. This plugin will add animated scroll to all anchor links on the page. Problem is that using script below I'm able to have animation on that page only after one of the links on the page is clicked.
I think I understand why is this happening. My guess is that after I click on the main menu script will execute but since Ajax content is not yet loaded events are not attached to Ajax loaded content links. Now I'm stuck, I have no clue how to fix this. Would you mind helping me with this one?
Thank you in advance.
$(function(){
$('a').live('click', function() {
$('#portfolioWrap').localScroll({// Only the links inside that jquery object will be affected
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
EDIT
Just a note to others after I managed to make this work. I tried all suggestions here. My guess is that solutions suggested by o.v. and Ohgodwhy should work, but probably due to website complexity and maybe plugin limitations I wasn't able to make them work. For example .on function didn't work at all although I'm using jQuery 1.7.1. At the end I implemente ajaxComplete suggested by Just_Mad and that worked. Thank you all for your help!
This is the code:
$(function() {
$('#wrapperIn').ajaxComplete(function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
If you use jQuery.ajax to load AJAX content you can try to bind to ajaxComplete event, to get the moment, when any ajax is complete.
Elaborating on what GoldenNewby said, listen/attach with the .on() method introduced in jQuery 1.7.
$(function(){
$('body').on('click', 'a', function() {
$('#portfolioWrap').localScroll({
target: '#portfolioWrap', // The element that gets scrolled
axis:'y', // Horizontal scrolling
duration:1500
});
});
});
No need to use AJAX for callbacks for listening/binding to elements. The above function will place a click function on all elements found within the body{1} at/after page load. This includes all dynamically created links.
{1} - Change 'body' to whatever Container has the ajax data. I.E. #portfolioWrap
Add a callback to the ajax load, good place to start is at http://api.jquery.com/jQuery.ajax/ under "success callback"
I would have given more specific advice, but your snippet is a bit isolated, maybe if you created a jsfiddle?
I am developing an app using jquery mobile..
In that i want to show something like progress dialog from one page to another.
I have tried
$.mobile.showPageLoadingMsg();
but it takes a specific amount of time while showing...
Actually my other page loads few graphs so it takes time...
How can we show progress as soon as the graph loads on the other page?
I think You can make use of the events like pagebeforecreate or pagecreatelike
And placing the $.mobile.showPageLoadingMsg() in proper place in the code can place major thing.
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
You can go though the follwing like :
http://jquerymobile.com/demos/1.0a3/#docs/api/events.html
Surround it in
$(document).ready(function() { ... }
if you aren't already
If you use AJAX to switch between pages you can do the following:
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
"loadingDiv" is your container with spinner gif image (for example).