I am in need a cross-browser jQuery solution for revealing elements on a HTML page with jQuery, the elements are loaded on page load, however i want to have the ability to scroll the page to "fadein" elements.
Is there an existing plugin with this functionality ?
NOTE: loading of the data is not required, and google has failed me thus far.
$(window).scroll(function(){
if ($(document).height() - $(window).height() < 20)
{
var content = 'hi'; //you can use a AJAX call to get content
$('#DivToAppendContentTo').append('content');
}
});
I've used this in the past. Read over and see if it works for you. There is a Demo at the bottom and you'll need to modify the code slightly to add your fade in. Be sure to give your element a CSS style of Hidden so that it is first not seen on the page. The jQuery fade in function will take display it.
Ariel Flesler's ScrollTo:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Here you go, a plugin can do that easily!
http://scrollrevealjs.org/
Related
I have a lot of pictures on my page. and I want to do some javascript and PHP processing when the user scrolls down to each image. I have come up with the follwing:
$(window).scroll(function(){
hT = $('.Picture-1A:eq(3)').offset().top,
hH = $('.Picture-1A:eq(3)').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT+hH-wH))){
alert('you have scrolled to the h1!');
}
});
The above example only works if I reach to a certain image. And I want to do something when the scroll reach an image. I want to get it's ID and process that in PHP using AJAX.
Let's assume that the following are the images:
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
What I want to do is add 1 impression to the image that has appeared on the window. and I want to do that using AJAX every time the user scrolls down the page.
That's it
Update:
I have found a great library thanks to Eugenio Enko. and here is how it's done:
Include the library code in your project after jQuery:
If you want it to trigger for each image, then use each like so:
$('.Picture-1A').each(function() {
$(this).waypoint(function(direction){
alert($(this).html());
});
});
But I am having trouble getting the html of $(".Picture-1A").html() using this it returns undefiend
Here you can view an example using the old waypoint:
http://codepen.io/eugenioenko/pen/qZMqOW
$(document).ready(function(){
$('.spfx-scroll-p').waypoint(function(){
alert('scrolled');
},{offset:'90%'});
});
There are two libraries I know that could help you with that:
http://imakewebthings.com/waypoints/
http://scrollmagic.io/
The second one is more complete and has much more option, but for what you need, it seems that waypoint should work well enough.
best regards.
I am working on a site and would like the header to slide into the page from the top after the rest of the page has loaded.
Can anyone help with this?
Thanks
site is at choptlogic.com/atmananda
pw 123
As Chris Moutray suggests in his comment to your question, an ideal solution would be to use jQuery and one of its animations, e.g.,:
$(function() {
// When document is ready show the header using slideDown
// See http://api.jquery.com/slideDown/
$("#myHeader").slideDown(1000, function() {
// Animation complete callback
});
});
To illustrate, I just made a simple example of how to accomplish such effect using jQuery and the slideDown animation - the example is placed at this jsFiddle: http://jsfiddle.net/WAQLz/
References: http://api.jquery.com/slideDown/
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 have a long jQuery mobile page and would like to scroll to an element halfway down this page after the page loads.
So far I've tried a few things, the most successful being:
jQuery(document).bind("mobileinit", function() {
var target;
// if there's an element with id 'current_user'
if ($("#current_user").length > 0) {
// find this element's offset position
target = $("#current_user").get(0).offsetTop;
// scroll the page to that position
return $.mobile.silentScroll(target);
}
});
This works but then the page position is reset when the DOM is fully loaded. Can anyone suggest a better approach?
Thanks
A bit late, but I think I have a reliable solution with no need for setTimeout(). After a quick look into the code, it seems that JQM 1.2.0 issues a silentScroll(0) on window.load for chromeless viewport on iOS. See jquery.mobile-1.2.0.js, line 9145:
// window load event
// hide iOS browser chrome on load
$window.load( $.mobile.silentScroll );
What happens is that this conflicts with applicative calls to silentScroll(). Called too early, the framework scrolls back to top. Called too late, the UI flashes.
The solution is to bind a one-shot handler to the 'silentscroll' event that calls window.scrollTo() directly (silentScroll() is little more than an asynchronous window.scrollTo() anyway). That way, we capture the first JQM-issued silentScroll(0) and scroll to our position immediately.
For example, here is the code I use for deep linking to named elements (be sure to disable ajax load on inbound links with data-ajax="false"). Known anchor names are #unread and #p<ID>. The header is fixed and uses the #header ID.
$(document).bind('pageshow',function(e) {
var $anchor;
console.log("location.hash="+location.hash);
if (location.hash == "#unread" || location.hash.substr(0,2) == "#p") {
// Use anchor name as ID for the element to scroll to.
$anchor = $(location.hash);
}
if ($anchor) {
// Get y pos of anchor element.
var pos = $anchor.offset().top;
// Our header is fixed so offset pos by height.
pos -= $('#header').outerHeight();
// Don't use silentScroll() as it interferes with the automatic
// silentScroll(0) call done by JQM on page load. Instead, register
// a one-shot 'silentscroll' handler that performs a plain
// window.scrollTo() afterward.
$(document).bind('silentscroll',function(e,data) {
$(this).unbind(e);
window.scrollTo(0, pos);
});
}
});
No more UI flashes, and it seems to work reliably.
The event you're looking for is "pageshow".
I was digging a lot this issue, also at jQuery mobile official forum.
Currently it seems that there is no solution (at least for me).
I tried different events (mobileinit, pageshow) and different functions (silentscroll, scrolltop) as suggested above, but, as a result, I always have page scrolled until all images and html is finished loading, when page is scrolled to top again!
Partial and not really efficient solution is using a timer as suggested in comment to sgliser's answer; unfortunately with a timeout is difficult to know when page will be fully loaded and if scroll happened before that, it will scroll back to top at the end of load, while if it happens too long after page has fully loaded, the user is already scrolling page manually, and further automated scroll will create confusion.
Additionally, would be useful to have silentscroll or other function to address a specific id or class and not plain pixels, because with different browsers, resolutions and devices it may give different and not correct positioning of the scroll.
Hope someone will find a smarter and more efficient solution than this.
I'm one of those people who never was bother to learn JavaScript and went straight for jQuery.
I'm writing simple script to hide everything till page is fully loaded - and because my jQuery is loaded after html/css/images I planning to put small script in the header.
So in jQuery it would be
$('body').css('display','none');
Pure JavaScript:
document.body.parentNode.style.display = 'none';
But than:
$(window).load(function() { $('body').css('display', 'block').fadeIn(3000); });
Has not animation? Why?
What I'm trying to do:
#1 hide everything(body) with javascipt till everything is loaded (there is no jQuery at this state as is being loaded at the end)
#2 show everthing(body) with animation of fadding (with jQuery - as is loaded at this state)
Any help much appreciated.
Pete
The equivalent to
$('body').css('display','none');
is
document.body.style.display = 'none';
$('body') selects the body element, but document.body.parentNode obviously selects the parent of body.
And shouldn't it be just
$('body').fadeIn(3000);
?
I asked because I assumed you already got the code working with only jQuery. But apparently you haven't, so again, it has to be $('body').fadeIn(3000); only, otherwise you make the element visible immediately and there is nothing to animate anymore.
See a demo: http://jsfiddle.net/fkling/Q24pC/1/
Update:
$(window).load is only triggered when the all resources are loaded. This could take longer if you have images. To hide the elements earlier, you should listen to the ready event:
$(document).ready(function() {
// still don't know why you don't want to use jQuery.
document.body.style.display = 'none';
});
or hide the elements initially with CSS
body {
display: none;
}
To make sure that users with disabled JavaScript can see the page, you'd have to add
<noscript>
<style>
body {
display: block;
}
</style>
</noscript>
in the head after you other CSS styles.
Update 2
Seems that setting the CSS property directly causes problems in some browsers. But using $('body').hide() seems to work: http://jsfiddle.net/fkling/JaLZU/
I'm not that clear on what your question really is, but if I'm on the right track you don't need the .css('display', 'block') part for the animation. Get rid of that, so it's just $('body').fadeIn(3000); and the animation should work fine.