I'm trying to smoothly toggle the border-width of a span between 0 and 5.
This is the code I have tried, developing in firefox
function anim()
{
this.sw=!this.sw;
if(this.sw)
{
//lower
$('.cell_action').animate(
{
'border-width':'0px',
'margin':0
},
600
);
}
else
{
//raise
$('.cell_action').animate(
{
'border-width':'5px',
'margin':-5
},
600
);
}
}
When I try to go to 5px, it seems to work, but when I run the function again to animate back to 0, the border is set immediately to 0 and only the margin animates.
Seems to be a bug...
I'm having the same problem, but noticed the following:
FireFox (3): No animation back to 0
Chrome: No animation back to 0
Safari(winXP): No animation back to 0
Opera (10): No problems. Animates nicely
IE (8): No problems. Animates nicely
Going to investigate further...
-- EDIT --
Found the answer on bugs.jquey.com: ticket 7085
The borderWidth property is a shorthand property and returns a string that is a series of numbers separated by spaces. The .animate() method is only documented to animate properties that are numeric, such as borderLeftWidth.
I fixed my problem by animating to 0px like this:
$this.animate({
borderLeftWidth: "0px",
borderTopWidth: "0px",
borderRightWidth: "0px",
borderBottomWidth: "0px"
}, 200);
Related
I've been looking everywhere online but cannot find a working solution. When the application is used on a Desktop computer or laptop, it works fine. Mouse clicks are working, it's when we try with a device with a touch screen like surface pro, that's when problems appear.
I have tried adding to the cpp file that calls the QQuickwidget the flag responsible for detecting touch events and it works with some buttons but other widgets or items are not responding.
AppName *AppName::createInstance(QWidget *parent)
{
instanceUsageCounter++;
if (instance == nullptr)
{
ui = new Ui::AppName();
instance = new AppName();
ui->setupUi(parent);
ui->dc_stackWidget->setCurrentIndex(0);
ui->widget_qml->setAttribute(Qt::WA_AcceptTouchEvents);
QCoreApplication::setAttribute(Qt::AA_SynthesizeMouseForUnhandledTouchEvents);
}
return instance;
}
Comboboxes for example.
What exactly needs to be added to make the app detect both mouse clicks and touch events and wokr properly? What exactly is missing?
This is a part in my QML code that worked when I added a TapHandler:
RoundButton
{
id: playButton
icon.source: "qrc:/Resourese/Images/Utility/play.png"
icon.color: "white"
icon.height: playButton.height*0.5
icon.width: playButton.width*0.5
width: settingsButton.width
height: width
radius: width/2
x: width + settingsButton.x + parent.width*0.015
y: settingsButton.y
// x: settingsButton.x
// y: height + settingsButton.y + parent.height*0.015
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: playButtonClicked();
}
onClicked:
{
playButtonClicked();
}
background: Rectangle
{
//border.color: "#14191D"
color: playButton.hovered || playButton.pressed ? "#3a5470":"#5f758d"
width: playButton.width
height: width
radius: width/2
}
}
Here you will see that there is an onClick and above it is the* TapHandler* that was added recently to add the ability for the boutton to be triggerd when touched on a touch screen. This only worked when the flag in the cpp file was added.
Now look at this:
Rectangle
{
id: settingsCell_R7_C3
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 3
Layout.rowSpan: 1
Layout.row: 6
Layout.column: 0
color: "transparent"
Button
{
text: "Save settings"
font.pixelSize: 30
width: parent.width*0.8
height: parent.height*0.7
anchors.centerIn: settingsCell_R7_C3
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: applySettings()
}
onClicked: applySettings()
}
}
This Rectangle is within a gridlayout that is inside a Pop up when a Round button similar to the above gets clicked it triggers the pop up window that contains the Rectangle above. The button in this Rectangle when touched is within focus, but not triggered.
I want to disable sticky toolbar which appears on top of page when page is scrolled. How it can be done ?
I resolve this problem by CSS
.ck.ck-editor__top.ck-reset_all {
z-index: var(--ck-z-modal);
position: sticky;
top: 0;
}
.ck.ck-sticky-panel__placeholder {
display : none !important;
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: unset;
}
The fact that the toolbar appears in the wrong place when the editor is in an overflowed container is a bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) allow controlling the toolbar. This editor type doesn't do anything with the toolbar itself – it just creates it and it's up to you where you're gonna insert it.
Another option would be implementing your own custom editor, but that'd be necessary only if you wanted to make even more customizations
I'm having same issue with the classic-editor, the position of the .sticky_panel is changing on the event of focus in the .editor_editable.
at some point when it's not visible within the display and click inside it goes all up to first element .
CSS only:
ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
position: absolute !important;
}
In my editor build, I did a hack like this:
const stickyUpdateInterval = setInterval(() => {
editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
clearInterval(stickyUpdateInterval);
});
This is just a crude hack that will update sticky balloon all the time.
If you know exactly in which overflow container your editor will be mounted, you can do something more clever, like listen to scroll events and update only then (this is what CKEditor is doing for the window, BTW, that's why it's not working when you put it in a container).
I have spent some time trying to get the CKEditor Classic component "sticky toolbar" to work nicely in Angular with a scrolling pane and there are 2 issues I had to overcome.
The position of the toolbar when sticky this defaults to the top
of the browser page (view port) - so (in Angular) you need to
configure this setting in the HTML template :
[config]="{ui:{viewportOffset:{ top: 58, right: 0, bottom: 0, left:
0}}}"
Making the editor respond to scrolling. This was a more difficult
one to resolve for me. The solution I have is (thanks to panta82
above) is to catch the scroll events and call a function in the
editor to check if the toolbar should be sticky or not .. it's
called checkIfShouldBeSticky :)
Here is a working sample in StackBlitz
I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
I am getting an error saying "textAlignVertical" is not a valid style property when attempting to use the 'textAlignVertical' style on a Text element. I've checked the documentation and it says I should be able to use this style property: https://facebook.github.io/react-native/docs/text.html
has anyone else had this issue?
The textAlignVertical style is an Android-only property. If you are developing on iOS, try using the flexbox alignment property alignItems: center instead.
It also appears that the textAlignVertical property was moved from TextInput properties to the Text element styles only three days ago, and is going to be released in React Native 0.19.
I am not sure how the React Native documentation is generated, but based on my reading of this commit diff, the documentation appears to be ahead of the latest released version.
Sometimes you might find that alignItems won't work well -- I saw that an icon that I was using disappeared entirely. I instead just added an alignSelf: 'center' to the styling on the text itself (rather than the parent like you need to do with alignItems) and it seemed to fix it.
For textAlignVertical to work properly, add lineHeight prop instead of height for ios
height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios
The line height solution worked for me. I am writing this post to explicitly show how to set the line height by platform:
yourComponent: {
width: 44, height: 44,
...Platform.select({
ios: {
lineHeight: 44
},
android: {}
}),
textAlign: 'center', textAlignVertical: 'center',
}
It's important that your and height and line height are the same and that you do it by platform.
It's important to note that I also have this component nested in a view with alignItems set to center.
I just wanted to explicitly write this code out as I had to piece it together from a few posts and this should make it easier if someone is looking for a quick copy/paste solution.
I have studied the following 2 questions, both asking exactly what I am asking:
https://developer.appcelerator.com/question/117432/keep-searchbar-at-the-top-of-the-tableview-when-scrolling
https://developer.appcelerator.com/question/10611/adding-table-view-beneath-searchbar
The problem is, there is no confirmed and correct answer given on either question. Solutions are suggested and follow-up comments always say "that didn't work". The one exception, where a comment says "that works perfectly", seems to be referring to an answer that doesn't use a search bar at all, and seems pointless.
So I'm just looking for a good approach to keeping the search bar visible even when scrolling down through the table rows. I have hundreds of rows in my table. The table loads fast, the rows scroll fine, and the search works perfectly. The only problem (same as in the other 2 posts) is that the moment you start scrolling down in the table, the search bar scrolls up out of site. I'm amazed that the default behavior is for the searchbar to disappear as soon as you scroll. It's hard to imagine anyone wanting that behavior ever.
Here is my code:
var searchbar = Ti.UI.createSearchBar({
showCancel: true,
top: 5
});
var movies = Ti.UI.createTableView({
data: movieData,
top: 30,
height: '75%',
search: searchbar,
hideSearchOnSelection: false
});
I've coded like this:
var searchBar = Ti.UI.createSearchBar({
showCancel : false,
borderRadius : 10,
borderColor : "#000",
hintText : 'Search..',
height : 45,
barColor : "#fff"
});
View.add(searchBar);
var tableView = Ti.UI.createTableView({
top : searchBar.top + searchBar.height + 30,
search : searchBar,
filterCaseInsensitive : true,
filterAttribute : 'nametoshow',
backgroundColor : 'transparent',
separatorStyle : Ti.UI.iPhone.TableViewSeparatorStyle.SINGLE_LINE,
separatorColor : 'transparent'
});
View.add(tableView);
Even if this doesnt help you try adding zindex to searchbar. Greater zindex components will make it lay on top lesser zindex components.
Problem
I use the flexslider carousel to a number of images to show. What I want now is, when the browser has a certain width drop a break, which for example is incidental to 768px 2 images are shown. Currently you see an image at a certain width but half and wants to these points with javascript / jquery to give many pictures there must fully show.
So my question is, how I can make an if statement for when the browser width is for example 768px width, is must show two images...
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 320,
itemMargin: 0,
minItems: 2,
maxItems: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
Check code on JSFiddle
You can use an if statement for widths like this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
... and to contain that, you might like to combine your document ready function with a window resize function.
$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
// Pace the if/else here, do whatever
}
In terms of showing two images it think you should be able to be achieve that by setting slide widths and offsets in the flexslider function - or with css. here are the options i'm talking about:
itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2
Here's an edited version of your JS fiddle demo! http://jsfiddle.net/tM2a8/