There are some links which looks like above
> <td><a href="http://Lucifase.com/pages/2000.php?refid=2000"
> target="_blank">2000</a><br></td> <td><a
> href="http://Lucifase.com/pages/3000.php?refid=3000"
> target="_blank">3000</a><br></td> <td><a
> href="http://Lucifase.com/pages/4000.php?refid=4000"
> target="_blank">4000</a><br></td> <td><a
> href="http://Lucifase.com/pages/5000.php?refid=5000"
> target="_blank">5000</a><br></td> <td><a
> href="http://Lucifase.com/pages/6000.php?refid=6000"
> target="_blank">6000</a><br></td>
And I stop in first step.I can't open each of them by script trigger. Here is which I have so far:
setTimeout(function() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0,
false, false, false, false,
0, null);
var links = document.getElementsByTagName('a');
if(links.href.search('refid') >= 0)
links.dispatchEvent(evt);
}, 1000);
But it doesn't work,also don't know how to make them open in new tab one by one.
What do you mean one by one? It appears that "clicking" all of the links at once is okay?
With links, must of the time, just follow the href instead of trying to send a click event. The following code should open just the tabs you want:
var linksToOpen = document.querySelectorAll ("td > a[href*='refid']");
for (var J = 0, numLinks = linksToOpen.length; J < numLinks; ++J) {
window.open (linksToOpen[J].href, '_blank');
}
Update for OP clarification:
To open the links with a delay between each one is slightly more complicated. Code like this will do it:
var linksToOpen = document.querySelectorAll ("td > a[href*='refid']");
//--- linksToOpen is a NodeList, we want an array of links...
var linksArray = [];
for (var J = 0, numLinks = linksToOpen.length; J < numLinks; ++J) {
linksArray.push (linksToOpen[J].href);
}
openLinksOnDelay (linksArray);
function openLinksOnDelay (linkArray) {
//--- Pop the first link off the array...
var linkToOpen = linkArray.shift ();
if (linkToOpen)
window.open (linkToOpen, '_blank');
//--- Open the next of the remaining links after a delay.
if (linkArray.length) {
setTimeout ( function() {
openLinksOnDelay (linkArray);
},
1000 //--- 1 second. Use 60000 for 1 minute.
);
}
}
Does it need to be mouse clicks or can it open the links with this:
for(i=0;i<document.links.length;i++) {
if(document.links[i].target != "_blank"){
window.open(
document.links[i].href,
'_blank'
);
}
}
Related
I'm trying to get my head around using a the TableView index property to create native right hand alphabetical navigation - similar to that in the Apple iOS Contacts app - shown in the picture below:
I created a really simple example, with a set of rows, with row headers, but it doesn't work - whenever I tap on an index item, it just jumps to the top of the TableView again.
Here is my example code:
// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
headerTitle:'A'
});
// use a loop to add some rows
for (var i=0; i < 20; i++) {
section1.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
headerTitle: 'B'
});
for (var i=4; i < 10; i++) {
section2.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
data:[section1,section2]
});
// Create a table view index
var index = [
{ title: "A", index: 0 },
{ title: "B", index: 1 }
];
// Set the index on the table view
tv.setIndex(index);
$.index.open();
$.index.add(tv);
Here is an example for you dear
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView({});
var contacts = ["Adam", "Andrew", "Boris", "Claus", "Debby", 'Saba', 'Sana', 'Wahhab', 'Zohaib', 'Zzaid', 'Zzxad'];
var curheader = 'A';
var sectionArr = [];
var index = [];
for (var i = 0, lastL, l, currSection, ilen = contacts.length; i < ilen; i++) {
l = contacts[i].substr(0, 1);
if (lastL != l) {
index.push({
title : l,
index : i
});
currSection = Ti.UI.createTableViewSection({
headerTitle : l
});
sectionArr.push(currSection);
}
currSection.add(Ti.UI.createTableViewRow({
title : contacts[i],
}));
lastL = l;
}
table.setData(sectionArr);
table.index = index;
win.add(table);
win.open();
Thanks
I have a javascript which when a user enters a number to textbox,the script generates that much number of textboxes dynamically.But what i need is to create is select's instead of textboxes with options retrieved from mysql database.
the javascript for creating textbox is given below,
<script type="text/javascript" >
$(document).ready(function () {
$("#stops").change(function () {
var count = $("#holder input").size();
var requested = parseInt($("#stops").val(), 10);
if(requested == 0 && count > 0){
location.reload();
}
$("#title").html("Stop Codes");
if (requested > count) {
for (i = count; i < requested; i++) {
var $ctrl = $('<input/>').attr({
type: 'text',
name: 'text' + i,
placeholder: "Enter stop " +(i+1) +" airport code"
});
$("#holder").append($ctrl);
}
} else if (requested < count) {
var x = requested - 1;
$("#holder input:gt(" + x + ")").remove();
}
});
});
HTML generated textboxes here
<td id="holder"></td>
I have this code where the color changes on onmouseout and onmouseover events. However if I the move mouse over those boxes very fast the onmouseover function doesn't work properly and doesn't change the color. What could be the problem?
JS Fiddle Code
window.onload = function() {
var paper = Raphael(0, 0, 640, 540);
for (i = 0; i < 2; i++) {
for (j = 0; j < 2; j++) {
(function(i, j) {
var boxes = paper.rect(0 + (j * 320), 0 + (i * 270), 320, 270).attr({
fill: '#303030',
stroke: 'white'
});
boxes.node.onmouseover = function() {
boxes.animate({fill:'red'},500);
};
boxes.node.onmouseout = function() {
boxes.animate({fill:'#303030'},300);
};
})(i, j);
}
}
}
*Edit: Also how can I ensure that animation is applied to only 1 box even if I move the mouse quickly.
The mouseover animation is 200ms longer than the mouseout, so if you mouseover and mouseout in less than 200ms total, the animations run in parallel, and the mouseover one finishes last, leaving the color red.
Instead, add a .stop() before each .animate to stop the animations from competing:
boxes.node.onmouseover = function() {
boxes.stop().animate({fill:'red'},500);
};
boxes.node.onmouseout = function() {
boxes.stop().animate({fill:'#303030'},300);
};
See: http://jsfiddle.net/Eheqc/1/
I want to use WebDriver to select a line of text in browser screen(actually in CKEditor editing area) then change its text style from CKEditor toolbar. Any method can do that?
For example, a line with html code like below:
this is a sample line.
I try to use Actions to build a mouse action chain but no success due to not familiar with that. Thanks for any hints or answer.
I'm not sure this is actually possible with WebDriver. What you would want to do is to clickAndHold(...).moveByOffset(...).release(...). Unforunately, WebDriver only allows a WebElement as a parameter to clickAndHold().
My best advice to you is to emulate JavaScript events for this. You can then do something like this in your test:
((JavascriptExecutor) driver).executeScript(...);
I wrote code for emulating mouse events which I use with some of my Selenium tests. Although it doesn't do exactly what you want, hopefully it will be useful (hopefully you can just set the x/y coords and perhaps that will get it working):
var f = function() {
var id = "ext-gen1116";
var top = document.querySelector( '#ext-gen1116:nthchild(0)' );
var bot = document.getElementById( id ).childNodes[3];
var getX = function( obj ) {
if( obj == null ) {
return 0;
} else {
return obj.offsetLeft + getX( obj.offsetParent );
}
}
var getY = function( obj ) {
if( obj == null ) {
return 0;
} else {
return obj.offsetTop + getY( obj.offsetParent );
}
}
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousedown", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
bot.dispatchEvent(evt);
evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousemove", true, true, window,
0, 0, 0, getX( top ) - getX( bot ), getY( top ) - getY( bot ),
false, false, false, false, 0, null);
bot.dispatchEvent(evt);
var mouseup = function( elem ) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseup", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
elem.dispatchEvent(evt);
}
setTimeout( mouseup, 500, bot );
};
f();
If it's possible for you to do what you want with the keyboard instead, this is by far the better solution. You can simply do driver.sendKeys(...). The Keys enum will be priceless for you in this case :-)
You can also try to do it with JavaScript:
let el = document.querySelectorAll("p")[0];
let range = document.createRange();
range.selectNodeContents(el);
window.getSelection().addRange(range);
Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.
The script below can be replaced with the script in the "example1-simple.html" viewed here.
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.
The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.
The grid is getting initialized before the AJAX call to get the additional columns completes.
Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:
grid.setColumns(dynamicColumns);