How can I create URLs using jQuery and AJAX? - javascript

So I created my website mainly using jQuery and AJAX.
The whole content is being loaded by clicking on a specific ID, so I do not use the classic "href" currently.
However, I would like to create URLs with jQuery that work when they are called directly by the web browser and also by clicking of course.
Could you give me some hints how this could be realised based on the following code?
Thank you!
$(document).ready(function(){
$("#inhaltsbereich").load("assets/pages/index.php");
AOS.init();
$("#startseite").click(function(){
document.title = "Startseite";
$("#inhaltsbereich").load('assets/pages/index.php');
AOS.init();
$(".navbar-collapse").collapse('hide');
$('html, body').animate({ scrollTop: 0 }, 0);
});
$("#sprachen").click(function(){
document.title = "Die Sprachen des Webs";
$("#inhaltsbereich").load('assets/pages/sprachen.php');
AOS.init();
$(".navbar-collapse").collapse('hide');
$('html, body').animate({ scrollTop: 0 }, 0);
});
$("#portfolio").click(function(){
document.title = "Portfolio";
$("#inhaltsbereich").load('assets/pages/portfolio.php');
AOS.init();
$(".navbar-collapse").collapse('hide');
$('html, body').animate({ scrollTop: 0 }, 0);
});
$("#kontakt").click(function(){
$("#inhaltsbereich").load('assets/pages/kontakt.php');
AOS.init();
$(".navbar-collapse").collapse('hide');
document.title = "Kontakt";
$('html, body').animate({ scrollTop: 0 }, 0);
});
});

You can easily do this with a bit of jQuery like so:
$("a").click(function() {
$(".pjax").load(this.getAttribute("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hello there, click me!
<div class="pjax">pjax me here</div>
This example gets a JSON file from Github, and displays it in a div. Hope it helps you.

Related

Scroll to top button redirecting to Homepage

So, this script is on my footer.php, and when button is pressed it redirects to homepage instead of top.
$(document).ready(function() {
$("#arriba").click(function() {
return $("html, body").animate({
scrollTop: 0
}, 1250), !1
})
});
UPDATE:
Thanks so much all, I found the solution, the code above was inserted into a php instance, I created a new javascript instance out of the php and it's working fine all the codes presented here!
You need to use preventDEfault to stop behavior of your button or anchor tag:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
$("html, body").animate({
scrollTop: 0
}, 1250);
})
});
EDIT:
try also this:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
window.scrollTo(0, 0);
})
});

jQuery scroll down page not working

I am trying to make a smooth scroll effect for my page using jQuery. Does anyone know why this doesn't work?
$(document).ready(function() {
$("#button").click(function() {
$(document).animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
});
The JSFiddle -> https://jsfiddle.net/1hm56tms/2/
You should animate the Body and not the document.
$("#button").click(function() {
$("body").animate({
scrollTop: $("#endpoint").offset().top
}, 1100);
});
jsfiddle
You need to change document to body or html,
jsfiddle
$(document).ready(function() {
$("#button").click(function() {
$('html, body').animate({
scrollTop: $('#endpoint').offset().top}
, 1000);
});
});

Selection and focus on element of webpage not working (offset)

My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});
The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});
You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)

How to scroll to the particular div using jquery or javascript

I want to scroll to the particular div using jquery
I have written the code like:
$("#button").on('click',function(){
var p = $("#dynamictabstrp");
var offset = p.offset();
window.scrollBy(offset.left, offset.top);
});
But it is not moving to the div position. How can i do that in jquery or javascript
Try this
$("#button").on('click',function() {
$('html, body').animate({
'scrollTop' : $("#dynamictabstrp").position().top
});
});
.scrollTop()
Try
.scrollTop()
$(window).scrollTop($('#dynamictabstrp').offset().top);
or
scrollIntoView()
$('#dynamictabstrp')[0].scrollIntoView(true);
or
document.getElementById('dynamictabstrp').scrollIntoView(true);
Here is the code :-
$(document).ready(function (){
$("#button").on('click',function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});
or
$(document).ready(function (){
$("#button").click(function(){
$('html, body').animate({
scrollTop: $("#dynamictabstrp").offset().top
}, 1000);
});
});
Try this simple script. Change #targetDiv with your particular div ID or Class.
$('html,body').animate({
scrollTop: $('#targetDiv').offset().top
}, 1000);
The source code and live demo can be found from here - Smooth scroll to div using jQuery
You can set offset as per requirement
jQuery(document).ready(function(){
function secOffset(){
jQuery('html, body').animate({
scrollTop: jQuery(window.location.hash).offset().top - 60
}, 0);
}
});

jquery scrolling won't scroll from exact location

I'm using the following jquery to make my links scroll to the next div. However, I've run into a problem. From the top of the page the script works fine. As soon as I click a link from another div (another link further down the page) the script only scrolls so far either up or down but not to the next specified div. How can I make the script scroll fully from the current location of where the link is located?
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
You have a error here:
scrollTop: $($anchor.attr('href')).offset().top
//------^^^^^^^---------------------------------this itself a selector
change to this and try with:
scrollTop: $anchor.attr('href').offset().top
or this one too:
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
CHECKOUT IN FIDDLE
You're not calling the correct spot...
this should do the trick... Set the anchor point first.
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
ok, so I've made you a JSFiddle, the js-code I rewrote to the code below, but you can have a have a look at the full thing here: http://jsfiddle.net/re7Xc/
$(function() {
$('a.scrolltonext').click(function(event){
event.preventDefault();
var parentblock = $(this).parent();
var nextblock = parentblock.next();
//nextblock.css('background-color','#00f');
if(nextblock.size()>0) {
$('html, body').stop().animate({
'scrollTop': nextblock.offset().top
}, 800);
}
});
});
the catch in this script though is that I put the links in the div itself, so it's not in a #nav somewhere. So you'd have to rewrite that part if you put the links in your #nav!
I put an if-statement in there as well, because I thought it'd be better if you check if there is a next-div first, before scrolling there.
Hope it makes some sense, and let me know if it works for you!
cheers

Categories

Resources