We Keep Coding

Unable to locate canvas elements present on the page using casperjs

I am new to casperjs and still exploring it. One problem i am facing here is i am unable to locate element on the page. basically there is one plot and i want to use this.test.assertExixts but it is failing.
the element i want to locate on the page's html code is:
<div id="htmlwidget_container" style="position: absolute; top: 40px; right: 40px; bottom: 40px; left: 40px;">
<div id="htmlwidget-db33fd07312733aaf5e4" class="dygraphs html-widget html-widget-static-bound" style="width: 100%; height: 100%;">
<div style="text-align: left; position: relative; width: 520px; height: 320px;">
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas style="position: absolute; width: 520px; height: 320px;" width="520" height="320"/>
<canvas class="dygraph-rangesel-bgcanvas" style="position: absolute; z-index: 9; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<canvas class="dygraph-rangesel-fgcanvas" style="position: absolute; z-index: 9; cursor: default; top: 280px; left: 56px; width: 459px; height: 40px;" width="459" height="40"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 113.737px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<img class="dygraph-rangesel-zoomhandle" style="position: absolute; z-index: 10; visibility: visible; cursor: col-resize; left: 424.919px; top: 292px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAzwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7sqSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=" width="9" height="16"/>
<input style="display: none; position: absolute; z-index: 10; top: 231px; left: 57px;" size="2" type="text"/>
<div style="position: absolute; left: 0px; top: 0px; width: 515px; height: 28px; text-align: center; font-size: 20px; font-weight: bold; z-index: 10;">
<div class="dygraph-legend" style="position: absolute; font-size: 14px; z-index: 10; width: 250px; top: 28px; left: 264px; background: white none repeat scroll 0% 0%; line-height: normal; text-align: left; overflow: hidden;">
and casperjs code part is :
casper.then(function () {
this.waitForSelector("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", function () {
this.test.assertExists("#htmlwidget-0fa8344710bef2a7dcfa > div:nth-child(1) > canvas:nth-child(2)", "Confirmed!. element exists");
});
});
also tried to get element info using below but it is returning anything
casper.then(function () {
var temp = this.getElementInfo("#htmlwidget_container").tag;
this.echo('Image :' + temp);
});

Make an iframe as thumbnails on IE, make it not interactive

I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe.
Any other ideas of how to achieve the same result ?
EDIT:
I am using the IE 11.
The iframe is placed inside a tooltip generated by the qtip2.
The HTML generated is something like that:
<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10"
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite"
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;"
aria-atomic="false" tracking="false" data-qtip-id="10">
<div class="qtip-tip"
style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
<canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
</canvas>
</div>
<div class="qtip-titlebar">
<div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
</div>
<div class="qtip-content" id="qtip-10-content" aria-atomic="true">
<div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
URL: http://portal/sites/test2/Pages/default.aspx
</div>
<iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
</iframe>
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
</div>
</div>
And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:
.qtip-content:after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-content::after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-customized {
}
.iframeLinkUrl{
transform: scale(0.32, 0.31) translate(-73%,-99%);
}
As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>

How to slideToggle() on hover?

I'm pretty new with jQuery, and I'm doing fine with basics, but still can't figure out some things with advance use.
This is my example
jQuery('.hp-single-service a').hover(function() {
jQuery('.above-content').slideToggle("slow", function() {
jQuery('.above-content').css({
"height": "20%",
"bottom": "0"
});
jQuery('.above-content-inner').css("padding-top", "2%");
});
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
I'm trying to create jQuery that will on hover toggle .above-content div to height:20%; bottom:0; and give padding-top:2%; to .above-content-inner div.
For start I'm not sure that slideToggle() is right function for this, so if anyone have better suggestion I'm open for it, just to make this work.

You can even do the same with CSS 3 transitions. Please refer to the following link https://jsfiddle.net/osha90/4kyLgat1/
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
CSS CODE
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
bottom: 0%;
transition: all 1s ease-out;
}
.hp-single-service a:hover .above-content{
height: 20%;
bottom: 0%;
}
.hp-single-service a:hover .above-content-inner{
padding-top: 2%;
transition: all 1s ease-out;
}

I believe you're looking for something like this:
jQuery('.hp-single-service a').hover(function() {
jQuery(this).find('.above-content').animate({
"height": "20%",
"bottom": "0"
});
jQuery(this).find('.above-content-inner').css("padding-top", "2%");
},
function() {
jQuery(this).find('.above-content').animate({
"height": "100%",
"bottom": "auto"
});
jQuery(this).find('.above-content-inner').css("padding-top", "0");
});
.hp-single-service {
float: left;
width: 50%;
height: 388px;
border: 4px solid #f3a12b;
overflow: hidden;
position: relative;
border-bottom: 0;
}
.above-content {
position: absolute;
z-index: 1;
left: 0;
right: 0;
background-color: #73214a;
opacity: 0.9;
filter: alpha(opacity=90);
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
<div class="hp-single-service order-number-1">
<a href="#">
<div class="above-content order-number-1">
<div class="above-content-inner">
<span class="service-title">Service title</span>
<span class="service-category">Service category</span>
</div>
</div>
<img width="954" height="568" src="image-source.jpg" class="attachment-original" alt="Image1">
</a>
</div>
Don't forget that .hover() takes two callback functions as parameters - the first one is the mouseover and the second one is the mouseout.

Am I able to dynamically change the captions on a jssor slider?

I'm working on a site where I have data being pulled in from an external source via js. I want to take this data and plug it into each of the captions and img sources in the slider. I'm using a simple slider with caption that I pulled from the "slider-with-caption.source.html" file provided in the Jssor.
The data coming down are all simple strings. I have run the console to a breakpoint and I do indeed recieve the intended data.
This is where my issue comes in. I have set the content of each of the three slides with a unique id (SEE BELOW). Yet, when I gather my data and subsequently try to insert it into the tag, nothing happens. I've used $(id).text(data string); as well as .html(data string);
I'll include the code below, please tell me if there's anything in the jssor code that could prevent such an action.
Thanks
EDIT: Noticed that jssor seems to make a copy of all the tags and overlays them, so I tried $("#annone).each($(this).text(title); to no avail.
Page HTML:
<div id="announcements">
<div id="slider1_container" class="announcements">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 725px; height: 345px; overflow: hidden;">
<!-- Slide -->
<div>
<img id="annimgone" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide1.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px;">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px;
color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="annone">The Change Network</a>
</div>
</div>
</div>
<!-- Slide -->
<div>
<img id="annimgtwo" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide2.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px;
color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="anntwo">Express Learning</a>
</div>
</div>
</div>
<!-- Slide -->
<div>
<img id="annimgthree" u="image" src="https://team.gsk.com/sites/chna-aar/SiteAssets/slide3.jpg" />
<div u="caption" t="MCLIP|B" style="position: absolute; top: 295px; left: 0px; width: 725px; height: 50px; ">
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);">
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 725px; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">
<a class="white" style="color:white;" href="#" id="annthree">Opport-Tuesdays</a>
</div>
</div>
</div>
</div>
<a style="display: none" href="http://www.jssor.com">javascript carousel</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
var siteURL = '/sites/chna-aar/'
var clientContext = new SP.ClientContext(siteURL);
var site = clientContext.get_web();
var list = site.get_lists().getByTitle('Announcements');
var query = '<Query><Where><IsNotNull><FieldRef Name="Title" /></IsNotNull></Where><OrderBy><FieldRef Name="Created" Ascending="False" /></OrderBy></Query>'
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query);
var items = list.getItems(camlQuery);
clientContext.load(items);
clientContext.executeQueryAsync(function () {
var enumerator = items.getEnumerator();
while (enumerator.moveNext()) {
var item = enumerator.get_current();
var title = '';
title = item.get_item('Title');
$("#annone").text(title);
//Alternative - $("#annone").html(title);
}
}, function () { });
});
</script>
</div>

It looks correct, not sure what's the problem.
But it would be better if you initialize jssor slider after you altered all captions.
clientContext.executeQueryAsync(function () {
var enumerator = items.getEnumerator();
while (enumerator.moveNext()) {
var item = enumerator.get_current();
var title = '';
title = item.get_item('Title');
$("#annone").text(title);
//Alternative - $("#annone").html(title);
}
//initialize jssor slider when you get all content ready
var jssor_slider1 = new $JssorSlider$(...;
}, function () { });

Need Help in getting XPath expression for span inside an Iframe popup

Need to get an xpath expression for the span inside the iframe.
Need Help in getting XPath expression for span inside an Iframe popup.
i can get the iframe but getting /html/body inside iframe is not happening any help would be appreciated
<div class="gwt-PopupPanelGlass" style="position: absolute; left: 0px; top: 0px; visibility: visible; display: block; width: 1680px; height: 222px;"></div>
<div class="gwt-PopupPanel" style="left: 439px; top: 0px; visibility: visible; position: absolute; overflow: visible;">
<div class="popupContent">
<div class="ph-PopupDialog" style="position: relative; width: 800px; height: 220px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 32px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: 32px; right: 0px; bottom: 0px;">
<div class="ph-PopupDialog-content" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex;"> </div>
<div style="position: absolute; overflow: hidden; left: 5px; top: 5px; right: 5px; bottom: 5px;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div>
<iframe class="gwt-Frame ph-PaymentFrame" name="paymentFrame" src="javascript:''">
<html>
<head>
<body onload="pageLoaded();">
<div class="ph-View">
<div class="container_24 form-grid">
<div class="container_24 form-grid">
<div class="container_24 form-grid">
<div class="container_24 form-grid">
<div class="container_24 form-grid">
<div class="grid_12">
<div class="ph-ButtonPanel ph-ButtonPanel-undecorated">
<a class="ph-Button ph-Button-button" onclick="submit();return false;" style="float: right; margin-left: 5px;" href="#">
<a class="ph-Button ph-Button-button" onclick="cancel();return false;" style="float: right; margin-left: 5px;" href="#">
<span>Cancel</span>
</a>
</div>
</div>
</div>
</div>
</body>
`

Elements in iframe are in fact in another page. so you should first find address of that page which is value of src value of iframe and load it and then access the element in that page.

You need to set the scope of the xpath to the iframe's contentDocument property:
var iframe = document.getElementsByTagName("iframe")[0];
var theFirstSpan = document.evaluate('//span', iframe.contentDocument,
null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue

Use:
//iframe//span
This selects every span element that is a descendent of any iframe element in the XML document.

//span [ancestor::iframe]
This will select all span elements which at some point have an ancestor iframe element.

We can't access elements within an iframe directly. We need to switch to iframe first.
I am using PHP Facebook webdriver and this is perfectly working for me:
$driver->get("http://www.example.com"); // containing an iframe
$iFrame = $driver->findElement(
WebDriverBy::xpath('//iframe[#name="iFrameName"]') //name or id or whatever by which we can access.
);
$driver->switchTo()->frame($iFrame);
Now, we can access that span as:
$spanButton = $driver->findElement(
WebDriverBy::xpath('//span')
);