When using scrollify and setting the footer as an interstitialSection with a class if the footer is taller than the viewport height it scrolls to the bottom of the footer not the top so you don't see where the footer begins? I would like it to snap to the top of the footer so then you can continue scrolling down to see whats in the footer?
$(document).ready(function(){
$(function() {
$.scrollify({
section: ".section",
sectionName : "section-name",
interstitialSection : ".footer-end",
scrollSpeed: 1500
});
});
});
The solution here is to not set your footer as an interstitialSection. It should be a regular section.
Related
I'm using zoomcharts geomap in a div in my page. While I place the cursor over the map and scroll, then the map will zoom. I want to disable the zoom functionality and I want to scroll the page if I scroll while cursor is over the map.
I tried to disabled the zoom using the zoomcharts documentation below.
Interaction: {
zooming: {
enabled: false
}
}
This helps to disable the zoom only but I want the page to scroll. any idea on how to do the same?
You can do it like this:
chart = new GeoChart(options);
setTimeout(function(){
chart._impl._map.scrollWheelZoom.disable();
}, 100);
I am using Datatable ver 1.10, I enable the vertical scrolling. now datatable showing window default scroll style.
Is it possible to change/implement some other scrollBar on datatable scrollbar? to make it more beautiful and fancy.
I tried this solution at stackoverflow but it squeez the header.
also I want header and footer fixed position.
here is my working code
// when initialization is completed then apply scroll plugin
"fnInitComplete":function(){
$('.dataTables_scrollBody').perfectScrollbar();
},
//apply scroll on this height
"scrollY": 450,
//on paginition page 2,3.. often scroll shown, so reset it and assign it again
"fnDrawCallback": function( oSettings ) {
$('.dataTables_scrollBody').perfectScrollbar('destroy').perfectScrollbar();
},
How to make the editor toolbar located just above? I use inline editing, and the toolbar is transferred down if to scroll a site before the end of the page.
Using sharedspace can help you.
You can find a similar issue, and the solution, here:
How to make the inline ckeditor toolbar fixed at the top and not float
The implementation of the plugin would look like this:
<div id="toolbarLocation></div>
<div id="editor" contenteditable="true"></div>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor', {
sharedSpaces: {
top: 'toolbarLocation'
}
} );
</script>
I have a div with images scrolling throw responsive slides and next to this div I have navigation buttons to change pages.
I need that buttons to be centered vertically with the images and I have a function to do it:
function CenterArrow()
{
var posV=($("#slider1").height() - $("#navegacao").height())/2;
$("#navegacao").addClass(" visible-lg visible-md");
$("#navegacao").css('top',posV+'px');
}
$(function()
{
$("#slider1").responsiveSlides({
maxwidth: 400,
speed: 800,
timeout: 4000,
after: function(){
CenterArrow();
}
});
$("#slider1").show();
});
In the responsive slides there is an adjust of some image's height, so I need to call CenterArrow after resposive slides.
I tried to put it in the after callback, as you can see in the code above, but in the first slide the navigation buttons don't show.
I've also tried in the before callbakc, and although it shows a few seconds earlier it still doesn't show in the first slide.
Is there a ready callback, or something similar?
Thanks
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );