I have an ajax popup working nicely with Magnific Popup. However the page that I am loading into the popup via the ajax call contains a hyperlink.
The only contents of the page is:
test
When I click on the "test" link "anotherpage.html" loads in the original parent window.
Is it possible for the page that this link points to to be loaded in the same popup window?
you can achive this effect by following these steps:
download the html page with jQuery into a temporay variable
from the variable get the link address
send Magnific Popup the link you want to display in the first place
for the first part, you can you this great post on stackoverflow: How do I load html into a variable with jquery
for the second task, all you need is to query the first (and only) link in your html page and get it's href attribute:
var target = $('a:eq(0)').attr('href');
now that 'target' variable stores the requested url - send it over to Magnific Popup
include a empty iframe in the popup.
create a function onclick in Test for change the src of iframe and hide or destroy the old thinks in the popup,
Related
I'm new to firefox and I used JPM to make a firefox addon and submitted it to Mozilla. One reason they gave for rejecting it was the use of iframe elements without a type attribute.
Here are the two situations that an iframe will be loaded.
Whenever a page is loaded a content script will be injected to that page and that content script will insert an iframe that acts as the extension's menu. I set the type attribute using jquery append.
$("body").append("<iframe type='content'></iframe>")
Whenever a user clicks a button appended to a youtube video it will load the video through an iframe and display that video on the page with some additional viewing features. The type attribute is being set using vanilla javascript myIframe.type = 'content'
Is there something I am completely missing or is how I am setting the type attribute correct?
I have a very simple HTML page at http://bit.ly/1eaSnKt
The first line is a functioning Facebox link. Note that, when clicked, it opens the FaceBox popup perfectly.
The second line is a similar link, but exists on a different HTML page which is pulled via AJAX (see source). For some reason, when clicked, it fails to open the FaceBox popup. Does anyone have a clue why this is failing? Thanks.
When your page loads, on Document ready, you are attaching the behaviors to the items in the page.
With the Ajax load, it loads the items after the document is ready, and there jQuery has attached the behaviors... missing your new content.
You need to attach those behaviors after the ajax is successful.
So after the ajax load, use a callback, or a closure to do this
$('a[rel*=facebox]').facebox({
loading_image : 'facebox/loading.gif',
close_image : 'facebox/closelabel.gif'
})
Hope that makes sense.
Thanks all. I actually found the solution here - https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801
I have a one page layout WordPress page and an RSVP form at the bottom and The RSVP form works just fine.
THE PROBLEM:
When I try to submit the name of the guest, the page loads and you will brought now at the topmost section of the page instead of the bottom part where you will continue to fill up the RSVP form. The RSVP form has two parts, first the name of the guest and second, the actual selection of the RSVP options. So after submitting, you will need to scroll down at the bottom of the page just to see if you entered your name correctly or if your RSVP has been completed.
This RSVP form is a plugin from WordPress: RSVP plugin
I just want to use this RSVP form to work on a one page layout.
SOME SOLUTIONS THAT I'M THINKING:
AJAX - I think using AJAX will do the trick but I really don't know how to put AJAX into the plugin and into my WordPress page. I tried installing AJAX plugins but I'm not sure how to work it out.
ANCHOR TAG - I think if there is an anchor tag at the end of the URL, the page will force the browser to stay at the bottom of the page where the RSVP section is located. But this anchor tag should be automatically be there when you scroll on every section of the one page layout. But how will I do that?
I also tried malsup's Jquery Form Plugin but I really don't know how to work on it. Whenever I submit the form, an alert pops out.
I'm adding a facebook share button to each post on a Wordpress (Using Facebook Share Button New plugin), it works ok for each post/page except when i'm loading them trough ajax, the result it's a normal Facebook like button but the popup (to write a comment) appears inside the button it is not expanded.
To check go to: http://iwanttobeher.com/ and then click on any face at the bottom of the page, then test the like button and you'll see what happens.
I don't know what to do, i tried to FB.XFBML.parse() after loading the content but the result is the same.
Switching to HTML5 didn't help in our case. What did was to remove the FB object just prior to new content being inserted into the page via Ajax:
delete FB;
wrapper.html(response.data);
We reload full pages via Ajax and so new page content recreates the FB object and re-initializes XFBML anyway. Not sure if this workaround would work if we reloaded only parts of the page though.
The original answer is here.
I've managed to fix it by changing the implementation to HTML5 instead Iframe or XFBML using Facebook's tool to generate like buttons: https://developers.facebook.com/docs/reference/plugins/like/
The data is displayed in gridview with paging on an AJAX enabled webpage. The gridView contains Item templates containing a link button. On itemCommand event, page redirects to display data in new page. When the Back button on browser is pressed, the previous state of the page doesn't load.
Perhaps set a cookie and use it to get the right page when initializing the gridview. Or modify the hash at the end of the URL (eg, add "#page2" to the location bar and read it back on init).
Look at this js stuff from google
Use Google Web Toolkit, it allows the state to be bookmarked and isn't affected by back/forward button.
Otherwise your options are:
Telling the user to not press the back button.
Putting the state in the url, e.g mypage.asp#page_123 and using that to determine the state in your javascript at page load.