How do I create a transparent button in Java Script (Smartface) - javascript

I am just trying to make a transparent button in the smartface cloud IDE using java script, and every time I make it transparent it wont read a click. I can increase the opacity all the way to alpha = .1 but when I set it equal to zero it wont work. How can I fix this, or is there another way to do this. I just want the button to take this form...
left : "50%",
top : "50%",
height : "50%",
width : "50%",
(The bottom right hand corner)
This is the code I have for the button (It doesn't work)
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : alert("Pressed"),
});
myTextBtn.alpha = 0;
page1.add(myTextBtn);

alpha shouldn't affect click unless it is 0. The problem is onPressed accepts callback function. But you are calling alert function there and giving its result to onPressed property.
Try this:
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : function() {
alert("Pressed");
}
});
myTextBtn.alpha = 0.5;
page1.add(myTextBtn);

Related

How to set maximum cropbox size in cropperjs?

Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.
I have this jQuery code
var img = $('#image');
$('#image').on('load', function () {
img.cropper({
aspectRatio : 1,
scalable : true,
rotatable : true,
checkOrientation : true,
cropBoxResizable : true,
dragMode : 'move',
minCropBoxWidth : 346,
minCropBoxHeight : 269,
minContainerHeight : 400,
minContainerWidth : 400,
minCanvasWidth : 400,
minCanvasHeight : 400,
viewMode : 1
});
img.cropper("setCropBoxData", { width: "346", height: "269" });
}
It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.
You can add this :
autoCropArea: 1,
Try adding style="max-height:80vh !important" to the parent container for the cropper-container cropper-bg class.

Appcelerator: Elements are not added to views in android

I've been working on a multi platform mobile application. I almost finished it but I always tested on iOS (because of reasons). Now I am able to test on Android to find out that it fails in many ways.
The main problem here is that when I use:
alloy.createSomeElement({
//params
})
$.someView.add(someElemet);
the element is not added to the view. As I mentioned, this only happens on Android and works just fine on iOS.
Here I show you an example and it's result in both platforms.
e.json.forEach(function(address) {
var addressView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : '90%',
layout : 'horizontal',
touchEnabled : true,
Address_id : address.id
});
var icoCont = Ti.UI.createView({
height : 20,
width : '10%'
});
var icon = Ti.UI.createImageView({
height : '20',
width : '20',
image : "/compartidos/persona3.png",
touchEnabled : false
});
var addressText = Ti.UI.createLabel({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
left : 1,
text : address.street + " - " + address.ext_number,
font : {
fontSize : 12,
fontFamily : "Nunito-Bold",
},
touchEnabled : false,
color: "#000"
});
if (address.alias)
addressText.text = address.alias;
var separator = Ti.UI.createView({
height : 5,
width : '100%',
top : 5,
bottom : 5,
backgroundColor : '#8C000000',
touchEnabled : false
});
addressView.add(icoCont, addressText);
icoCont.add(icon);
$.container.add(addressView, separator);
});
Result on iOS: result on iOS
And this on Android: result on Android
I really hope you can help me with this.
note: Nueva dirección and Dirección actual are not generated this way, those exist in the xml file.
I solved my issue after a long cycle of try & error. I'm posting my solution only in case somebody faces the same problem.
Seems that in Android I can't add multiple elements in a single instruction like this
addressView.add(icoCont, addressText);
The only thing I had to do is separate it in 2 (One for each element) like so
addressView.add(icoCont);
addressView.add(addressText);
You can add many views in single add statement, but you need to pass them as array like : addressView.add( [icoCont, addressText] );

Swipe gesture not swiping container off

I am trying to swipe a container and it's children elements off the screen. However when I run the following code, the child element I swipe goes off the screen as opposed to both elements.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});
var viewContainer = Titanium.UI.createImageView({
backgroundColor : 'white',
width : '100%',
height : '100%',
top : 0
});
var view = Titanium.UI.createImageView({
backgroundColor : 'green',
width : '100%',
height : '100%',
top : 0
});
var view1 = Titanium.UI.createView({
backgroundColor : 'red',
width : '100%',
height : 100,
bottom : 0
});
viewContainer.addEventListener('swipe', function(e) {
if (e.direction == "right") {
//TODO: add functionality here
} else if (e.direction == "left") {
var anim = Ti.UI.createAnimation({
left : -300,
duration : 200,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
});
anim.addEventListener('start', function(_startanicallback) {
});
anim.addEventListener('complete', function(_anicallback) {
});
e.source.animate(anim);
}
});
viewContainer.add(view);
viewContainer.add(view1);
win1.add(viewContainer);
win1.open();
I have a :
ViewContainer - where the event listener is attached too.
Inside that , view and view1 both child elements.
Not sure why this is happening.
Cheers.
The reason for only one of the elements being swiped is this line :
e.source.animate(anim);
If you will replace it with viewContainer.animate(anim); the swipe will work as you want.
Hope it helps.

How can i slide a div content in a particular angle using jquery

i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code
Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().
you forgot position:absolute on the #container css
$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.
I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px

Position fixed; left works fine, right doesn't

I have a span called $mySpan.
Calling
$mySpan.css({
position : 'fixed',
left : '50%',
top : '15%',
backgroundColor : 'red',
'z-index' : 1000
});
works just fine. However,
$mySpan.css({
position : 'fixed',
right : '50%',
top : '15%',
backgroundColor : 'red',
'z-index' : 1000
});
doesn't show the span.
As you can see, it's probably not a z-index problem. I'm really confused because my code is quite complex and I haven't been able to build a simple example using jsFiddle. I have no clue where to start looking for what is going wrong.
Does anyone have a hint as to why the second approach is not working? How could I debug such a problem?
Try this:
$mySpan.css({
'position' : 'fixed',
'left' : 'auto', /* <-- oftentimes, browsers screw up if 'left' is still set */
'right' : '50%',
'top' : '15%',
'backgroundColor' : 'red',
'z-index' : 1000
});
The unexpected result can be caused by a margin-right CSS property. If this property is set, remove it to fix your code.
On the second example you may have missed the $ at $mySpan?

Categories