Smooth slide transition between two separate html files - javascript

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>

Related

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.

Load different pages while leaving certains divs behind

I want to know how some web pages move between different PHP pages without reloading the entire page. Here some divs stays the same. If I use AJAX i cannot share the link of the page, so I need to do this. Thank you.
You have to use AJAX in order to do that.
BUT if you want to be able to share the link or handle reload ou need to build a navigation system using # and some javascript around it.
There is a lot of example for doing that on the web.
https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=tutorial%20build%20ajax%20navigation
You could just load a new page and include the same divs of the page :
include 'div1.php';
You could use the other answers below and just use ajax but also build a url at the same time so you can navigate back to the same structure of the page.
clicking the link modifies the url, eg:
document.title = document.title + '?div1=true'
Modify the URL without reloading the page
and then just does an ajax call to load a new section. And on first page load, parse the url to check what divs to load.
you could use iframes:
<iframe src="/div1.php" id="div1"></iframe>
And clicking a link loads new stuff to a specific iframe.

Controlling back/forward navigation of a *child* iframe?

I'm working on a simple Javascript-based windows "app" (not a website, just some HTML & JS files all in a single folder that will be used on a local PC).
The startup page is Page1.html. This page contains 2 buttons ("back" and "forward"), and an iframe which displays the content of Page2.html. And Page2.html also contains an iframe, which displays various other pages in the same folder (we'll call these the "color" pages --> Red.html, Green.html, Blue.html, etc).
So in other words, when Page1.html is started up, you're looking at the contents of an iframe inside of an iframe (which would be Red.html, etc.).
So here's what I need to accomplish...
I need to use the back/forward buttons on Page1.html to navigate between the various "color" pages (which are framed inside of Page2.html).
I've found that it's easy to navigate backwards/forwards an iframe that's on the same page as the JS that's controlling the iframe, by using something like...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.forward();
});
});
etc etc.
But that's not what I need. What I need (and can't figure out how to do) is to control an iframe that's on another page, like so...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.forward();
});
});
I've put the above JS in a single file (Main.js), and then called that file from both Page1.html and Page2.html (after I included the jQuery libary on each page, of course). But it doesn't work.
So... does anyone know how to accomplish this?
BTW- if it makes any difference, the solution only needs to work in Chrome.
Thanks!

Is it possible to use Page Transitions when linking to and external site?

My goal is to have a login page and when the user clicks the login button, the page takes them to a web application through a different URL. However, I have been noticing that full page transitions (such as this http://tympanus.net/Development/PageTransitions/) are created with multiple divs on a page instead of linking to different pages. S
My question is, can I use page transformations when linking separated pages using CSS3 or do I need to look with different code to see if it's possible?
When you load a new page, you lose everything from the previous page - HTML, CSS, and any scripts. So you cannot create any effects between different pages.
jQuery, GWT, and some other frameworks allow you to build applications that look as if a user is navigating from one page to another (even URLs change), but in reality a user stays on the same host page all the time. In this case you can create different transition effects.
You could load in the external url after animation ?
Some Pseudo code.
Click to other domain
<script>
/* listen for external link clicks */
$(".extlink").on("click", function(e) {
e.preventDefault();
var _href = $(this).attr("href");
/* if the animation accepts an 'onend' callback */
_animation.on("end", function() { window.location.href=_href; });
/* or if css3 anim/transition, time it to the same */
var animTimer = setTimeout(function() { window.location.href=_href; }, 2000);
/* 2000 being the settings of the anim/transition in the css */
});
</script>
I don't know how you are doing the page transition, but the principle would be something like this - calling the external url after your animation.
based on your example from tympanus.net and taking in account your pages are on your server:
combine the button click for
a) doing the page transition
b) load content of the new page via ajax into one of these 'multiple divs' you mentioned

Redirect to a specified page using JavaScript

Is there any way through which i can have a javascript on a page to redirect any url that's present on the page to some specific site.
For example on a HTML page i have say 10 urls present. Can i add a javascript to the HTML page so that if anyone clicks on any url on that page, it gets redirected to the a specified page.
Thanks.
EDIT::
My scenario is i have some 13k links on a page and i do highlighting of terms on the page, even if any link is also clicked on the page, the word gets highlighted on that page. In order to do that i process each url and add some more info to it to go thought my server perl script which does the job of highlighting. But now due to large number of links on page, it takes time to process the page and page is rendered after a long time. So i want to have a javascript which can pass any link by adding info to my perl script on server.
I tried doing it server side my breaking page into pieces and processing in parallel but not much improvement.
Any other solution or suggestions are welcomed.
Appreciate your help in this regard.
You can use preventDefault in the click event handler to prevent the default behavior(open the link), and use location.href to redirect to a new page.
if you're using jQuery:
$(".links").click(function(event){
event.preventDefault();
location.href = "http://google.com";
});
You can do this with the following jQuery block:
$(document).ready(function () {
$('#urlId').live('click', function (e) {
e.preventDefault(); //Stops the link from opening
window.location.href = "/specifiedPage"; // Changes the location of the page
});
});
You can create a "protective glass" div in front of everything and handle the click event on that div. This has the advantage of not touching the page so after removing the div anything can go back to normal.
Only be sure to put a non-fully-transparent color on the div background because I've found that Internet Explorer ignores events if the div is fully transparent.
Something like rgba(0,0,0,0.001) is enough.

Categories