Facebook or Pinterest styled onclick load page as overlay content? - javascript

In facebook feed or Pinterest gallery, when a user click on the content, jQuery will load the content and appended it to the current page as a modal (the url of browser will also changed according to a.href, even though there's no page reload). However, if the user launch a new page with the very same url, he is going to see a page with different layout (as opposed to the modal's) but the same content.
How do I accomplish this? (a click will load content onto a modal, while launch url as new window will display content on a new page with different layout)

Related

Linking URL to a page loaded inside a div

I have a webpage hosted in Firebase that loads content from another HTML page inside a div upon clicking a link using:
$('#div').load(url);
The problem is that this method does not change the URL for the page so it is uniquely identified. Is there a way to make it so that when running that command it changes the URL so that the user can bookmark the page, and when that page is loaded it recreates the page with the loaded HTML?

Magnific Pop-up double load from external link

We have implemented magnific pop-up to our website for internal links only. When a user clicks from an external link (i.e. Facebook, Google) we would like to load it without the pop-up. In fact there is a second template besides the one with the magnific pop-up for the same content (article) especially for this (external links). However when a user clicks an external link (direct link to the content) it first loads the content without the pop-up and on top of that it loads again the content with the pop-up. How can we eliminate the on top second loading for external links?
Example page

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

Reload/Refresh IFrame without have a white flash?

I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js

how to avoid loading the source for iframe

I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You
This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/
Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm

Categories