I had a piece of code that would pro-grammatically scroll a paper-dialog-scrollable. It was working with something like the following.
this.mypaperscrollable.$.scrollable.scrollTop = someValueHere
Now, for un-explained reasons, the $.scrollable is now just a div, there are no properies like scrollTop
I've tried with paper-dialog-scrollable being the immediate child of paper-dialog and i've put in the adjustment in if it's not the immediate child. No luck either way.
I'm using Angular2 with Polymer.
Why is $.scrollable a div instead of an object ?
Related
I have started to learn JavaScript and was going through the tutorial on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash with the guess game and want to incorporate the guess game into a web page to see how I can ran the game in a div container. All works fine up to when the game is over or the game is won and the 'Start new game' button comes up and the document.body.appendchild(resetButton); is executed.
The button is placed at the end of my page after the Footer and not inside the div container. What am I doing wrong and what can I look at to change the code to let it come up at the bottom of the container under the 'Enter the guess' bar as in the example?
In the example everything is under the body tags, but I have created a under the page to run the game in.
I have also tried to run document.body.append(resetButton); and even changed the .body to document.div.appendchild(resetButton); code to see if I can place it at the correct spot. When I change the .body code it gives me an undefined error on append.
I think you can use insertAdjacentElement method, it allows you define the inserting position.
It accepts these values:
'beforebegin': Before the targetElement itself.
'afterbegin': Just inside the targetElement, before its first child.
'beforeend': Just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
Example:
document.body.insertAdjacentElement('afterbegin', element);
In my app I have a deeply nested components structure. I have a component with a very long form which is scrolling vertically. Inside that scrolling block I have components with a 'cog' icon. When you click that icon, a popover should appear next to it (inside the scrolling block).
However, the popover should consider the height of that scrolling block. And depending on the position of the 'cog' icon should appear either to the bottom or to the top of it in order to fit within the scrolling block.
So, to summarise, I somehow need to know the innerHeight of the scrolling block contents and its absolute position (getBoundingClientRect) in order to position my popover properly.
Right now I've done it using the html element id. And then simply find element by id in the popover component constructor:
constructor(#Inject(DOCUMENT) private doc: Document) {
this.scrollingBlock = doc.getElementById('scrollingBlock');
}
And then simply get the properties I need from it. Like the following:
this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();
Although, everything works now, I believe it's not very elegant/Angular-way solution. I'm using Angular 6 for my app. Is there any better way to achieve the same result?
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
Before I start--I know we can do this with JS positioning. I'm trying to see if we can avoid the JS positioning.
You can see a close approximation here-- I've forced/dummied the overlay positioning using a top:nnn value for now (it's off a bit in the jsfiddle).
What I want to do is set the top of that overlay to start in line with the bottom of the selected table row. Again-- we dummied it for now using top with a fixed value, but there should be a CSS way to set it?
I did play around with tr.isSelected:after {...} type stuff, that didn't work as expected.
Try using tr.isSelected>td:first-child, and among the properties include position:absolute.
I'm not sure what the point is, though... Class toggling can only be done with JavaScript, so if you're already using JS then where's the harm in using it to calculate the position?
I would just like to have an editable div that acts like a textarea that is given focus on page load (i.e. the blinking cursor is visible and typing shows up in the div without having to select the div with the mouse). I've tried calling focus() on the editable div, but that doesn't work.
I'm not sure it's possible to control the cursor, but you can simply focus the element:
function initPage() {
var elEd = document.getElementById('editor');
elEd.contentEditable=true;
elEd.focus();
}
In Chrome, if your element with ID editor has any content then the whole content will be selected. In Firefox you don't see a cursor, but if you type after loading the page it will appear in the element. Simple example here.