I am using UberGallery for my site:
http://www.ubergallery.net/
Here is a sample of the page with Uber Gallery called directly in the HTML
http://www.goloyal.com/clients/dealers-mlm.php
If you click on a thumbnail it opens the popup div.
Some pages have a lot of thumbs, so they load slowly, so I tried to call the Uber Gallery through an Ajax so the page would load, then the thumbs could take their time:
/old-dealers-mlm.php
The loader works exactly as I hoped, however when you click on the thumbnails it opens in a new page (not the pop up div)
I am calling THIS div in my ajax
/div-dealers-mlm.php
Which also has the popups showing correctly.
I do understand that the pages are loaded separately, and I know it requires a special conversation to tell one page to do something in the other. However, I am not sure what I need to relay to the parent/original page, or how to do it to start testing. Any ideas?
THANKS!
The problem is that you're setting up the colorbox on links that don't exist yet. You need to replace your current colorbox code with this:
$(document).ready(function(){
$(document).on("click", "a[rel='colorbox']", function(e){
e.preventDefault();
var url = this.href;
$.colorbox({href: url, maxWidth: "99%", maxHeight: "99%", opacity: ".5"});
});
});
This uses jQuery .on() to bind the click event to all current and future a elements with a rel attribute that equals colorbox.
Related
So I've decided to use the jQuery Mobile framework to build my new mobile website. It has this feature of loading any local href link by ajax, which is great. But the new page that loads doesn't respond to any of the javascript. I've got a home page and page 2, both of which have the same html layout which a few changes in the content, I'll give an example.
I have made a navigation menu that slides in from the left and pushes the main content to the right. When I click on a page link, it loads the new page through ajax, but then on the new page, if I click the menu button, jQuery doesn't pick this up and so nothing happens (the menu doesnt slide out).
$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
console.log("1")
if ($( 'nav' ).hasClass('navTransform')) {
console.log("2")
$( 'nav' ).removeClass('navTransform');
$( 'article' ).removeClass('articleTransform');
}
else {
console.log("3")
$( 'nav' ).addClass('navTransform');
$( 'article' ).addClass('articleTransform');
}
});
});
This jQuery script is in a seperate .js file thats included in the header of both the pages. I know the script works normally because when i refresh the page, the menu trigger works. Is there a known work around for this?
The workaround for this is to use appropriate jQM handler pageinit() instead of jQuery ready handler.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
So, your code might look like this:
$(document).on("pageinit", "#page1", function(){
//Your init code for page 1 goes here
});
$(document).on("pageinit", "#page2", function(){
//Your init code for page 2 goes here
});
I have some code which does the following:
External content is loaded via AJAX (video thumbnail images)
The new content is then inserted into a div using $("#content").append();
A mobile touch scrolling helper (iScroll) is applied to this div.
However the jQuery "load" event is not firing when the DOM changes due to an AJAX event, which means the call to initialise the scroller is happening too soon (before the images inthe content has loaded) which means it often doesn't get intiiallised. Without waiting for the images to load the content box is often short enough such that a scroll function isn't needed, but then when the images subsequently load, the box is not scrollable.
$("#videoList").append(videoThumbnails);
$(document).load(function () {
// doesn't fire
initScroller();
});
It appears that jQuery's append function does not block until all images referenced in the appended HTML have loaded.
How can I detect that all of the images loaded by the AJAX function have finished loading in order to call the initScroller() function AFTER all images have loaded?
OK I've found the solution in another similar question. It turns out there's a jQuery waitForImages plugin which does exactly what I want:
So I can just do this:
$("#videoList").waitForImages(function () {
// Fires when all images in the #videoList div have loaded
initScroller();
});
The methods you are trying to use are triggered only once, when the page is loaded, but not for changes you make to the DOM aftewards (e.g. inserting content with ajax).
If you want to observer DOM changes you can use the DOMNodeInserted event
$(document).bind("DOMNodeInserted", function(event) { ....do stuff...here });
But generally it would be better to trigger this with the ajax callback.
$('#targetElementForYourContent').load('server/url.html', function() {
...do stuff here....
});
I am having an issue closing a fancybox popup when jquery is included within the popup page (i'm using AJAX and including an external php page within the popup). The fancybox is setup as follows:
$(".various3").fancybox({
'type' : 'ajax',
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
type : 'GET'
}
});
The popup has a 'Cancel' button to allow users to close the popup (using jQuery.fancybox.close();). I have to include jquery within the popup page to allow some other functionality to work and this prevents the jQuery.fancybox.close(); from working. If i remove jquery from the popup page then it works fine, however I cannot work out how to reference the instance of jquery on the main page (i have tried parent in case, although i wouldn't have thought this should work as it's a div and indeed it didn't). I have tried using:
var localjquery = jQuery.noConflict(true);
within the popup page and this allows me to use jQuery.fancybox.close(); to close the popup successfully however this prevents the use of $ to reference jquery which is needed for other plugins on this page that i can't edit. If I add
var mainjquery = jQuery.noConflict();
after the first instance of jquery on the main page then this obviously works fine and i can refer to it as mainjquery on the parent, but if then try
mainjquery.fancybox.close();
on the popup it says mainjquery is undefined.
I suspect it's a problem due to a combination of multiple jquery instances and loading a completely separate page via ajax into a div (rather than using an iframe etc whereby i could then use parent. or similar). If anyone could shed any light on how I could reference the mainjquery reference from the child popup, or a better way I can close the fancybox then that would be greatly appreciated.
Thanks so much!
Dave
The best thing to do is test to see if it is an ajax request, and if so don't include the jquery (or any other scripts you already have for that matter).
Here's a sample of code I use on my php pages for doing both ajax and regular page requests.
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
....
if(!IS_AJAX)
{
//echo your header with scripts
echo $header;
}
//else just echo the contents of the page body
edit:
If you need to add things to the head tag, you should be using an iframe instead of an ajax type for the fancybox.
I am currently loading several forms into a webpage with:
$(document).ready(function () {
$('#content').load('php_script.php', function() {
$(this).find('#someForm').ajaxForm(function() {
alert('Success!');
});
$(this).find('.someOtherForm').ajaxForm(function() {
alert('Success!');
});
});
});
This works in Chrome, Chromium and IE who loads the forms and everything works as it should (Clicking submit sends a request to the php-script defined in the form's action, which adds stuff to a db, and shows the alert dialog). In Firefox (v10.0.2) this code loads the forms into the DOM and displays them, but when clicking submit on any of the forms nothing happens.
At first I suspected ajaxForm, but changing the above code to:
$(document).ready(function () {
$('#content').load('php_script.php');
});
yields almost the same result, the difference being that the user is sent to the script defined as the action (Except for Firefox, where nothing happens).
How do I make Firefox not kill the submit button?
I solved it, bad HTML from my side:
<table><form ...>
<tr>...</tr>
</form></table>
Instead it should look like:
<form ...><table>
<tr>...</tr>
</table></form>
The validator did not catch this since it was loaded via jQuery (and I forgot to validate the page serving the forms), and Firefox buggered out.
The code above looks ok to me...
Have you had a look in firebug if there are any errors? Maybe there is a conflicting Id or something.
Maybe the form isnt completely loaded into the dom yet, might be worth giving live binding a try
Found this in the docs:
...jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser...
If you inspect the form is it the same as in other browsers?
i am currently creating an ipad app using the slablet template.
i have customised it so i have a left navigation and a main window.
i have implemented some ajax so that when a user clicks a link on the left navigation, the page that has been selected appears in my main window. this works fine.
i now want to include some jqtouch so that when, when a user clicks one of the links from my left navigation, the page appears in my main window but with an animation like slidein, slideup, pop etc.
how can i do this??
any help will be greatly appreciated
thanks
i have included some of my code below:
Navigation links:
home
Latest News
Important Uploads
Personal Details
Timetable
Tasks
Staff Lookup
University Informtion
ajax that makes pages load in window:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
jqTouch (and jQuery mobile) are both optimized for phones and don't support independently scrolling areas that you normally see on tablets. If you want that you'll need to go Sencha Touch (my project) or an equivalent.