I want to implement the reactive form validations in angular 2.When user clicks on submit button the page will scroll up to the required error.
#ViewChild('focuserror') errorElement: ElementRef;
ngAfterViewInit() {
this.renderer.invokeElementMethod(this.errorElement.nativeElement.querySelector('.ng-invalid'), 'focus');
}
Is this the right code?
It's throwing error
typeError: Cannot read property 'focus' of null
you can do this:
formSubmitFunction() {
const firstElementWithError = document.querySelector('.ng-invalid');
if (firstElementWithError) {
firstElementWithError.scrollIntoView({ behavior: 'smooth' });
}
}
you can use any class you have used in form validation.
I used ElementRef instead of document.querySelector because ElementRef is backed by a render-specific element. In the browser, this is usually a DOM element, read more at Angular Docs.
constructor(private el: ElementRef) {}
In your submit or click method, get the first element with a validation error. Be careful that the form will also have .ng-invalid until all inputs are valid.
const firstElementWithError = this.el.nativeElement.querySelector('form .ng-invalid');
If you have any fixed navbar, you need to take its height in account as well.
if (firstElementWithError) {
const labelOffset = 50; // This is your offset based on the height of your navbar, etc...
let scrollTopPosition = controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;
Unlike document.querySelector element, window.scroll allows you to specify the top position when scrolling.
window.scroll({ behavior: 'smooth', top: scrollTopPosition });
}
Related
enter code here I have setup navigation links to smooth scroll to an anchor point on my page.
Unfortunately I always have to click twice on every link for the anchor to move.
I think the smooth scroll javascript I'm using is causing the problem. but I don't know anything about java script and I have just copy/pasted this code from somewhere.
I'd be appreciative if you could help me understand, which part of this code is causing the problem.
//Smooth Scroll for Page Anchor
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I'm attempting to have an element's draggable functionality depend on a click event. I'm using jquery-ui's draggable method (within a vue.js instance).
In my Vue instance I have these two data properties: isVisible and a isDraggable. They assume a truthy or falsy value each time the user clicks a button. On my methods object I have the following:
methods: {
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
}
}
I'm using the destroy method in order to have the targeted element return to its original position (documentation here). However, I am not getting the intended result, as can be seen in the jsfiddle below. The following is one of many (unsuccessful) attemtps to tackle this issue:
ready: function() {
this.$nextTick(function() {
if (this.isDraggable == true) {
$('.box').draggable({
containment: "window"
})
} else if (this.isDraggable == false) {
$('.box').draggable(
"destroy"
)
}
})
}
Jsfiddle here. I wonder what I'm doing wrong here? Any hint appreciated.
The ready function only gets called once, during initialization of the vm element. Whenever you click on the "toggle" button, there's nothing that tells the nextTick method to execute. I'm not at all familiar with the vue api, so there probably will be a way to do what you want using the nextTick method.
Given my lack of knowledge regarding the api, I came up with a solution that seemed the most straightforward for your requirements i.e. updating the toggleBox method to check the isDraggable property and resetting the position of the box according to its value.
If you introduce other elements, you'd need to implement a solution that takes into account all of the default positions and re-apply them when you click the "toggle" button.
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
if (this.isDraggable) {
$('.box').draggable({
containment: "window"
})
} else if (!this.isDraggable) {
$('.box').offset({ top: 8, left: 8});
}
}
Fiddle example
Adding to #Yass's answer above, if instead of hard-coding the offset's top position of the element .box , you wanted to calculate it, here's one way to do it (which is useful in those cases where the browser's window changes size for instance):
toggleBox: function() {
this.IsVisible = !this.IsVisible;
this.isDraggable = !this.isDraggable;
var body = document.body.getBoundingClientRect();
var element = document.querySelector('.box').getBoundingClientRect();
var topPos = body.height - element.height;
if (this.isDraggable) {
$('.box').draggable({
containment: "window"
})
}
else if (!this.isDraggable) {
$('.box').offset({
top: this.topPos,
left: 8});
}
}
I've the this Shadow Element/root in this example http://jsfiddle.net/fyf6thte/8/ working perfectly with JavaScript, interested to have similar one with DART, so I wrote the below code (using the same html and css file), but I could not see the button it looks theshadow.innerHTML = '<button id="d">click</button>'is not working
the full code is:
import 'dart:html';
void main() {
var thehost = document.querySelector('#host1');
document.registerElement(fonixDiv.tag, fonixDiv);
thehost.append(new fonixDiv());
}
class fonixDiv extends HtmlElement {
static final tag = 'fonix-div';
var shadow;
bool disabled;
factory fonixDiv() => new Element.tag(tag);
fonixDiv.created() : super.created() {
shadow = this.createShadowRoot();
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.host.onClick.listen((e){
this.host.dataset.disabled='true'; // set Attribute to the custom element
});
shadow.children.d.onClick.listen((e){
this.text = "you clicked me :(";
// or shadow.children[0].textContent="Shadow DOM content changed";
this.disabled=true;
// alert("All: button, text and host should be change");
});
}
#override
void attached() {
super.attached();
this.disabled=disabled;
}
}
I'm not sure about the accuracy of the balance of the code, I can check it only after I see the button.
any help.
The error is correct: in Dart 'this' is not bound contextually as in JS and instead we have lexical scoping;
in your dart code you are actually changing the text content of the custom element and not of the target of the event (the button in the shadow root). So basically you have a custom element, you set the text content on it but you also have a shadow root created inside of that same DOM node and it shadows everything else you put inside that custom element and that is why you do not see it and continue to see the shadow root's content - this is how shadow root works by design.
To fix it you need to update the text content (and the disabled property) on the button (for example e.target.text = ...).
Hope this helps.
Seems like the .host should be removed from this line
shadow.host.innerHTML = '<button id="d">click</button>';
shadow.innerHTML = '<button id="d">click</button>';
The jsfiddle doesn't have it and it seems weird. I think with .host you add it basically to this and therefore as child not as content.
I think the main issue is: Use innerHtml instead of innerHTML.
There are a few additional minor things you need to fix:
Remove 'host', as Gunter says, you want to set the innerHtml of the shadow.
Instead of shadow.children.d.onClick, do shadow.querySelector('#d').onClick.
Also, do dataset['disabled'] instead of dataset.disabled.
My plan is to have a content DIV, and inside that div I will load content via AJAX. I want the already loaded page to slide to the left, fade in the loading page with the circle.gif, and then fade in the new content and so on for the rest of the pages.
I have this code, but it goes to the top not the left, there is no scrollLeft I think.
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
And there is this one:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
Use animate with left property like this:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).animate({'left' : 'show'});
});
You can also use right, margin-left, margin-right with show as value depending on your needs.
To hide them back with horizontal sliding, use hide value instead.
Make sure that elements are hidden first and have set appropriate CSS values for those properties.
I have something similar to this iScroll example: http://cubiq.org/dropbox/iscroll4/examples/simple/
Except that I'm using jQuery mobile (i.e., the header, footer, and content are set using jQuery Mobile). Everything is running smoothly except for scrollToElement.
Is there any way to get scrollToElement working when using jQuery Mobile and iScroll?
Here's the iScroll script I currently have:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);}, false);
EDIT: Forgot to mention what I'm trying to achieve. In the iScroll example mentioned above, I'm trying to scroll to a specific row. The only problem is that jQuery Mobile prevents scrollToElement from working for some reason.
Also make sure that you're using a timeout
setTimeout(function () {
myScroll.scrollToElement(".elementClass", "0s");
myScroll.refresh();
}, 0);
The workaround I have found is to capture the elements position and then use scrollToPage():
var w = $("#showselectedauthors").offset().top;
// ...
$.storeScroller.scrollToPage(0, w);
Of course for this to work you have to capture the position when the element is visible or the offset will be meaningless. You can do this when the page is built but before the scroller is initialized.
In my case the element is visible and I capture w at that time. I then refresh some content and refresh the scroller. After I do that I want to make sure the element is still visible.
Case anyone needs to scroll to a jQuery Object here's my code .
Make sure you're calling this method inside a setTimeout and your "iscroll" object is defined .
function scrollToElement($element) {
if ($element.size() > 1) {
throw new Error("Cannot be a node!");
};
var offset = $element.offset().top;
var to = -(offset - iscroll.y);
to = (iscroll.maxScrollY > to) ? iscroll.maxScrollY : to;
iscroll.scrollTo(0, to);
}