I'm using carousel.js in google tv jquery ui to create video slide. I want when I click "next" (right arrow), items will be loaded via Ajax and append to slide. This mean my app can run faster.
You'd probably want to load a list of thumbnails into your carousel so you don't create an empty carousel. If you really want to load video URLs using ajax each time next is clicked, you'd have to modify the following function and incorporate AJAX inside.
/**
* Selects next Carousel item.
* #param {boolean} true if the item should be activated after selection.
*/
gtv.jq.Carousel.prototype.selectNext = function(activate) {
var carousel = this;
if (this.selectedItem) {
var newItem = this.selectedItem
.parent()
.nextAll('.carousel-item-div')
.eq(0)
.find('.carousel-item');
if (newItem && newItem.length == 0) {
newItem = this.container.find('.carousel-item').first();
}
this.selectItem(this.selectedItem, newItem, function() {
carousel.updateSelectionClasses(newItem);
if (activate) {
carousel.activateItem(newItem);
}
});
}
};
Note that it does not make a whole lot of sense to use AJAX and load a video URL each time next button is clicked - you'd do too many ajax calls. It's better to dynamically load video URLs for a whole category to fill a carousel using AJAX.
For example the original Google TV Templates didn't use AJAX to load video sources but this augmented Google TV Templates added AJAX loading:
https://developers.google.com/tv/web/docs/ajax_gtv_templates_tutorial
Check out how it's done there.
Related
I have a page with a bunch of imgs, these imgs link to their own page. For each img, I have a like button, with the url to the individual page.
In FF, the imgs load first, but in Chrome, it seems that the like buttons load first.
How can I get the like buttons to load after the page is otherwise loaded?
Since, you didn't posted any code, I can only give you this link to the jQuery command .ready(): http://api.jquery.com/ready/
If you put a function within this command, it will only be executed after every image or other content of the page (or an element) is loaded.
For example you can add the Facebook like button with jquery after the images are loaded like this:
$(document).ready(
function() {
$("#fbPages").children("li").each(
function(key, val) {
$(val).html($(val).html() + '...FBLIKEBUTTON...');
}
);
}
);
We're using Filepicker.io in our application and it works really well. I need 2 options for this plugin that I can't find in their docs.
1) Disable - We only want a user to upload a single image per interaction. If Filepicker has already processed a file in the current interaction I'd like to disable the plugin until they submit the form, or remove the current image.
2) Destroy - Filepicker provides a way to programmatically convert a standard input field to a Filepicker.io widget: constructWidget. I don't find a destroyWidget function in the docs. Does anyone know if this is an option?
This is the code we're currently using:
<input id="upload-image-input" value="Upload an image." data-fp-
services="COMPUTER,URL,FLICKR,FACEBOOK,INSTAGRAM,DROPBOX,PICASA">
var element = document.getElementById('upload-image-input')
view = this;
// make sure filepicker isn't already displaying
if (element.style.display !== 'none') {
element.type="filepicker-dragdrop";
element.onchange = function(e){
var text = view.set(e.fpfile.url),
};
filepicker.constructWidget(element);
}
I'd also like to know if there's an event which gets triggered when a file is removed using the drag and drop widget's "X" button.
We don't currently have support for these features directly in the SDK, but there are ways to produce this behavior. For instance, you can add a custom class to the element and then use that to add event listeners, remove it from the dom, or disable it.
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.
I'm developing a photo gallery that uses ajax. I'm using _escaped_fragment_ (#!) too, it already works but when you use the back and fwd browser buttons the url change (the hash fragment) but the image doesn't. I read about the onHashChange event but i wanto to know if there's an automatic way to do this, i mean, if there's a way to preserve the DOM changes in the history just like Facebook does.
I change the hash fragment with:
window.location.hash = "!"+sth
I load ajax content retrieving the hash fragment and using it as index of my photo:
var fragment = window.location.hash.replace("#!","");
if (fragment != ""){
currentItem = fragment;
currentItemBZ = fragment-1;
focused = currentItemBZ;
}
Any help or suggestion will be appreciated
I've used this jQuery plugin in the past to retain back-button and history functionality in an ajax-based application:
http://www.asual.com/jquery/address/
You can register an on change listener, and then change the image in your gallery depending on the new value of the hash.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};