I have a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html
Related
I developed a website with fullpage.js and everything seems to work ok
but on mobile it seems that it gets triggered the slide change event when the bottom or top of next slide hits the center of the viewport.
How can I trigger this action earlier like at 1/3 from bottom or top of the viewport?
$('#fullpage').fullpage({
licenseKey: '*****',
css3: true,
scrollingSpeed: 1100,
scrollBar: false,
scrollOverflow: true,
anchors:['s00','s01','s02','s03','s04','s05'],
animateAnchor: true,
responsiveWidth: 992
});
I've total four 4 sections and a footer.
Section one, two , three are normal sections.
On section four I need normal scrolling as its height is more than window height.
Below code works fine with keyboard scrolling and mouse scrolling.
But On mobile I've issue while scrolling upward.
Please open the link on a touch device too see the issue.
Js fiddle here
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div id="three" class="section">Three</div>
<div id="four" class="section fp-normal-height fp-normal-scroll">
<div style="height:1000px;">Four</div>
</div>
</div>
<footer style="height:300px;">Site footer</footer>
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
hybrid:true,
fitToSection: false,
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(loadedSection.attr("id") == "four") {
$.fn.fullpage.setAutoScrolling(false);
}
if(loadedSection.attr("id") == "three") {
$.fn.fullpage.setAutoScrolling(true);
}
},
});
when we swipe upward from section 4 (as at this point Autoscrolling has been set to false) the swipe takes user directly to first section.
I think The reason Its happening because, when user swipes, the page gets scrolled to the top as normal scrolling has been triggered. If I do console log I can see autoscrolling is being set back to true when it passes section 3 but still page scrolls till top as swipe has triggered the scrolling when auto scrolling was false .
if you open below link on mobile you will see the issue above described. Works fine for keyboard.
Expect issues.
The hybrid option is not documented which means is might not work as expected in all possible scenarios.
I am using Kendo UI treeview to display certain data dynamically. I have no issues with the data loaded. But found one scenario which is as follows
When I click on the expand icon to the left of the node(which has a child node), the expand icon and the collapse icon overlaps with that of the nodes. When the focus moves out of that tabstrip which has the treeview data, then the expand/collapse icon does not overlap and it is to the left of the node. When I hover to the tab strip containing the data , then both the icons overlap with that of the nodes.
Following is the pane and the tab strip declaration
<div id="inner-1" class="configuration k-widget k-header" style="height: 100%; border: 0;background- color:#E1E5E7;"></div>
var leftTabStip=null;
leftTabStip = $("#inner-1").kendoTabStrip().data("kendoTabStrip");
leftTabStip.append({
animation: {
open: {
effects: "fadeIn"
}
},
text: "Sample",
content: '<div id="treeSample" style="overflow:auto;position:relative;border:1px solid #B0B0B0;"> </div><ul class="options"> ',
encoded: false
});
finalPath is the array that contains the tree hierarchy data and I am using these 3 properties id,text and encoded..
var localDataSource = new kendo.data.HierarchicalDataSource({
data:finalPath
});
var groupTree1 = $("#treeSample").kendoTreeView({
dataSource: localDataSource
}).data("kendoTreeView");
Is there any way to ensure that the icons and nodes do not overlap and that even if i hover/ move out of tab strip or click on the icon, the data should be displayed properly like the expand/collapse icon should be to the left of the node and not overlap. Please guide me.
Thanks in advance.
I had the same problem with IE 8 running in compatibility view settings (i.e. IE 7 document mode)
Found this link quite useful:
...The problem is probably hasLayout related in IE 7, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue...
This css I applied to treeview, fixed the same problem in my case:
li
{
zoom: 1;
}
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>
If table contains big multi-line text column, pressing jqgrid view toolbar button creates view window
with big height and without scrollbar. Most of data is outside screen and is not visible.
I tried to add scrollbars and restrict its height using
jQuery.extend(jQuery.jgrid.view, {
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
dataheight: screen.height-230,
height: 0.82* screen.height,
width: 0.96*screen.width,
top:5
});
but those settings are ignored ( they work for edit window only if jQuery.jgrid.edit is used).
How to add scrollbar(s) and retrict view window height if it contains more data than fits to screen ?
I suggest to get the demo from the answer and extend the code a little. In the method beforeShowForm I suggest to include additional line
$(this).children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"' if exist
display: "inline-block",
"max-height": "100px"
});
You can see the results on the demo. The height of the View form will be variable, but the maximal height of every field will be restricted to 100px (see max-height above):
or