The HTML code is generated from 3 textarea fields (HTML,CSS and Script) and put together as a string. Then it's written into iframe.srcdoc. It looks like -
<button>'Get value' </button><button>'Write DIV'</button><button>'Clear DIV'</button><DIV>'dddd'</DIV>
Script is :
let u;
function get_div(){let i=prompt("What value?");retrn i;};
function show_div(now){document.querySelectorAll("DIV")[0].innerHTML=now;};
function clear_div(){document.querySelectorAll("DIV")[0].innerHTML="";};
document.querySelectorAll("BUTTON")[0].setAttribute("onClick","u=get_div()");
document.querySelectorAll("BUTTON")[1].setAttribute("onClick","show_div(u);");
document.querySelectorAll("BUTTON")[2].setAttribute("onClick","clear_div()");
The first function works fine,it takes a value from a prompt window.
The third one also -it clears DIV.
Problem is with the second - it doe's nothing, when I put an alert() into setAttribute - setAttribute("onClick","alert();show_div(u);"); it shows alert but doesn't change the DIV element.
I use eval() function on iframe (content from window.top.textarea.value).
Any suggestions?
I tried to change DIV element by using it's inner HTML property. It is possible to remove its content but not to write it.
It is possible to change ie. button.innerText value but not the innerHTML of the DIV.
Related
I'm using angular in my frontend, in some part of my page I included virtual scrolling:
https://material.angular.io/cdk/scrolling/overview
For those who don't know, it's used to avoid render all the data at once in huge lists, what it does is it include in the frontend only those items that are shown depending on scroll bar.
Now I want to check that all the items are in this virtual table, so, what i need is scroll down until the item locator apears.
I was thinking in something like scroll down about 50 px and check if item is there, if it is, then stop, else continue scrolling.
The problem is I can't find how to scroll using robot framework, I only see:
Scroll Element Into View ${locator}
But it's not useful for me because my item is not "hidden" it doesnt exist.
is it a way to do something like:
Scroll down my item 50px ${locator}
And
Scroll my item to top ${locator}
And what about if element does not have an id?
I made this kEYWORD but is a little intrusive with DOM
Scroll to xpath
[Arguments] ${xpath}
${tmp}= SeleniumLibrary.get element attribute ${xpath} id
assign id to element ${xpath} scrollID
execute javascript document.getElementById('scrollID').scrollIntoView();
run keyword if '${tmp}' != '${EMPTY}' assign id to element ${xpath} ${tmp}
Any suggestions will be appreciated
you can use the below keyword
Source: AppiumLibrary [Documentation]
Arguments: [start_locator, end_locator]
Scrolls from one element to another, Key attributes for arbitrary elements are id and name.
Syntax:
Scroll start_locator end_locator
in order to use the scroll keyword you would need to have the Appium library
Note: both the elements should be visible for the scroll action, the swipe action will be performed with the start element to the end element.
Documentation: https://serhatbolsu.github.io/robotframework-appiumlibrary/AppiumLibrary.html#Scroll
I'm getting in console top, left , right, bottom properties of div element:
var offSet = document.getElementById("div").getBoundingClientRect();
Why do I get top 84 px instead of 8px?
Here's an example : https://codepen.io/Y-Taras/pen/zPjrWJ
P.S. to see in the console 4 properties click anywhere at the page
In the CodePen, the script in the body is executed before the onload event is fired. So the info you get from the div (in the global offSet variable) is from the position it's in before the draggable function has changed the span to position absolute.
(You can see this by, for instance, adding alert() in the code just before assigning offSet. Then program execution pauses when the div is still below the span.)
Solution: fetch the offSet information inside the onmouseup function, or in the onload event.
I am using iTextSharp 5.4.4, and i am trying to construct an ordered list of anchors. I am facing 2 problems:
if i pass the anchor directly to the constructor of the ListItem, it gets treated as a Chunk in the rendered output and loses its anchor features.
workaround: I initialize the ListItem using the empty constructor and then I use ListItem.Add to add the anchor.
2.using the workaround above, I try to adjust the font of the list symbol to make match that of the item using
ListItem.AdjustListSymbolFont();
that does not work -i guess it's because to itext, there's no Chunk in the list item to retrieve the font from. So what i did is the following
var listItem = new iTextSharp.text.ListItem(clickAnchor); // clickAnchor is treated as a Chunk
listItem.Add(clickAnchor); // i add the anchor again
listItem.AdjustListSymbolFont();
listItem.Remove(listItem.Chunks[0]); // after the font is adjusted, i remove the first Chunk
so basically i fed it an element that i know it'll treat as a Chunk so that it has one to retrieve the font from then i add that same element to the ListeItem and adjust the font.
I then remove the first Chunk, which it processed and added from the element in the first line of code. This is a very ugly workaound, but it is the only one that worked.
Are there better ways to do the above?
thanks
If I understand your question correctly, clickAnchor is an object of type Anchor. If you pass this to the ListItem as a parameter, it will be treated as a Phrase and all interactivity will be lost.
To avoid this, you shouldn't create an Anchor. Instead you should use a Chunk and make it interactive using the SetAnchor() method. This way, the anchor is preserved when you use it in a ListItem.
Update: Copy/past from the code snippet from kfc's comment:
var clickAnchor = new Chunk(pub.Title, anchorFont);
clickAnchor.SetLocalGoTo(i.ToString());
var listItem = new iTextSharp.text.ListItem(clickAnchor);
listItem.AdjustListSymbolFont();
I have an HTML document with an iframe in it. Now, if you click a certain button/link in the iframe, I want the parent document to scroll back to the top.
I'm not sure how to make that work. When I put an anchor at the top of the parent document, and have the button do something like window.parent.location = '#anchorname';, then the browser opens the iframe document itself, having the parent one vanish.
First of all, I suggest the usage of JQuery scrollTop (see here) to scroll on top. This is not enough, however, you need to call your function from the page in the iFrame, so, supposing that your function which scrolls your document is called 'foo', you can call your function from the page in the iFrame this way:
window.parent.foo();
Hope this helps.
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}