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?
Related
I am loading a a partialView using ASP.NET MVC in my jQuery code. The partialView contains some explanation about the item that is clicked in my click function, and I would like the explanation to slide down once the object is "loaded".
I have the following code:
$('.details').click(function(){
$('#details').load($(this).data('url'), { id: $(this).data('id')}).slideDown('slow');
//the slidedown part doesn't seem to work.
});
But the .slideDown() doesn't seem to work. How can I got about this? Should I use .animate() instead?
Thanks!
EDIT
I found some questions saying I might need to .hide() it first. This seems to work, however it seems the "element" is not completely loaded when it slides down as some of the text updates after finishing the .load().
Is there some way to run the .slideDown() once the load finishes?
It's just because $().load() is not immediate. There is a third parameter that is a callback than runs when load is complete, so, you need to await to slide down (not tested, sorry).
Can you try this?
$('#details').load($(this).data('url'), { id: $(this).data('id')}, function() { $(this).slideDown('slow'); });
and tell us if it works.
here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)
Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle
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 am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.
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/