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>

jquery mobile popup / dialog and paged MVC Page

i'm having a problem with jqueryMobile popup widget.
HTML (via jquery mobile Site):
<a id="testId" href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
besides that on the page is an MVC3 Pager:
#Html.PagedListPager(Model.Items, page => Url.Action("ListA", "List", new { page }))
all the scripts are loaded, jqyerymobile is loaded (checked using $.mobile)
the test scenario:
i open a page:
List/ListA
and click on a link to show the dialog. - Works
i change the page of the paged List, so my URL changes to
List/ListA?page=2
i click on the show dialog link - nothing.
i go back to page 1 of the paged list, click show popup, Nothing.
But:
when i enter a page URL like List/ListA?page=2 and load the page from scratch ( like a new tab, or window) , the popup works on this page, until pagesList page change.
when on step 2 i force the reload of the page by using Ctrl+R / Crtl+F5 (depending on the browser) it starts to work on this page.
tried also all combinations of
$('#..').popup('open')
.popup('close'), etc,
It all points me to thinking, that some part of initiation like creating jquerymobile widgets fails on pages with &page=something.
the markup is all there, selectors correctly select the popup element, but open simply doesn't work.
Or maybe when the page is reloaded on a different paged List position, some objects remain in the browsers context what prevents them from being re-created on new page, hence some valid, but not working references.. i don't know.
Can anybody provide me with come clue, to why this is happening?
jquery mobile version: 1.3.1

Fancybox loads halfway down the page

I am using the fancybox plugin for my web app. I am using it to display a simple tutorial for a first time user. When you first use my app you see the tutorial automatically. I use JQuery to trigger the link to open the modal once the page loads.
jQuery to trigger:
$(document).ready(function() {
$('#tutorial').trigger('click');
});
My link that opens the fancybox modal:
<a id="tutorial" href="#profile-tutorial" class="fancybox-open"> Profile Tutorial </a>
Now, when the page loads it automatically pops up, but some reason it loads halfway down the page. But if I click the link directly, it loads in the middle just fine. I have no idea what could be causing this. What could it be?
Thanks!

Trigger the click on load should solve your problem:
$(window).load(function () { $('#tutorial').trigger('click'); });

Display loading image after clicking on a image/button using java script

I have developed an App using PhoneGap and JqueryMobile.
I have many HTML Pages , navigation from One page to other page on click of the image is taking lot of time.And the end user have no clue what is happening at the back end.
I would like to show loading image until the page gets loaded.
I'm wondering how could I use Jquery to show a simple "Loading..." on the screen until page is loaded.
Please help me on this.

With jquerymobile you can do this with $.mobile.showPageLoadingMsg() resp. $.mobile.hidePageLoadingMsg() as described in the documentation.

fancybox difficulties with opening an html page

Please click on the Jade on this page: http://sneakyrascal.com/starpons/gallery.html
I added a fancybox to its link and the pop-up html includes a gallery which is based on jQuery and css. I believe maybe it's because there's a jQuery in the html page it won't show correctly.
You can see in this page fancybox shows an image correctly so it should work with opening an html too. http://sneakyrascal.com/starpons/about.html
It works with Chrome but not correctly in Firefox and nothing in IE.
I will appreciate any help.

This is the way that I've opened a fancybox window with an html ajax page in the past:
Define the link with the appropriate href:
<a class="fbtag" href="/some_page.html">link</a>
Using jquery, assign the fbtag class (or whatever class) to open the fancybox & link:
$('a.fbtag').fancybox();
Fancybox will take the url that you defined in the link and use it to populate the window. You can also define any options you want in the fancybox call as well.