I'm using .changePage
$.mobile.changePage($nextPage.attr('href'), { transition: 'slide', showLoadMsg: false });
Which is working ok. The page changes and slides in. The only problem is that on the new page there is an image at the top of the page that is not shown during the animation and then "pops" in after the animation.
I thought that changePage would get the page via ajax and load the result into the dom and when thats done do the animation?
It seems like changePage is getting the page and inserting it into the dom but NOT waiting tell that "page" is done loading before doing the animation.
Any one have any thoughts as to how to wait tell the new page and its various assets (an image in this case) is done loading before animating?
In the end the only way I was able to solve this was by pre-loading the page using $.mobile.loadpage
Related
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.
So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
Imagine I define video-type node, which displays for example a title and description, along with the video itself. And imagine I have a block of video teasers, where each teaser links to one such video node. And imagine this block is added to the bottom of any page displaying a video-type node: when the user clicks on one of the video teasers, the page reloads with a new video-type node.
Finally, imagine all of the above but without having to reload the full page.
If you go to http://whitehouse.gov/video, you will see what I am trying to accomplish. When you click on one of the video teasers, the url changes to the url for the new node, but the full page does not reload. Only the top section of the page, displaying the new node, gets reloaded.
My question: How do they do this?? How can I load the node content into a particular div on page, without reloading the entire page?
You can use hook_menu to implement a MENU_CALLBACK to it's own handler function in Drupal. You would return JSON or XML or an HTML fragment or whatever you want with the HTML for the new video. Then use JS to update the DOM with the new content received from the server. Updating the URL can be done with JS as well.
So basically you are going to handle video clicks on the client side with JS. The JS would make a request to your MENU_CALLBACK and you would receive whatever data you choose to implement back from the server. JS takes the data and updates the DOM.
With something like jQuery, you could use the $.get method and use the success attribute to update the window history in modern browsers.
I'm working on a website where the homepage has a rotating banner. When the page is loaded, an AJAX request is performed to retrieve the rest of the banners (each of which has a 960-pixel wide image). I toyed with the idea of loading the page normally with all the banner HTML loaded, but the target audience of the website are not always guaranteed to be on a blazing connection, and I wanted the homepage to load quickly. Plus, I didn't want conflicting H1 tags. The page in question is the landing page at http://www.gosihanoukville.com/
If you're on a slowish connection, the banners will load and start moving (rotating) before the background images are finished loading. I'm wondering if there is a way to detect if an image has fully downloaded before I have the script start moving the banners.
I'm not including code here, as it is best seen on the website mentioned above. The JS file used is 'landing.js'
Thanks for any help - this is driving me crazy.
I would normally do this:
var imagesToLoad = [];
var imagesLoaded = 0;
// Register this handler using whatever framework you like
var whenImageLoaded = function(){
if (++imagesLoaded == imagesToLoad.length){
// Start moving the banners.
}
}
Good day,
I was wondering if there is a way to make Ajax move on to the next code segment only when all the elements included in the server-side code page are fully loaded. When the retrieved data is text-only there’s no problem, but sometimes there are photos included.
This is part of the code I have been using:
xajx.onreadystatechange = function(){
if(xajx.readyState==4){
document.all.div1.innerHTML = xajx.responseText;
document.all.div1.style.display = “”;
}
}
The thing is that when the response is retrieved (readyState set to 4) and div1 is displayed, the Photo has not been completely loaded yet, so actually the user can see the process of the picture slowly appearing, as he would in any other “normal” case. What I want to do is making div1 available for display only once all the components are fully loaded while meanwhile the system does its stuff in the background. Before Ajax I used hidden iframes like everybody, so I could enclose an onload event handler within the iframe tag (or in an external script), so div1 would appear only after the iframe has fully loaded, photos included.
Any idea?
You can use the 'onload' event on images themselves. You'll need to work out how to attach that event when you are downloading the code dynamically as in your case.