phonegap childbrowser - change onClick to tap? - onclick

Im using the childbrowser plugin with phonegap and jqtouch.
I have this in a menu list to open webpages:
<a href="#"
onClick="PhoneGap.exec('ChildBrowserCommand.showWebPage','http://
mobile.twitter.com/company');" >
The problem is that the onClick opens the childbrowser as soon as I
touch it, and since I have this in a menulist, I cant scroll the list
up and down without the childbrowser opens.
So how can I change the onClick so it act as a tap instead?
What do I have to do?
Thanks!

What's worked for me is to use jQuery's bind approach and bind a tap event to the element that you'd like to call the Childbrowser. Here's some generic HTML and JavaScript that should give you a sense of what to do:
HTML:
<p class="urlStyle">Your link</p>
JavaScript:
$('p.urlStyle').bind('tap',function() {
window.plugins.childBrowser.showWebPage("http://www.yourlink.com");
});

Related

how to write conditional css in angular4?

I have a table which each row is looping based on api data. In one column I have an edit icon and on click of the icon one pop will open. I just want to show the popup once at a time, means if one popup is open user won’t able to click the remaining edit icon. I just tried to use the css - "pointer-events: none” to disable the icon but how to write the condition?
First, you will need to have access to the popup (generic utility) which can tell you that if the popup is open or closed. You can maintain it by a variable or method - depending on how you have built/using the popup functionality in your application.
If you are using any of the Angular specific built-in libraries for popup then it might have this utility.
Once you get the popup open state then there are multiple ways in Angular template which you can use to set pointer-events none to disabled icon:
NgClass - <a class="icon" [ngClass]="{'pointer-none': popup_isOpen}"></a>
Also in your css define class -
.pointer-none {
pointer-events : none;
}
NgStyle - <a class='icon' [ngStyle]="{'pointer-events': popup_isOpen ? 'none' : 'inherit'}"></a>

How to locate a button defined within a list?

I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you

css hover menu stops working after Update Panel renders elements

I am using <ul> <li> menu on master page. For menu hover I am using csshover.htc file.
I am <updatepanel> on my child pages, but when I click on any link or button inside update panel, my menu stops working. i.e hover does not work. What can be solution for this?
You need to re-initialise your menu after your updatepanel has fired. In order to do this you need to include something like the following at the bottom of your page:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(CSSHover());‌
</script>
You will find the name of the function to be called at the top of your htc file - You will see something like this:
<public:attach event="ondocumentready" onevent="CSSHover()" />
The function that needs to be fired is the part in the onevent
I got updated htc file from here, and my issue was resolved..

Opening Pages in New Window

Is there a way to open a page in XHTML without using <a href="page.html" target="_blank"> that is standards compliant?
I'm not using frames, but there are some pages that I want to open in a new window instead of the current one.
You can use javascript's window.open() method. However this could easily be blocked by a pop-up blocker. Why do you not want to use the "_blank" target?
You can use something like this:
My Page
And then you run this jQuery:
$(document).ready(function() {
$('a[rel="external"]').attr('target', '_blank');
});
This will add the target="blank" to the links and make your HTML validate :)
Most pop-up blockers wont block a pop up that has been requested by the user e.g you click a link and it pops up a window. IF you add an onlick event to your link and a target, the desired effect will work even if JS is turned off although you don't want to use target="_blank"

Can you force a hyperlink click event on page load

I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();

Resources