I have an html page that contains a slider inside an iframe.
For example:
<body>
<iframe>
<slider>
<element-to-drag></element-to-drag>
</slider>
</iframe>
</body>
I would like to drag the slider, from left to right.
I am using the following code:
const boundingBoxOfSlider = await (await iframe.$('element-to-drag')).boundingBox()
const boundingBoxOfIframe = await (await page.$('.form-content')).boundingBox()
await page.mouse.move(
(boundingBoxOfSlider.x + boundingBoxOfIframe.x) + boundingBoxOfIframeOfSlider.width / 2,
(boundingBoxOfSlider.y + boundingBoxOfIframe.y) + boundingBoxOfIframeOfSlider.height / 2
)
await page.mouse.down()
// move the element to drag to the right (x+300)
await page.mouse.move(
(boundingBoxOfSlider.x + boundingBoxOfIframe.x) + boundingBoxOfIframeOfSlider.width / 2 + 300,
(boundingBoxOfSlider.y + boundingBoxOfIframe.y) + boundingBoxOfSlider.height / 2
)
await page.mouse.up()
but it seems not working.
Any suggestion?
Related
I have a problem when I am making the website for one gallery.
I made the code for the button that can show and hide multiple images.
I intend to make the button can place several images in randomly.
I write the code that can function for only one image.
Please tell me the code that functions as a button to place multiple images in a random location.
Users can hide images by pressing the button.
And when users press the button again, it places the images in another random location.
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const box = document.getElementById("color");
btn.addEventListener("click", () => {
let randY = Math.floor((Math.random() * height) + 1);
let randX = Math.floor((Math.random() * width) + 1);
box.style.top = randY + "px";
box.style.right = randX + "px";
});
function showhide() {
var x = document.querySelectorAll("#color");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
body {
height: 500px;
}
.random {
position: absolute;
}
<button onclick="showhide()" value="Zeige Features" id="button">click me</button>
<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">
<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">
You're doing the correct thing in showHide() when using querySelectorAll. You are then able to get all images.
You should never have elements with the same ids. They should be unique. So querySelectorAll("#color") works, but it's now how you should do. Do a querySelector on "img.random" instead.
getElementById only returns a single element, not like querySelectorAll. So you need to use querySelectorAll('img.random').
This might be beyond your knowledge, I don't think you should add the images in HTML, but in javascript code.
a) Add all image paths in an array: ['https://image.com/image.png', ...]
b) Add a single img element. <img id="template" class="random">
c) In javascript code, clone that element for each image path in the array. You can use cloneNode for this.
d) Randomize each position for each element, just like you have done now.
e) Add each element to the DOM through appendChild. Have a unique div that you append to. Be sure to clear it every time second time you hit the button.
f) Solve all bugs along the way. :P
The problem
The main issue here is that you're using getElementById to query #color
const box = document.getElementById("color");
Since getElementById only returns one element (but you have two in your DOM) and the style only applies to one element. That's why you're seeing only one element is randomly moving and the other just stay in the same place.
A side note here, id should be unique in a DOM.
You're in fact using the correct API for the job in the showhide function
var x = document.querySelectorAll("#color");
The fix:
To fix this, you need to query all images by their classname (as suggested in the side note, don't use id for the job)
const boxes = document.querySelectorAll(".random");
Now we have a node list, as you do in the showhide function, we need to loop thru it, I'm not using a for loop here, instead, a forEach loop, it's just more terser and a modern addition to the JS
// Since boxes are not array, we need to covert it to array so we can use that handy `.forEach` here:
Array.from(boxes).forEach(box => {
box.style.top = Math.floor((Math.random() * height) + 1) + "px";
box.style.right = Math.floor((Math.random() * width) + 1) + "px";
})
Now, this should fix your issue. See the complete code below.
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");
btn.addEventListener("click", () => {
Array.from(boxes).forEach(box => {
box.style.top = Math.floor((Math.random() * height) + 1) + "px";
box.style.right = Math.floor((Math.random() * width) + 1) + "px";
})
});
function showhide() {
var x = document.querySelectorAll(".random");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.display === "block") {
x[i].style.display = "none";
} else {
x[i].style.display =
"block";
}
}
}
body {
height: 500px;
}
.random {
position: absolute;
}
<button onclick="showhide()" value="Zeige Features" id="button">click me</button>
<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">
<img id="color" style="display: none;" class="random" src="http://lorempixel.com/100/100/">
I'm trying to export the html part as a pdf file using html2canvas and jsPDF libraries. However, this functionality is working fine in IE and the contents that are available in the window scope is available in the exported pdf where the content inside the scroll bar is not available in chrome. The part has multiple rows where each row is iterated using angularjs ng-repeat and each row has customized css part. Each row should be exported with the applied css and the dynamic data that is available in the screen. Posting the codefor your reference,
Chrome Image
IE Image
Script Code:
$scope.exportFunctionViewData = function(){
html2canvas(document.getElementById('functionViewExport') , {
onrendered: function (canvas) {
var content = canvas.toDataURL('image/jpeg');
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 0;
doc.addImage(content, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(content, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save($scope.title + '-FunctionView.pdf');
}
});
};
I'm trying to create a dashboard with resizable charts using the D3.js library.
To do this I'm creating the chart SVG elements within DIVs, and those DIVs are made resizable using the jQuery-ui .resizable class.
The DIV's resized event is monitored by another library (css-element-queries) and fires per-pixel, which should call my drawGraph() function and redraw the graph in proportion to it's parent DIV, but this doesn't happen and I'm not sure why. Am I doing something stupid?
See this fiddle: https://jsfiddle.net/Hoppertron/ymf90p6v/17/
By the way, I know that in production I would want to throttle this redraw event - I'm just trying to get it working first.
Here's the code:
<body>
<div id="div1" class="container resizable draggable">
<svg id="chart1" class="chart"></svg>
<script>
//Watches for div resize event (using ResizeSensor.js) and calls drawGraph() to redraw SVG
var element = document.getElementById('div1');
new ResizeSensor(element, function(element) {
var chartWidth = $("#div1").width(),
chartHeight = $("#div1").height();
drawGraph(chartWidth, chartHeight)
});
</script>
</div>
<script>
//Calls drawGraph() on initial page load
var chartWidth = $("#div1").width(),
chartHeight = $("#div1").height();
$(function() {
drawGraph(chartWidth, chartHeight);
});
</script>
</body>
<script>
function drawGraph(width, height) {
var data = [4, 8, 15, 16, 23, 42];
var barHeight = height / data.length;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", height);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) {
return x(d) - 3;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) {
return d;
});
};
</script>
You need to clear the chart before redrawing it. Add this line at the start of your drawGraph function:
d3.selectAll(".chart > *").remove();
Fiddle here:
https://jsfiddle.net/ymf90p6v/19/
If you don't clear it, the data remains attached to the existing elements and no new elements are created.
This might sound stupid, but i think you need to destroy the original graph first before redrawing it.
When you do a d3.selectAll(element), in the background, d3 is going to check the amount of elements vs the number of data elements. Then when you do enter(), d3 looks if there are data items that don't have a matching element yet and draws those elements when you do .append(). In your case, the data doesn't change, only the size of the graph. So nothing will get redrawn.
I have a map drawn using leaflet. In that map I have drawn several markers at different locations. On clicking the marker I am creating a popup div that shows some message.
I have the code:
markers.on("click", function(d) {
div.html("This is Some info").style(
"left", (d3.event.pageX) + "px").style(
"top", (d3.event.pageY - 80) + "px");
}
So the div appears in the location where I clicked i.e. at the location of the marker.
Now if I drag the map the markers move along with the map but the div remains at the same location.
How can I change the style of div with drag event so that the div also moves along with marker?
I was trying the following code in the drag event method:
if(d.code==clickedcode)
{
console.log((map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px , "
+(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px");
div.style["left"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).x) + "px";
div.style["top"]=(map.latLngToLayerPoint([ d.lat, d.lon ]).y - 80) + "px";
}
But it still shows the same pixel position as previous time.
You could try using the map 'drag' event to calculate the shift and then apply that to your div location. Something along these lines...
var startCoords;
var startLat;
var startLng;
var movedCoords;
var shiftLat;
var shiftLng;
map.on('dragstart', function() {
startCoords = map.getCenter();
startLat = startCoords.lat;
startLng = startCoords.lng;
console.log("STARTED FROM: " + startLat + "," +startLng);
});
map.on('drag', function() {
movedCoords = map.getCenter();
shiftLat = startLat - movedCoords.lat;
shiftLng = startLng - movedCoords.lng;
console.log("Shifted: " + shiftLat + "," + shiftLng);
//apply shift to custom div here...
});
I have some tag clouds placed within a div. For each tag cloud there is a thumbs down icon and I used sliding tag css from http://www.cssflow.com/snippets/sliding-tags
If a tag cloud is greater than 80px, it does not fit inside that div. I used word wrap and also fittext plugin from jquery but I could not manage to make it work. Could you suggest what could be the possible solution for it?
I have created fiddle for it: http://jsfiddle.net/aexqoe8n/1/
In Js side :
resultDiv = document.getElementById('tokenCloudResultDiv');
resultDiv.innerHTML = '';
resultDiv .innerHTML="<ul class='tags blue' style='list-style-type: none;padding:5px;'>";
for (i in json) {
addToken(resultDiv, i, json[i]);
}
resultDiv.innerHTML=resultDiv.innerHTML+"</ul>";
function addToken(target, key, result) {
var str;
var weight;
if(result['tagWeight']>80)
$("#tokenCloudResultDiv").fitText(1.2);
weight= "style='font-size: " + result['tagWeight'] + "px;'";
if(addedAutomatically)
str = "<li><div><a " + weight + " >" + result['tagName'] +"</a><span class='thumbsDownIcon' id ='" + tagId + "' style='display:block;cursor:pointer;' ></span></div></li>";
target.innerHTML += str;
}