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);
});
Related
My message display out of my DIV HTML
How do I resolve this?
I need to display this message within the div. If I repeat this code, it appears in the same place every time, I just want to display it in its own div and not invade others. My big problem it's the display message. Does anyone know how to resolve this?
<html>
<head>
</head>
<body>
jhadfjadfjasf
ajdfhkhasdjfas
ajdfhjadfa
ajdfhkajsdfh
<div class="sidney">
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="220px" height="220px">
<div id="baselayer">
<input type="button" class="testx" value="SubLevel" onclick="showFrontLayer();" />
<input type="button" value="Job Description" onclick="showFrontLayers();"/>
<div id="bg_mask">
<div id="frontlayer">
<div class="containers">
<input type="button" value="X" onclick="hideFrontLayer();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner é a pessoa que define os itens que compõem o Product Backlog e os prioriza nas Sprint Planning Meetings.
</div>
</div>
</div>
<div id="bg_masks">
<div id="frontlayers">
<input type="button" value="X" onclick="hideFrontLayers();" style="position: absolute;top:5%;right:5%;"/>
O Product Owner.
</div>
</div>
</div>
</div>
<style>
.sidney{
width: 250px;
height: 250px;
background-color: black;
border:20px;
}
</style>
<img src="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png" width="170px" height="150px">
<style>
#testx{
position: absolute;
top: 0px;
left: 0px%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;}
#bg_mask{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer{
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
#bg_masks {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 10px 10px 10px 10px;
padding : 30px;
width: 180px;
height: 100px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style>
<script>
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}
</script>
<script>
function showFrontLayers() {
document.getElementById('bg_masks').style.visibility='visible';
document.getElementById('frontlayers').style.visibility='visible';
}
function hideFrontLayers() {
document.getElementById('bg_masks').style.visibility='hidden';
document.getElementById('frontlayers').style.visibility='hidden';
}
</script>
</body>
</html>
How do I resolve this?
add position: relative; to this class .sidney (you can find it on line 31)
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>
I'm trying to change the #lienImg href when the .product_thumbnails li a is clicked but it doesn't seem to work. Strangely, the .primary_image is updated...
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".product_thumbnails li a").click(function(e) {
var imglink = $(this).attr("href");
return e.preventDefault();
$("#lienImg").prop("href", imglink);
$(".primary_image").attr("src", imglink);
$(".product_thumbnails li").removeClass("active");
$(this).parent().addClass("active"); !1
})
});
</script>
<div class="product_images">
<img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div>
<ul class="product_thumbnails">
<li class=""><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or"></li>
<li class="active"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></li>
<li><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></li>
</ul>
</div>
Why using return in before executing code?Debug in console,You will find the issue . Update code like below,It is working fine.
$(document).ready(function() {
$(".product_thumbnails li a").click(function(e) {
var imglink = $(this).attr("href");
e.preventDefault();
$("#lienImg").prop("href", imglink);
$(".primary_image").attr("src", imglink);
$(".product_thumbnails li").removeClass("active");
$(this).parent().addClass("active"); !1
})
});
As web developer said preventDefault() function not needed to be returned , also you need to point to the img inside your div .
$(document).ready(function() {
$(".product_thumbnails li a").click(function(e) {
e.preventDefault();
var imglink = $(this).attr("href");
$("#lienImg > img").prop("src", imglink);
// Notice you need to point to a image
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product_images">
<img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&h=1000&w=1000" alt="Image of Bol Or" class="primary_image" style="opacity: 1;"><div class="MagicZoomBigImageCont MagicBoxShadow" style="overflow: hidden; z-index: 100; top: -100000px; position: absolute; width: 576px; height: 384px; left: 0px; opacity: 0;"><div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div><div style="overflow: hidden;"><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=1200" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -350px; top: -413px;"></div><div style="color: rgb(255, 0, 0); font-size: 10px; font-weight: bold; font-family: Tahoma; position: absolute; width: 100%; display: none; left: 0px; top: 364px;">Please upgrade to full version of Magic Zoom™</div></div><div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 276px; height: 184px; opacity: 0.5; left: 193px; top: 200px;"></div><div class="MagicZoomHint" style="display: block; overflow: hidden; position: absolute; visibility: visible; z-index: 1; left: 2px; right: auto; top: 2px; bottom: auto; opacity: 0.75; max-width: 572px;">Zoom</div>
<ul class="product_thumbnails">
<li class=""><img src="https://images.bigcartel.com/product_images/187353065/produit_08-294HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or"></li>
<li class="active"><img src="https://images.bigcartel.com/product_images/187353089/produit_08-304HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></li>
<li><img src="https://images.bigcartel.com/product_images/187353110/produit_08-311HR.jpg?auto=format&fit=max&w=300" alt="Image of Bol Or" data-pin-nopin="true"></li>
</ul>
</div>
Remove the return e.preventDefault(); since it breaks your code right after initializing the var imglink.
$(".product_thumbnails li a").click(function(e) {
e.preventDefault();
var imglink = $(this).prop("href");
$("#lienImg").prop("href", imglink);
// ... extra code
});
This line in your code :
$("#lienImg").prop("href", imglink);
already changes the href attribute of lienImg to the clicked product_thumbnails link.
On the other hand the .primary_image is updated due to this line:
$(".primary_image").attr("src", imglink);
Removing it will not make the primary_image's image change to the clicked product_thumbnails image.
I'm trying to create div boxes step by step and animate them for several times when a button is pressed. I created a running sample code, and everything is going well. It goes right to the endhost, then it goes left again to its original place.
I want to simulate TCP, exactly as shown at http://histrory.visualland.net/tcp_fast_recovery.html.
Now I want each step when the button is pressed, and that between the DIVs in the same step, there should be delay when they move so one can distinguish them once they are animated. Can anyone help me with that?
$(document).ready(function() {
$("button").click(function() {
var d = $("#t");
var number = $("#number1").val();
var speed = 2000;
// if(state==true){
d.animate({
left: '+=230px'
}, speed);
d.animate({
left: '+=230px'
}, speed);
d.animate({
top: '+=20px',
backgroundColor: "#f09090",
text: '12'
}, speed / 4, "swing", function() {
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500);
});
});
d.delay(1000).animate({
left: '-=230px'
}, speed);
d.animate({
left: '-=230px'
}, speed);
d.fadeOut();
});
});
<body id="myapp">
<img src="https://via.placeholder.com/50" style="left: 0px; width: 50px; height: 50px;" />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; left: 275px; position: fixed; " />
<img src="https://via.placeholder.com/50" style="width: 50px; height: 50px; right: 0px; position: fixed; left: 548px;" />
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 10px; z-index=-1;"></div>
<div style="border: 1px dashed gray; position: absolute; left: 55px; height: 20px; width: 500px; opacity: 0.5; top: 30px; z-index=-1;"></div>
<p>
Speed (mS): <input value="1000" id="number1" type="number" style="position: relative"></input>
<button style="position: absolute; top: 150px">Apply!</button>
<!-- dynamic area -->
<div id="t" style="position: absolute; text-align: center; vertical-align: middle; width: 20px; height: 20px; left: 60px; top: 10px; background-color: lightgreen">
<font id="span">
1
</font>
</div>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
I need each of the sparkles below to fade in and fade out randomly, not all at once though. 1-2 at a time is ok. Also, I do not want the "Pack" image to fade. I do not want the sparkles to fade in/out due to a function like on hover. I also need them all of them to disappear after 5 seconds. Please help, I have tried everything, can't figure it out.. I'm new to web development and javascript.
Here is a fiddle I found, I would like it to be similar to this, I tried editing the code. I'm very confused right now.
http:// jsfiddle(dot)net/maniator/rcts4/ - Fiddle (I couldn't upload more than 2 links, please take out the space after http:// and replace the "(dot)" with . to view the Fiddle.
http://pastebin.com/DkDjU0qS - HTML
http://pastebin.com/Zr1vjafn - CSS
HTML
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Pack -->
<img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png">
<!-- Sparkles-->
<div id="sparkles">
<img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
</div>
<script>
// Define a random integer function
function random(n) {
return Math.floor(Math.random() * n);
}
// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#sparkles img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
images.eq(current).fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
</script>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
background-color: white;
}
#pack {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#sparkle1 {
position: absolute;
top: -8%;
left: 50%;
height: 140px;
width: 150px;
}
#sparkle2 {
position: absolute;
top: 90%;
left: 57%;
height: 180px;
width: 155px;
}
#sparkle3 {
position: absolute;
top: 94%;
left: 29%;
height: 140px;
width: 115px;
}
#sparkle4 {
position: absolute;
top: 25%;
left: 86%;
height: 150px;
width: 123px;
}
#sparkle5 {
position: absolute;
top: 20%;
right: 83%;
height: 145px;
width: 118px;
}
#sparkle6 {
position: absolute;
top: 79%;
right: 82%;
height: 150px;
width: 120px;
}
#sparkle7 {
position: absolute;
top: 52%;
right: 85%;
height: 150px;
width: 130px;
}
#sparkle8 {
position: absolute;
top: 50%;
left: 85%;
height: 180px;
width: 160px;
}
#sparkles {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
Here is the updated JSFiddle
Hope this helps.