Develop Reference

Scroll up when you click on the pagination page

Can you please tell us how to make a scroll up when you click on the pagination page? There is a page of posts https://tvoidv.ru/culture/.
When you click on "Show more" (in itself) the page remains in place, but you need it to hide up or somehow it seems that the update has occurred. How can this be done?
Post loading code from json
$(document).on('click', '#more-news', function(e) {
e.preventDefault();
var _url = $(this).attr('data-url');
send = false; //убираем шумы
if (_url && !send) {
$.ajax({
url: _url,
type: 'GET',
dataType: 'json',
beforeSend: function() {
// включение прелоудера
send = false;
},
complete: function() {
// отключение прелоудера
},
success: function(obj) {
send = true;
$('#more-news').remove(); //удаляем текущю кнопку
$("#get_news").append(obj['html'])//добавляе готвую разметку
if('show_more' == true){
$('#more-news').show();
} else {
$('#more-news').hide();
} //добавляем кнопку если пришел флаг
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + xhr);
}
});
}
});

I cannot see your HTML, so assuming that #more-news is where you would want to dock to
Add this to the success block after the element is visible
var element = $('#more-news').get(0)
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
More options here - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Smooth behavior is limited to certain browsers.

Javascript / Jquery file combination

I'm trying to include this snippet of code:
;(function($) {
'use strict'
var ajaxContactForm = function() {
// http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html
$('.contact-form').each(function() {
var $this = $(this);
$this.submit(function() {
var str = $this.serialize();
$.ajax({
type: "POST",
url: $this.attr('action'),
data: str,
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
var result;
if(msg == 'OK') {
result = '<div class="notification_ok">Thank you! Your message has been sent!</div>';
} else {
result = msg;
}
result = '<div class="result">' + result + '</div>';
$this.find('.note').html(result);
}
});
return false;
}); // submit
}); // each contactform
}; // contact
// Dom Ready
$(function() {
ajaxContactForm();
// Initialize responsive menu
ResponsiveMenu.initial($(window).width());
$(window).resize(function() {
ResponsiveMenu.menuWidthDetect($(this).width());
});
// Detect elements into viewport
$('[data-waypoint-active="yes"]').waypoint(function() {
$(this).trigger('on-appear');
}, { offset: '90%' });
$(window).on('load', function() {
setTimeout(function() {
$.waypoints('refresh');
}, 100);
});
});
})(jQuery);
Into this file:
http://rocketgram.co/js/custom.js
However whenever I try and merge the two correctly (Or what I thought) I can only get one or the other working at once. Not both. Can anyone share any light on why these are conflicting?
Here's a few reference links on both of them working, singularly:
rocketgram.co/mainjs.html
rocketgram.co/customjs.html
And here's the file in the snipped above:
rocketgram.co/js/main.js

Activate jquery Ajax on click on list and pull number

This is my code that I have built from several different pieces of information online:
http://jsfiddle.net/spadez/qKyNL/6/
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
// Fadeout the existing content
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
// Scroll to top
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
// Fade in content
$('#content').fadeTo(500, 1);
},
});
My question is, how do I trigger the ajax request from clicking on one of the pagination list links (like 1 or 2) whilst using e.prevent default so it is degradable (it will still work if JavaScript is disabled). I guess what I am trying to do is the following in pseudo code:
Listen for a click of the pagination link
Grab the number of the link clicked (ie was 1 or 2 clicked)

try
$('a').click(function(){
var number = $(this).attr('href');//get the pg=1 value on the href
alert(number);
//ajax here
});

I'm not sure I completely understand your question, however something like this should work:
$(function() {
var clicks = {};
var sendAjax = function(href) {
//do something with href
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
// Fadeout the existing content
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
// Scroll to top
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
// Fade in content
$('#content').fadeTo(500, 1);
},
});
};
$('a').click(function() {
var href = $(this).attr('href');
clicks[href] = clicks[href] ? clicks[href] + 1 : 1;
sendAjax(href);
return false; //disable the link
});
});

can't you just set an onclick on those link 1 and link 2?
ex:
link1.click(function() {
// do stuff with the ajax
});

Combine JS function mouseup

I want to combine JS functions, but that's not working. Does someone have a suggestion for my code?
$(document).ready(function(){
$(".searchs").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='') {
$("#display").hide();
} else {
$.ajax({
type: "POST",
url: "searchs.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
}
return false;
});
$(".searchs").focus(function(){
var seachbox = $(searchbox).val();
if(seachbox != '') {
$("#display").show();
}
});
});
$(document).mouseup(function(e) {
if ($("#display").is(":visible") && $(e.target).parents$("#display").length == 0) {
$("#display").hide();
}
});
For reference, I got that script from http://jsfiddle.net/bqQqN/15/. What I want to do is to add the mouseup function to my code. Anyone?

if you want to combine the two (though actions will be the same) you could
$(document).ready(function(){
// ... whatever is already here
}).mouseup(function(e) {
if ($("#display").is(":visible") && $(e.target).parents$("#display").length == 0) {
$("#display").hide();
}
});

Why does this JavaScript freeze IE6?

When you click, "Add to Bag" on this page, it freezes IE6 every time. How can I figure out why it is freezing? Does anyone have a more direct answer?
totallytrollbeads {dot} com {slash} Safety0.html
function update() {
$.ajax({
dataType: 'json',
type: 'POST',
url: '/cgi-bin/ajax_cart_count.cgi',
timeout: 2000,
success: function (data) {
// If bag is empty, it's see through.
if (data.cart_count == 0) {
$(".shopping_bag").css("opacity", ".2");
}
// If bag is not empty, it's not see through.
else {
$(".shopping_bag").css("opacity", "1");
}
$("#bag_total").html(data.grand_total);
$("#bag_count").html(data.cart_count);
window.setTimeout(update, 15000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#bag_total").html('Timeout contacting server..');
window.setTimeout(update, 60000);
}
})
}
$(document).ready(update);
// preparethe form when the DOM is ready
$(document).ready(function () {
// bind form using ajaxForm
$('.add_to_cart_form').ajaxForm({
beforeSubmit: loading,
success: myBox
});
});
// preparethe form when the DOM is ready
$(document).ready(function () {
// bind form using ajaxForm
$('.add_to_cart_form').ajaxForm({
beforeSubmit: loading,
success: myBox
});
});
// $(".add_to_cart_form").click(function () {
// $('.bypass_add_to_cart_form').ajaxForm({ success: myBox });
// });
function loading() {
$("#loadingContent").show();
}
function myBox(resptext, statustext) {
$("#loadingContent").hide();
Boxy.ask(resptext, ["View Bag", "Continue Shopping"], function (val) {
if (val == "View Bag") {
document.location.href = "/cgi-bin/store.cgi?action=view_cart";
}
if (val == "Continue Shopping" && product_detail == 1) {
history.go(-1);
}
}, {
title: "Add to Bag"
});
$('.bypass_add_to_cart_form').ajaxForm({
beforeSubmit: loading,
success: myBox
});
update();
return false;
}
/*
This tells the ajax-style add to cart that
it's on a product detail page so if the
user clicks "Continue Shopping" it takes
them back on step in their history.
*/
$('.search_view').click(function () {
product_detail = 0;
});
$('.product_view').click(function () {
product_detail = 1;
});

It's not easy to debug a thing that freezes immediately from the outside. But it's always a good idea to cleanup the whole, remove things that are not essential, check the functionality and then do the next step.
For example this:
// preparethe form when the DOM is ready
$(document).ready(function () {
// bind form using ajaxForm
$('.add_to_cart_form').ajaxForm({
beforeSubmit: loading,
success: myBox
});
});
// preparethe form when the DOM is ready
$(document).ready(function () {
// bind form using ajaxForm
$('.add_to_cart_form').ajaxForm({
beforeSubmit: loading,
success: myBox
});
});
It's not hard to see that have this part twice there.
Put a little more accuracy into your application instead of copy&paste.