Somehow I can't manage to get an imageview to be on top of a window. This is my code:
var win = Titanium.UI.createWindow();
var startupView = Titanium.UI.createImageView({
image: 'iphone/Default.png',
opacity:1,
zIndex:20
});
var w = Titanium.UI.createWindow({
title:'Menu',
url:'menu.js',
zIndex: 1,
backgroundImage:'ui/bg.gif'
});
w.open();
win.add(startupView);
win.open();
Basically, I am loading something in the background, and upon finish I am fading out the "startupView". When faded out, I want to have the "w" window to be open underneath it.. What am I missing here?
dont add the startupView...
just open the window... then open the startup view... then fade the startupView out when the window is finished loading
Related
I'm working on the animation using ScrollMagic and TweenMax.
The animation is that there are four cards are there, while the browser is scrolling down, each card flip one by one.
I've tried using each function to run the animation. but the problem was the triggers are in the same position so that the cards are flipping at the same time and also how to stop scrolling down while 4 cards are flipped?
here is my codepen
https://codepen.io/MachoBoy/pen/yGXNpg
// init scrollMagic
var controller = new ScrollMagic.Controller();
$('.card-wrapper').each(function(index){
//build scene
//console.log(this.children[0]);
var flipCard = TweenMax.to(this.children[index], 1, {rotationY: -180});
var scene = new ScrollMagic.Scene({
triggerElement: this.children,
offset: 400,
duration: 300,
triggerHook: 0.9
}).setClassToggle(this.children[index], 'flipped').addIndicators().setPin('.card-wrapper').setTween(flipCard).addTo(controller);
})
i got one issue that im stacked on.
Im running the media uploader window from a colorbox modal window, which i set to 90% width, and inside i have button which trigger the media uploader (opens second window).
but when i trigger it, it everytime opens smaller modal window than the parent colorbox modal.
i think the problem is that my first window is an Iframe and when i trigger another modal, it takes the iframe as main window and by some percentage it makes the second window smaller. this could fix if i know where to set, that the second window should be 100%.
Do you know where can i set the width and height for the window with media uploader? i tried with the "40" value, but it doesnt work. i cant find no documentation for this.
thanks for reply.
screenshot here: screencast link
my code is
var file_frame1;
jQuery('#mxn_button_add_img1').on('click', function(event) {
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame1) {
file_frame1.open();
return;
}
// Create the media frame.
file_frame1 = wp.media.frames.file_frame = wp.media({
title: jQuery(this).data('uploader_title'),
width: 40,
button: {
text: jQuery(this).data('uploader_button_text'),
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
// When an image is selected, run a callback.
file_frame1.on('select', function() {
var selection = file_frame1.state().get('selection');
selection.map(function(attachment) {
attachment = attachment.toJSON();
jQuery('#mxn_input_img1').val(attachment.url);
jQuery('#mxn_post_img1').attr('src', attachment.url);
return false;
});
});
});
I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function.
Any solutions?
$('#img1').click(function(e) {
$('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
boxWidth: 450
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
});
I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.
Hope this help!
within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.
from line 328,
var boundx = $img.width(),
boundy = $img.height(),
$div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
change to
boundx = $img.width();
boundy = $img.height();
var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
position: 'relative',
backgroundColor: options.bgColor
}).insertAfter($origimg).append($img);
I have an image loaded from an url and added to canvas as child. Then I am drag and dropping another image on it which also uses the senocular transform so the image can be transformed on the canvas. I have coded in such way that the transform handles shows up only after it's dropped on canvas. The image shows up correctly. But I am trying to save the result image (that is the main image and the dropped image on top of it), I only end up with the main image that was loaded earlier. The dropped image doesn't show up.
Below is the code for handleDrop() that is fired on dragDrop event and prepares the final image. What am I doing wrong?
var dragInitiator:IUIComponent = dragEvent.dragInitiator;
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
var tool:TransformTool = new TransformTool(new ControlSetStandard());
var items:String = dragEvent.dragSource.dataForFormat("items") as String;
var img:Image = new Image();
img.x=50;
img.y=50;
img.width=55;
img.height=55;
img.source=items.toString();
var bitmap:Bitmap= Bitmap(img.content);
var tool:TransformTool = new TransformTool(new ControlSetStandard());
var component:UIComponent = new UIComponent( );
tool.target = img;
tool.x=myCanvas.x;
tool.y=myCanvas.y;
addElement(component);
myCanvas.addChild(img);
img.z=myCanvas.z+1;
component.addChild(tool);
original=new BitmapData(bmd.width,bmd.height,true,0x000000FF);
original.draw(myCanvas);
Just because you added the image to the canvas doesn't mean it has drawn already. Either listen for the updateComplete event on the image or do a callLater to a function that then draws the bitmap.
I am opening a pop up within a application and problem is that this popup window is not opening correctly when i want to open popup at the end of the application that means popup height decreases and some data truncated in popup window .I am using canvas for pop up.
You can position the popup using Point Object.Set the titlewindow's width and height to fit the contents.
var titleWin:FileUpload=PopUpManager.createPopUp(this, PopupName, true) as FileUpload;
var point:Point=new Point(0, 0);
point=this.parentDocument.parent.localToGlobal(point);
titleWin.x=point.x + 100;
titleWin.y=point.y + 100;
titleWin.width=500;
titleWin.height=400;
Refer this link to read about Point object.
You would use the PopUpManager.centerPopUp() function.