I have no idea, how to explain this properly, but i try my best.
I have worked with flowplayer in jquery mobile (with multipage).
I have about 20 video sourced from database.
Now the problem:
I don't want all the videos start loading, when i start the video.
I have tried to make javascript to start correct video with '' tag, but it needs two clicks to start video.
Here is link i'm using (sorry, some forms are in finnish) http://www.rakentaja.fi/test/mobv/3mobvid.asp
Don't bother to go in front page, because i haven't finished those sites.
just pick any of the links and watch what happens.
Please, use google chrome, it's only browser which is the only one what works.
Thank you!
Avoid using inline Javascript functions, do it this way.
$('a.ui-link').on('click', function() {
aloitavid(61,'Valloxsuodpuhdvaihto');
});
Since each link has different parameters; you need to add those to the <a> link attributes and then pull them to be used in your function.
Update
You could do the below. Save video parameters as an attribute vlink, then read parameters and pass them to your function aloitavid(). Example here.
HTML
start video
Code
$('a.ui-link').on('click', function () {
var vlink = $(this).attr('vlink').split(",");
var value1 = vlink[0];
var value2 = vlink[1];
aloitavid(value1,value2)
});
This results
value1: 60
value2: Valloxyleistailmanvkoneenhuollosta
Try to put links to hardcoded
Back
if it's posible.
That won't be nice, but it works.
Related
How can I automatically close the $cordovaInAppBrowser when it goes to my website and returns content "OK"? I would like to do this to avoid displaying the close button in the browser window.
Does anyone know how I can achieve this?
I did find the website that can solve this for those who also need to self close the browser in some condition.Here is the reference link : https://developer.salesforce.com/forums/?id=906F00000009ALSIA2
sample coding:
authWindow.addEventListener('loadstop', function(e) {
var loc = e.url;
//when url is changed check if the url contains your specific callbackURL
if (loc.search(data.callbackURL) >= 0) {
//at this point close your inapp browser
//you will land on the index page within your application.
authWindow.close();
//your code after successful authentication
}
});
you can use something like a timeout function or other than that a even listener other than i would suggest make a custom plugin and use it. The solution provided by #Blouraf is very hacky.
I did find some documentation on the cordova plugin that recommends a listener.
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
Before I go and do this in Jquery out of frustration I figured I would ask what the angular way is?
I'm building an AngularJS site using a model based of the Phonecat tutorial example on the AngularJS site.
I found this method to set the title of a page and can work out how to modify it to do description as well in the app config but this doesn't work when I'm populating pages with content via json. I tried doing it using a ngbind method as well but have yet to find a working solution as I think something to do with the order in which files are loaded is breaking.
For example
when('/faq', {
templateUrl: 'sub_pages/articles.html',
title: 'Landing page title goes here, not to big a deal'
}).
when('/things-to-do/:activityID', {
templateUrl: 'sub_pages/activity-detail.html',
controller: 'activityDetailCtrl',
title: 'If I put a title here it will be the same on all of these pieces of content'
}).
What method can I use in order to set title on both the landing pages and also the pages which draw their content from a JSON feed?
EDIT - ANSWER BELOW
After about 2 days of bashing my head against a wall trying to work this one out it's actually quite simple and works for both static pages and templates with dynamically loaded content.
Inside the view pages (html that loads inside of ng-view) add a couple of divs (you can put this anywhere really) and then inside them you need to load in ng-init.
ng-init="$root.title = path.to.title"
ng-init="$root.description = path.to.description"
This will set the title and description on the root scope. The "path.to." is just an example path to content in json, you can replace this with plain text as well which is how I deal with landing pages.
Then on the index.html or what ever page your app is based on inside the head you just need to load in.
Your Page Title
This will automatically set your page title and description meta tags and you can pretty much use this formula for any other meta data you need to create.
I haven't tested this yet with Prerender.io or any other cache service but will do some checks and post the results here.
Something like
$document[0].title = "xyz";
I'm trying to test my angularjs app with protractorjs. I have set up selenium and got the server and runner working. My issue is that when I run my test I get the ElementNotVisibleError. I know that the element I am trying to select is hidden until certain fields have been filled in and this is how I would like this to be kept.
My question is, are there any workarounds to the issue via a call to wait or sleep. I have tried many variations of wait and sleep but with no luck.
My test code is
it('navigates the user to the login page', function(){
ptor = protractor.getInstance();
ptor.get('http://localhost:2222/#/page');
ptor.findElement(protractor.By.input('input.type1')).sendKeys('one');
ptor.findElement(protractor.By.input('input.type2')).sendKeys('two');
ptor.findElement(protractor.By.input('input.type3')).sendKeys('three');
ptor.findElement(protractor.By.input('input.type4')).sendKeys('four');
ptor.findElement(protractor.By.input('input.type5')).sendKeys('five');
ptor.findElement(protractor.By.input('input.type6')).sendKeys('six');
ptor.sleep(5000);
ptor.findElement(protractor.By.id('clickableBtn')).click();//not visible until above fields populated
}, 1000000);
Message from protractor is
Message:
ElementNotVisibleError: element not visible
If the element is not visible until you have input in all of the fields, it is because of Javascript. You may have to kick off that Javascript by typing Tab or Enter after typing that last field:
ptor.findElement(protractor.By.input('input.type6')).sendKeys(Keys.Tab);
Using javascript I was able to click
var linkToClick = ptor.driver.findElement(protractor.By.id('clickableBtn'));
ptor.executeScript("arguments[0].click();", linkToClick );
yes, WebDriver allows you to execute javascript on elements directly so simply do a javascript .click. You would need to convert to your own language but here is how I did it using C#
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("arguments[0].click()", element);
Browser.WaitForPageLoad(driver);
I actually created an extender method so that I simply type element.InvisibleClick(driver) and it clicks on it for me. More on that can be found documented HERE.
You can always give it opacity:0
-moz-opacity: 0.00; opacity:.00; filter: alpha(opacity=00);
This should work for all browsers.
Wants some information about the image loading while my process is happening.
Actually I m calling a callout on Button click , for that I have used
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"{!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
But the result comes in after 4-5 secoonds . So I want to show a loading image in the mean time.
Can someone suggest me how to do that.
Before you call the sforce.apex.execute, use javascript to show an image.
I would suggest to use a javascript library like jQuery.
Then you can do something like this:
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
$('the id of the element you want to change').html('<img src="image_url_here" />');
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
If you use the element that is going to be updated by sforce.apex.execute it will disappear when that gets updated.
But for a full answer you would have to post some more code (especially the html)