how can the iframe be scrolled? In the iframe (on another server) there is already:
if ( 'parentIFrame' in window ) { parentIFrame.scrollTo( 0, 0 ); }
But it didn't work. The function inside of "if" is not called.
You could use window.parentIFrame.scrollTo(0,0)
Related
I'm trying to make a fullpage component in Angular :
I want each sections take a 100% height of my screen, and when I scroll in a section (up or down) it goes to the next / previous section. I declared this function to do that, and it works :
#HostListener('wheel', ['$event'])
onScroll(event: WheelEvent) {
if (event.deltaY < 0) {
this.slidePrev();
} else {
this.slideNext();
}
}
Now, I want to update a little to slide to the previous slide only if the scrollbar is on the top, or slide to the next only if the scrollbar is to the bottom. I Used JQuery to do that, this way :
#HostListener('mousewheel', ['$event'])
onScroll(event: WheelEvent) {
if (this.isSliding) {
event.preventDefault();
return;
}
let $section = $(event.target).closest(".section");
//$section.css("opacity", "0.99");
//setTimeout(() => {
// $section.css("opacity", "1");
//}, 100);
if (event.deltaY < 0) {
if ($section.scrollTop() == 0) this.slidePrev();
} else {
if ($section.scrollTop() == $section.prop("scrollHeight") - $section.height()) this.slideNext();
}
}
It works the first time, but if I slide down to the next slide, when I want to sroll to move my scrollbar, it doesn't move.
I noticed that after the website trigger an update (example : css :hover event that update style) the scrollbar move again. So, if I uncomment my 4 commented lines, it works again because the style is updated.
Can someone tell me why ? And is there a better way to fix that issue ?
EDIT :
in slideNext() and slidePrev() I'm using $().animate("scrollTop", ...) function, and it's the function that breaks my scroll
I have a funny trouble with CKEditor, it's described as below:
In CKEditor, I create a headline, an iframe or insert an image. It creates a "BORDER" around the content of the headline, iframe or image.
Now, I scroll the wheel of mouse up or down out of editor area, the "BORDER" still appears as below:
How I can remove this "BORDER"?
Please help me.
Thank in advance,
Vu
What you are seeing is IE native feature. Images, floated divs etc. get these resize borders.
IIRC any element which has hasLayout property will gain these resize handles.
In IE 8-10 there is possibility to block object resizing with - disableObjectResizing.
Unfortunately IE11 doesn't provide any handles to work around this problem. This is IE11 bug. There is a hack for IE11 which was not included into core code - https://dev.ckeditor.com/ticket/9317#comment:16.
Depending on method used for creating CKEditor, this hack can be for example implemented as follows:
If classic editor and replace method is used -
var editor = CKEDITOR.replace( 'editor1', {});
editor.on( 'pluginsLoaded', function( evt ){
editor.on( 'contentDom', function( e ){
var editable = editor.editable(),
element = editable.$;
if ( element.addEventListener ) {
// IE up to 10.
element.addEventListener( 'mscontrolselect', function( evt ) {
evt.preventDefault();
} );
} else {
// IE11 and higher.
element.attachEvent( 'oncontrolselect', function( evt ) {
evt.returnValue = false;
} );
}
});
});
If classic or inline editors are created automatically -
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor;
editor.on( 'contentDom', function( e ){
var editable = editor.editable(),
element = editable.$;
if ( element.addEventListener ) {
// IE up to 10.
element.addEventListener( 'mscontrolselect', function( evt ) {
evt.preventDefault();
} );
} else {
// IE11 and higher.
element.attachEvent( 'oncontrolselect', function( evt ) {
evt.returnValue = false;
} );
}
});
});
NOTE: Please also have a look at https://dev.ckeditor.com/ticket/9317#comment:26. There are other scenarios where resizing might get broken. It would be good to check if this hack works for all of them.
I'm working with a side navigation bar and I'd like it to be a fixed position on the screen, but I want it to stop being fixed after you scroll so far down. Is there any way to go about this?
Use this function. On scroll this function will trigger. Write the if condition inside function to remove fixed
$( "#target" ).scroll(function() {
if($(element).height() === "500px") {
// remove scroll fixed
$(scroll).css("position","relative") //or use absolute also.
}
});
Assuming that it's already fixed, the only thing you have to do is the following:
if($(window).scrollTop() > 150){
$('#nav').css('position', 'relative');
}
And of course, change #nav to your own selector and 150 to the value you desire.
when i use slick grid frozenColumn function.
i move the bottom Scrollbar to the width as the frozencolumn width.
then move the left Scrollbar down quickly.
the frozenColumn become blank.
does the bug in slick grid. or need i do some setup
slick.grid.js
function appendRowHtml
code block
else if (( options.frozenColumn > -1 ) && ( i <= options.frozenColumn )) {
appendCellHtml(stringArrayL, row, i, colspan, d);
}
lost parameter d
I have page xyz.com that has a div id="abc". So I want to redirect to div abc from another page www.xyz.com/#abc.
can you tell me how to get xyz.com/#abc top position in number? I tried in body
var hash_value = window.location.hash.replace('#', '');// get abc
var top = $(hash_value).offset().top;
is not working . I want to redirect xyz.com/#abc will animate and scroll to #abc .
I have many div like #abc so I need something dynamic js code like
var top = $(this.hash).offset().top;
$('html, body').animate({scrollTop: top}, 500, function() {});
its working when I put
var top=1300;
1300 is the top position of #abc ;I want top position get dynamically for #add #bar
dynamically getting #abc is not possible then is it possible to pass value with
click here
Thanks in advance.
You will need javascript. You can do something as scroll. When you load the page, then after that scroll the page 28px down as
$('#abc').scrollTo(28); // scroll 28px down
You will use this function inside $('body').load(function ()
Put
#abc {padding-top:28px; margin-top:-28px;}
in your css.
Fiddle here: http://jsfiddle.net/MrLister/AGzX7/5/
You can test by showing http://jsfiddle.net/MrLister/AGzX7/5/show (normal view) or http://jsfiddle.net/MrLister/AGzX7/5/show#abc (with abc on top, starting below the menu bar).
(Make sure your window is narrow enough to enable #abc to scroll to the top, otherwise you won't see it!)
I agree with Afzaal
$('body').load(function(){
$('#abc').scrollTo(0, 28) // using plain javascript
})
or
$('body').load(function(){
$('#abc').scrollTop(28) // using jQuery
})