I've been working on a website for some time now and while they do have a large amount of content and I have upgraded them, the AJAX load more call on the masonry grid is very slow. I have tried caching and using a CDN but it's still taking a very long time, particularly after the first instance.
Does anyone have any ideas? Website is www.noctismag.com
Here's the script I'm using to run it, in my footer.
<script>
jQuery(function ($) {
/* Masonry + Infinite Scroll */
var $container = $('#grid-container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post'
});
});
$('#grid-container').masonry({
itemSelector: '.post'
, columnWidth: 258
});
$container.infinitescroll({
navSelector: '#page-nav'
, nextSelector: '#page-nav a'
, itemSelector: '.post'
}, function (newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$(window).unbind('.infscr');
jQuery("#page-nav a").click(function () {
jQuery('#grid-container').infinitescroll('retrieve');
return false;
});
$(document).ajaxError(function (e, xhr, opt) {
if (xhr.status == 404) $('#page-nav a').remove();
});
});
</script>
Does the Ajax request send back HTML code?
If it's the case try to change the code, Ajax call must return data as a JSON string and a front-end function will transform that data to render it on grid.
Related
I am usining masonry view to display content with infinite scrolling functionality.
Masonry view part is working fine. For infinite scroll I have tried infinitescroll js
or on the basis of scroll as I have written below code.
Problem :- After first scroll I am facing too much recursion problem.
jQuery(document).ready(function($) {
var $container = jQuery('.main_container');
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: true,
isFitWidth: true,
isAnimatedFromBottom: true
});
});
//for infinite scrollings
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
alert("bottom!");
ajaxurl = "script url here";
var data = {start:startLimit,end:endLimit};
jQuery.get(ajaxurl, data, function(response) {
var $boxes = $(response);
$('.main_container').append( $boxes ).masonry( 'appended', $boxes );
});
}
});
});
I am trying this on wordpress admin section plugin.
After step-by-step checking I found solution , Cause of the problem I am using animate effect in masonry which is conflict some how with wordpress plugin view js.
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: false,
isFitWidth: true,
isAnimatedFromBottom: false
});
});
I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});
I'm using Twitter Bootstrap's Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I'm suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.
The following code is the "refresh" code which resides in the header of the page.
function onIndexLoad()
{
setInterval(onTimerCallback, 30000);
}
function onTimerCallback()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("stats").style.opacity = 0;
setTimeout(function() {
document.getElementById("stats").innerHTML = request.responseText;
document.getElementById("stats").style.opacity = 100;
}, 1000);
}
}
request.open("GET", "stats.php", true);
request.send();
}
The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it's supposed to - popup.
The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.
Here's my popover code:
$(document).ready(function() {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
The $id and $title are dynamic as they are pulled from the foreach() loop.
How can I fix it so after the div reloads, the popover function will reinitialize?
$("a[rel=popover_controller_$cid]").on({
mouseenter: function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
}
});
I have also tried:
$("a[rel=popover_controller_$cid]").on("mouseover", function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
.live is depreciated. use .on delegation
try something like this:
$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.
be careful - you will keep initializing popover on each mouseover. that might be bad.
while you are at it - you should use jquery's ajax instead of native xhr. its easier and more cross browser.
$.get('stats.php', function(d){
$('#stats').html(d);
};
--
setInterval(function(){
$.get('stats.php', function(data) {
$('#stats').html(data);
});
}, 30000);
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
I am new to Jquery. trying to drag and drop image clone. but I am not able to save this drag image to my database using PHP. please someone refer some code.
here is my code:
var test = 0;
$(document).ready(function(){
$('#working-area .rotatable').live('dblclick', function(event) {
$(this).remove();
});
});
$(document).ready(function(){
$('#dhtmlgoodies_xpPane li .rotatable').draggable({appendTo: "working-area", helper: "clone" });
$('#working-area .rotatable').live('click', function(event) {
test = test + 90;
$(this).rotate({ angle: test , appendTo: "#working-area"}).draggable();
});
$('#working-area .rotatable').live('mousemove', function(event) {
$(this).resizable({appendTo: "#working-area"}).parent().draggable();
});
$( "#working-area" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: "#dhtmlgoodies_xpPane li .rotatable",
drop: function( event, ui ) {
<!--$( this ).find( "#working-area" ).remove();-->
$(this).append($(ui.helper).clone().draggable());
}
}).mousemove(function(e){
var xx = e.pageX - this.offsetLeft;
var yy = e.pageY - this.offsetTop;
$('#status2').html("X = "+ xx +', '+"Y = "+ yy);
});
});
With "database" I guess you mean that you want to store the image on the server side. So, you need to post your image to the server side. jQuery is an javascript client library and don't have direct access to you database server.
You can do this by an AJAX call or via a basic form post.