I found a few questions similar to mine, but nothing to do with a filter result so I have been struggling finding something that works for me. On a website page, I have image tiles that are filtered down when different links are clicked. My problem is that my fade in trigger is happening when the images are still loading and it looks horrible.
How can I trigger my fadeIn to go off only after all my images are fully loaded?
$(document).ready(function() {
$(document).on('click', '.js-filter-item > a', function(e){
e.preventDefault();
var category = $(this).data('category')
$.ajax({
url: wpAjax.ajaxUrl,
data: { action: 'filter', category: category },
type: 'post',
beforeSend: function() {
$("#projects-container").slideUp();
},
success: function(result) {
$("#projects-container").hide().html(result).fadeIn(1500);
$(".misha_loadmore").hide();
},
error: function(result) {
console.warn(result);
}
});
});
}
Thanks to #imvain2 for pointing me in the right direction. Here is what ended up working for me. I'm pretty sure it's just delaying the load time using setTimeout, it doesn't seem like the imagesLoaded function works very well for me, but it looks a lot smoother. Hope this helps anyone with my same issue.
success : function(data) {
$(data).hide().appendTo('#projects-container');
var imagesCount = $('.project-image').find('img').length;
var imagesLoaded = 0;
$('.project-image').find('img').load( function() {
++imagesLoaded;
if (imagesLoaded >= imagesCount) {
$('#projects-container').children().show();
}
});
var timeout = setTimeout(function() {
$('#projects-container').html(data).slideDown();
}, 1500);
},
Related
I created a page in which to view data we scroll on right instead of down. Now I tired to load data while scrolling instead of loading the entire page at first. I can work around if it is down scroll. This is the code that I'm working on:
$(document).ready(function() {
var win = $(window);
win.scroll(function() {
if ($(document).height() - win.height() == win.scrollTop())
{
$('#loading').show();
$.ajax({
url: 'load.php',
dataType: 'html',
success: function(html) {
$('#data').append(html);
$('#loading').hide();
}
});
}
});
});
I referred and worked on this code from here. Now i need to load data when I'm scrolling right. I tried taking the difference in width but it is not working. Is there any other work around ?
may be something like this ?
$(document).ready(function() {
$('ul').scroll(function(event) {
if (this.scrollWidth - this.clientWidth - this.scrollLeft < 50) {
$(this).append('<li>data 1</li><li>data 2</li><li>data 3</li><li>data 4</li>')
}
});
});
Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);
I am trying to scroll the page to "#Table_Details" using the scroll plug in. But i can't seem to get it working.
When i click/change the radio(.ModemsSelect) button the page scrolls to the location of the radio button i just clicked instead of scrolling down the page where my table("#table_Details") is located. I am not sure if i am doing this right or what is going on.
$(".ModemsSelect,.ServicesSelect").change(function (e) {
var data = $("#" + this.value).serialize();
var request = $.ajax({
url: "classes/sCart.php?action=add",
type: "POST",
data: data,
dataType: "html",
radioButton: $(this).attr('class')
});
request.success(function (data) {
//$(".in_cart").html("");//clear last item selected
console.log("extra item added to cart");
refreshCart();
if (this.radioButton == "ModemsSelect") {
$.scrollTo($('#Table_Details'));
$("#icon_check_modem").html("");
$("#icon_check_modem").html("<img src=\"../img/check_icon.png\">");
$('.Modem_buttonNext').button("enable");
} else if (this.radioButton == "ServicesSelect") {
$("#icon_check_Installtype").html("");
$("#icon_check_Installtype").html("<img src=\"../img/check_icon.png\">");
$(".install_buttonNext").button("enable");
} else {
}
});
});
Any help is appreciated.
thank you.
working fiddle http://jsfiddle.net/ePstY/
You must replace this:
$.scrollTo($('#Table_Details'));
with this:
$('html, body').animate({scrollTop:$('#Table_Details').position().top}, 'slow');
Try doing it this
$('html, body').animate({
scrollTop: $("#Table_Details").offset().top
}, 2000);
Instead of this:
$.scrollTo($('#Table_Details'));
I got the code from this article: SMOOTHLY SCROLL TO AN ELEMENT WITHOUT A JQUERY PLUGIN
Here's a working fiddle
Here's a test page: http://masonry-test.tumblr.com/
I'm using jquery Masonry with infinite scroll on tumblr. All is fine except with audio players. They won't load on the second page and display this message instead [Flash 9 is required to listen to audio.].
Did a little research and found a solution. One here (this one too) and here's the js from the Mesh theme that does that successfully (line 35).
Problem is I don't know where and how to implement it in my code. Everything I tried either wasn't working or it left a small gap around the masonry blocks. My code:
$(document).ready(function () {
var $container = $('.row');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post',
columnWidth: 1
});
});
$container.infinitescroll({
navSelector: '#page-nav',
nextSelector: '#page-nav a',
itemSelector: '.post',
loading: {
finishedMsg: "No more entries to load.",
img: "http://static.tumblr.com/7wtblbo/hsDlw78hw/transparent-box.png",
msgText: "Loading..."
},
debug: true,
bufferPx: 5000,
errorCallback: function () {
$('#infscr-loading').animate({
opacity: 0.8
}, 2000).fadeOut('normal');
}
},
function (newElements) {
//tried this but doesn't work
/* repair video players*/
$('.video').each(function(){
var audioID = $(this).attr("id");
var $videoPost = $(this);
$.ajax({
url: '/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$videoPost.append('\x3cdiv class=\x22video_player_label\x22\x3e' + data.posts[0]['video-player'] +'\x3c/div\x3e');
}
}
});
});
/* repair audio players*/
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: '/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
}
}
});
});
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$(window).resize(function () {
$('.row').masonry();
});
});
By default the API will return a white audio player.
you can change it by using the jQuery method to replace the flash player with a black or white player respectively.
.replace("audio_player.swf", "audio_player_black.swf")
or simply change the color itself
.replace("color=FFFFFF", "color=EA9D23");
Example:
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: '/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'].replace("audio_player.swf","audio_player_black.swf") +'\x3c/div\x3e');
}
}
});
I had a lot of trouble with this and hope it helps someone out. I found the above information here Change Tumblr audio player color with Javascript.
I noticed a few things and this is what I advise you to try:
For that script to work, the elements with the class "audio" should each have an "id" attribute with the post ID. The HTML should look like that:
<div class="audio" id={PostID}>{AudioPlayerWhite}</div>
Tumblr will automatically fill the {PostID} part with the ID for each post. I suppose it works in the same manner for videos (haven't tried it with videos yet).
As for position, I did it like this:
function (newElements) {
....
$newElems.imagesLoaded(function () {
....
});
//audio repair goes here!
}
Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.
In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.
...
{block:AudioPlayer}
<div class="audio-player unloaded">
<!--{AudioPlayerBlack}-->
</div>
{/block:AudioPlayer}
...
If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.
Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:
function loadAudioPosts() {
// For each div with classes "audio-player" and "unloaded"
$(".audio-player.unloaded").each(function() {
// Extract the <embed> element from the commented {AudioPlayer...} tag.
var new_html = $(this).html().substring(
$(this).html().indexOf("<e"), // Start at "<e", for "<embed ..."
$(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>"
);
// Replace the commented HTML with our new HTML
$(this).html(new_html);
// Remove the "unloaded" class, to avoid reprocessing
$(this).removeClass("unloaded");
});
}
Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.
I'm trying to use scrolltop method and event.preventDefault is not working properly.
What I'm experiencing is that the page scrolls UP first then scrolls down.
It seems that The onclick causes the page to resubmit or something... (ajax post??)
I have following code
button (trigger)
<a id="nextset" class='nextbtn' >Next Step</a>
event
jQuery('#nextset').click(function (event) {
event.preventDefault();
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
});
functions
function getfav(obj) {
var myParams = "{ 'proattr':'" + obj + "'}";
jQuery.ajax({
type: "POST",
url: "project.aspx/getproject",
data: myParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () { jQuery('#wait').show(); },
complete: function () { jQuery('#wait').hide(); },
success: function (msg) {
GetProjectPic(msg.d, obj); //creates DOM and insert in div
Initbtns();// dynamic btns initialization
}
});
}
function movenext(obj) {
//other codes to hide/show DOM
getfav(nextobj);
}
If I add return faulse; in onclick event, the button doesn't work.
Any idea what's causing the scrolling to the top?
UPDATE:
It was caused by code block inside movenext function.
jQuery('[id^="favdiv"]').empty();
nothing to do with event.preventDefault.
The strange thing is that the screen scrolls much more than hidden div height ("favdiv") which causes up and down screen effect. I'm not sure how to prevent it...
UPDATE2
I searched jquery empty method and found this.
jquery "empty" changes the scrollbar
You can avoid the default behaviour by using the following snippet:
<a id="nextset" class="nextbtn" href="javascript:void(0);">Next Step</a>
Did you by any chance try putting "return false" at the end of your click event?
jQuery('#nextset').click(function (event) {
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
event.preventDefault();
return false;
});
I end up writing something like this. still it goes up a bit but at least page doesn't jump
jQuery('#favdiv' + obj).fadeOut('fast', function () {
jQuery('#favdiv' + obj).remove();
});
setTimeout(function () {
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 1500);
}, 500);