I want to create a theme in which the website page slides out and slides in. I already have the website link which is not developed in wordpress. I am trying to create the exact same theme for the wordpress the functionality of sliding the page out and page in is the only issue. As we click on the navigation menu the complete page get refreshed can we avoid that and load the page body/content using ajax.? Any help would be much appreciated.
Thanks in advance.:)
this code below works for me with posts:
$('a.ajax').click(function(event) {
$.ajaxSetup({cache:false});
var post_url = $(this).attr("href") + ' #primary-ajax';
nanobar.go(100);
$("#portfolio-content").load(post_url,function(){
$(this).addClass('open');
$('body').removeClass('ajax-wait');
});
event.preventDefault();
});
I just tested it for pages and it works too.
You will need to tweek it for you needs but this entirely possible!
Related
I have a website where I am switching from addThis to addToAny for social sharing buttons. The problem is that the share buttons are contained in content that is loaded dynamically with jquery Waypoints infinite scroll feature (which uses Ajax). When the page first loads (so no Ajax called yet) everything works great, but when a user scrolls and more content is added that contain the share buttons, the new buttons don't work in that they don't show the share options on hover or click.
There are supposedly fixes for this if using templates from the likes of Drupal or Wordpress, but my site is not built using any of these templates. This was also a known issue with addThis, and to get around the problem you simply need to add 'addthis.toolbox('.addthis_toolbox')' into the success portion of the ajax call and things would work.
I haven't had any success getting addToAny to work after ajax returns. They have something that looked promising: a2a.init('page'), but that doesn't work. Has anyone had this problem and have any suggestions on how to fix it? Thanks!
If there so many share button on one page you can call this after ajax success:
$(".a2a_dd").each(function() {
a2a.init('page');
});
Or if there only one share button, you can use this after ajax success:
a2a.init('page');
If want to know more details go through this document
According to the AddToAny API (https://www.addtoany.com/buttons/api/), you should use a2a.init_all(); if you are loading a number of new share button sets at once via AJAX.
Using a2a.init('page'); only initializes the last uninitialized buttons instance on the page. That might be fine for you, depending on how many new buttons that you load at a time.
Example: you have a blog site that loads new posts when the user scrolls to the end of the page. If you are only loading one new set of share buttons for the new content, a2a.init('page'); should work. If instead, you are loading a few new posts at a time, that each get their own set of share buttons, you will want to use a2a.init_all();
Hope this helps someone!
Right, I don't really know how to explain this one but I will do my best by giving a scenario:
Homepage -> Contact page
Home page elements and text displays on top of the contact pages text.
Anyone know why this would be happening? Or if there has been any issues like this from the past?
Help and suggestions will be much appreciated
Edit: There is also nested menus and it is always the homepage that displays on top of content. The url seems to change first to the secondary page url, then it suddenly changes to the homepage url. It also blinks but I think this is an issue that jQuery mobile havent fixed using jQuery mobile 1.2.0
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
I'm trying to load my next/previous posts links with ajax. I've written this piece of code, and it works well. However, when the user clicks the 'Back' button, the location in the address bar is not updated.
$(".next a").live("click", function(e){
e.preventDefault();
$("#portfolio_item").load(jQuery(this).attr("href") + " #portfolio_item");
$("#portfolio_item").animate({marginLeft:'98%'});
$("#portfolio_item").animate({marginLeft:'0px'});
$("#right_content, #gallery").fadeOut().delay(1000).fadeIn();
return false;
});
I've read about plugins like 'jquery address' and 'bbq', but how can I apply them to my code? Hoping for help!
I'm not sure if this is what you want but if you need some URL edit + history management (without loading a new page) you should checkout history.js. This is an awesome js library that allows you to rewrite your URL without reloading a page and storing your history in JavaScript variables.
In order to see how it works there is a downloadable demo and a tutorial on the first link I gave you.
Hope this helped.
Here is the case.
I have a website built in asp.net mvc3 with custom CMS.
Is there any way by clicking a button from cms to reload the page of the website visitors?
For example, here in stackoverflow, if an admin from the backend pressed a button my page would reload automatically (or even a lightbox would appear, or redirect me to a different page).
Can we do that?
With HTML5 you can use web workers to do this for you: http://html5demos.com/worker
Without HTML5, you can set up some basic polling code in your javascript. It would call a method on the server that would tell it whether or not to reload. You can run this every 30 seconds let's say:
$(document).ready(function(){
var doRefresh = function(){
$.get('checkForRefresh', function (data) { ... handle response ... });
};
setInterval(doRefresh, 30000);
});
And then just have your checkForRefresh server side code read a value set by that CMS button.
Forcing a reload on a button click boils down to something like this (using jQuery and javascript):
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
The first answer on the following question shows two ways to refresh the page, one forcing a reload like above, and the second, much like #Milimetric describes in his answer:
Refresh (reload) a page once using jQuery?.