I'm using fancybox to create a fullscreen gallery on my site. It's a rather long site and when the fancybox is initiated, you can still scroll, which I imagine could be quite confusing to the user. Is there a way I could disable scrolling while the fancy box layer was initiated?
Thanks.
I also had the same problem with fancybox. After some googling i found the answer.
$.fancybox({
maxHeight : '200',
width : '38%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
scrolling : 'no',
autoDimensions : 'true',
closeEffect : 'none'
});
in your jQuery set
Hope this help you.
UIScrollView *scrollView = // get your scroll view
scrollView.scrollingEnabled = NO;
// initialize your fancybox
scrollView.scrollingEnabled = YES;
Related
I'm using iScroll 5 and i defined custom scrollbars and set interactiveScrollbars to true. so it's work like a charm but i want force it to hide scrollbars when it has not focus and show them any time mouse or touch move on.
You can set the fadeScrollbars option to true.
This will make the scrollbar and indicator fade away when they are not used.
var myScroll = new IScroll('#wrapper', {
/* iScroll Options */
scrollbars: true,
interactiveScrollbars: true,
fadeScrollbars: true
});
hideScrollbar: true property is important for firefox browser, to restrict weird scrollbar issues.
var myScroll = new IScroll('#wrapper', {
/* iScroll Options */
scrollbars: true,
interactiveScrollbars: true,
hideScrollbar: true, /* this is important for Firefox browser */
fadeScrollbars: true
})
I want the textarea to scroll horizontally once the test string has exceeded the width of the textarea. I tried the below code, but however, it does not work for some reason.
I also tried adding a wrapper view to scroll view and adding the textarea to the wrapper view; but that does not work either.
How can I fix this ?
var scroll = Ti.UI.createScrollView({
top:40,
left:230,
width:290,
height:50
});
win.add(scroll);
var textType = Ti.UI.createTextArea({
backgroundColor:'#E6E6E6',
borderColor:'blue',
borderRadius:10,
top:0,
left:0,
width:290,
height:50,
font:{fontSize:26, fontFamily:customFont},
editable:false,
enabled:false,
textAlign:'right',
scrollable:true
});
scroll.add(textType);
I know that this sound really simple but, for default the text area is vertical scrollable. and this is the only behavior i know of it. i have tried different properties like:
layout:"horizontal",
horizontalWrap:true,
scrollable:true,
But this has not resolve the issue.
Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js
I'm working on a titanium project. In which I need a customized searchbar like below.
But when I created the searchbar it looks like;
I want to change the image of cancel button. I searched a lot for customizing the searchbar in titanium, but couldn't find any solutions.
I'm creating searchbar in the following way:
var searchLocation = Ti.UI.createSearchBar({
showCancel:true,
height:55,
top:45,
width:'102%',
backgroundImage:"../../Images/bg_search.png",
borderRadius:'5'
});
Then I tried something different.
I created a view, a searchbar without cancel button and a customized button.
Added the searchbar to that view
Added the button to right of that searchbar.
//holder view
var searchHolder = Ti.UI.createView({
height : 55,
width : '100%',
top : 45,
backgroundImage:"../../Images/bg_header#2x.png",
layout : 'horizontal'
});
//search bar
var serLocation = Ti.UI.createSearchBar({
height:55,
top:0,
width:'85%',
backgroundImage:"../../Images/bg_header#2x.png"
});
//Calendar button
var calButton = Ti.UI.createButton({
height : 45,
width : 45,
backgroundImage:"../../Images/nav_calendar.png"
});
searchHolder.add(serLocation);
searchHolder.add(calButton );
It's working perfectly.
But I'm searching for any alternative solutions. Is there any built-in-methods to do this ?
Thanks in advance.
There aren't bult-in-methods for this. Your working solution is the best one.
At the moment I have this:
tinyMCE.init({
// General options
mode : "exact",
elements : "fkField, lkField, ukcField, khField",
theme : "advanced",
plugins : "table",
width : "300",
height: "185",
// Theme options
theme_advanced_buttons1 : "fontsizeselect, bold,italic,underline,bullist, cleanup, |,justifyleft,justifycenter,justifyright",
theme_advanced_buttons2 : "tablecontrols",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false
});
This gives me a editor with the size of 300x185.
Now in this editor, I would like to do so you can only write until the editor is full. (without the scroller)
So you are unable to enter more text, and the scroller should not appear (disable scrolling)
Right now you can at the bottom of inside the editor just make new line and it will add the scroller <- which i do not want to happen
How can i do this? Is this unpossible? I have made research for some time now, but maybe it's just me searching wrong..
Thanks
add in a ccs file the following code
.mceContentBody{
overflow-y:hidden!important;
}
and add the path of css file in content_css attribut of tinymce
content_css : /path/to/css/file.ss
You will need to write an own plugin. Check the editor height on each Keystroke (you may use the built in tinymce event onKeyUp). If the heigth changes remove the last inserted code.
EDIT: Howto get the current editor iframe heigth
var currentfr=document.getElementById(editor.id + '_ifr');
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
I got it to work by adding this to my extra tinyMCE CSS file:
IFRAME {overflow:hidden;}
Previously, the scrollbars were only off in Firefox. This fixes it for Chrome as well. However, it does add a gray bar the side of a scrollbar at the bottom, so I need to enlarge the height of my text editor.
for me it worked by just adding rules to a regular stylesheet, it wasn't needed to add a css file to content_css attribute (example is in scss)
.my-tinymce-container {
width: 200px;
.mce-edit-area {
height: 200px;
overflow-y: hidden;
}
}
A lot simpler and easy solution would be:
tinymce.init({
selector: '#container',
},
init_instance_callback: function (ed) {
tinymce.activeEditor.getBody().style.overflow = 'hidden'
},
});
Explanation:
In Init callback get the body for TinyMCE and change style as required.
In this case to remove scrollbar overflow = 'hidden'.