We Keep Coding

Smooth slide transition between two separate html files

is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?

You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>

How can I Implement Javascript to open a specific tab with SharePoint 2013?

So I'm working on a project where I'm building a website and I have many pages that include tabs from Bootstrap that use jQuery to work. They work really well and I love them but on my homepage I want to be able to link icons to specific tabs. Once clicked they should move the browser to that page and that tab should open instead of the default active tab. I've found numerous examples of javascript on how this would work but I don't know how I can get the JS to work on my SharePoint site.
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
The above code is from that answered question and I'm wondering if someone can show me how to use this on my SharePoint pages.

So, I've worked on this a ridiculous amount of time for the problem I was actually having. I used the above code along with Bootstrap 3 and jQuery with CDN links in the page. That was correct. I also used the right notation for the url which is www.examplehere.com/blahblah#tab_tab1. The problem I was having was that I loaded this script at the top of the page, prior to the HTML 5 actually loading and making the tabs contained in the body on the SharePoint site. This meant that it went through the code to switch the open tab to the one dictated by the url but the code didn't have anything to change the tabs to since the tabs didn't exist.
So if you want this to work in SharePoint 2013. Save the above code as a .js file, link to it via a Content Editor Web Part, use the urls with the #tab_tab1 syntax as above, and please do yourself a favor and put the Web Part at the bottom of the page unlike I did.

How to load the right pane without reloading header/footer or leftnav

I'm trying to build a web app (HTML/Bootstrap/jquery) which has header,footer,leftnav and right pane. The content of the right pane would be a separate html page which will be loaded based on what is clicked in the left nav.
I got individual pages with HTML for header/footer/leftnav replicated for each content page. But I only would like to have the right pane content to be loaded without reloading the other components.
Heres an example, upon click on left nav item.. only the content of the right pane changes:
http://play.raaga.com/myraaga
Appreciate any help, thanks!

You could use the ".load()" function of jquery.
$('selector-of-the-panel').load('url');
jQuery .load() docs

The example you included looks pretty close to jQuery UI's .tabs() widget, which you can use with ajax to load your different html pages: http://jqueryui.com/tabs/#ajax For a vertical nav-like look, see: http://jqueryui.com/tabs/#vertical

Activating accordion panels from external anchors/links

I've been trying for some time to activate a jQuery UI accordion's panel from an external link.
I have links within pages that an accordion widget is on that I'd like to use to activate panels of the accordion. These links are not within the accordion widget's markup.
These links are manipulating tab interactivity and are used for popping in AJAX content.
At some states of the application, the { navigation: true } part of my options object for the accordion gets forgotten.
I believe this is because I'm initiating a window.reload.location() to get back to certain states of the application.
The function below shows this. What I think I need is either a custom navigation filter built on hashes, or location that will work within this function to also activate accordion panels depending on what URL the user is on.
I do have navigation set to true in the beginning of my scripts and the following script comes later...
// "Back to xxxtabTitle" button used to revert tabs to their default state after
// photoNav pop-in AJAX content has been loaded
$('#mainContent').on('click', '.backToInitTab', function(event) {
event.preventDefault();
window.location.reload();
// accordion navigation filter to open correct accordion panel on click event
// Can you help with this? I'd greatly appreciate it.
// /accordion navigation filter
});
// /"Back to xxxtabTitle" button
Any help or insight on this issue would be greatly appreciated!
Thanks in advance.
Sincerely,
Dick Kirkland

Sort of the answer: I had to abandon using navigation options with the jQuery UI accordion as I'm using a design on a site that contains buttons that perform reloads on pages and/or UI tab panels with window.location.reload();. If you have this reloading of content in your site, you may see the navigation begin to take effect by opening up the desired accordion panel, but then seeing the panel contracting. I believe this is because normally, clicks from the accordion panel itself instruct the UI accordion component how to react to the hash history. We turned navigation off and did manual instantiations of what panels should open on a minimum of pages. This allows AJAX functionality (tabbed content) to still have the accordion panels open and the only animation seen is when the total page reloads.

write
$( "#accordion" ).accordion({ active: 2 });
refer to this site

Changing content of a fancybox with ajax

I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.

Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.

You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox