I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile.
Below is my code.
Transition
On click of Transition link index.html page should be loaded showing transition effect.
Below is the output of index.html that I am trying to load.
But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.
When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.
I want transition to load index page properly with its all css not to embed it into the page link is called from.
Can you please tell me how to achieve this.
In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".
Add in your html link tag the following attribute: rel="external"
Transition
Related
i have two separate pages, index.html and profile.html, and i want to href index.html to profile.html with slide animation so i tried,
$.mobile.changePage("/profile.html" , {
transition: "slideUp",
reloadPage: true });
in index.html. i guess this code does not execute or say update head of profile.html and some how reloadPage not working, it is just targeting body tag. is something wrong or how can i reload whole profile page with slide animation?
you are not loading a page "with slide animation". The slide animation is a CSS effect you can add to any div element you want by adding the class(es) JQM is using (try slide in).
So when JQM is loading a page it fetches the content of the first <div data-role="page"> it finds on the page and "throws away" everything else.
The new "page" is then positioned using CSS depending on the transition you set, so normally pos:absolute; top:0; right: screen-width. Then the classes are added and the page slides in.
Since JQM does not parse anything outside of the page, your profile <head> is disregarded. To fix, all scripts should be available on all pages, because you never know where the user starts and you need to make sure everything you need is on board.
I have a JQM page with some events on html elements that will change DOM of the page. e.g. clicking a button will add a paragraph on the page. The page also have a link that will load another page via ajax. The new page have back button, but the problem is that when the back button is triggered, it will go to the previous page with the original content. What I want is to retain the modified DOM of the page. How can I do this with JQM?
Thanks.
I'm building a site where there is only one page and then a modal display. The modal shows various pages and has the core functionality of the app. Each page in the modal is rendered via ajax so I have two problems I'm encountering
I need to render a map in a partial on the modal. I've searched all over and no answer has solved the problem since the modal div itself exists from page load, but the partial does not.
Any thoughts?
The partial is loaded with ajax so the js dependencies included are not loaded.
You should add these manually in your source page.
To know which one are needed, display your modal and look at the html source.
i am using partial view for my project but my problem is that my links are on right side of masterpage and when i clicked on particular link the view should displayed on left side on contentplace holder of master page. but right now its showing exactly below so my whole disgne is distrubed.
how to position partial view in asp.net mvc through java script?
so please if anyone know the solution tell me.
thanks
Do you basically mean your HTML is not set to allow the Content on the left, and the Menu on the right?
Maybe you would benefit from a CSS Layout Template? Put the Content placeholder in large column, and the menu PartialView in the side bar.
It might be a problem with your page CSS. Look at your styles for "Float" 's. If you want your content to be to the left of your page, surround your contentPlaceHolder with a div tag and add a "float:left" style to it.
If that doesn't work it might be your view is wider than your master page design is set up for. So it will pop below every other page element to fit on your page!
This is not realy asp.net mvc specific but html. You will have a better chance to solve your problem if you tag your question as html and css.
You can just save the source (I mean the rendered source from within the browser) of the page that doesnt display properly with the extension html in the root of your web. Then start playing with the html.
Request the page by calling http://yourserver/yourpagetodebug.html.
Well here's the problem:
I have a PHP index page which uses show/hide layers javascript. I am using the on menu.click function to show and hide content relevant to each menu. On.click all divs are hidden except the content for that menu item , which fades in. The content relating to each menu item are displayed within separate DIVS. The property is applied to all the text within all the divs.
See: http://jobe-group.com/jobeco/uk/2010live/dynamic/content/index.php#
The trouble is that SIFR only appears to be applied to the displayed on.load when the page is first loaded. When this is hidden and the other s shown through the "show" function they load in classic CSS fonts without the SIFR applied.
Is this unavoidable with the SIFR setup. Or am I not calling the divs properly. I have set the SIFR to apply to the selector and indeed it works fine on the for the displayed on load. It doesn't work for the within other . In theory I would think its possible to load the SIFR on all divs on page.load even if those divs are presently visibility:hidden.
What's the verdict on this?
Hope someone can help.
Cheers,
John
After you show the previously hidden div, execute the sIFR.replace calls again to replace the content in those elements.